第110天 Ajax原生js封裝函式

2021-09-20 09:10:43 字數 1501 閱讀 4356

1


//建立ajax物件


連線伺服器open(方法get/post，請求位址， 非同步傳輸)


xhr.open('get', 'data.txt', true);

//


傳送請求


xhr.send();

1


//處理返回資料2/*


3** 每當readystate改變時，就會觸發onreadystatechange事件


4** readystate屬性儲存有xmlhttprequest的狀態資訊


5** 0 ：請求未初始化


6** 1 ：伺服器連線已建立


7** 2 ：請求已接受


8** 3 : 請求處理中


9** 4 ：請求已完成，且相應就緒


10*/


11 xhr.onreadystatechange= function


() else27}


28}29 }

1


function


ajax(type,url,data,success,failed) else910


var type =type.touppercase();


11//


用於清除快取


12var random =math.random();


1314


if(typeof


data== 'object')


19 data = str.replace(/&$/, '');20}


2122


if(type== 'get') else


28xhr.send();


2930 } else


if(type == 'post')


3637


//處理返回資料


38 xhr.onreadystatechange= function


() else46}


47}48}


49}5051


//測試呼叫


52var senddata = ;


53 ajax('get', 'data/data.html', senddata, function


(data), function


(error));

原生JS封裝AJAX

今天我們來說說利用原生js封裝ajax.jquery框架的ajax方法確實很好用,但有時候我們寫的頁面需要引入多個js外掛程式,不一定哪個外掛程式就會和jquery發生衝突,導致jquery用不了了.或者頁面比較簡單,不需要加重瀏覽器的負擔,這時我們自己封裝乙個ajax就是乙個很好的辦法.將資料轉換...

js 原生ajax 封裝函式

1 開啟伺服器wampserver 2 將檔案放置在wampserver的www資料夾下 3 開啟時網頁位址列為localhost www下的位址。eg http localhost myworld 5.19ajax index.html?hbt 1495158145298 4 呼叫方式 函式為 a...

原生js實現Ajax的封裝

1.封裝函式function ajax options options.type options.type get touppercase options.datatype options.datatype json options.async options.async true var para...