最近的工作中涉及到大量的ajax操作,本來該後台做的事也要我來做了.而現在使用的ajax函數是一個後台人員封裝的—-但他又是基於jquery的ajax,所以離開了jquery這個函數就毫無作用了.而且我覺得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那麼他的ajax就不用白不用了.我缺少的是一個能在沒有jquery的情況下使用的ajax方法.
所以我也花一天時間寫了一個,參數與調用方法類似於jquery的ajax.就叫xhr吧,因為xhr=XMLHttpRequest.
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方法,否則會出現新的同步請求會執行兩次成功回呼(chrome等在同步請求時也會執行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);}
}();
參數說明:
1.url:請求地址.可以不填,請求就不會發起,但如果不填又強行send,出了錯不怪我
2.method: ‘GET'或'POST',全大寫,預設GET
3.data: 要附帶發送的資料,格式是一個object
4.async: 是否非同步,預設true
5.type: 傳回的資料類型,只有responseText或responseXML,預設responseText
6.complete: 請求完成時執行的函數
7.success: 請求成功時執行的函數
8.error: 請求失敗時執行的函數
註:其中的type參數,並沒有jquery的dataType那麼豐富,只有原生AJAX有的responseText或responseXML.要是返回的是json數據,你需要在success函數中自己處理一下把text轉成json.
函數說明:
一個實例化的xhr物件有兩個函數可使用,一個是send,呼叫方法是:xhr.send(),無參數,其作用是發起請求過程.如果初始化時沒有url,則不會執行send方法,這樣你就可以在後面再加入url,並手動發起send—-如果send的時候沒有url,那麼請求會失敗並且我沒有處理這個錯誤,出了錯只有你自己找了.
另一個方法是setData,呼叫方法是xhr.setData(data_obj),其參數是一個object. setData方法的作用是局部替換xhr的data屬性裡的值,比如xhr.data中已有一個page: 1,你可以用xhr.setData({page:2})來更新他的值,而不影響data中已存在的其他屬性值.
呼叫方法:
特色介紹:
經過這段時間的專案經驗,我發現一個ajax類應該具有一個很常見的特色:便於重複發起請求.比如專案中我寫分頁ajax的時候,每次翻頁都要發送請求,但發送的資料中除了目前頁碼和每頁條數,其他的都是不會改變的.如果多次這樣的請求,都要重複定義那些不變的參數,無疑是種資源浪費.
所以這個xhr函數,就已經考慮了這個功能.還是拿分頁的例子來說,我們可以在頁面加載完成的時候就初始化一個xhr對象,保存為變量a1,當發起翻頁請求時,其他的什麼參數都沒變,但pageNumber變了,此時就可以呼叫xhr的setData方法,把pageNumber改掉.
註:setData的參數也是一個object.
當然,你也可以把data全盤替換:
a1.data = {…};
不只是data,你可以對a1這個已經實例化的xhr物件進行更多的更改,比如換掉url,換掉success函數,GET換成POST,同步換成異步…換完之後,再調用a1.send()方法,他就會按你的設定再次發起請求了.
當然,如果是完全不相關的另一個ajax請求,就沒有必要硬要用這個現成的a1了.我們可以再實例化一個xhr,叫a2什麼的.
如果你對xhr這個名字不滿意,那就只有自己改掉了.
另外提供壓縮加密版.未壓縮版去掉註解大概2kb,壓縮版1.00kb.
xhr肯定有不完善的地方,以後使用中如果發現了,我會及時修正的.如果你用得不爽或發現不足,也請不吝提出改進意見.
