一芍碧、創(chuàng)建xhr對象 XMLHttpRequest
var xhr = new XMLHttpRequest();
二除破、等待響應(yīng)(數(shù)據(jù)當前請求的狀態(tài)) onreadystatechange
xhr.onreadystatechange = function(){
console.log(this.readyState);
}
一馍管、事件 onreadystatechange 在readystate改變
二钾麸、readyState 有四個值
0 - 初始化狀態(tài)
1 - 正在加載(開始創(chuàng)建連接)
2 - 加載完畢(客服端向服務(wù)端發(fā)送數(shù)據(jù))
3 - 正在處理(服務(wù)端向客戶端返回數(shù)據(jù))
4 - 處理完畢(客戶端接受數(shù)據(jù)完畢)
三船殉、傳輸?shù)臄?shù)據(jù)發(fā)生改變(上傳圖片)
img.onchange = function(){
xhr.open("POST","XXX.php",true);
//xhr.open("GET","XXX.php",true);
var formData = new FormData();
formData.append("title","天貓");
formData.append("pic",img.files[0]);
xhr.send(formData);
//xhr.send(null);
}
一鲫趁、FormData 創(chuàng)建鍵值樹傳送數(shù)據(jù)
var formData = new FormData();
formData.append("title","天貓");
formData.append("pic",img.files[0]); //選中的第一張圖片
二、xhr.open( );
三個參數(shù):
2.1 post利虫、get
前臺向后臺發(fā)送數(shù)據(jù):
post挨厚、get —— 差不多一樣,send時get值:null;post不寫值堡僻。
xhr.open("GET","11.15getdanmu.php",true);
xhr.send(null); // 發(fā)送數(shù)據(jù)
xhr.open("POST","11.15getdanmu.php",true);
xhr.send();
后臺向前臺傳數(shù)據(jù):
xhr.open("GET","11.15danmu.php?word=" + word);
xhr.send();
xhr.open("POST","11.15danmu.php");
xhr.send(formData);
2.2 打開的url,即數(shù)據(jù)要傳送(獲取數(shù)據(jù))的地址
2.3 是否異步(true / false)
當該boolean值為true時疫剃,服務(wù)器請求是異步進行的钉疫,也就是腳本執(zhí)行send()方法后不等待服務(wù)器的執(zhí)行結(jié)果,而是繼續(xù)執(zhí)行腳本代碼巢价;
當該boolean值為false時牲阁,服務(wù)器請求是同步進行的,也就是腳本執(zhí)行send()方法后等待服務(wù)器的執(zhí)行結(jié)果的返回
若在等待過程中超時蹄溉,則不再等待咨油,繼續(xù)執(zhí)行后面的腳本代碼您炉!
四柒爵、客戶端接受數(shù)據(jù)完畢
xhr.onload = function(){
console.log(this.responseText);
}
1、客戶端接收后臺處理后的值
2赚爵、 responseText(響應(yīng)文本) 客戶端發(fā)送ajax后臺 XML請求棉胀,后臺接受請求進行處理,處理結(jié)果返回給前臺的一串數(shù)據(jù)冀膝。