像其他人一样，当我看到一下ria应用，例如google maps和google suggest的时候我都非常惊讶。我希望知道是如何实现的。现在，谜底揭开了，那就是ajax。这是在我花了一段时间研究ajax之后才知晓的。这里有一个很好的例子让我们知道ajax是如何很好的应用在 www.javarss.com 里面的。
像其他人一样，当我看到一下ria应用，例如google maps和google suggest的时候我都非常惊讶。我希望知道是如何实现的。现在，谜底揭开了，那就是ajax。这是在我花了一段时间研究ajax之后才知晓的。这里有一个很好的例子让我们知道ajax是如何很好的应用在 www.javarss.com 里面的。什么是ajax: ajax 是一个架构(architecture)并不是一种技术。ajax代表异步的javascript和xml。
妙语(punch line): 延迟加载
问题: 当javarss.com首页加载时，他同时加载了所有条目的介绍(如果你在设置中激活了)。这些介绍只有当你鼠标移动到该条目的上面的时候才显示。
现在的问题是用户不可能是鼠标移过所有的条目，所以预先加载所有的介绍不是个好主意。
解决方案: 使用ajax，当鼠标移过的时候从服务器动态加载条目的介绍。
这么做可以使初始页的加载大小减小一半甚至更多，这样一来页面加载就更快，就内能得到一个更好的用户体验。
时序图:
我们首先会在onmouseover事件中调用javascript函数getdescription。下面是html代码:
| <a href="/" onmouseover="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: javascript code: function getdescription(channelid,itemid) { function processrequest() { function parsemessages() { |
闽公网安备 35060202000074号