当前页面位置: » 丰搜网 » 文档中心 » 详细内容
揭开ajax神秘面纱
ajax，即"asynchronous javascript and xml"的缩写，可翻译为异步javascript及xml技术。其核心是一个寄宿在浏览器中名为xmlhttprequest的类。通过此类，可以做到无需提交表单就可以实现与服务器的连接；无需刷新整个页面，就可以动态更新页面中一部分的内容。xmlhttprequest通常使用xml作为数据交换的载体，但也可使用其他的载体，如纯文本。简单来说，就是通过xmlhttprequest发送信息给服务器，异步接收服务器处理并返回信息，然后通过javascript动态更新页面的部分内容。
尽管ajax近来非常火爆，但ajax并非新的技术，正如其名所示，只不过是javascript加上xml的技术罢了。而且使用上非常简单。
应用ajax的流程：
1、定义一个事件处理器
2、获取xmlhttprequest，并将事件处理器注册给它
3、与服务器连接
4、发送信息
5、服务器返回处理完毕的信息
6、每当xmlhttprequest的状态发生变化，自动触发事件处理器
7、事件处理器动态更新页面
本文通过一个简单的例子来说明如何在ie6中使用ajax技术。在这例子中，客户端每隔十秒，从服务器端取回一个随机的字符串，在不重新刷新页情况下，自动更新部分页面内容。例子仅用到了两个jsp文件，client.jsp及server.jsp。为了方便说明，我用server.jsp来代替本应作为servlet的server.java。
先看client.jsp内容：
<%@page contenttype="text/html"%>
<%@page pageencoding="gb2312"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"
"http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>ajax demo</title>
<script language="javascript">
var xmlhttp;
function getgiftfromserver() {
var url = "http://localhost:8084/ajax/server.jsp";
if (window.activexobject) {
xmlhttp = new activexobject("microsoft.xmlhttp");
}
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()">
<h1>ajax例子</h1>
<div id="output"></div>
</body>
</html>
加载页面时，将调用
javascript的getgiftfromserver()函数，此函数完成了上面所提的应用
ajax的流程中第1至第4步，同时设定了一个每隔十秒自动调用此函数的定时器。而showgift()函数完成所提流程中的第5至第7步。下面详细说明每一步骤。
1、定义事件处理器，此处理器将在服务器端返回数据时自动被触发执行。 function showgift() {
if (xmlhttp.readystate == 4 xmlhttp.readystate == "complete") {
document.getelementbyid("output").innerhtml = "time is for " + xmlhttp.responsetext + ".";
}
}因为我们这里使用异步，readystate属性用来判断
服务器返回信息的状态。其值是一个从0至4的整数，对应于：
0：对象已创建，但未初始化（未调用open()方法）
1：对象已创建，但未调用send()方法
2：已调用send()方法，但status及headers还未可用
3：已经传回部分数据，但status及headers还未完全可用
4：已经收到所有数据，可使用所有数据
2、获取xmlhttprequest，并将事件处理器注册给它注意：要使用
xmlhttprequest，需要ie5.0以上的版本。
2.1 取得
xmlhttprequest
在ie7.0之前获得
xmlhttprequest，使用如下代码：
if (window.activexobject) {
xmlhttp = new activexobject("microsoft.xmlhttp");
}而在ie7.0中：
if (window.xmlhttprequest) {
xmlhttp = new xmlhttprequest
}2.2 注册事件处理器
xmlhttp.onreadystatechange = showgift;
showgift为传入的方法名，每当
xmlhttprequest的状态发生改变时，将执行此方法
3. 与服务器连接并发送 xmlhttp.open("get", url , true)
其方法签名如下：
xmlhttp.open(bstrmethod, bstrurl, varasync, bstruser, bstrpassword)
其中：
bstrmethod: 连接方式，可用的有get, post, put, or propfind
bstrurl:
服务器的url
varasync（可选）: 调用是否异步，默认为true（调用立即返回）
bstruser（可选）：用户名，如果url需要验证时附上
bstrpassword（可选）：密码，如果url需要验证时附上
open()方法可以直接打开一个
xml文档，并通过
xmlhttp的response
xml来读取相应的节点。如下例：
xmlhttp.open("get","http://localhost/books.xml", false);
xmlhttp.send();
var book = xmlhttp.responsexml.selectsinglenode("//book[@id='bk101']");
4、发送信息 xmlhttp.send(null)
其方法签名如下：
xmlhttp.send( [varbody])
varbody（可选）: 可为字符串或
xml等数据，可以为null。无返回值
此方法在open()设为异步时，立即返回；在open()设为同步时，必须等到reponse对象从
服务器中返回时才返回。
5、服务器返回处理完毕的信息此时，该是
服务器端工作了，server.
jsp的代码如下：
<%
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动态更新<div id="output">的内容。
document.getelementbyid("output").innerhtml = "time is for " + xmlhttp.responsetext + ".";
结语：由上7步可见，
ajax并不复杂，远比想像中要简单得多。牢牢记住这一点，“
ajax让我们在不用刷新页面的情况下，可以动态地更新网页部分内容”，然后运用到各种需要用到这种性能的场合，将使我们的网页更有创意。
