關(guān)于ajax網(wǎng)絡(luò)請(qǐng)求的封裝實(shí)例
實(shí)例代碼:
// 封裝的ajax網(wǎng)絡(luò)請(qǐng)求函數(shù)
// obj 是一個(gè)對(duì)象
function AJAX(obj){
//跨域請(qǐng)求
if (obj.dataType == "jsonp") {
//在這里 callback 必須是全局變量 保證函數(shù)消失的時(shí)候 這個(gè)變量不可以被銷(xiāo)毀
//處理一下函數(shù)名(防止多個(gè)網(wǎng)絡(luò)請(qǐng)求 函數(shù)名字相同 出現(xiàn)紊亂的情況)
var hehe = "callBack" + "_" + new Date().getTime() + "_" + String(Math.random()).replace(".","");
window[hehe] = obj.success;
//創(chuàng)建 script標(biāo)簽
var sc = document.createElement("script");
sc.src = obj.url + "?" + "cb=" + hehe;
console.log(sc.src);
document.body.appendChild(sc);
document.body.removeChild(sc);
return;
}
//1、創(chuàng)建 ajax 對(duì)象
var ajaxObj = null;
if (window.XMLHttpRequest) {
ajaxObj = new XMLHttpRequest();
}else{
ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
}
//設(shè)置請(qǐng)求的類(lèi)型
obj.type = obj.type.toUpperCase() || "GET";
//如果是get請(qǐng)求 并且需要傳遞參數(shù) 則需要給 url 后面拼接參數(shù)
if (obj.type == "GET") {
var arr = [];//定義數(shù)組 用于把對(duì)象存儲(chǔ)到數(shù)據(jù)里面
for (var key in obj.data) {
arr.push(key +"="+ obj.data[key]);
}
//用&分隔數(shù)組 讓其轉(zhuǎn)化為類(lèi)似:name=lxl&age=18 的形式
var str = arr.join("&");
obj.url = obj.url +"?"+ str;
//撥號(hào)
ajaxObj.open(obj.type,obj.url,true);
//發(fā)送"name=123&age=18"
ajaxObj.send();
}else{
var arr = [];//定義數(shù)組 用于把對(duì)象存儲(chǔ)到數(shù)據(jù)里面
for (var key in obj.data) {
arr.push(key +"="+ obj.data[key]);
//console.log(arr);
}
//用&分隔數(shù)組 讓其轉(zhuǎn)化為類(lèi)似:name=lxl&age=18 的形式
var str = arr.join("&");
//console.log(str);
ajaxObj.open(obj.type,obj.url,true);
ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajaxObj.send(str);
}
//監(jiān)聽(tīng)
ajaxObj.onreadystatechange = function(){
if (ajaxObj.readyState == 4) {
if (ajaxObj.status >= 200 && ajaxObj.status < 300 || ajaxObj.status == 304) {
//請(qǐng)求成功
obj.success(ajaxObj.responseText);
}else{
//請(qǐng)求失敗
obj.error(ajaxObj.status);
}
}
}
}
以上這篇關(guān)于ajax網(wǎng)絡(luò)請(qǐng)求的封裝實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript基于Ajax實(shí)現(xiàn)不刷新在網(wǎng)頁(yè)上動(dòng)態(tài)顯示文件內(nèi)容
這篇文章主要介紹了JavaScript基于Ajax實(shí)現(xiàn)不刷新在網(wǎng)頁(yè)上動(dòng)態(tài)顯示文件內(nèi)容,可實(shí)現(xiàn)實(shí)時(shí)顯示服務(wù)器上txt文件內(nèi)容的功能,是Ajax基本應(yīng)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
Django框架利用ajax實(shí)現(xiàn)批量導(dǎo)入數(shù)據(jù)功能
這篇文章主要介紹了Django框架利用ajax實(shí)現(xiàn)批量導(dǎo)入數(shù)據(jù)功能的相關(guān)資料,需要的朋友可以參考下2016-03-03
Ajax+Struts2實(shí)現(xiàn)驗(yàn)證碼驗(yàn)證功能實(shí)例代碼
這篇文章主要介紹了Ajax+Struts2實(shí)現(xiàn)驗(yàn)證碼驗(yàn)證功能實(shí)例代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
基于CORS實(shí)現(xiàn)WebApi Ajax 跨域請(qǐng)求解決方法
這篇文章主要介紹了基于CORS實(shí)現(xiàn)WebApi Ajax 跨域請(qǐng)求解決方法,需要的朋友可以參考下2017-08-08
ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的基本方法
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的基本方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
JQuery的ajax的用法在asp中使用$.ajax()實(shí)現(xiàn)
ajax的出現(xiàn)解決了很多的疑難問(wèn)題,同時(shí)帶來(lái)了很多的方便,本文講述一下JQuery的ajax的用法在asp中使用$.ajax()來(lái)表示,感興趣的朋友可以了解下,或許本文對(duì)你有所幫助2013-01-01
AJAX實(shí)現(xiàn)注冊(cè)驗(yàn)證用戶(hù)名
這篇文章主要為大家詳細(xì)介紹了AJAX實(shí)現(xiàn)注冊(cè)驗(yàn)證用戶(hù)名,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03

