- 前言：ajax的神奇之處在于JavaScript 可在不重載頁(yè)面的情況與 Web 服務(wù)器交換數(shù)據(jù)，即在不需要刷新頁(yè)面的情況下年叮，就可以產(chǎn)生局部刷新的效果具被。Ajax 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請(qǐng)求），當(dāng)然也可同步只损，這樣就可使網(wǎng)頁(yè)從服務(wù)器請(qǐng)求少量的信息一姿，而不是整個(gè)頁(yè)面。Ajax使我們的項(xiàng)目更小跃惫、更快叮叹，更友好，在前端開發(fā)有很高的地位爆存，也是面試題的熱點(diǎn)蛉顽。
- 注：本次測(cè)試是在localhost本地環(huán)境。
1先较、原生ajax
- html前端代碼get請(qǐng)求方式
var xhr = new XMLHttpRequest() //創(chuàng)建一個(gè)ajax實(shí)例xhr
xhr.open("GET","js/text.js",true) //這里傳入三個(gè)參數(shù)蜂林，第一個(gè)是請(qǐng)求方式（一般為get和post）遥诉，第二個(gè)參數(shù)是請(qǐng)求地址，第三個(gè)布爾值噪叙，true代表異步矮锈，false代表同步
xhr.send() //發(fā)送數(shù)據(jù)（get用不上，get發(fā)送的數(shù)據(jù)一般在鏈接后面睁蕾，形式為鍵值對(duì)）
xhr.onreadystatechange = function(){ //綁定監(jiān)聽函數(shù)
if(xhr.readyState === 4&& xhr.status === 200){ //判斷返回狀態(tài)碼
var data = xhr.responseText //請(qǐng)求返回的數(shù)據(jù)
var datas = JSON.parse(data) //因?yàn)閿?shù)據(jù)傳過來(lái)是字符串苞笨，這里把它變成對(duì)象
console.log(datas) //輸出對(duì)象
}
}
-
控制臺(tái)輸出
image - html前端代碼post請(qǐng)求方式
var xhr = new XMLHttpRequest() //創(chuàng)建一個(gè)ajax實(shí)例xhr
xhr.open("POST","js/text.js",true) //方式變?yōu)镻OST
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //設(shè)置頭部信息，放在open方法下面
xhr.send() //發(fā)送數(shù)據(jù)如果發(fā)送數(shù)據(jù)子眶，可以寫在這里面
xhr.onreadystatechange = function(){ //綁定監(jiān)聽函數(shù)
if(xhr.readyState === 4&& xhr.status === 200){ //判斷返回狀態(tài)碼
var data = xhr.responseText //請(qǐng)求返回的數(shù)據(jù)
var datas = JSON.parse(data) //因?yàn)閿?shù)據(jù)傳過來(lái)是字符串瀑凝，這里把它變成對(duì)象
console.log(datas) //輸出對(duì)象
}
}
-
控制臺(tái)輸出
image - 被請(qǐng)求js代碼
{
"name":"小明",
"age":24,
"array":[1,51,3,4,4,6,64]
}
2、函數(shù)封裝
- 前端JS代碼
function Ajax(type, url, data, success){
var xhr = null; // 初始化xhr
if(window.XMLHttpRequest){ //兼容IE
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
var type = type.toUpperCase();
var random = Math.random(); //創(chuàng)建隨機(jī)數(shù)
if(type == 'GET'){
if(data){
xhr.open('GET', url + '?' + data, true); //如果有數(shù)據(jù)就拼接
} else {
xhr.open('GET', url + '?t=' + random, true); //如果沒有數(shù)據(jù)就隨便
}
xhr.send();
} else if(type == 'POST'){
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function(){ // 創(chuàng)建監(jiān)聽函數(shù)
if(xhr.readyState == 4&&xhr.status == 200){
success(xhr.responseText);
}
}
}
Ajax('get', 'js/text.js', "", function(data){ //調(diào)用函數(shù)
console.log(JSON.parse(data));
});
- 被請(qǐng)求js代碼
{
"name":"小明",
"age":24,
"array":[1,51,3,4,4,6,64]
}
-
控制臺(tái)輸出
image
3臭杰、Jquery中的Ajax（先引入Jquery）
- 前端簡(jiǎn)單的JS代碼
$.ajax({
url:"./js/text.js", //請(qǐng)求地址
type:"GET", //請(qǐng)求方式
dataType:"json", //請(qǐng)求數(shù)據(jù)類型
success:function(data){ //成功調(diào)用方法
console.log(data)
},
error:function(res){ //失敗調(diào)用方法
console.log("請(qǐng)求失斣吝洹！")
}
})
- 被請(qǐng)求js代碼
{
"name":"小明",
"age":24,
"array":[1,51,3,4,4,6,64]
}
- 控制臺(tái)輸出
image
- 如有不對(duì)之處渴杆，請(qǐng)大家多多指正寥枝，謝謝！
