Ajax學習筆記

1、概念:Ajax：Asynchronous JavaScript and XML 異步的JS和XML

2、原理:經過XMLHttpRequest向服務器發送異步請求，從服務器獲取數據到客戶端的內存中，而後JavaScript根據須要對這些資源進行處理，並經過CSS和DOM實現頁面呈現給瀏覽器。

1.通常Web請求處理:原理是由Client向Server提交頁面申請，再由Server將申請經過HTTP傳回給Client生成瀏覽頁面.

  

2.使用AJAX的原理:AJAX引擎會在瀏覽器呈現Server回發的數據以前作進一步處理，能夠實現異步處理、頁面無刷新效果。

   

3、XMLHttpRequest對象:

1.概念:XMLHttpRequest是AJAX的核心對象，經過它實現了能夠異步方式獲取服務器數據。在IE6及如下版本的瀏覽器中是MicrosoftXMLHTTP的ActiveX組件，在其餘瀏覽器中才叫XMLHttpRequest.

2.建立XMLHttpRequest對象:

   var xmlHttp;
        function CreatexmlHttp() {
            if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
         }; 

 //對於window.ActiveXObject的調用會返回一個對象，也可能返回null，if語句會把調用返回的結果看做是true或false（若是返回對象則爲true，返回null則爲false），以此指示瀏覽器是否支持ActiveX控件，相應地得知瀏覽器是否是IE舊版本，若是是，則經過實例化ActiveXObject的新實例來建立XMLHttpRequest對象，同理，window.XMLHttpRequest返回一個對象，就把XMLHttpRequest實例化爲一個本地Javascript對象。

4、方法和屬性：

    

 

    

 

   1.readyState屬性：當前請求的狀態，有五個可取值：

      值0：還沒有初始化（還未調用send()方法，該階段主要是在判斷XMLHttpRequest對象是否存在）；

      值1：正在加載（已經調用send()方法，正在發送請求）；

      值2：加載完畢(send()方法執行完畢已經接收到所有響應內容)；

      值3：正在處理（正在解析響應內容）；

      值4：處理完畢（響應內容解析完畢，能夠訪問響應數據了）。

  2.status屬性：HTTP狀態碼，常見的有：200（請求成功），202（請求被接受但處理未完成），400（錯誤請求），404（請求資源未找到），500（內部服務器錯誤）

  3.onreadystatechange：當XMLHttpRequest的readyState發生改變時觸發的事件。

  4.setRequestHeader()方法：使用POST方式傳參時使用，必須在open()以後調用，參數setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312")。有關setRequestHeader的資料可參考這個連接http://muyi137.diandian.com/post/2011-05-20/918918

5、POST和GET請求方式：

     1.GET方式：參數放在URL中傳遞給SERVER端：

      function GetSend(){

      CreatexmlHttp();

      xml.onreadystatechange=function(){

          if(xmlHttp.readyState==4){

               if(xmlHttp.status==200){     

                 var receiveData=xmlHttp.responseText;

                 //處理數據...

              }

          }

       }

      xml.open("GET","XXX.ashx?user=admin&password=123",true);

      xml.send();

     }

 

    2.POST方式：參數藏在請求報文中傳遞給SERVER端:

       function PostSend(){

       CreatexmlHttp();

        xml.onreadystatechange=function(){

if(xmlHttp.readyState==4){

               if(xmlHttp.status==200){     

                 var receiveData=xmlHttp.responseText;

                 //處理數據...

                }

              }

           }

        xml.open("GET","XXX.ashx",true);

        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312");

        var param="user=admin&password=123";

        xml.send(param);

       }