详细解读AJAX请求

什么是 AJAX ？

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

XHR对象

ajax的核心是是基于XMLHttpRequest对象(简称XHR)。IE7+、FireFox、Opera、Chrome和Safari都支持原生的XHR对象，创建XHR对象可以这样写

var xhr = new XMLHttpRquest();

考虑到兼容的问题，应该这样写：

var xhr = null;
if(windows.XMLHttpRequest){
//兼容IE7+,Firefox。Chrome，Opera，Safari
    xhr = new XMLHttpRequest();
}else{//兼容IE6，IE5
    xhr = new ActiveXObject("Microsoft.XMLHTTP
}

向服务器发送请求

 1. xhr.open(method,url,async);  
 2. send(string);//post请求时才使用字符串参数，否则不用带参数。

同步请求

xhr.open("POST","test_post.html",true);  
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xhr.send("fname=Henry&lname=Ford"); //post请求参数放在send里面，即请求体

异步请求

1. xhr.open("GET","test.txt",false);  
2. xhr.send();  
3. document.getElementById("MyButton").innerHTML=xhr.responseText; //获取数据直接显示在页面上

 XMLHttpRequest 对象的三个重要的属性：

属性	描述	解释
readyState	HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4	0，Uninitialized初始化状态，XMLHttpRequest 对象已创建或已被 abort() 方法重置。 1，Open，open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 2，Sent，Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 3，Receiving，所有响应头部都已经接收到。响应体开始接收但未完成。 4，Loaded，HTTP 响应已经完全接收。
status	200：“成功”，404：“未能找到页面”，500：“（服务器内部错误） 服务器遇到错误，无法完成请求。”，3xx-需要重定向，浏览器直接跳转
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。