原生js實現Ajax的封裝

1.封裝函式

function

ajax
(options)
; options.type =
(options.type ||
"get").
touppercase()
; options.datatype = options.datatype ||
"json"
; options.
async
=options.
async
||true
;var params =
formatparams
(options.data)
;var xhr;
//第一步 - 建立
//第三步 - 接收
xhr.
onreadystatechange
=function()
else}}
// 第二步 -連線 和 傳送
if(options.type ==
"get"
)else
if(options.type ==
"post"
)//格式化引數
//將格式
//先變成【user=username,pass=password】
//最後變成"user=username&pass=password"
function
formatparams
(data)
return arr.
join
("&");
}}

ajax(,

datatype:
'json'
, success:
function
(data)
,//異常處理
error:
function
(err)
})

原生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方法

封裝好的函式 建立乙個ajax物件 function createxhr else 資料轉換函式 function transform data 用join方法把陣列拆開以 符號分割 return attr.join function ajax data 如果是一部載入的話那麼必須驗證readyst...