封裝乙個自己的通用Ajax

2022-06-28 10:39:12 字數 2625 閱讀 7031

首先在封裝乙個自己的ajax函式之前,我們需要先知道怎麼實現乙個簡單的ajax請求。

這裡我建了兩個檔案,ajax01.html和ajax01.php

ajax01.html**:

點選上面的按鈕,我會變哦

可以看到使用ajax發請求並獲取響應資料只需要簡單的4步

引數說明:

xhr.status------------------------status :響應的 http 狀態,200表示響應成功

xhr.readystate-----------------readystate該屬性表示請求/響應過程的當前活動階段,這個屬性可取的值如下:

0 :未初始化。尚未呼叫 open() 方法。

1 :啟動。已經呼叫 open() 方法,但尚未呼叫 send() 方法。

2 :傳送。已經呼叫 send() 方法,但尚未接收到響應。

3 :接收。已經接收到部分響應資料。

4 :完成。已經接收到全部響應資料,而且已經可以在客戶端使用了。

xhr.onreadystatechange----------------------readystate屬性狀態變化事件,只要 readystate 屬性的值由乙個值變成另乙個值,都會觸發一次 readystatechange 事件。可以利用這個事件來檢測每次狀態變化後 readystate 的值。

xhr.responsetext---------------------------------responsetext :作為響應主體被返回的文字。

頭部資訊設定的設定一定要在open()方法之後,send方法之前,**如下:

//初始化請求

xhr.open('post','ajax01.php',true);

//如果是post請求,需要設定這個請求頭

//傳送請求,如果還要傳送資料,將資料傳入send方法中

xhr.send('name=張三&age=16');

如果還要傳送資料,把資料傳入send()中

ajax01.php中的**如下:

<?php 

if(empty($_post))else

?>

好了,在知道了如何使用ajax發起乙個簡單的請求後,我們現在可以來動手封裝乙個自己的通用ajax函式了

封裝自己的通用ajax函式

閒話少說,我們直接上**吧

/*

*封裝乙個自己的ajax函式

*有5個引數,最後乙個引數可選

** @param method(必選) 請求型別 get 和 post

* @param url(必選) 請求的url位址 相同網域名稱下的頁面(此函式不支援跨域請求)

* @param data(必選) 請求協帶的資料 以js物件的形式定義,如:

* @param callback(必選) **函式,可接收乙個引數,這個引數就是伺服器響應的資料

* @param type(可選) 指定伺服器響應的資料型別(可選值:json,xml,text),如果是json模式,則使用json解析資料,預設為text普通字串

*/function myajax(method,url,data,callback,type)else

//給請求新增狀態變化事件處理函式

xhr.onreadystatechange = function ()else if(type=='xml')else

//呼叫**函式,並將響應資料傳入**函式

callback(res);}};

//判斷data是否有資料

var param = '';

//這裡使用stringify方法將js物件格式化為json字串

if(json.stringify(data) != '{}')

//使用slice函式提取一部分字串,這裡主要是為了去除拼接的最後乙個&字元

//slice函式:返回乙個新的字串。包括字串從 start 開始(包括 start)到 end 結束(不包括 end)為止的所有字元。

param = param.slice(0,param.length-1);

}//判斷method是否為get

if(method == "get")

//初始化請求

xhr.open(method,url,true);

//如果method == post

if(method == "post")else

}

封裝好了我們自己的ajax函式後,我們就來使用這個函式發起乙個請求吧

點選上面的按鈕,我會變哦

效果如下圖:

這裡我們封裝好的ajax函式就能正常使用了,比使用原生js要寫那麼多**方便多了,現在我們只要簡單的呼叫這個ajax函式就可以方便的傳送請求了。

自己封裝的ajax

itcast web created by lsy on 2016 5 24.1.請求的型別 type get post 2.請求位址 url 3.是非同步的還是同步的 async false true 4.請求內容的格式 contenttype 5.傳輸的資料 data json物件 6.響應成功...

封裝乙個Ajax工具函式

封裝乙個ajax工具函式 window.通過 定義乙個ajax函式 1.type string 請求的方式 預設是get 2.url string 請求位址 介面位址 3.async boolean 預設的是true 4.data object 請求資料 5.success function 成功 ...

自己封裝的乙個GridView控制項

效果如圖 使用方法 void viewdidload cgfloat gridview mygridview gridview heightofrow nsinteger row nsinteger numberofgridview mygridview gridview void gridview...