用原生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)寫(xiě)核心函數(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-10p5.js入門(mén)教程之小球動(dòng)畫(huà)示例代碼
本篇文章主要介紹了p5.js入門(mén)教程之小球動(dòng)畫(huà)示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Typescript的三種運(yùn)行方式(小結(jié))
這篇文章主要介紹了Typescript的三種運(yùn)行方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09JavaScript中字符串與Unicode編碼互相轉(zhuǎn)換的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript中字符串與Unicode編碼互相轉(zhuǎn)換的實(shí)現(xiàn)方法涉及JavaScript編碼、數(shù)據(jù)類(lèi)型等的轉(zhuǎn)換技巧,需要的朋友可以參考下2015-12-12JavaScript對(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-03JavaScript實(shí)現(xiàn)隨機(jī)碼的生成與校驗(yàn)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)碼的生成與校驗(yàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04IE autocomplete internet explorer''s autocomplete
IE autocomplete internet explorer''s autocomplete...2007-06-06js中textContent、innerText和innerHTML的用法以及區(qū)別
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下2023-05-05