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完成部分革新