用原生JS對AJAX做簡單封裝的實例代碼
首先,我們需要xhr對象。這對我們來說不難,封裝成一個函數(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,請更換!"); } } return xhr; };
然后,我們來寫核心函數(shù)。
var ajax = function(conf) { // 初始化 //type參數(shù),可選 var type = conf.type; //url參數(shù),必填 var url = conf.url; //data參數(shù)可選,只有在post請求時需要 var data = conf.data; //datatype參數(shù)可選 var dataType = conf.dataType; //回調(diào)函數(shù)可選 var success = conf.success; if (type == null){ //type參數(shù)可選,默認為get type = "get"; } if (dataType == null){ //dataType參數(shù)可選,默認為text dataType = "text"; } // 創(chuàng)建ajax引擎對象 var xhr = createAjax(); // 打開 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對象 success(eval("("+xhr.responseText+")")); } } } }; };
最后,說明一下此函數(shù)的用法。
ajax({ type:"post", url:"test.jsp", data:"name=dipoo&info=good", dataType:"json", success:function(data){ alert(data.name); } });
以上這篇用原生JS對AJAX做簡單封裝的實例代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Ajax+FormData+javascript實現(xiàn)無刷新表單信息提交
在前端開發(fā)中ajax,formdata和js實現(xiàn)無刷新表單信息提交非常棒,接下來通過本文給大家介紹Ajax+FormData+javascript實現(xiàn)無刷新表單信息提交的相關(guān)資料,需要的朋友可以參考下2016-10-10JavaScript中字符串與Unicode編碼互相轉(zhuǎn)換的實現(xiàn)方法
這篇文章主要介紹了JavaScript中字符串與Unicode編碼互相轉(zhuǎn)換的實現(xiàn)方法涉及JavaScript編碼、數(shù)據(jù)類型等的轉(zhuǎn)換技巧,需要的朋友可以參考下2015-12-12利用js查找數(shù)組中指定元素并返回該元素的所有索引示例
在js數(shù)組中查找特定的元素相信對大家來說再熟悉不過了,但越簡單的東西越可能出錯,小編最近就犯了這樣的錯誤,所以想著干脆將實現(xiàn)的代碼整理下來,方便自己以后需要的時候,或者有需要的朋友們參考學(xué)習(xí),下面來一起看看吧。2017-03-03IE 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