七、AJAX开发
到这里,已经可以清楚的知道AJAX是什么,AJAX能做什么,AJAX什么地方不好。如果你觉得AJAX真的能给你的开发工作带来改进的话,那么继续看看怎么使用AJAX吧。
AJAX涉及到的7项技术中,个人认为Javascript、XMLHttpRequest、DOM、XML比较有用。
A、XMLHttpRequest对象
XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
<script language=”javascript”>
var http_request = false;
//IE 浏览器
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
//Mozilla 浏览器
http_request = new XMLHttpRequest();
</script>
方法
|
描述
|
abort()
|
停止当前请求
|
getAllResponseHeaders()
|
作为字符串返回完整的headers
|
getResponseHeader("headerLabel")
|
作为字符串返回单个的header标签
|
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])
|
设置未决的请求的目标URL,方法,和其他参数
|
send(content)
|
发送请求
|
setRequestHeader("label", "value")
|
设置header并和请求一起发送
|
属性
|
描述
|
onreadystatechange
|
状态改变的事件触发器
|
readyState
|
对象状态(integer):
0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 |
responseText
|
服务器进程返回数据的文本版本
|
responseXML
|
服务器进程返回数据的兼容DOM的XML文档对象
|
status
|
服务器返回的状态码, 如:404 = "文件未找到" 、200 ="成功"
|
statusText
|
服务器返回的状态文本信息
|
B、Javascript
Javascript一直被定位为客户端的脚本语言,应用最多的地方是表单数据的校验。现在,可以通过Javascript操作XMLHttpRequest,来跟数据库打交道。
C、DOM
DOM(Document Object Model)是提供给HTML和XML使用的一组API,提供了文件的表述结构,并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如,document就代表页面对象本身。
D、XML
通过XML(Extensible Markup Language),可以规范的定义结构化数据,是网上传输的数据和文档符合统一的标准。用XML表述的数据和文档,可以很容易的让所有程序共享。
7.2、AJAX开发框架
这里,我们通过一步步的解析,来形成一个发送和接收XMLHttpRequest请求的程序框架。AJAX实质上也是遵循Request/Server模式,所以这个框架基本的流程也是:对象初始化à发送请求à服务器接收à服务器返回à客户端接收à修改客户端页面内容。只不过这个过程是异步的。
A、初始化对象并发出XMLHttpRequest请求
为了让Javascript可以向服务器发送HTTP请求,必须使用XMLHttpRequest对象。使用之前,要先将XMLHttpRequest对象实例化。之前说过,各个浏览器对这个实例化过程实现不同。IE以ActiveX控件的形式提供,而Mozilla等浏览器则直接以XMLHttpRequest类的形式提供。为了让编写的程序能够跨浏览器运行,要这样写:
接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如:
在第二步我们已经指定了响应处理函数,这一步,来看看这个响应处理函数都应该做什么。
responseText:将传回的信息当字符串使用;
responseXML:将传回的信息当XML文档使用,可以用DOM处理。
总结上面的步骤,我们整理出一个初步的可用的开发框架,供以后调用;这里,将服务器返回的信息用window.alert以字符串的形式显示出来:
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest 对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME 类别
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE 浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest 对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL 以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
</script>
接下来,我们利用上面的开发框架来做两个简单的应用。
A、数据校验
在用户注册的表单中,经常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open的弹出窗口,或者window. showModalDialog的对话框。不过,这两个都需要打开窗口。采用AJAX后,采用异步方式直接将参数提交到服务器,用window.alert将服务器返回的校验信息显示出来。代码如下:
用户名:<input type="text" name="username" value="">
<input type="button" name="check" value="唯一性检查" onClick="userCheck()">
<input type="submit" name="submit" value="提交">
</form>