AJAX,即"Asynchronous JavaScript And XML"的缩写,可翻译为异步JavaScript及XML技术。其核心是一个寄宿在浏览器中名为XMLHTTPRequest的类。通过此类,可以做到无需提交表单就可以实现与服务器的连接;无需刷新整个页面,就可以动态更新页面中一部分的内容。XMLHTTPRequest通常使用XML作为数据交换的载体,但也可使用其他的载体,如纯文本。简单来说,就是通过XMLHTTPRequest发送信息给服务器,异步接收服务器处理并返回信息,然后通过JavaScript动态更新页面的部分内容。
尽管AJAX近来非常火爆,但AJAX并非新的技术,正如其名所示,只不过是JavaScript加上XML的技术罢了。而且使用上非常简单。
应用AJAX的流程:
本文通过一个简单的例子来说明如何在IE6中使用AJAX技术。在这例子中,客户端每隔十秒,从服务器端取回一个随机的字符串,在不重新刷新页情况下,自动更新部分页面内容。例子仅用到了两个jsp文件,client.jsp及server.jsp。为了方便说明,我用server.jsp来代替本应作为Servlet的Server.java。
先看client.jsp内容:
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>
<tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3><%@page contentType="text/html"%>
<%@page pageEncoding="gb2312"%>
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
xmlHttp.onreadystatechange = showGift;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
setTimeout("getGiftFromServer()",10000);
}
function showGift() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
document.getElementById("output").innerHTML = "Time is for " + xmlHttp.responseText + ".";
}
}
</script>
</head>
<body onload="getGiftFromServer()">
加载页面时,将调用JavaScript的getGiftFromServer()函数,此函数完成了上面所提的应用AJAX的流程中第1至第4步,同时设定了一个每隔十秒自动调用此函数的定时器。而showGift()函数完成所提流程中的第5至第7步。下面详细说明每一步骤。
1、定义事件处理器,此处理器将在服务器端返回数据时自动被触发执行。
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>
<tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3> function showGift() {因为我们这里使用异步,readyState属性用来判断服务器返回信息的状态。其值是一个从0至4的整数,对应于:
2、获取XMLHTTPRequest,并将事件处理器注册给它
注意:要使用XMLHTTPRequest,需要IE5.0以上的版本。
2.1 取得XMLHTTPRequest
在IE7.0之前获得XMLHTTPRequest,使用如下代码:
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>
<tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3> if (window.ActiveXObject) {而在IE7.0中:
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>
<tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3> if (window.XMLHttpRequest) {2.2 注册事件处理器
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>
<tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3> xmlHttp.onreadystatechange = showGift;</td> </tr> </table>showGift为传入的方法名,每当XMLHTTPRequest的状态发生改变时,将执行此方法
3. 与服务器连接并发送
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>
<tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3> xmlHttp.open("GET", url , true)</td> </tr> </table>其方法签名如下:
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>
<tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3> xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)</td> </tr> </table>其中:
open()方法可以直接打开一个xml文档,并通过xmlHttp的responseXML来读取相应的节点。如下例:
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>
<tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3> xmlHttp.open("GET","http://localhost/books.xml", false);4、发送信息
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>
<tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3> xmlHttp.send(null)</td> </tr> </table>其方法签名如下:
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>
<tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3> xmlHttp.send( [varBody])</td> </tr> </table>varBody(可选): 可为字符串或xml等数据,可以为null。无返回值
此方法在open()设为异步时,立即返回;在open()设为同步时,必须等到reponse对象从服务器中返回时才返回。
5、服务器返回处理完毕的信息
此时,该是服务器端工作了,server.jsp的代码如下:
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0> <tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3><% response.setHeader("Cache-Control","no-cache");%>
<% response.setHeader("Pragma","no-cache");%>
<% response.setDateHeader ("Expires",-1); %>
<%
String[] str = new String[] {"Love", "Power", "Peace"};
int number = new java.util.Random().nextInt(2+1);
response.getWriter().write(str[number]);
%>
从三个字符串中随机挑选一个写入到response中,返回客户端。
6、客户端自动探知XMLHTTPRequest的状态已经发生变化,自动触发事件处理器
7、事件处理器动态更新页面
处理器读取xmlHttp.responseText的值,并通过JavaScript动态更新的内容。
<table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>
<tr> <td style="WORD-WRAP: break-word" bgColor=#f3f3f3> document.getElementById("output").innerHTML = "Time is for " + xmlHttp.responseText + ".";</td> </tr> </table>结语:
由上7步可见,AJAX并不复杂,远比想像中要简单得多。牢牢记住这一点,“AJAX让我们在不用刷新页面的情况下,可以动态地更新网页部分内容”,然后运用到各种需要用到这种性能的场合,将使我们的网页更有创意。
版权声明:Techtarget获Matrix授权发布,如需转载请联系Matrix
作者:Sarkuya blog:http://blog.matrix.org.cn/page/Sarkuya
原文地址:http://www.matrix.org.cn/resource/article/44/44335_AJAX.html
</td> </tr> <tr>
↑返回目录
前一篇: 反连接代码
后一篇: 编写一个随处可调用的静态日志操作类