Using $.ajax to Build your SharePoint Portal Home Page

This article is a quick reference for me and my colleagues  :)
1- add a Reference to Jquery
2 – Create handler in your webapp dll with this functions
private const string XML_START_TAG = “<?xml version=\”1.0\” encoding=\”utf-8\” ?>”;

public void ProcessRequest(HttpContext context)
{
if (context.Request[“op”] != null)
{
switch (context.Request[“op”])
{
case “LoadGeneralList”:
if (context.Request[“siteUrl”] != null && context.Request[“listName”] != null && context.Request[“viewName”] != null)
GetListItems(context.Request[“siteUrl”].ToString(), context.Server.UrlDecode(context.Request[“listName”].ToString()), context.Server.UrlDecode(context.Request[“viewName”].ToString()), context);
break;
}
}
}
/// <summary>
/// Get List Items from for displaying on home page
/// </summary>
/// <param name=”siteUrl”>the url of the site which main domain like news</param>
/// <param name=”listName”>list name of items</param>
/// <param name=”viewName”>view name</param>
/// <param name=”context”>current web context</param>
private void GetListItems(string siteUrl, string listName, string viewName, HttpContext context)
{
StringBuilder sbXml = new StringBuilder();
sbXml.Append(XML_START_TAG);
try
{
using (SPSite site = new SPSite(string.Format(“{0}{1}”, SPContext.Current.Web.Url, siteUrl)))
{
using (SPWeb web = site.OpenWeb())
{
DataTable dt =   web.Lists[listName].GetItems(web.Lists[listName].Views[viewName]).GetDataTable();
if (dt != null)
{
// get data table as xml element
XElement xml = new XElement(“Items”,    dt.AsEnumerable().Select(row =>
new XElement(“Item”, dt.Columns.Cast<DataColumn>().Select(col
new XAttribute(col.ColumnName, row[col])
))));
sbXml.Append(xml.ToString());
}
else
sbXml.Append(“<Empty></Empty>”);
}
}
}
catch (Exception ex)
{
sbXml.AppendFormat(“<Error>{0}</Error>”, ex.ToString());
}
finally
{
context.Response.ClearContent();
context.Response.ContentType = “text/xml”;
context.Response.Write(sbXml.ToString());
context.Response.End();
}
}
3  – Build your dll and put it in the GAC or project bin and put the handler file into your folder in _Layouts Folder
4- add id to the html section to use it in the script to inject the content
5- in your common script file for the project
// start ready event
$(document).ready(function () {
LoadLatestNews();
}

// load Latest new from news site
function LoadLatestNews() {
// word html
var word_html = ”;
var page_url = ‘#’;
$.ajax({
type: “GET”,
contentType: “text/xml”,
url: “/_LAYOUTS/MyProject/Scripts/MyHandler.ashx?op=LoadGeneralList&siteUrl=/news&listName=” + encodeURI(pagesFolderName) + “&viewName=” + encodeURI(LatestNewsViewName),
dataType: ‘xml’,
async: true,
success: function (xml) {
if (xml != null && $(xml).find(‘Items’).length > 0) {
var i = 0;
$(xml).find(‘Item’).each(function () {
word_html += ‘<li class=”cloned”>’;
word_html += $(this).attr(“PublishingRollupImage”);
word_html += ‘<div class=”news_title”>’ + $(this).attr(“Title”) + ‘</div><br >’;
word_html += ‘<a href=”/news/Pages/’ + $(this).attr(“FileLeafRef”) + ‘”>المزيد</a></div>’;
word_html += ‘<a href=”/news/” class=”more”>أرشيف الأخبار</a>’;
}
i++;
});
$(‘ul#latestNews’).html(word_html);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (raiseError)
alert(textStatus + “: (” + XMLHttpRequest.statusText + “)”);
}
});
}
6 – Save your script file add a reference to it
7- Refresh and enjoy it :)