Ajax应用案例之MSN Space

80酷酷网    80kuku.com

  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 
 } 
 } 
 }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”一章将有更加详细的阐述。


分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: