AJAX在www.dictworld.com上的实现

Meteorlet 2005-11-27 09:18:57

之前的贴子很多人在讨论动态从Server端获取数据问题，因为我比较钟爱PHP所以ASP版来的很少，也没来得及跟大家讨论。因为这是ASP版所以我也不多说PHP跟ASP语言相关的问题，只说说原理和效率。

客户端想获取服务器端的数据必须通过HTTP请求，以前都是通过超链接去刷新，但是自从推出了XMLHTTP组件以后，我们可以把HTTP请求放到Javascript里去实现，获取的数据通过Javascript动态显示，这样做的好处就是无刷新，不会看到页面的闪烁，最先应用的地方就是聊天室。后来有人把这种工作原理称为AJAX。

HTTP请求原理：
-> Send Request -> Server Side
XMLHTTP |
<------Response---------|

AJAX实现原理：
新建XMLHTTP -> 填写必要的Header -> 设定异步回调函数用来处理接收到的数据 -> 发送HTTP请求

异步回调函数 OnProcess() -> 判断返回的状态是否是正确的200 status->接收数据，保存到字符串
->分析字符串（如果是XML格式，可以调用XMLDOM进行解析）->把得到的数据填入网页中的元素里

实现代码：
// HTTP request object
var req = null;

// HTTP request url
var url = "www.dictworld.com/dict.php?s=1";

if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req) {

req.onreadystatechange = OnProcess;
req.open("GET", url, true);
req.send();
}

// callback function to handle the response from the server
function OnProcess()
{
if (req.readyState == 4) {
if (req.status == 200) {

// 正确返回
}
}
}

一次HTTP请求需要很多时间，所以说用AJAX是以牺牲效率为代价的，自然速度也不会很快。还有一种
做法就是把数据库里的数据通过Javascript缓存到客户端，类似这样：
var word[1] = "abc";
var word[2] = "abd";
var word[3] = "abe";
...
然后对word数组进行搜索过滤。对于数据量少的情况这样做是可行的，但是对于海量数据库这样的一个
页面，加载处理时间会远远大于用户所能忍受的时间。加载的数据量其实不多的，就拿我的数据库来说，
也就5万条记录，每条记录10个字母的单词，也就只有500K的数据，但是对这5万条记录进行遍历就很慢
了，如果加上排序，一般冒泡排序就是O(n^2)的复杂度。把对这么多数据的处理放到服务器端是值得的。
这就是为什么GOOGLE喜欢AJAX的原因。而且每次请求花费的时间基本上是固定的，而且这些时间是在你
浏览网页的同时不知不觉的异步进行的。

...全文