Ajax基础讲义
使用XMLHttpRequest发送异步请求
使用XMLHttpRequest对象发送请求的三个步骤：
· 创建XHR对象
· 准备请求数据，发送请求
· 当响应到达后，处理响应
1.如何创建XMLHttpRequest对象：
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");//对于其它IE版本请参看Demo代码
} else {
alert("cannot use Ajax");
}
创建该对象写出这么多代码的原因，就是在不同的浏览器下对该对象的实现方式不同。所以为了要适应多种浏览器的要求，通过如上代码来创建XHR对象。
微软的JS中，并没有内置的XHR对象，而是通过ActiveX控件实现的，所以的IE浏览器下创建XHR对象必须通过ActiveX方式实现。而其它浏览器中的JS库中有内置的JS XHR对象，所以可以直接创建出来。
2.发送请求
在发送请求前，我们需要创建如下的信息：
l 需要请求的URL地址（通过URL地址可以定位到服务器端的一个具体资源）
l 请求的类型，POST方式还是GET方式
l 传递给服务器端的参数
l 注册响应到达后的JS回调函数的名字
调用时使用的三种函数参数格式：
l open(http_method, url)
l open(http_method, url, asynchronous)
l open(http_method, url, asynchronous, userid, password)
说明：
第一个参数说明请求的方式，GET或者POST
第二个参数请求的服务器端资源的URL地址
第三个参数，采用异步方式还是同步方式发送请求（说明异步请求和同步请求的区别）
第四个参数，如果服务器端采用了HTTP身份认证方式，那么需要给出认证的用户名和密码
例如：
xhr.open('GET', 'servlets/ajax/getItem?id=321', true);
设置回调函数的名字：
xhr.onreadystatechange = parseResponse;
如果采用POST方式，那么提交给服务器的数据需要调用send方法来发送数据；如果是GET方式那么send方法给空字符串参数即可
xhr.send('id=321');
3.处理响应
将请求发送给服务器端后，服务器端的对应程序就会被执行；并将执行后结果返回给客户端，通过注册的处理响应的JS函数来处理响应数据。
在你处理响应的JS函数中，需要判断响应的状态。通过readyState来判断，readyState的状态说明见附表。
在处理响应的方法中：
xhr.onreadystatechange = function(){
var ready = xhr.readyState;
if (ready == 4){
parseCompletedResponse(xhr);
}
};
在status中含有响应的状态码，通过响应的状态码可以获得响应的状态。如200表示响应正常、404表示资源未找到、500表示服务器端程序有错误
xhr.onreadystatechange = function(){
var ready = xhr.readyState;
if (ready == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
parseCompletedResponse(xhr);
} else {
parseErroredResponse(xhr);
}
}
};
响应提供了两个对象：responseText和responseXML。分别用来获取不同文本格式的响应和XML格式的响应。
其它的一些响应中的方法：
abort()：放弃请求。即使请求已经被发送，服务器端已经产生响应，也会忽略响应的结果，而且结束处理。
setRequestHeader(header,value)：设置请求的头部信息。例如：
xhr.setRequestHeader(
'Content-type',
'application/x-www-form-urlencoded'
);
客户端发送XML格式数据到服务器端的时候，需要对文档的编码进行设置。
xhr.setRequestHeader(
'Content-type',
'application/xml; charset=UTF-8'
);
xhr.send("<data source='ajax in practice'>hello world</data>");
getResponseHeader(header)和getAllResponseHeaders()方法：用来获取响应的头部信息。getAllResponseHeaders将取回所有响应的头部的名字。getResponseHeader方法将根据头部的key值取出value值。
if (xhr.getResponseHeader("Server")
.indexOf("Microsoft-IIS") != -1 ) {
alert("The server is a Microsoft IIS server.");
}
|
值 |
状态 |
描述 |
|
0 |
Uninitialized |
open()函数没有被调用 |
|
1 |
Loading |
open()函数正在被调用 |
|
2 |
Loaded |
send()函数被调用 |
|
3 |
Interactive |
服务器端正在返回结果 |
|
4 |
Complete |
请求结束，并且服务器端已经结束发送数据到客户端 |