什么是Ajax
Ajax这一技术可以向服务器请求额外的数据而无需卸载页面，它改变了web的’点击，等待‘的交互模式，大大提高了用户的使用体验。
Ajax的核心
我们要使用Ajax向服务器请求数据，首先必须创建XHR对象，在IE7及以上版本以及其他浏览器中，XML对象的创建很容易：
var xhr = new XMLHttpRequest();
后续的操作就是在这个对象上完成。
Ajax的使用
1.创建XML对象
var xhr = new XMLHttpRequest();
2.xhr对象调用open方法，它接受三个参数：要发送的请求的类型（'get','post'等），请求的url和是否异步发送的布尔值。需要说明的是，url可以使用相对路径和绝对路径，使用相对路径时，相对与当前页面的url，建议使用相对路径；调用open方法并不会真的发送请求，只是启动一个请求。
xhr.open('get','example.php',false); //使用get 方法，同步获取example.php上的数据
注意：URL需要满足同源策略，也就是只能向同一个域中使用相同端口和协议的URL发送请求，如果三者有有一个不满足，都会引发安全错误，浏览器会拦截服务器的相应。
3. 发送请求，处理响应
3.1 如果发送的请求是同步的，只需要接着上一步，调用send方法，它接 收一个参数，也就是作为请求主体要发送的数据，如果使用的是'get'方法，只需要传入null，这个参数对有些浏览器来说是必要的，调用send方法后，请求就会被发送到服务器。
xhr.send(null);
发送完请求后，需要等待服务器的响应，响应到来后，会自动填充到xhr对象的属性上，常用的属性包括：
-responseText:作为响应主体被返回的文本，
-status:响应的HTTP状态，
-statusText:HTTP状态的说明
if((xhr.status>=200 && xhr.status<300) || xhr.status == 304) {
//处理返回的响应文本，例如插入到文档某一节点
//后面会介绍HTML状态码
document.querySelector('div').innerHTML = xhr.responseText;
} else {
alert('Request was unsuccessful: '+xhr.staus);//抛出错误信息；
}
3.2 在多数情况下，我们要发送异步请求，这样不至于让用户在等待响应到来的这段时间，什么也做不了。
发送异步请求时，我们可以检测xhr的readyState属性，当这个属性的值发生变化时，会触发ready-statechange事件，我们可以利用这个事件对响应进行处理。readyState属性的值如下：
- 0：未初始化，尚未调用open方法。
- 1：启动阶段，已经调用了open方法，还未调用send方法。
- 2：发送阶段，已经调用了send方法，但尚未接收到响应。
- 3：接收阶段，已经接收到部分响应数据。
- 4：完成阶段，已经接收到全部响应数据，数据可以在客户端使用。
很显然，我们更关注值为4的阶段，这时，所有的数据都可以使用了。
我们需要为readystatechange事件绑定事件处理程序，考虑浏览器兼容性的问题，必须在我们调用open方法之前就指定该事件处理程序。代码如下：
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if((xhr.status>=200&&xhr.status<300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert('Request was unsunccessful: '+xhr.status);
}
}; //这里使用DOM0级方法为事件添加监听器，DOM2级方法并非所有浏览器都支持。
//这个监听器里直接使用xhr对象，而不是使用this，原因是在有的浏览器中会导致函数执行失败，使用xhr对象是最稳妥的方式。
到这里，Ajax常规的使用步骤已经说完了，下面给出一个完整的Ajax发送异步请求的代码。
var xhr = new XMLHttpRequest();
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.php',true);
xhr.send(null);
常用的HTTP状态码
- 200 ：表示客户端发送的请求被服务器成功处理。
- 204：表示请求处理成功，但没有资源返回。
- 301：表示永久重定向。
- 302：临时重定向。
- 304：客户端发送的是有条件的请求，服务器允许访问资源，但因资源不满足请求条件，服务器不返回请求的数据，客户端使用缓存。
- 400：客户端（浏览器端）发生错误，需要修改请求。
- 401：未授权，当前的请求需要用户验证。
- 403：服务器拒绝了客户端的请求。
- 404：服务器上不存在客户端请求的资源，也可以在服务端拒绝请求又不行说明原因时使用。
- 500：服务器端发送错误。
- 503：服务器暂时处于超负载或正在进行停机维护，无法处理请求。
了解了状态码后，对下面的代码也就不难理解了
//状态码在200到300范围内表示请求成功，当status=304表示可以使用浏览器的缓存
if((xhr.status>=200 && xhr.status>300) || xhr.status==304){
}
xhr对象的其他方法
1.setRequestHeader()，使用这个方法可以设置自定义的请求头部信息，它接受两个参数，头部字段的名称和值，要使用这个方法，需要在调用open方法之后，调用send方法之前调用setRequestHeader()。
getResponseHeader()，调用这个方法并传入头部字段的名称，可以取得响应响应的头部信息，getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。
abort()，调用这个方法后，xhr对象会停止触发事件，也不在允许访问任何和响应有关的对象属性。
GET和POST方法的区别
- 使用GET方法时，参数（params)要附加在URL只，而使用post方法，参数则放到send()中。
- GET方法多用于安全性要求较低的场合，而post方法的安全性更高。
- GET方法发送的数据量较少，而post请求发送的数据量大。
