原生JS寫Ajax的請(qǐng)求函數(shù)功能
一般我們寫網(wǎng)頁的時(shí)候,如果用到 Ajax 請(qǐng)求服務(wù)器,都是使用 JQuery 等已經(jīng)封裝好的庫來調(diào)用,比較簡(jiǎn)單。
但是一般這些庫的功能很多,引入了太多我們用不到的東西,如果我們需要寫一個(gè)功能單一,簡(jiǎn)單的頁面,完全用不到引用如此龐大的庫文件。
我們可以簡(jiǎn)單實(shí)現(xiàn)一個(gè)自己的 Ajax 請(qǐng)求功能,具體的代碼如下:
var ajax = {};
ajax.x = function () {
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest();
}
var versions = [
"MSXML2.XmlHttp.6.0",
"MSXML2.XmlHttp.5.0",
"MSXML2.XmlHttp.4.0",
"MSXML2.XmlHttp.3.0",
"MSXML2.XmlHttp.2.0",
"Microsoft.XmlHttp"
];
var xhr;
for (var i = 0; i < versions.length; i++) {
try {
xhr = new ActiveXObject(versions[i]);
break;
} catch (e) {
}
}
return xhr;
};
ajax.send = function (url, method, data, success,fail,async) {
if (async === undefined) {
async = true;
}
var x = ajax.x();
x.open(method, url, async);
x.onreadystatechange = function () {
if (x.readyState == 4) {
var status = x.status;
if (status >= 200 && status < 300) {
success && success(x.responseText,x.responseXML)
} else {
fail && fail(status);
}
}
};
if (method == 'POST') {
x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
x.send(data)
};
ajax.get = function (url, data, callback, fail, async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, callback, fail, async)
};
ajax.post = function (url, data, callback, fail, async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url,'POST', query.join('&'), callback, fail, async)
};
使用方法: GET
ajax.get('/test.php', {foo: 'bar'}, function(response,xml) {
//success
},
function(status){
//fail
});
POST
ajax.post('/test.php', {foo: 'bar'}, function(response,xml) {
//succcess
},function(status){
//fail
});
這里需要注意一個(gè)問題,如果我們想要發(fā)送類似
var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd;
ajax.post('/control' + sendCmd,'',function(response,xml) {
console.log('success');
},
function(status){
console.log('failed:' + status);
});
總結(jié)
以上所述是小編給大家介紹的原生JS寫Ajax的請(qǐng)求函數(shù)功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家的支持!
相關(guān)文章
用JavaScript和注冊(cè)表腳本實(shí)現(xiàn)右鍵收藏Web頁選中文本
用JavaScript和注冊(cè)表腳本實(shí)現(xiàn)右鍵收藏Web頁選中文本...2007-01-01
javascript 獲取模態(tài)窗口的滾動(dòng)位置代碼
模態(tài)窗口的滾動(dòng)位置獲取辦法還有不知道的嗎?下面的方法或許對(duì)大家有所幫助,感興趣的朋友可以了解下,希望對(duì)大家有所幫助2013-08-08
js Firefox 加入收藏夾功能代碼 兼容Firefox 和 IE
最近改用Firefox后,發(fā)現(xiàn)很多網(wǎng)站的“加入收藏”鏈接點(diǎn)擊無效了,后來發(fā)現(xiàn)原來是IE瀏覽器和Firefox瀏覽器的“加入收藏夾”的寫法是不同的。2009-12-12
設(shè)置點(diǎn)擊文本框或圖片彈出日歷控件的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄O(shè)置點(diǎn)擊文本框或圖片彈出日歷控件的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2016-05-05
js控制滾動(dòng)條滾動(dòng)的兩種簡(jiǎn)單方法
這篇文章主要給大家介紹了關(guān)于js控制滾動(dòng)條滾動(dòng)的兩種簡(jiǎn)單方法,通過JavaScript可以直接控制滾動(dòng)條的位置,從而達(dá)到鎖定滾動(dòng)條的效果,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
js判斷背景圖片是否加載成功使用img的width實(shí)現(xiàn)
判斷背景圖片是否加載成功想必大家對(duì)此很陌生吧,會(huì)了之后就可以判斷css背景圖片了,具體判斷代碼如下,感興趣的朋友可以參考下哈2013-05-05
js中點(diǎn)擊空白區(qū)域時(shí)文本框與隱藏層的顯示與影藏問題
文本框獲得焦點(diǎn)的時(shí)在文本框的下方顯示一個(gè)浮動(dòng)層,點(diǎn)擊文本框隱藏浮動(dòng)層,下面為大家介紹下鼠標(biāo)點(diǎn)擊時(shí)文本框與隱藏層處理問題,感興趣的朋友可以參考下2013-08-08
javascript中的nextSibling使用陷(da)阱(keng)
關(guān)于HTML/XML節(jié)點(diǎn)的問題,在IE中nextSibling不會(huì)返回文本節(jié)點(diǎn),而chrome或者firefox等會(huì)返回文本節(jié)點(diǎn)2014-05-05

