ajax的请求过程以及ajax的优缺点

[FanWalker]

ajax优缺点：

优点：
（1）无刷新更新数据
（2）异步地与服务器进行通信
（3）前端和后端负载平衡
（4）界面与应用分离
缺点：
（1）没有返回和历史功能，破坏了浏览器的机制；
（2）安全问题；
（3）对搜索引擎支持较弱；
（4）破坏程序的异常处理机制；
（5）不能很好地支持移动设备；
（7）客户端的代码容易出现冗余；

ajax的基本流程

（1）创建XMLHttpRequest对象

创建兼容的xhr对象：

function createXHR(){
      var xhr = null;
      try{
          xhr = new XMLHttpRequest();
      }cath(e){
          xhr = new ActiveXObject('Microsoft.XMLHttp');
      }
      return xhr;
}

var xhr = createXHR();

（2）初始化请求

open方法接受3个参数：要发送的请求类型（“get“，”post“等）；请求的URL和表示是否异步发送请求的布尔值，默认为true，如：

xhr.open("get", "example.php")

（3）发送请求

接着发送请求，调用send()方法，接受一个参数，作为请求主体发送的数据。如果不需要通过请求主题发送数据，则必须传入null，因为这个参数对有些浏览器是必需的。调用send()方法后，请求就会被分派到服务器。

xhr.send(null)

（4）接受响应数据

如果服务器对此次请求进行了响应，在收到响应后，响应数据会自动填充xhr对象的属性，相关属性如下：
responseText ：作为响应主体被返回的文本；
responseXML：响应内容类型是”text/xml“或”application/xml“，这个属性将包含响应数据的XML DOM文档；
status ：响应的http状态；
statusText：http状态的说明；

当发送的是同步请求的时候，在接收到响应后，第一步检查status属性，status为200时表示成功，responseText内容已准备就绪；值为304表示请求的资源并没有被修改，可以使用浏览器缓存的版本：

if((xhr.status >=200 && xhr.status < 300) || xhr.status ==304){
     alert(xhr.responseText);
}
else{
     alert("Request was unsuccessful: " + xhr.status);
}

异步的时候，可以检测readyState属性，该属性表示请求/响应过程的当前活动阶段。可取值如下：
0：未初始化。为调用open()方法；
1：启动。调用了open()方法但为调用send()方法；
2：发送。调用send()方法，但未收到响应；
3：接受。接收到部分响应数据；
4：完成。接收到全部响应数据，已经可以在客户端使用。
readyState属性的每改变一次都会触发readystatechange事件。可以利用这个时间来检测每次状态变化后readyState的值。不过必须在open()之前指定onreadystatechange时间处理程序。

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.php")
xhr.send(null)

（5）完成。