AJAX in Action

原创 2005年05月31日 16:17:00

AJAX in Action

转自:http://nicholasdsj.blogdriver.com/nicholasdsj/692452.html

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

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

妙语(Punch Line): 延迟加载

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

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

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

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

时序图:

AJAX Sequence Diagram

我们首先会在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:
<a href="/" onmouseover="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 );
}

JSP Code:


资源:
AJAX Java BluePrints Solutions Catalog
AJAX in Wikipedia
W3C HTTP Status Codes

使用AJAX的Google站点:
Gmail
Google Suggest
Google Maps

关于作者: Jay 具有10年以上的IT工作经验,并且自从Java & J2EE诞生那天起就开始接触他们了。

译者Nicholas@NirvanaStudio
<iframe name="google_ads_frame" marginwidth="0" marginheight="0" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-4465827781731051&amp;dt=1126692683765&amp;lmt=1126692683&amp;format=234x60_as&amp;output=html&amp;url=http%3A%2F%2Fblog.csdn.net%2Fzmxj%2Farchive%2F2005%2F09%2F14%2F480659.aspx&amp;color_bg=FFFFFF&amp;color_text=000000&amp;color_link=0000FF&amp;color_url=008000&amp;color_border=336699&amp;ad_type=text_image&amp;ref=http%3A%2F%2Fblog.csdn.net%2Fzmxj%2F&amp;cc=66&amp;u_h=768&amp;u_w=1024&amp;u_ah=740&amp;u_aw=1024&amp;u_cd=32&amp;u_tz=480&amp;u_his=5&amp;u_java=true" frameborder="0" width="234" scrolling="no" height="60" allowtransparency="65535"></iframe>

<script type="text/javascript"> &amp;amp;lt;!-- google_ad_client = "pub-4465827781731051"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "text_image"; google_ad_channel =""; //--&amp;amp;gt; </script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>

javascript 内存管理 避免内存泄漏 [ajax in action]

转自http://hi.baidu.com/_1_1_1_1/blog/item/7ed97338b0c97c2097ddd818.html 任何程序都有可能发生内存“泄漏”(即申请了系统内存并且在工...

ajax in action

  • 2013年11月18日 11:40
  • 7.1MB
  • 下载

Ajax in action(code)

  • 2007年09月06日 20:25
  • 1.01MB
  • 下载

Netty in Action (二十四) 第十三章节 UDP的广播事件

本章内容包括: 1)UDP的总览 2)广播应用的一个简单示例
  • linuu
  • linuu
  • 2016年04月28日 09:07
  • 6676

AJAX In Action

  • 2007年07月03日 09:45
  • 8.37MB
  • 下载

Ajax in Action

  • 2009年04月07日 16:41
  • 9.76MB
  • 下载

Mahout in Action 学习---基于物品的分布式推荐算法(Wikipedia数据集)

文字总结自《Mahout in Action》中文版第六章的内容1.1 数据集介绍Wikipedia数据集:一篇文章到另外一篇文章的链接。 可以将文章看作是用户,将该文章指向的文章视为该源文章所喜欢...

ajax in action

  • 2007年07月31日 20:28
  • 8.46MB
  • 下载

Netty in Action (二十) 第十章节 codecs

第十章,第十一章序 对于网络而言,数据只是原始字节序列,但是我们的程序将这些字节按照某种方式去组织成我们能够看懂的语言,我们一般称这些信息叫“信息”,将信息转换成字节或者从网络中将字节装换成我们...
  • linuu
  • linuu
  • 2016年04月24日 11:49
  • 4048
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX in Action
举报原因:
原因补充:

(最多只允许输入30个字)