Ajax的使用及其封裝

知道了什麼是ajax，那麼我們來建立乙個ajax：

//建立乙個ajax物件
var xhr = new xmlhttprequest();

上面就是建立出的乙個ajax物件，我們就可以用這個xhr來傳送ajax請求了。

接下來是ajax的請求資訊的配置，ajax請求資訊配置使用open()方法來配置的。open()的引數有三個，第乙個引數是本次資訊的請求方式，一般有「get」、「post」、「put」等方式；第二個引數是本次請求的路徑；第三個是本次請求是否非同步，預設時true，表示非同步，false表示同步。

//配置請求資訊
xhr.open( "get" , "./01_data.php" , true );

接下來就是資訊的傳送，使用send()方法來完成的。

//傳送請求
xhr.send();

乙個最基本的ajax請求就是以上三個步驟，但是只有以上三個步驟我們是拿不到伺服器返回給我們的響應。如果想要拿到響應，必須滿足兩個條件：本次http請求是成功的，也就是http的狀態碼為200-299之間http狀態碼為xhr.status；另外，ajax也有自己的狀態碼用來表示本次請求中的各個階段。ajax狀態碼為readystate

- readystate === 0：表示未初始化完成，也就是open方法還沒有執行

- readystate === 1：表示配置資訊已經完成，也就是執行完open之後

- readystate === 2：表示send方法已經執行完成

- readystate === 3：表示正在解析響應內容

- readystate === 4：表示響應內容已經解析完畢，可以在客戶端使用了

只有readystate為4的時候我們才能使用伺服器給我們的響應資料。

在 ajax 物件中有乙個事件，叫做readystatechang事件，這個事件是專門用來監聽ajax物件readystate值改變的的行，也就是說只要readystat的值發生變化了，那麼就會觸發該事件，所以我們就在這個事件中來監聽ajax的 readystate是不是到4了。

ajax中還有乙個responsetext，就是用來記錄服務端給我們的響應體內容的，所以我們就用這個成員來獲取響應體內容。

xhr.onreadystatechange = function () 
}

接下來我們就來封裝乙個ajax函式以方便我們的使用

function getajax( url , type , collback , data )else

if(type === "get")

if(type === "post")

//配置請求資訊

xhr.open( type , url );

//如果請求型別為post，還需要對請求頭進行設定

//傳送請求，如果請求型別為post，還需要新增請求需要傳送的資料

xhr.send( type=== "get" ? null : data );

//xhr.onreadystatechange = function()$/.test (xhr.status ) ) }}

//判斷傳入的引數是否為物件

function isobject( obj )

//對請求位址和資料進行處理

function tourldata( url , data , type )

//除去第乙個&

str = str.slice(1);

// 如果資料傳送方式是post，那麼直接返回str就可以了;

if( type.touppercase() === "post")

//將位址和資料連線，中間用 ? 連線

url += "?" + str;

return url;

}return url;

}以上就是對ajax的封裝，如有錯誤，敬請指正。

Ajax的使用及其封裝

ajax的基本使用及封裝

ajax的步驟與封裝ajax

Ajax原理及JQuery封裝的使用

Ajax的使用及其封裝

ajax的基本使用及封裝

ajax的步驟與封裝ajax

Ajax原理及JQuery封裝的使用

相關推薦