對與原生ajax的封裝，依然需要遵循請求的四個步驟：
1) 建立xmlhttprequest物件;
2) 監聽onreadstatechange函式;
3) 使用open函式新增引數;
4) 使用send函式傳送請求；
首先，封裝建立xhr的函式
1/**2* createxhr()
3* 建立xhr相容物件4*/
5function
createxhr() else
if (typeof activexobject !== 'undefined') catch
(e) 20}
21 } else
24 }
封裝資料處理函式
1/**2* params(data)
3* 處理資料，ajax以引數的形式傳遞資料
4* @ param data 物件形式的資料來源
5* @ return string 處理完成的資料，字串6*/
7function
params(data)
12return arr.join("&");
13 }
開封裝aja函式
1/**2* my_ajax(obj)
3* 原生封裝的ajax函式
4* @ param obj 呼叫數需要傳入的一系列引數，如：url，data等
5* @ return null6*/
7function
my_ajax(obj)
14//
非同步15
if(obj.async === true)22
}23}24 xhr.open(obj.method,obj.url,obj.async); //
false是同步 true是非同步 // "demo.php?rand="+math.random()+"&name=ga&ga",
25if(obj.method === "post")else
31//
xhr.abort(); // 取消非同步請求
32//
同步33
if(obj.async === false)36
//返回資料
37function
callback()else44}
45 }
至此，整個與原生的ajax就已經等裝好了，下面呼叫以下：
1//呼叫自己等裝好的my_ajax函式2//
當點選頁面時，請求就會發出去；
3var html = document.getelementsbytagname("html")[0];
4 html.onclick = function
(),13 "success" : function
(data),
16 "error" : function
(text),
19 "async" : true
//是否非同步
20});
21 }
js 原生ajax 封裝函式
1 開啟伺服器wampserver 2 將檔案放置在wampserver的www資料夾下 3 開啟時網頁位址列為localhost www下的位址。eg http localhost myworld 5.19ajax index.html?hbt 1495158145298 4 呼叫方式 函式為 a...
原生JS封裝AJAX
今天我們來說說利用原生js封裝ajax.jquery框架的ajax方法確實很好用,但有時候我們寫的頁面需要引入多個js外掛程式,不一定哪個外掛程式就會和jquery發生衝突,導致jquery用不了了.或者頁面比較簡單,不需要加重瀏覽器的負擔,這時我們自己封裝乙個ajax就是乙個很好的辦法.將資料轉換...
原生ajax解析 封裝原生ajax函式
前沿 對於此篇隨筆，完是簡要寫了幾個重要的地方，具體實現細節完在提供的原始碼做了筆記 一 ajax基本要點介紹 更好的介紹ajax 1.ajax物件中new xmlhttprequest 屬性和方法列表 2.常用事件介紹 事件觸發時機 onreadystatechange 當readystate的值...