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)