Ajax技术1——XMLHttpRequest对象

Ajax技术1——XMLHttpRequest对象

Ajax是Asynchronous JavaScript and XML的简写，他可以向服务器请求额外的数据而无须卸载页面，意味着用户单击后，可以不必刷新页面也能去的数据。Ajax技术的核心是XMLHttpRquest对象（简称XHR)

1. 创建XMLHttpRequest对象
   针对不同浏览器和不同版本，创建XMLHttpRequest对象的方法不同，对于IE5.5及以下版本，使用new ActiveXObject("Microsoft.XMLHTTP"),而IE6则使用new ActiveObject("Msxml2.XMLHTTP"),IE7及以上和其他浏览器则使用new XMLHttpRequest(),以下是一个适用于据大多数浏览器创建XMLHttpRequest对象的函数:

function createXHR() {    var xhr;    if (window.XMLHttpRequest) {        xhr = new XMLHttpRequest();    } else {        xhr = new ActivexObject("Msxml.XMLHTTP");    }    return xhr;}

1. xhr发送请求
   XHR对象创建后，使用的第一个方法是open(mehtod, url, async):

   • method: String，表示请求的类型，通常为“post”和“get”;
   • url: String,请求的URL;
   • async: Boolean,表示是否异步请求，true表示异步，false表示同步，默认为true

   open()方法不会真正发送请求，只是启动一个请求以备发送，要想发送请求必须通过send()方法，send()方法接受一个参数，作为请求主体发送的数据，如果open()发送选择get类型，则为了浏览器兼容，传入null，即send(null),如果open（）选择post，则传入发送的数据，参数类型类似”key1=value1&key2=value2”,此时浏览器就就已经向服务发送请求了，我们只需等待。

2. 接收服务器响应
   由于Ajax一般都用于异步加载数据，故同步加载不作详细描述，在收到服务器的响应，响应的内容会自动填充XHR的相关属性：

   • responseText：作为响应主题被返回的文本，
   • responseXML：如果相应的内容类型是“text/xml”或”application/xml”,则保存着响应数据的XML DOM文档；
   • status： 响应的HTTP状态（一般将200作为成功的标志，304表示资源没有被修改，可以使用缓存资源）
   • statusText：HTTP状态的说明

   XHR对象还有一个readyState属性，表示请求/响应过程的当前活动阶段，有如下可取的值：

   • 0： 未初始化。创建了对象，尚未调用open()方法
   • 1： 启动。已经调用oepn()方法，但未调用send()方法
   • 2： 发送。已调用send()方法，但未收到响应
   • 3： 接收。已经接受到部分相应数据，但未全部收到
   • 4： 完成：接收到全部响应数据

   只要readyState属性的值变化就会触发readystatechange事件，通常我们支队readyState为4的阶段感兴趣。注意，为了浏览器的兼容，通常将指定onreadystatechange事件处理程序放在open()方法之前，以下是获得服务器相应数据的代码:

   var xhr = createXHR();xhr.onreadystatechange = function() {    if (xhr.readyState == 4) {        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {            alert(xhr.responseText);        } else {            alert("Request was unsuccessful: "+ xhr.status);        }    }xhr.open("get", "example.txt", true);xhr.send(null);

3. XHR其它方法

   • setRequestHeader(key, value):设置请求头，位于oepn()和send()方法之间；
   • getResponseHeader(key): 获取相应内容相应key的响应头；
   • getAllResponseHeaders():返回全部的响应头；
     使用GET请求时，我们要注意对查询字符串编码，使用encodeURLComponent()函数编码：
     

     url += "?" + encodeURIComponent(key) + "=" + encodeURIComponent(value;)

   使用post传递表单数据时，要设置Content-Type请求头为：application/x-www-form-urlencoded

4. 总结
   使用Ajax大致流程：

   • 创建XMLHttpRequest对象
   • 为onreadystatechange事件添加事件处理程序
   • 使用open()方法
   • 使用setRequestHeader()设置请求头
   • 使用send()方法