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實現局部刷新