JavaRSS.com中的Ajax应用

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

【导读】Ajax 是一个架构(architecture)并不是一种技术，本文作者介绍Ajax是如何很好的应用在 www.com" target=_blank>JavaRSS.com 里面的。

像其他人一样，当我看到一下RIA应用，例如Google Maps和Google Suggest的时候我都非常惊讶。我希望知道是如何实现的。现在，谜底揭开了，那就是Ajax。这是在我花了一段时间研究Ajax之后才知晓的。这里有一个很好的例子让我们知道Ajax是如何很好的应用在 com" target=_blank>JavaRSS.com/">www.com" target=_blank>JavaRSS.com 里面的。

什么是Ajax：Ajax 是一个架构(architecture)并不是一种技术。Ajax代表异步的JavaScript和XML。

妙语(Punch Line)： 延迟加载

问题：当com" target=_blank>JavaRSS.com首页加载时，他同时加载了所有条目的介绍(如果你在设置中激活了)。这些介绍只有当你鼠标移动到该条目的上面的时候才显示。

现在的问题是用户不可能是鼠标移过所有的条目，所以预先加载所有的介绍不是个好主意。

解决方案: 使用Ajax，当鼠标移过的时候从服务器动态加载条目的介绍。

这么做可以使初始页的加载大小减小一半甚至更多，这样一来页面加载就更快，就内能得到一个更好的用户体验。

时序图：

Ajax.cnrui.cn/article/UploadPic/2006-6/200661172329278.gif">点击看原图

我们首先会在onmouseover事件中调用JavaScript函数getDescription。下面是html代码:

<a href="/" οnmοuseοver="getDescription(3,1)">Java & J2EE News<a>

下面是 getDescription 函数的代码:

var url = 'http://localhost:8080/getDescription.jsp?channelId=' + channelId + '&itemId=' + itemId;

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

} else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

}

req.onreadystatechange = processRequest;

req.open("GET", url, true);

req.send(null);

XMLHttpRequest 对象将用来进行http连接并取回xml文档。我们需要检测一下是否是IE并且创建 XMLHttpRequest 对象。

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

} else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

}

设置回调函数，并且发送"GET"请求至服务器接收xml文档:

req.onreadystatechange = processRequest;

req.open("GET", url, true);

req.send(null);

JSP将根据适当的条目编号创建具有相应介绍的xml文档。

检测HTTP请求返回状态码，状态为200，即OK。

function processRequest() {

if (req.readyState == 4) {

if (req.status == 200) {

parseMessages();

} else {

alert ( "Not able to retrieve description" );

}

}

}

readyState = 4 的情况下文档被加载。

readyState Status Codes:

0 = uninitialized

1 = loading

2 = loaded

3 = interactive

4 = complete

最后，我们解析XML文档并显示介绍。

问题： 唯一的问题就是我遭遇到的 "&" 字符。 "&" 在XML文档里面不是一个有效字符。所以我需要将他转换成 "&"。
function parseMessages() {

response = req.responseXML.documentElement;

itemDescription = response.getElementsByTagName('description')[0].firstChild.data;

alert(itemDescription);

}

下面是所有的代码：

HTML Code:

<a href="/" οnmοuseοver="getDescription(3,1)">Java & J2EE News<a>

JavaScript Code:

function getDescription(channelId,itemId) {

var url = 'http://localhost:8080/getDescription.jsp?channelId=' + channelId + '&itemId=' + itemId;

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

} else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

}

req.onreadystatechange = processRequest;

req.open("GET", url, true);

req.send(null);

}

function processRequest() {

if (req.readyState == 4) {

if (req.status == 200) {

parseMessages();

} else {

alert ( "Not able to retrieve description" );

}

}

}

function parseMessages() {

response = req.responseXML.documentElement;

itemDescription = response.getElementsByTagName('description')[0].firstChild.data;

alert ( itemDescription );

}

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>