AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页面。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
下面简要介绍下使用:
(1)创建 XMLHttpRequest 对象xmlHttp,针对IE和其他的浏览器,创建方法不一样,通过此对象与服务器来通信
var xmlHttp;
function S_xmlhttprequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');//IE浏览器
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();//其他浏览器
}
}
function S_xmlhttprequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');//IE浏览器
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();//其他浏览器
}
}
(2)
发送请求
可以调用HTTP请求类的open()和send()方法,如下所示:
1
2
|
xmlHttp.open(
'GET'
,URL,
true
);
xmlHttp.send(
null
);
|
open()的第一个参数是HTTP请求方式—GET,POST或任何服务器所支持的您想调用的方式。按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。
第二个参数是请求页面的URL。
第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript
函数将继续执行,而不等待服务器响应。这就是"AJAX"中的"A"。
(3)服务器的响应
这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:
1
|
xmlHttp.onreadystatechange=FunctionName;
|
FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后,例如:
1
2
3
|
xmlHttp.onreadystatechange=function(){
//JavaScript代码段
};
|
首先要检查请求的状态。只有当一个完整的服务器响应已经收到了,函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。
readyState的取值如下:
0 (未初始化)
1 (正在装载)
2 (装载完毕)
3 (交互中)
4 (完成)
所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。具体代码如下:
if (http_request.readyState == 4) { // 收到完整的服务器响应 }else { // 没有收到完整的服务器响应 }
当readyState=4时,一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时,表示状态正常。
处理从服务器得到的数据
有两种方式可以得到这些数据:
(1) 以文本字符串的方式返回服务器的响应
(2) 以XMLDocument对象方式返回响应
将对服务器的响应写成函数如下
function
FunctionName() {
if(xmlHttp.readyState == 1) {
document.getElementById(' paraId').innerHTML = "<img src='loading.gif'>";
}
if(xmlHttp.readyState == 4 ){
if(xmlHttp.status == 200) {
var result = xmlHttp.responseText;
document.getElementById(' paraId').innerHTML = result ;
}
}
if(xmlHttp.readyState == 1) {
document.getElementById(' paraId').innerHTML = "<img src='loading.gif'>";
}
if(xmlHttp.readyState == 4 ){
if(xmlHttp.status == 200) {
var result = xmlHttp.responseText;
document.getElementById(' paraId').innerHTML = result ;
}
}