基于Ajax模式的Blog Browser

只所以说成是Ajax,其实是我写成的代码,一不小心发现这就使传说中的Ajax模式。原来什么先进的东西,原来是这么平民化。

先说一下应用吧,背景是这样的:我有很多xml文件,作为单个xml文件,可以通过xml+xsl的形式进行浏览。例如,可以在浏览器中输入”http://marvel.hit.edu.cn:8080/weblogs/2004_8_23.xml”l来查看2004年8月23号的blog。问题是缺少我不知道我在哪些日子大发感慨,何况在浏览器中直接输入地址是一件很麻烦的事情。

于是,我需要做的事情是:

  1. 了解我写了哪些日记
  2. 获取这些日记

显然,第一件事情需要在服务器端完成,第二件事情是客户端浏览器完成的。

于是我先写了一个C程序,获得所有日志的信息,整合到一个xml文件中。(xml格式有利于客户端解析),代码在此 。执行之后生成的文件为list.xml

之后,我在浏览器中就需要获得list.xml的信息,并且需要解析该文件。普通的方法不行,我需要使用XMLHttp请求(在Firefox中称之为XMLHttpRequest,而在ie中,这是一个ActiveX控件,叫做Microsoft.XMLHTTP)。

下载函数主要代码如下,详见源文件:

[coolcode lang=”javascript”]
function loadXMLDoc(url)
{
// code for Mozilla, etc.
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

if (xmlhttp)
{
xmlhttp.onreadystatechange=xmlhttpChange;
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);
}
}
function xmlhttpChange()
{
if (xmlhttp.readyState!=4)
return;
// if “OK”
if (xmlhttp.status==200 || xmlhttp.status==0)
{
//Code Goes here…
}
else
{
document.getElementById(“content”).innerHTML = “Problem retrieving XML data”;
}
}
[/coolcode]

  1. xmlhttp.readyState是指xmlhttp请求的状态,0为未初始化,1为正在装载,2为装载完毕,3为交互中,4为完成。当状态发生变化的时候,浏览器会回调xmlhttp.onreadystatechange函数,即xmlhttpChange。(请使用回调函数这种形式,不要使用while的无穷循环来判断是否完成,这种方式会大量消耗处理器资源,并且不能显示页面)
    xmlhttp.status是指返回的状态,Web正常返回为200 ,本地调试正常返回为0。
  2. 处理代码略去,如果想了解更多,可以参考http://marvel.hit.edu.cn:8080/weblogs/view_xml_blog.html。
  3. loadXMLDoc需要被调用两次,第一次获得list.xml,第二次获得某一天的日志文件

返回的xml文件解析

当我们获得了xml文件,自然需要对文件进行解析。 解析日志文件的代码如下(解析list.xml的代码类似,详见文件):

[coolcode lang=”javascript”]
var title=xmlhttp.responseXML.getElementsByTagName(“Title”);
document.getElementById(“content”).innerHTML += (title[0].firstChild.data+”
“);
var posttime=xmlhttp.responseXML.getElementsByTagName(“PostTime”);
var post;
if(posttime[0] == null)
{
var year=xmlhttp.responseXML.getElementsByTagName(“Year”)[0].firstChild.data;
var month=xmlhttp.responseXML.getElementsByTagName(“Month”)[0].firstChild.data;
var day=xmlhttp.responseXML.getElementsByTagName(“Day”)[0].firstChild.data;
post= year+” – “+month+” – “+day;
}
else
{
post = posttime[0].firstChild.data;
}
document.getElementById(“content”).innerHTML += (post+”
“);

var content=xmlhttp.responseXML.getElementsByTagName(“Content”);
document.getElementById(“content”).innerHTML += (content[0].firstChild.data);

[/coolcode]

这次,全部搞定.分析一下

  1. 服务器端使用了C程序生成xml格式的文件,这可以看过Ajax的服务器端程序生成xml格式的结果供浏览器使用
  2. 浏览器客户端使用了xmlhttp的请求,异步获得了服务器端的xml结果,此期间没有刷新,只是出现了“Loading”的提示。解析完毕后即可显示内容。可以看出,Ajax的三大特征“异步交互、JavaScript脚本和XML封装数据的三大特征”完全得到了发挥

结论是:这次遵循了分析问题、解决问题的一般思路,搞定之后居然发现使用的模式就是现在相当热的技术。从而可见,做技术,应该是从实践需要出发,而不是单纯的去追求新的技术、新的框架。即使是最新的技术和框架,它们的出现必定有它们的道理,不需要刻意去学习。相反,实践才是最重要的,从实际中发现问题,解决问题,也许就能找到一种新的方法。如果我这个页面早做几年,也许我就是Ajax的创造者,你说呢?
附:Ajax,异步JavaScript与XML,是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新 加裁,就可以动态地更新。使用Ajax,你可以创建接近本地桌面应用的,直接的、高可用的、更丰富的、更动态的Web用户接口界面。

Leave a Comment

Your email address will not be published. Required fields are marked *