Javascript与Ajax

一、XMLHttpRequest 对象 (XHR)

XMLHttpRequest 对象用于在后台与服务器交换数据，有了这个对象，我们可以：

在不重新加载页面的情况下更新网页；

在页面已加载后从服务器请求数据；

在页面已加载后从服务器接收数据；

在后台向服务器发送数据。

 

二、创建XHR

//创建XMLHttpRequest对象  
function createXMLHttpRequest(){
	var xmlHttpRequest;
	if(window.XMLHttpRequest){
		//IE8+, FF, Chrome等浏览器内置XHR对象，可以直接创建
		xmlHttpRequest = new XMLHttpRequest();   
	}else if(window.ActiveXObject){
		//IE7和之前版本需要通过ActiveXObject创建XHR
		xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
	}else{
		//其他不支持XHR的浏览器
	}
	return xmlHttpRequest;
}

 

三、发送请求

在Javascrpt中使用XHR的以下方法发送请求：

/**
 * 初始化XHR请求
 * @param method   请求的类型（get/post)
 * @param url      请求的url
 * @param isAsync  是否使用异步请求
 * @param username 对于要求认证的服务器，可以提供用户名
 * @param password 对于要求认证的服务器，可以提供密码
 */
open(method, url[, isAsync=true[, username=null[, password=null]]]);

/**
 * 发送请求
 * @param data 作为请求体的数据
 */
send([data=null]);  

 例：

var xhr = createXMLHttpRequest();

//使用同步方式发送GET请求
xhr.open("get", "http://sample.org/test", false);  
xhr.send(null);

//使用异步方式发送POST请求并模拟表单提交
xhr.open("post", "http://sample.org/test", true);  
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("var1=val1&var2=val2");

 

四、注册回调函数

xhr.onreadystatechange = function(){  
   // Do something...  
}  

 

 五、常用属性

1. readyState

HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义 

状态	名称	描述
0	UNSENT	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1	OPENED	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	HEADERS_RECEIVED	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3	LOADING	所有响应头部都已经接收到。响应体开始接收但未完成。
4	DONE	HTTP 响应已经完全接收。

readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 readystatechange 事件。

 

2. responseText

这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

 

3. responseXML

如果响应的内容是"text/xml"或者"application/xml"，这个属性将保存包含响应数据的XML DOM文档（Document对象）。

 

4. status

响应的http状态码。

 

5. statusText

这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。

 

六、Ajax示例

var xhr = createXMLHttpRequest();

xhr.onreadystatechange = function(){
	if (xhr.readyState==4) {
		if (xhr.status==200) {
			//do something
		}
	}
}

xhr.open("get", "http://sample.org/test", true);  
xhr.send(null);

 

七、其他方法

/**
 * 取消请求并关闭连接，XHR对象重置为readyState为0的状态。
 */
abort()

/**
 * 向一个打开但未发送的请求设置或添加一个HTTP请求头信息。
 * @param headerName 需要设置或添加的头信息的名字（大小写不敏感）
 * @param value      设置或添加的头信息的值
 */
setRequestHeader(headerName, value)


/**
 * 取得一个包含所有响应的header信息的长字符串，如果 readyState 小于 3，这个方法返回 null。
 */
getAllResponseHeaders()

/**
 * 取得指定的HTTP响应头信息的值。
 * @param headerName 需要从响应中获得的头信息的名字（大小写不敏感）
 */
getResponseHeader(headerName)