Ajax-基础学习

AJAX原理

Asynchronous JavaScript and XML，能够异步请求服务器数据而且无需重新加载整个页面的技术。

Ajax的核心是XMLHttpRequest（XHR）对象，XHR向服务器发送异步请求获得新数据，通过DOM将新数据动态添加到页面中。

XMLHttpRequest

创建XHR对象

IE7+、Firefox、Chrome、Safari 、Opera可以直接使用XMLHttpRequest对象；
在IE5，IE6需要使用 ActiveXObject对象。

var xhr;
if(window.XMLHttpRequest){
    xhr =new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

发送请求

调用open(method,url,async)方法，启动一个请求准备发送。

其中：

• method:要发送的请求类型，GET,POST。
• url：请求的url
• async：布尔值，表示是否异步发送请求，true异步，false同步。异步请求时在调用send()方法后不会等服务器响应，直接执行JS代码，同步请求时会等到服务器响应之后再执行。

xhr.open("GET", "example.php", true);

调用send()方法发送请求。

send()方法接收一个参数，作为请求中发送的数据，如果不需要发送数据，则需要传入null，因为有些浏览器必须传入参数。

send(null);

响应

收到响应请求之后，响应的数据会自动填充XHR对象的属性。

• responseText：作为响应主体被返回的文本。
• responseXML：如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将包含响应数据的XML DOM文档。
• status：响应的HTTP状态。
• statusText：HTTP状态的说明。
• readyState：请求/响应过程的当前活动阶段。
• readystatechange：readyState改变时触发事件。

readyState的状态值：

• 0：XHR对象已建立，还没有调用open()方法。
• 1：启动。已经调用open()方法，但未调用send()方法。
• 2：发送。已经调用send()方法，但未接收到响应。
• 3：接收中。已经接收到部分响应数据。
• 4：完成。已经接收到全部响应数据，并且可以在客户端使用。

readyState的每次状态变化，都会触发一次readystatechange事件。可以通过检测readyState的每次状态变化，并且在readyState为4时进行数据处理。onreadystatechange事件需要在open之前指定才能确保跨浏览器兼容性。

var xhr;
if(window.XMLHttpRequest){
    xhr =new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        alert(xhr.responseText);
    }else{
        alert(xhr.status);
    }
}
xhr.open("GET", url, true);
xhr.send(null);

HTTP头部信息

默认情况下，在发送XHR请求时还会发送以下头部信息：

• Accept： 浏览器能够处理的类型。
• Accept-Charset：浏览器能够显示的字符集。
• Accept-Encoding：浏览器能够处理的压缩编码。
• Accept-Language：浏览器当前设置的语言。
• Connection：浏览器与服务器之间连接的类型。
• Cookie：当前页面设置的任何Cookie。
• Host：发出请求页面所在的域。
• referer：发出请求页面的URI。

• User-Agent：浏览器的用户代理字符串。

  使用setRequestHeader()可以设置自定义的请求头部信息。接收两个参数：头部字段的名称和值。需要在调用open()之后，调用send()之前调用。

xhr.open("GET", url, true);
xhr.setRequestHeader("header","value");
xhr.send(null);

服务器接收自定义的头部信息后，可以执行相应的后续操作。有的浏览器不允许使用浏览器正常发送字段名称，因此尽量用自定义的头部字段名称。

使用getResponseHeader()，并传入头部字段名称，可以取得相应头部信息；
使用getAllResponseHeader()可以取得包含所有头部信息的长字符串。

POST
POST请求用于向服务器发送应该被保存的数据。POST请求应该把数据作为请求的主体提交，向send()方法中传入数据，可以传入XML DOM，也可以传入任何想发送到服务器的字符串。
通过XHR模拟表单提交，将Content-Type头部信息设为application/x-www-form-urlencode，并且序列化处理数据。

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("idForm");
xhr.send(serialize(form));