原生JS寫Ajax的請求函式

ajax：一種請求資料的方式，不需要重新整理整個頁面；

ajax的技術核心是 xmlhttprequest 物件；

ajax 請求過程：建立 xmlhttprequest 物件、連線伺服器、傳送請求、接收響應資料；·

下面簡單封裝乙個函式，之後稍作解釋

ajax(,        //請求引數
datatype: "json",
success: function (response, xml) ,
fail: function (status) 
});function ajax(options) ;
options.type = (options.type || "get").touppercase();
options.datatype = options.datatype || "json";
var params = formatparams(options.data);
//建立 - 非ie6 - 第一步
//接收 - 第三步
xhr.onreadystatechange = function () else }}
//連線 和 傳送 - 第二步
if (options.type == "get") else if (options.type == "post") 
}//格式化引數
function formatparams(data) 
arr.push(("v=" + math.random()).replace(".",""));
return arr.join("&");
}

1、建立·

1.1、ie7及其以上版本中支援原生的 xhr 物件，因此可以直接用： var oajax = new xmlhttprequest();

1.2、ie6及其之前的版本中，xhr物件是通過msxml庫中的乙個activex物件實現的。有的書中細化了ie中此類物件的三種不同版本，即msxml2.xmlhttp、msxml2.xmlhttp.3.0 和 msxml2.xmlhttp.6.0；個人感覺太麻煩，可以直接使用下面的語句建立： var oajax=new activexobject(』microsoft.xmlhttp』);

2、連線和傳送

2.2、get 請求方式是通過url引數將資料提交到伺服器的，post則是通過將資料作為 send 的引數提交到伺服器；

2.3、post 請求中，在傳送資料之前，要設定表單提交的內容型別；

2.4、提交到伺服器的引數必須經過 encodeuricomponent() 方法進行編碼，實際上在引數列表」key=value」的形式中，key 和 value 都需要進行編碼，因為會包含特殊字元。每次請求的時候都會在引數列表中拼入乙個「v=xx」的字串，這樣是為了拒絕快取，每次都直接請求到伺服器上。

encodeuri() ：用於整個 uri 的編碼，不會對本身屬於 uri 的特殊字元進行編碼，如冒號、正斜槓、問號和井號；其對應的解碼函式 decodeuri()；

encodeuricomponent() ：用於對 uri 中的某一部分進行編碼，會對它發現的任何非標準字元進行編碼；其對應的解碼函式 decodeuricomponent()；

3、接收

狀態碼；

statustext：http狀態的說明；

3.2、xhr物件的readystate屬性表示請求/響應過程的當前活動階段，這個屬性的值如下

0-未初始化，尚未呼叫open()方法；

1-啟動，呼叫了open()方法，未呼叫send()方法；

2-傳送，已經呼叫了send()方法，未接收到響應；

3-接收，已經接收到部分響應資料；

4-完成，已經接收到全部響應資料；

只要 readystate 的值變化，就會呼叫 readystatechange 事件，(其實為了邏輯上通順，可以把readystatechange放到send之後，因為send時請求伺服器，會進行網路通訊，需要時間，在send之後指定readystatechange事件處理程式也是可以的，我一般都是這樣用，但為了規範和跨瀏覽器相容性，還是在open之前進行指定吧)。

3.3、在readystatechange事件中，先判斷響應是否接收完成，然後判斷伺服器是否成功處理請求，xhr.status 是狀態碼，狀態碼以2開頭的都是成功，304表示從快取中獲取，上面的**

在每次請求的時候都加入了隨機數，所以不會從快取中取值，故該狀態不需判斷。

4、ajax請求是不能跨域的！

原生JS寫Ajax的請求函式

原生JS寫Ajax的請求函式

js原生ajax請求

原生js的ajax請求

原生JS寫Ajax的請求函式

原生JS寫Ajax的請求函式

js原生ajax請求

原生js的ajax請求

相關推薦