本文通过一个简单的例子来说明如何在
IE6
中使用
AJAX
技术。在这例子中,客户端每隔十秒,从服务器端取回一个随机的字符串,在不重新刷新页情况下,自动更新部分页面内容。例子仅用到了两个
jsp
文件,
client.jsp
及
server.jsp
。
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 内容:
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"%>
"http://www.w3.org/TR/html4/loose.dtd">
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< 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>
<%@page pageEncoding="gb2312"%>
"http://www.w3.org/TR/html4/loose.dtd">
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< 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>
AJAX
例子
加 载页面时,将调用 JavaScript 的 getGiftFromServer() 函数,此函数完成了上面所提的应用 AJAX 的流程中第 1 至第 4 步,同时设 定了一个每隔十秒自动调用此函数的定时器。而 showGift() 函数完成所提流程中的第 5 至第 7 步。下面详细说明每一步骤。
1 、定义事件处理器,此处理器将在服务器端返回数据时自动被触发执行。
加 载页面时,将调用 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 (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 中:
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
而在 IE7.0 中:
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest
}
2.2 注册事件处理器
xmlHttp = new XMLHttpRequest
}
2.2 注册事件处理器
xmlHttp.onreadystatechange = showGift;
showGift 为传入的方法名,每当 XMLHTTPRequest 的状态发生改变时,将执行此方法
3. 与服务器连接并发送
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 的 responseXML 来读取相应的节点。如下例:
其中:
bstrMethod: 连接方式,可用的有 GET, POST, PUT, or PROPFIND
bstrUrl: 服务器的 url
varAsync (可选) : 调用是否异步,默认为 true (调用立即返回)
bstrUser (可选):用户名,如果 url 需要验证时附上
bstrPassword (可选):密码,如果 url 需要验证时附上
open() 方法可以直接打开一个 xml 文档,并通过 xmlHttp 的 responseXML 来读取相应的节点。如下例:
xmlHttp.open("GET","http://localhost/books.xml", false);
xmlHttp.send();
var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
4 、发送信息
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 的代码如下:
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 动态更新
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 动态更新
的内容。
document.getElementById