ajax的核心對像XHR

Ajax：A new Approach to web Applications。

Ajax技術的核心是XMLHttpRequest對象（簡稱XHR),由微軟首先引入。XHR爲向服務器發送請求和解析服務器響應提供了流暢的接口。可以以異步的方式從服務器取得更多的信息。雖然名字中包含了XML。

IE7+，Chrome，Firfox，Opera，safari都支持原生的XHR對象，建立方法：

var xhr=new XMLHttpRequest();

兼容全部瀏覽器的建立辦法（包括IE7如下）

function creatXHR()

{

if ( typeof XMLHttpRequest !="undefined")

   {

       return new XMLHttpRequest();

    }

else if ( typeof ActiveXObject !="undefined" )

  {

  if ( typeof arguments.callee.activeXString!="string")

   {

        var vertion=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],

         i,len;

    for(i=0,len=vertion.length;i<len;i++){

         try{

                  new ActiveXObject(vertion[i]);

                  arguments.callee.activeXString=vertion[i];

                 break;

              }

          catch(ex){

                        / /跳過

                }

         }

    }

  }

}

 var xhr=creatXHR();  //建立

 

 XHR的用法

便用XHR時要調用的第一個方法是open（method,url,false），有3個參數：如：xhr.open("get","example.html",false);

參數1：請求的類型（get、post等）；

參數2：URL地址。末尾的查詢字符串必須經學正確的編碼才行 ；

參數3：是否異步發送請求的布爾值。false是同步javascript會等到收到服務器響應之後再執行；true是異步。

 

注意：只能在同一個域中使用相同端口和協議的URL發送請求。若是URL與啓動請求的頁面有任何差異，都會引起安全錯誤。

 

send（parm）方法發送請求

參數parm：請求主體發送的數據，若是不須要請求主體發送數據時必須傳入null 。

發送請求後，收到服務器的響應後，響應會自動填充XHR的屬性。屬性介紹以下：

• responseText：做爲響應主體被返回的文本；
• responseXML：若是響應的內容類型是「text/xml"或"application/xml"，這個數據中將保存着包含響應數據的XML DOM文檔，非XML數據時屬性爲null。
• status：響應的Http狀態，通常狀態碼是200就能夠作爲成功的標緻，狀態碼304表示請求的數據沒有改變，能夠使用瀏覽器中的緩存版本，也是有效的響應；
• statusText：響應Http狀態的說明。

收到服務器的響應後，第一步是檢查 status 屬性，以肯定響應已經成功返回。

爲了接受到適當的響應能夠檢查如下狀態碼：

var xhr=new XMLHttpRequest();
xhr.open("get,"example/detais",false);
xhr.send(null);
if(xhr.status>=200&&xhr.status<300||xhr.status==304)
{
alert(xhr.responseText);
}
else
{
alert("unsuccessful:"+xhr.status);
}

 

有的瀏覽器會錯誤的報告204狀態代碼。IE中的XHR的ActiveX版本會裝204設置成1223，而IE中的原生XHR則會將204規範化爲200。Opera會在取得204時報告的值爲0。

 

 readyState 屬性

 有的時候爲了不等待，使用異步發送請求。這時能夠檢測readyState 屬性來肯定請求\響應過程的當前活動狀態。

   0：未初始化（未調用open())；

   1：啓動。調用了open(),還未調用send()方法；

   2：發送。發送但未接收到響應；

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

   4：完成。已經接收完響應數據，並且能夠在客戶端使用了。

 只要readyState的屬性值由一個變成另一個值，都會觸發readystatechange事件。

必須在調用open（）方法前指定onReadyStateChange事件處理程序才能確保跨瀏覽器兼容性

 如：

var xhr=creatXHR();
xhr.onreadystatuschange=function(){
if(xhr.readyStatus==4){ //在事件中使用了xhr而非this,緣由是onreadystatuschange趕快件處理程序的做用域問題。若是使用this,在有的瀏覽器中會致使函數執行失敗。

if(xhr.status>=200&&xhr.status<300||xhr.status==403) 
  { 
     alert(xhr.response.Text); 
  }
else 
   { 
   alert("unsuccessful:"+xhr.status); } 
   } 
} 
xhr.open("get","url",false);
xhr.send(null);

XHR的abort()方法取消導步請求。調用這個方法XHR會中止觸發事件，中止後並且不容許訪問任何與響應有關的對象屬性。

 

 

http頭部信息

每一個HTTP請求或者響應都會帶有相應的頭部信息，XHR的請求和響應也帶有相應的。發送XHR請求時會發送相應的頭部信息：

• Accept：瀏覽器可以處理的內容類型；
• Accept-Charset：瀏覽器可以顯示的字符集；
• Accept-Encoding：瀏覽器可以處理的壓縮編碼；
• Accept-Language：瀏覽器當前設置的語言；
• Connection：瀏覽器與服務器以前鏈接的類型；
• Cookie：當前頁面設置的任何cookie；
• Host：發送請求的頁面所在的域；
• Referer：發送請求頁面的URL；
• User-Agent：瀏覽器的用戶代理字符串；

 XHR的setRequestHeader(header,value)方法能夠設置自定義的請求頭部信息，必須在open()方法以後，send()方法以前調用。

• header：頭部字段名稱；
• value：頭部字段值；

 

獲取相應的相應信息：

 getRequestHeader(header)：獲取頭部字段名稱爲header的值；

 getAllRequestHeaders()：獲取全部頭部信息的長字符串；

 

GET請求和POST請求

服務器對post提交請求和提交表單處理不同，能夠用XHR模擬表單提交

將 Content-Type 頭部信息設置爲 application/x-www-form-urlencoded，也就是表單
提交時的內容類型

xhr.open("post","example.php",false");
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");   //XHR模擬表單提交
var form=document.getElementById("formid"); xhr.send(serialize(form));

與get請求相比，post請求消耗的資源更多，從性能上講，發送相同的數據，get請求的速度最多可達到post請求的兩倍。

 

 

XMLHttpRequest 2

var x =new FormData;

x.append("title","hellow");

或

var data=new FormData(document.forms(0));

支持 FormData 的瀏覽器有 Firefox 4+、 Safari 5+、 Chrome 和 Android 3+版 WebKit。