AJAX即“AsynchronousJavascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式[網(wǎng)頁]
應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
AJAX = 異步 [JavaScript]和[XML]（[標(biāo)準(zhǔn)通用標(biāo)記語言])的子集）。
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)晰洒。
AJAX 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下油航，能夠更新部分網(wǎng)頁的技術(shù)蔑水。[1]
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換邢锯，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下搀别，對(duì)網(wǎng)頁的某部分進(jìn)行更新丹擎。
傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁頁面领曼。
// 函數(shù)封裝的是代碼鸥鹉，采用面向?qū)ο蟮男问椒庋b
(function () {
var a = 100;
// 暴露出ajax接口
ajax = window.ajax = {}
// 增加1個(gè)方法： get方法
/*
* 參數(shù)：
* obj 是1個(gè)對(duì)象，代表參數(shù)的集合庶骄，里面有很多參數(shù)毁渗，如下所示：
* url 請(qǐng)求的地址與參數(shù)
* data 發(fā)送的數(shù)據(jù)
* async 是否是同步, true / false
* fail 失敗的處理回調(diào)函數(shù)
* success 成功的處理回調(diào)函數(shù)
*/
ajax.get = function(obj) {
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
url += "?"
url += translate(obj.data);
function translate(obj){
var str = ""
for(var i in obj){
str += i
str += "="
str += encodeURIComponent(obj[i])
str += "&"
}
str = str.substring(0,str.length-1)
return str
}
xhr.open("GET", url, obj.async);
xhr.send()
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
// 增加1個(gè)方法： post方法
/*
* 參數(shù)：
* obj 是1個(gè)對(duì)象，代表參數(shù)的集合单刁，里面有很多參數(shù)灸异，如下所示：
* url 請(qǐng)求的地址與參數(shù)
* data 發(fā)送的數(shù)據(jù)
* async 是否是同步, true / false
* fail 失敗的處理回調(diào)函數(shù)
* success 成功的處理回調(diào)函數(shù)
*/
ajax.post = function(obj) {
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
xhr.open("POST", url, obj.async);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(obj.data)
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
})();
