關(guān)于ajax網(wǎng)絡(luò)請(qǐng)求的封裝實(shí)例
更新時(shí)間:2016年07月14日 09:00:34 投稿:jingxian
下面小編就為大家?guī)?lái)一篇關(guān)于ajax網(wǎng)絡(luò)請(qǐng)求的封裝實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
實(shí)例代碼:
// 封裝的ajax網(wǎng)絡(luò)請(qǐng)求函數(shù)
// obj 是一個(gè)對(duì)象
function AJAX(obj){
//跨域請(qǐng)求
if (obj.dataType == "jsonp") {
//在這里 callback 必須是全局變量 保證函數(shù)消失的時(shí)候 這個(gè)變量不可以被銷毀
//處理一下函數(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)求的類型
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)化為類似: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)化為類似: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)文章
ajax與傳統(tǒng)web開(kāi)發(fā)的異同點(diǎn)
本文給大家介紹ajax與傳統(tǒng)web開(kāi)發(fā)的異同點(diǎn),涉及到ajax、web方面的知識(shí),感興趣的朋友跟著小編一起學(xué)習(xí)吧2015-10-10
解決ajax回調(diào)函數(shù)返回的字符串亂碼問(wèn)題
ajax回調(diào)函數(shù),返回的字符串亂碼問(wèn)題很是讓人痛恨,下面有個(gè)不錯(cuò)的解決方法,大家可以參考下2014-01-01
Jquery Ajax請(qǐng)求方法小結(jié)(值得收藏)
本文給大家介紹jquery ajax請(qǐng)求方法小結(jié),jquery作為一個(gè)輕量級(jí)的js框架,能快速的開(kāi)發(fā)js應(yīng)用,并且在一定程度上改變了我們寫(xiě)js代碼的習(xí)慣,對(duì)jquery ajax請(qǐng)求感興趣的朋友參考下2015-11-11

