用原生JS對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼
首先,我們需要xhr對(duì)象。這對(duì)我們來(lái)說(shuō)不難,封裝成一個(gè)函數(shù)。
var createAjax = function() { var xhr = null; try { //IE系列瀏覽器 xhr = new ActiveXObject("microsoft.xmlhttp");
} catch (e1) { try { //非IE瀏覽器 xhr = new XMLHttpRequest();
} catch (e2) { window.alert("您的瀏覽器不支持ajax,請(qǐng)更換!");
}
} return xhr;
};
然后,我們來(lái)寫核心函數(shù)。
var ajax = function(conf) { // 初始化 //type參數(shù),可選 var type = conf.type; //url參數(shù),必填 var url = conf.url; //data參數(shù)可選,只有在post請(qǐng)求時(shí)需要 var data = conf.data; //datatype參數(shù)可選 var dataType = conf.dataType; //回調(diào)函數(shù)可選 var success = conf.success; if (type == null){ //type參數(shù)可選,默認(rèn)為get type = "get";
} if (dataType == null){ //dataType參數(shù)可選,默認(rèn)為text dataType = "text";
} // 創(chuàng)建ajax引擎對(duì)象 var xhr = createAjax(); // 打開(kāi) xhr.open(type, url, true); // 發(fā)送 if (type == "GET" || type == "get") {
xhr.send(null);
} else if (type == "POST" || type == "post") {
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { if(dataType == "text"||dataType=="TEXT") { if (success != null){ //普通文本 success(xhr.responseText);
}
}else if(dataType=="xml"||dataType=="XML") { if (success != null){ //接收xml文檔 success(xhr.responseXML);
}
}else if(dataType=="json"||dataType=="JSON") { if (success != null){ //將json字符串轉(zhuǎn)換為js對(duì)象 success(eval("("+xhr.responseText+")"));
}
}
}
};
};
最后,說(shuō)明一下此函數(shù)的用法。
ajax({ type:"post",
url:"test.jsp",
data:"name=dipoo&info=good",
dataType:"json",
success:function(data){ alert(data.name); } });
以上這篇用原生JS對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Ajax+FormData+javascript實(shí)現(xiàn)無(wú)刷新表單信息提交
在前端開(kāi)發(fā)中ajax,formdata和js實(shí)現(xiàn)無(wú)刷新表單信息提交非常棒,接下來(lái)通過(guò)本文給大家介紹Ajax+FormData+javascript實(shí)現(xiàn)無(wú)刷新表單信息提交的相關(guān)資料,需要的朋友可以參考下2016-10-10
Typescript的三種運(yùn)行方式(小結(jié))
這篇文章主要介紹了Typescript的三種運(yùn)行方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JavaScript中字符串與Unicode編碼互相轉(zhuǎn)換的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript中字符串與Unicode編碼互相轉(zhuǎn)換的實(shí)現(xiàn)方法涉及JavaScript編碼、數(shù)據(jù)類型等的轉(zhuǎn)換技巧,需要的朋友可以參考下2015-12-12
JavaScript對(duì)數(shù)字的判斷與處理實(shí)例分析
這篇文章主要介紹了JavaScript對(duì)數(shù)字的判斷與處理方法,實(shí)例分析了javascript判斷數(shù)字的常見(jiàn)方法與針對(duì)數(shù)字處理的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
利用js查找數(shù)組中指定元素并返回該元素的所有索引示例
在js數(shù)組中查找特定的元素相信對(duì)大家來(lái)說(shuō)再熟悉不過(guò)了,但越簡(jiǎn)單的東西越可能出錯(cuò),小編最近就犯了這樣的錯(cuò)誤,所以想著干脆將實(shí)現(xiàn)的代碼整理下來(lái),方便自己以后需要的時(shí)候,或者有需要的朋友們參考學(xué)習(xí),下面來(lái)一起看看吧。2017-03-03
JavaScript實(shí)現(xiàn)隨機(jī)碼的生成與校驗(yàn)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)碼的生成與校驗(yàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
IE autocomplete internet explorer''s autocomplete
IE autocomplete internet explorer''s autocomplete...2007-06-06
js中textContent、innerText和innerHTML的用法以及區(qū)別
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下2023-05-05

