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()。

2. getResponseHeader()，调用这个方法并传入头部字段的名称，可以取得响应响应的头部信息，getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。

3. abort()，调用这个方法后，xhr对象会停止触发事件，也不在允许访问任何和响应有关的对象属性。

GET和POST方法的区别

• 使用GET方法时，参数（params)要附加在URL只，而使用post方法，参数则放到send()中。
• GET方法多用于安全性要求较低的场合，而post方法的安全性更高。
• GET方法发送的数据量较少，而post请求发送的数据量大。