Ajax小结

Ajax

概念理解

• 全称：Ajax是对Asynchronous Javascript + XML的简写。
• 做用：可以向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。
• 技术核心：XMLHttpRequest对象（简称XHR）。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。可以以异步方式从服务器取得更多信息，意味着用户单击后，能够没必要刷新页面也能取得新数据。便可以使用XHR对象取得新数据，而后再经过DOM将新数据插入到页面中。
• 数据格式：虽然名字中包含XML的成分，但Ajax通讯与数据格式无关。这种技术就是无须刷新页面便可从服务器取得数据，但不必定是XML数据。

建立Ajax

1. 建立XMLHttpRequest对象

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

2. 对于异步请求，没必要等待服务器响应，JS代码继续执行。
   能够检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。

   0:未初始化。还没有调用open()方法。
      1:启动。已经调用open()方法，还没有调用send()方法。
      2:发送。已经调用send()方法，还没有接收响应。
      3:接收。已经接收到部分响应。
      4:完成。已经接收到所有响应数据。

   只要readyState属性的值由一个值变成另外一个值，就会触发onreadyStatechange事件，利用这个事件来检测每次状态变化后readyState值，获取服务器的响应也在这个事件中处理。

   xhr.onreadyStatechange = function(){
          If(xhr.readyState == 4){
              if(xhr.status >=200 && xhr.status = 304){
                  alert(xhr.responseText);
              }else{
                  alert(“Request was unsuccessful: ”+ xhr.status);
              }
          }
      };

3. 建立一个新的HTTP请求,并指定请求的方法、URL及异步(true)/同步(false)

   xhr.open(method,url,async);  
      注意：open 的参数要牢记，不少面试官爱问这样的细节
          1)method：请求的类型；GET 或 POST
          2)url：文件在服务器上的位置
          3)async：true（异步）或 false（同步）
      注意：post请求必定要设置请求头的格式内容
          xhr.open("post","ajax_test.html",true);  
          xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //使用XHR模仿表单提交
          xhr.send("fname=Henry&lname=Ford");

4. 发送HTTP请求

   xmlhttp.send(); 
      如果post请求，参数为做为请求主体发送的参数。
      如果get请求，参数为null。

5. 获取同步发送请求返回的数据

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

6. 使用JavaScript和DOM实现局部刷新