ajax知識點總結

Ajax工作原理

      Ajax技術核心是XMLHttpRequest對象(簡稱XHR對象)，XHR為向服務器發送請求和解析服務器響應提供了流暢的接口。能夠以異步方式從服務器獲得更多信息。意味着用戶不必刷新頁面也能取得新數據，然后通過DOM將數據插入到頁面中。

   XHR對象：

       XMLHttpRequest  對象方法如下：

       about()   停止當前的請求。

       getAllResponseHeaders()   把HTTP請求的所有響應首部作為鍵/值對返回

       getResponseHeader("header")  返回指定首部的串值

       open("method","URL",[asyncFlag]) ：

       建立對服務器的調用。method參數可以是GET、POST。url參數可以是相對URL或絕對URL。這個方法還包括可選的參數，是否異步(true或者false)。

      send(content) 向服務器發送請求。send接收一個參數，即作為請求主體發送的數據。如果不需要通過請求主體發送數據，則必須傳入null，因為這個參數對有些瀏覽器來說是必須的。調用send()之后，請求就會分派到服務器。

setRequestHeader("header", "value")： 把指定首部設置為所提供的值。在設置任何首部之前必須先調用open()。設置header並和請求一起發送 ('post'方法一定要 )

  XMLHttpRequest 對象屬性描述：

      onreadystatechange：狀態改變的事件觸發器，每個狀態改變時都會觸發這個事件處理器.

      readyState:  請求的狀態。

      有5個可取值：

      0: 未初始化。尚未調用open()方法。

      1：啟動。已經調用open()方法，但尚未調用send()方法。

      2：發送。已經調用send()方法，readyState上面的值就是HEADERS_RECEIVED,已經發送並且已經接收到響應頭和響應狀態了。

      3：接收。已經接收到部分相應數據。

      4：完成。已經接收到全部相應數據，而且已經可以在客戶端使用了。

      responseText： 服務器的響應，返回數據的文本。

      responseXML：服務器的響應，返回數據的兼容DOM的XML文檔對象 ，這個對象可以解析為一個DOM對象。

      status：服務器的HTTP狀態碼（如：404 = "文件末找到" 、200 ="成功" ，等等）

      statusText: 服務器返回的狀態文本信息 ，HTTP狀態碼的相應文本（OK或Not Found（未找到）等等。

    XHR創建對象：

        所有現代瀏覽器(IE7,firefox,Opera,chrome和safari都支持原生的XMLHttpRequest對象)。

        創建XMLHttpRequest對象的語法如下：

         xhr = new XMLHttpRequest();

       老版本的瀏覽器IE7以下的使用ActiveX對象。

       xhr=new ActiveXObject("Microsoft.XMLHTTP");

     為此，綜合以上，可以創建跨瀏覽器下的XHR對象，如下所示：

      function createXHR(){

              var xhr;

              if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari

                       xhr=new XMLHttpRequest();

              }else{ // code for IE6, IE5

                       xhr=new ActiveXObject("Microsoft.XMLHTTP");

              }

              return xhr;

     }

    XMLHttpRequest對象用於和服務器交換數據實列如下：

   <script>

              function createXHR(){

                       var xhr;

                       if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari

                                 xhr=new XMLHttpRequest();

                       }else{ // code for IE6, IE5

                                 xhr=new ActiveXObject("Microsoft.XMLHTTP");

                       }

                       return xhr;

              }

              var xhr = createXHR();

              console.log(xhr.readyState);

              xhr.onreadystatechange = function(){

                       console.log(xhr.readyState);

                       if(xhr.readyState == 4) {

                                 if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

                                          console.log(xhr.responseText);

                                 }else {

                                          console.log("request was unsuccessful:"+xhr.status);

                                 }

                       }

              };

              //xhr.open('get','ajax.txt',false);

              //xhr.send(null);

      </script>

     一：未調用open和send方法之前，xhr.readyState輸出為0，也就是未初始化，未調用open方法。

     二：當把xhr.open方法打開時候，xhr.readyState輸出為1，也就是啟動了open方法，但尚未調用send()方法。

     三：當把xhr.send(null) 代碼打開時候，xhr.readyState輸出為4，說明接收到全部數據，且xhr.responseText輸出為ajax.txt的內容了。

  請求中使用GET還是POST?

       與post相比，get更簡單也更快，並且在大部分情況下可以使用，然后在以下情況下，請使用post請求：

           1. 無法使用緩存文件(更新服務器上的文件或者數據庫)。

           2. 向服務器發送大量數據(POST沒有數據量限制)。

           3. 發送包含未知字符的用戶輸入時，post比get更穩定也更可靠。

       還是上面的demo，把xhr.open第三個參數改為true，xhr.open('GET','ajax.txt',true); 可以看到打印出來分別為0,1,2，3,4。

       使用GET請求會有緩存，所以為了避免這種情況，需要在url后面增加唯一的id，比如可以加一個時間戳。

       GET請求存在安全性，也就是說安全性不高，且傳輸的數據有限制，所以要發送大量的數據如上所說，請使用POST請求。

    注意：使用GET請求經常會發生一個錯誤，就是查詢字符串格式會有問題，查詢字符串中每個參數的名稱和值必須使用encodeURIComponent()進行編碼，然后才能放到url的末尾，而且所有名-值對必須由和號(&)分隔，如下面所示：

        Xhr.open(“GET”,”ajax.txt?name1=value1&name2=value2”,true);

     不過我們可以使用下面的函數可以輔助現有的url的末尾添加查詢字符串參數。

     function addURLParam(url,name,value) {

          url += (url.indexOf("?") == -1 ? "?" : "&");

          url += encodeURIComponent(name) + "=" + encodeURIComponent(value);

         return url;

      }

    Demo如下：

        <script>

                   function createXHR(){

                            var xhr;

                            if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari

                                     xhr=new XMLHttpRequest();

                            }else{ // code for IE6, IE5

                                     xhr=new ActiveXObject("Microsoft.XMLHTTP");

                            }

                            return xhr;

                   }

                   var xhr = createXHR();

                   console.log(xhr.readyState);

                   xhr.onreadystatechange = function(){

                            console.log(xhr.readyState);

                            if(xhr.readyState == 4) {

                                     if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

                                               console.log(xhr.responseText);

                                     }else {

                                               console.log("request was unsuccessful:"+xhr.status);

                                     }

                            }

                   };

                   function addURLParam(url,name,value) {

                      url += (url.indexOf("?") == -1 ? "?" : "&");

                      url += encodeURIComponent(name) + "=" + encodeURIComponent(value);

                      return url;

                   }

 

                   var url = "ajax.txt";

                   url = addURLParam(url,"name","Nicholas");

                   xhr.open('get',url,false);

                   //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

                   //xhr.setRequestHeader("MyHeader","MyValue");

                   xhr.send(null);

          </script>

如下所示：

      

     POST請求：

         一個簡單的post請求如下：

        xhr.open('POST','ajax.txt',true);

        xhr.send(null);

        如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規定您希望發送的數據：如下所示：

        xhr.open('POST','ajax.txt',true);

        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        xhr.send("fname=Bill&lname=Gates");

         

HTTP頭部信息：

   每個http請求和相應都會帶有相應的頭部信息，其中有的對開發人員有用，有的沒有什么用，XHR對象也提供了操作這兩種頭部(即請求頭部和相應頭部)信息的方法。

   默認情況下，在發送XHR請求的同時，還會發送下列頭部信息。

1. Accept： 瀏覽器能夠處理的內容類型。
2. Accept-Charset：瀏覽器能夠顯示的字符集。
3. Accept-Encoding：瀏覽器能夠處理的壓縮編碼。
4. Accept-Language：瀏覽器當前設置的語言。
5. Connection：瀏覽器與服務器之間連接的類型。
6. Cookie: 當前頁面設置的任何cookie。
7. Host： 發出請求的頁面所在的域。
8. Referer：發出請求的頁面的URL。
9. User-Agent: 瀏覽器的用戶代理的字符串。

如上面的demo所示：

     

跨域-----JSONP

      通過XHR實現ajax通信的一個主要限制，來源於跨域安全策略。默認情況下，XHR對象只能訪問與包含它的頁面同一個端口，同一個協議，同一個域名下的頁面的資源文件，那么如果是不同域名下的文件資源是不允許訪問，這是瀏覽器同源策略(為了安全性考慮)。那么如果開發中會需要在不同的域名下訪問相對應的資源如何做呢？首先我們想到的是JSONP，那么什么是JSONP呢？

我們可以先來看看jsonp.html頁面代碼如下：

<!doctype html>

<html lang="en">

    <head>

      <meta charset="UTF-8">

      <title>Document</title>

      <script src="jsonp.js"></script>

    </head>

 <body>

 </body>

</html>

其中jsonp.js內容為 alert("測試"); 打開頁面可以看到彈出對話框 測試內容。這是在同域名下訪問的，現在我讓jsonp.js指向不同的域名，看能不能訪問呢？首先在hosts文件下綁定

127.0.0.1   a.test.com  然后把上面的jsonp.js改成 http://a.test.com/ajax/jsonp.js 接着在 頁面上 訪問 http://localhost/ajax/jsonp1.html 這個鏈接，也可以看出彈出”測試”文案對話框，由此可以知道：<script>標簽的src屬性並不被同源策略所約束，所以可以獲取任何服務器上腳本並執行。

  什么是JSONP？

     JSONP(JSON With Padding) 是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問。

  JSONP的作用？

     由於同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、端口）的資源，為了實現跨域請求，可以通過script標簽實現跨域請求，然后在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。

  如何使用JSONP？

  JSONP執行過程如下：

      首先在客戶端注冊一個callback, 然后把callback的名字傳給服務器。此時，服務器先生成 json 數據。 然后以 javascript 語法的方式，生成一個function , function 名字就是傳遞上來的參數 callback名字。最后將 json 數據直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。如下demo：

首先PHP代碼如下：

 <?php   

//服務端返回JSON數據   

$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);   

result=jsonencode(

arr);   

//動態執行回調函數   

callback=

_GET['callback'];   

echo callback."(

result)";  

?>

會返回如下內容：Callback名稱({"a":1,"b":2,"c":3,"d":4,"e":5})；

JS代碼如下：

<script type="text/javascript">   

              function jsonpCallback(result) {   

                     //alert(result);   

                     for(var i in result) {   

                            console.log(i+":"+result[i]);//循環輸出a:1,b:2,etc.   

                     }   

              }   

              var script = document.createElement("script");   

              script.type = "text/javascript";   

              script.src="http://a.test.com/ajax/jsonp.php?callback=jsonpCallback";   

              document.getElementsByTagName("head")[0].appendChild(script);   

</script>

此時傳給服務器的Callback名稱為jsonpCallback，后台php返回的格式肯定是：jsonpCallback({"a":1,"b":2,"c":3,"d":4,"e":5})，所以在客戶端jsonpCallback函數能正確的調用到。

客戶端JS代碼在Jquery實現方式1如下：

<script type="text/javascript">   

                   $.getJSON("http://a.test.com/ajax/jsonp.php?callback=?",function(result) {   

                            for(var i in result) {   

                                     alert(i+":"+result[i]);//循環輸出a:1,b:2,etc.   

                            }   

                   });   

         </script>

可以正確的輸出。

客戶端JS代碼在Jquery實現方式2如下：

<script type="text/javascript">   

       $.ajax({   

                url:"http://a.test.com/ajax/jsonp.php",   

                dataType:'jsonp',   

                data:'',   

                jsonp:'callback',   

               success:function(result) {   

                       for(var i in result) {   

                             alert(i+":"+result[i]);//循環輸出a:1,b:2,etc.   

                       }   

              } 

         });    

  </script>  

    

比如如下：

    

我們還可以指定callback名稱，如下：

  

 來自：http://www.cnblogs.com/tugenhua0707/p/4023186.html