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 个状态中每一个都有一个相关联的非正式的名称,下表列出了状态、名称和含义 

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

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)

相关推荐