Ajax應用案例之MSN Space
編輯：AJAX詳解
我一直很推崇MSN Space的服務，對其相冊服務和皮膚一直情有獨鐘。國內的播客，我首選MSN Space。也可能，MSN Space沒有那麼多炒作。
恩，言歸正傳。幾天來研究一下MSN Space的AJax應用。典型的，其應用主要體現在：網絡日志的評論、固定鏈接、引用記錄、自定義列表上面。了解AJax之前，一直對其數據的獲取方式很好奇。現在，大概略知一二了。如下圖所示。 對於共享空間首頁，“添加評論”、“閱讀評論”、“固定鏈接”、“引用通告”主要用到的Javascript函數為：OpenSection(section, entryid, bNewComment, bTrIEdPassportRefresh, bAreNewCommentsAllowed) ，其通過第一個參數section判斷各種操作類別，然後從服務器獲取數據，在顯示在相應的DIV浮動層中。
其使用AJax獲取數據的關鍵代碼由Javascript函數GetBlogActivity(entryid, item, otherformfields, bTrIEdRefresh) 提供。其代碼如下所示：
function GetBlogActivity(entryid, item, otherformfields, bTrIEdRefresh)
{
var response = "";
var fException = false;
eval (’try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {XMLhttp = null;}’);
if (XMLhttp != null)
{
try{
XMLhttp.Open("POST", BlogJSPostUrl, false);
var strA = "handle="+ entryid;
strA += "&blogitem=" + item;
strA += "&" + BlogJSBlogPartParam;
strA += otherformfIElds;
XMLhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLhttp.Send(strA);
}catch(e){
fException = true;
}
if(fException){
if(bTrIEdRefresh){
//exception after trying passport refresh, stop here to avoid infinite loop
response = "error";
}else{
//build the response - an iframe that will load up and refresh passport credentials
var timer = setTimeout(DisplayContentLoadError(item, entryid), 10000); //fail in 10s if not cleared
var iframeString = "<iframe src=\"/PassportRefresh.ASPx?id=" + entryid + "&function=get&timer=" + timer + "&item=" + item + "&formfields=" + otherformfIElds.replace(/&/g, "%26") + "\" />";
var divID = "ppRefresh" + item + entryid;
if(document.getElementById(divID)){
response = iframeString;
document.getElementById(divID).style.display = "none";
}else{
response = "<div style=\"display:none\" id=\"" + divID + "\">" + iframeString + "</div>";
}
}
}else{
if(XMLhttp.status != 200){
response = "error";
}else{
response = XMLhttp.responseText;
}
}
}
return response;
}
很容易看到，其使用了XMLHttpRequest的同步請求方式。這就是為什麼每次單擊“閱讀評論”的時候頁面都需要停頓一下。 XMLhttp.Open("POST", BlogJSPostUrl, false);中所用到的BlogJSPostUrl定義在共享空間的首頁，其余上述兩個函數定義在BlogJS.JS文件中。
《AJax開發詳解》的“模擬MSN Space”一章將有更加詳細的闡述。