原生Javascript封裝的一個(gè)AJAX函數(shù)分享
最近的工作中涉及到大量的ajax操作,本來該后臺(tái)做的事也要我來做了.而現(xiàn)在使用的ajax函數(shù)是一個(gè)后臺(tái)人員封裝的—-但他又是基于jquery的ajax,所以離開了jquery這個(gè)函數(shù)就毫無作用了.而且我覺得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一個(gè)能在沒有jquery的情況下使用的ajax方法.
所以我也花一天時(shí)間寫了一個(gè),參數(shù)與調(diào)用方法類似于jquery的ajax.就叫xhr吧,因?yàn)閤hr=XMLHttpRequest.
/*
* Name: xhr,AJAX封裝函數(shù)
* Description: 一個(gè)ajax調(diào)用封裝類,仿jquery的ajax調(diào)用方式
* Author:十年燈
*/
var xhr = function () {
var
ajax = function () {
return ('XMLHttpRequest' in window) ? function () {
return new XMLHttpRequest();
} : function () {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}(),
formatData= function (fd) {
var res = '';
for(var f in fd) {
res += f+'='+fd[f]+'&';
}
return res.slice(0,-1);
},
AJAX = function(ops) {
var
root = this,
req = ajax();
root.url = ops.url;
root.type = ops.type || 'responseText';
root.method = ops.method || 'GET';
root.async = ops.async || true;
root.data = ops.data || {};
root.complete = ops.complete || function () {};
root.success = ops.success || function(){};
root.error = ops.error || function (s) { alert(root.url+'->status:'+s+'error!')};
root.abort = req.abort;
root.setData = function (data) {
for(var d in data) {
root.data[d] = data[d];
}
}
root.send = function () {
var datastring = formatData(root.data),
sendstring,get = false,
async = root.async,
complete = root.complete,
method = root.method,
type=root.type;
if(method === 'GET') {
root.url+='?'+datastring;
get = true;
}
req.open(method,root.url,async);
if(!get) {
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
sendstring = datastring;
}
//在send之前重置onreadystatechange方法,否則會(huì)出現(xiàn)新的同步請(qǐng)求會(huì)執(zhí)行兩次成功回調(diào)(chrome等在同步請(qǐng)求時(shí)也會(huì)執(zhí)行onreadystatechange)
req.onreadystatechange = async ? function () {
// console.log('async true');
if (req.readyState ==4){
complete();
if(req.status == 200) {
root.success(req[type]);
} else {
root.error(req.status);
}
}
} : null;
req.send(sendstring);
if(!async) {
//console.log('async false');
complete();
root.success(req[type]);
}
}
root.url && root.send();
};
return function(ops) {return new AJAX(ops);}
}();
參數(shù)說明:
1.url:請(qǐng)求地址.可以不填,請(qǐng)求就不會(huì)發(fā)起,但如果不填又強(qiáng)行send,出了錯(cuò)不怪我
2.method: ‘GET'或'POST',全大寫,默認(rèn)GET
3.data: 要附帶發(fā)送的數(shù)據(jù),格式是一個(gè)object
4.async: 是否異步,默認(rèn)true
5.type: 返回的數(shù)據(jù)類型,只有responseText或responseXML,默認(rèn)responseText
6.complete: 請(qǐng)求完成時(shí)執(zhí)行的函數(shù)
7.success: 請(qǐng)求成功時(shí)執(zhí)行的函數(shù)
8.error: 請(qǐng)求失敗時(shí)執(zhí)行的函數(shù)
注:其中的type參數(shù),并沒有jquery的dataType那么豐富,只有原生AJAX有的responseText或responseXML.要是返回的是json數(shù)據(jù),你需要在success函數(shù)中自己處理一下把text轉(zhuǎn)成json.
函數(shù)說明:
一個(gè)實(shí)例化的xhr對(duì)象有兩個(gè)函數(shù)可使用,一個(gè)是send,調(diào)用方法是:xhr.send(),無參數(shù),其作用是發(fā)起請(qǐng)求過程.如果初始化時(shí)沒有url,則不會(huì)執(zhí)行send方法,這樣你就可以在后面再加入url,并手動(dòng)發(fā)起send—-如果send的時(shí)候沒有url,那么請(qǐng)求會(huì)失敗并且我沒有處理這個(gè)錯(cuò)誤,出了錯(cuò)只有你自己找了.
另一個(gè)方法是setData,調(diào)用方法是xhr.setData(data_obj),其參數(shù)是一個(gè)object. setData方法的作用是局部替換xhr的data屬性里的值,比如xhr.data中已有一個(gè)page:1,你可以用xhr.setData({page:2})來更新他的值,而不影響data中已存在的其他屬性值.
調(diào)用方法:
var a1 = xhr({
url:'2.php',
data:{
'username':'lix',
'password':'123456',
'gender':'male',
'interset':'play'
},
async:false,
method:'GET',
success: function (data) {
var obj = JSON.parse(data);
//....
}
});
注:不用寫new
特色介紹:
經(jīng)過這段時(shí)間的項(xiàng)目經(jīng)驗(yàn),我發(fā)現(xiàn)一個(gè)ajax類應(yīng)該具有一個(gè)很常見的特色:便于重復(fù)發(fā)起請(qǐng)求.比如項(xiàng)目中我寫分頁ajax的時(shí)候,每次翻頁都要發(fā)送請(qǐng)求,但發(fā)送的數(shù)據(jù)中除了當(dāng)前頁碼和每頁條數(shù),其他的都是不會(huì)改變的.如果多次這樣的請(qǐng)求,都要重復(fù)定義那些不變的參數(shù),無疑是種資源浪費(fèi).
所以這個(gè)xhr函數(shù),就已經(jīng)考慮了這個(gè)功能.還是拿分頁的例子來說,我們可以在頁面加載完成的時(shí)候就初始化一個(gè)xhr對(duì)象,保存為變量a1,當(dāng)發(fā)起翻頁請(qǐng)求時(shí),其他的什么參數(shù)都沒變,但pageNumber變了,此時(shí)就可以調(diào)用xhr的setData方法,把pageNumber改掉.
a1.setData({pageNumber:2});
注:setData的參數(shù)也是一個(gè)object.
當(dāng)然,你也可以把data全盤替換:
a1.data = {…};
不只是data,你可以對(duì)a1這個(gè)已經(jīng)實(shí)例化的xhr對(duì)象進(jìn)行更多的更改,比如換掉url,換掉success函數(shù),GET換成POST,同步換成異步…換完之后,再調(diào)用a1.send()方法,他就會(huì)按你的設(shè)置再次發(fā)起請(qǐng)求了.
當(dāng)然,如果是完全不相關(guān)的另一個(gè)ajax請(qǐng)求,就沒有必要硬要用這個(gè)現(xiàn)成的a1了.我們可以再實(shí)例化一個(gè)xhr,叫a2什么的.
如果你對(duì)xhr這個(gè)名字不滿意,那就只有自己改掉了.
另外提供壓縮加密版.未壓縮版去掉注釋大概2kb,壓縮版1.00kb.
var xhr=function(){var e=function(){return"XMLHttpRequest"in window?function(){return new XMLHttpRequest}:function(){return new ActiveXObject("Microsoft.XMLHTTP")}}(),t=function(e){var t="";for(var n in e){t+=n+"="+e[n]+"&"}return t.slice(0,-1)},n=function(n){var r=this,i=e();r.url=n.url;r.type=n.type||"responseText";r.method=n.method||"GET";r.async=n.async||true;r.data=n.data||{};r.complete=n.complete||function(){};r.success=n.success||function(){};r.error=n.error||function(e){alert(r.url+"->status:"+e+"error!")};r.abort=i.abort;r.setData=function(e){for(var t in e){r.data[t]=e[t]}};r.send=function(){var e=t(r.data),n,s=false,o=r.async,u=r.complete,a=r.method,f=r.type;if(a==="GET"){r.url+="?"+e;s=true}i.open(a,r.url,o);if(!s){i.setRequestHeader("Content-type","application/x-www-form-urlencoded");n=e}i.onreadystatechange=o?function(){if(i.readyState==4){u();if(i.status==200){r.success(i[f])}else{r.error(i.status)}}}:null;i.send(n);if(!o){u();r.success(i[f])}};r.url&&r.send()};return function(e){return new n(e)}}()
xhr肯定有不完善的地方,以后使用中如果發(fā)現(xiàn)了,我會(huì)及時(shí)修正的.如果你用得不爽或發(fā)現(xiàn)不足,也請(qǐng)不吝提出改進(jìn)意見.
- 一個(gè)AJAX自動(dòng)完成功能的js封裝源碼[支持中文]
- js實(shí)現(xiàn)對(duì)ajax請(qǐng)求面向?qū)ο蟮姆庋b
- 原生JS封裝ajax 傳json,str,excel文件上傳提交表單(推薦)
- JavaScript 封裝Ajax傳遞的數(shù)據(jù)代碼
- 淺析jQuery Ajax通用js封裝
- js鎖屏解屏通過對(duì)$.ajax進(jìn)行封裝實(shí)現(xiàn)
- js原生Ajax的封裝和原理詳解
- 使用原生js封裝的ajax實(shí)例(兼容jsonp)
- 純js封裝的ajax功能函數(shù)與用法示例
- 原生javascript實(shí)現(xiàn)的ajax異步封裝功能示例
- 原生js封裝的ajax方法示例
相關(guān)文章
javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法分析
這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法,簡單講述了串的概念、功能并結(jié)合實(shí)例形式分析了基于javascript實(shí)現(xiàn)串的遍歷、比較、查找等相關(guān)操作技巧,需要的朋友可以參考下2017-04-04JavaScript 中有關(guān)數(shù)組對(duì)象的方法(詳解)
下面小編就為大家?guī)硪黄狫avaScript 中有關(guān)數(shù)組對(duì)象的方法(詳解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08javascript getBoundingClientRect() 來獲取頁面元素的位置的代碼[修正版]
該方法已經(jīng)不再是IE Only了,F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法,可以說在獲得頁面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必須通過循環(huán)來獲得元素在頁面中的絕對(duì)位置。2009-05-05javascript 限制輸入和粘貼(IE,firefox測(cè)試通過)
javascript 限制輸入和粘貼 IE和火狐2.x、火狐3.x下測(cè)試通過2008-11-11推薦4個(gè)原生javascript常用的函數(shù)
這篇文章主要介紹了推薦4個(gè)原生javascript常用的函數(shù),需要的朋友可以參考下2015-01-01javascript 函數(shù)限制調(diào)用代碼
javascript 函數(shù)限制調(diào)用代碼,需要的朋友可以參考下。2010-05-05詳解CocosCreator項(xiàng)目結(jié)構(gòu)機(jī)制
這篇文章主要介紹了詳解CocosCreator項(xiàng)目結(jié)構(gòu)機(jī)制,只有了解這些機(jī)制后,才能更好的進(jìn)行項(xiàng)目開發(fā),避免潛在錯(cuò)誤,并且快速的除錯(cuò)2021-04-04JavaScript+Html5實(shí)現(xiàn)按鈕復(fù)制文字到剪切板功能(手機(jī)網(wǎng)頁兼容)
在學(xué)習(xí)javascript的過程中,遇到一個(gè)問題就是基于JavaScript+Html5實(shí)現(xiàn)按鈕復(fù)制文字到剪切板功能,下面小編給大家分享下我的實(shí)現(xiàn)思路,感興趣的朋友可以參考下2017-03-03js實(shí)現(xiàn)select組件的選擇輸入過濾代碼
如何實(shí)現(xiàn)select組件的選擇輸入過濾作用,下面有一段js代碼,很實(shí)用,需要的朋友可以看看2014-10-10