本文通过一个简单的例子来说明如何在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内容:
"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、定义事件处理器,此处理器将在服务器端返回数据时自动被触发执行。 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的responseXML来读取相应的节点。如下例: 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的代码如下:
从三个字符串中随机挑选一个写入到response中,返回客户端。
6、客户端自动探知XMLHTTPRequest的状态已经发生变化,自动触发事件处理器
7、事件处理器动态更新页面
处理器读取xmlHttp.responseText的值,并通过JavaScript动态更新的内容。
document.getElementById("output").innerHTML = "Time is for " + xmlHttp.responseText + ".";结语:
由上7步可见,AJAX并不复杂,远比想像中要简单得多。牢牢记住这一点,“AJAX让我们在不用刷新页面的情况下,可以动态地更新网页部分内容”,然后运用到各种需要用到这种性能的场合,将使我们的网页更有创意。
分享到:
相关推荐
JSP.Ajax网站开发典型实例JSP.Ajax网站开发典型实例JSP.Ajax网站开发典型实例JSP.Ajax网站开发典型实例JSP.Ajax网站开发典型实例JSP.Ajax网站开发典型实例
本书主要内容包括JSP基础实例、JSP数据库实例、JavaBean技术、Servlet技术、Ajax基本技术、Ajax高级技术、Ajax数据库操作、Ajax时尚技术、Ajax常用框架和实现OA系统。本书实例来源于作者多年工作实践,基本囊括了...
Ajax网站开发典型实例JSP源码包
ajax jsp 实例大全ajax jsp 实例大全ajax jsp 实例大全ajax jsp 实例大全
JSP+Ajax 经典开发实例,内容很全面,详细。
JSP Ajax学习实例集源代码,数据库采用MYSQL,实例中大部分文件为HTML及JSP文件,部分Java源文件存放在java目录中。可将目录中的内容作为Eclipse的一个项目导入Eclipse中使用。所有实例在jdk 1.4.2 Tomcat 5.0.28 ...
JSP+Ajax实例演示 JSP+Ajax实例演示 JSP+Ajax实例演示
JSP Ajax实例集,数据库采用MYSQL,实例中大部分文件为HTML及JSP文件,部分示例名称: 第一章 动态加载数据 1.1动态加载的FAQ 1.2根据邮政编码获取地区信息 1.3动态树形列表 1.4多级联动菜单 1.5条件...
jsp+ajax自动刷新实例
JSPAjax网站开发典型实例JSPAjax网站开发典型实例JSPAjax网站开发典型实例
JSP+AJax网站实例 提供给JSP初学者 JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计...
jsp实现checkbox的ajax传值实例.docx
jsp+ajax开发实例详解,轻松学习ajax技术
里面有3个关于jsp-ajax的小实例,希望能够帮助新手入门!
JSP+Ajax经典实例2 内容详细,很全面。
带进度条的文件上传 多级联动菜单 购物车 考试系统 输入内容前提示 注册表单验证
收集的一些Ajax小实例,在JSP环境下使用Ajax技术。JSP是一比较高端的WEB前端技术,虽然入手不是太容易,不过代码规范度高,适用在一些安全性要求较高的场合,比如网银系统,在JSP下运用Ajax技术,已不是什么新鲜事了...
pmjFileUpload.js类封装了dhtmlXVaultObject非专业版v.1.5 build 9755。在dhtmlXVaultObject的... 附件是一个完整的java web app上传实例,可以直接使用。 注意:默认上传路径是c:\upload;设置文件格式限制需大写。
AJAX+jsp无刷新验证码实例 AJAX 和 JSP 技术
Ajax+jsp无刷新验证码实例 包含 :Ajax+jsp无刷新验证码实例.docx img.jsp net.js num.jsp random.jsp