Author: marvelliu

如果palm和手机有一个usb接口，并且有一个mass storage的驱动，那就帅呆了。

这样，我就可以用palm连一个U盘，想放多大的电影就放多大的。如果再加一个带电源的移动硬盘，那绝对是一台小电脑了。

不知道palm和那些手机厂商想到了没有，如果没有想到的话，我就去申请专利去:)

花了一天的功夫，终于搞定了左边那个图片的动态显示．用js调试真的很麻烦,不能看到变量值，不知道什么抛出异常，太郁闷了！

原来想做一个向左移动的效果，现在看看，会相当郁闷，所以改成直接显示了。

只所以说成是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用户接口界面。