JS_ajax請求初體驗

onload事件—推薦使用

GET傳遞參數

// 1.建立ajax對象
var xhr = new XMLHttpRequest();
// 2.告訴ajax對象要發送請求，以什麼方式發送請求
var name = "zhangsan";
vae age = 30;
// 拼接請求參數
var params = 'name='+name+'&age='+age;
// 1）請求方式 2）請求位址
xhr.open('get','http://localhost:3000/get?'+params);
// 通過請求頭告訴伺服器端客服端想伺服器端傳遞的請求參數的格式是什麼
// 3.發送請求
xhr.send();
//4.擷取伺服器響應到用戶端的資料
xhr.onload = function (){
	console.log(xhr.responseText);	//響應資料
}
           

POST 普通請求參數

// 1.建立ajax對象
var xhr = new XMLHttpRequest();
// 2.告訴ajax對象要發送請求，以什麼方式發送請求
var name = "zhangsan";
vae age = 30;
// 拼接請求參數
var params = 'name='+name+'&age='+age;
// 1）請求方式 2）請求位址
xhr.open('post','http://localhost:3000/get');
// 通過請求頭告訴伺服器端客服端想伺服器端傳遞的請求參數的格式是什麼
// 設定請求參數格式的類型（post請求必須要設定）
xhr.seRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 3.發送請求
xhr.send(params);
//4.擷取伺服器響應到用戶端的資料
xhr.onload = function (){
	console.log(xhr.responseText);	//響應資料
}
           

POST json傳遞參數

// 1.建立ajax對象
var xhr = new XMLHttpRequest();
// 2.告訴ajax對象要發送請求，以什麼方式發送請求
// 1）請求方式 2）請求位址
xhr.open('post','http://localhost:3000/json');
// 通過請求頭告訴伺服器端客服端想伺服器端傳遞的請求參數的格式是什麼
//JSON.stringify() 将json對象轉換為json字元串
// 3.發送請求  需要轉json字元串才能發送
xhr.send(JSON.stringify({name:'lisi',age:50}));
//4.擷取伺服器響應到用戶端的資料
xhr.onload = function (){
	console.log(xhr.responseText);
}
           

擷取伺服器端的響應

ajax狀态碼：表示ajax請求的過程狀态嗎，ajax對象傳回的

0：請求未初始化還沒有調用ipen()

1：請求已經建立，但是還沒有發送（還沒有調用send()）

2：請求已經發送

3：請求正則進行中，通常相應中有部分資料可以用了

4：相應完成，可以擷取并使用伺服器的響應資料

xhr.readyState //擷取jsx狀态碼

onreadystatechange //當ajax狀态碼發生變化時将自動觸發該事件

onreadystatechange事件–相容低版本浏覽器

var xhr = new XMLHttpRequest();			//建立ajax對象
// 0 已經穿件了ajax對象 但是還沒有對ajax對象進行配置
console.log(xhr.readyState);
xhr.open('get','http://localhost:3000/readystate');
// 1 已經對ajax對象進行配置 但是還沒有發送請求
console.log(xhr.readyState);
//當ajax狀态碼發生變化時将自動觸發該事件
xhr.onreadystatechange = function() {
	//2	請求已經發送了
	//3	已經接受到伺服器端的部分資料了
	//4	伺服器端的響應資料已經接受完成
	console.log(xhr.readyState);
	//對ajax狀态碼進行判斷，如果狀态碼的值為4就代表資料已經接受完成了
	if(xhr.readyState == 4){
		console.log(xhr.responseText);	//響應資料
	}
}
xhr.send();
           

錯誤處理–狀态碼

http狀态碼：表示請求的處理結果 是伺服器端傳回的

xhr.status //擷取狀态碼

404：網絡不暢通，伺服器端沒有接受到請求 檢查請求位址是否錯誤

500：網絡暢通，伺服器端接受到請求 伺服器端錯誤，後端

200：正常通路

onerror：網絡中斷時會觸發onerror時間

xhr.onerror = function (){
	alert('網路中斷，無法發送ajax請求')
}
           

解決ie低版本浏覽器緩存

在請求位址後面添加随機數