1.Ajax簡述
全名：Asynchronous JavaScript and xml，
是指圍繞“由js向服務器發起http請求”這個功能而開發的一整套完整的方法，
因此，引入jQuery封裝好的Ajax會浪費很多資源，實際利用到的功能只是很少一部分，
而原生ajax則可以根據實際需求撰寫代碼，減少記憶體耗用，
原生Ajax模塊在處理網路請求時，包括以下四步驟：
⑴ 創建“xhr”物件
⑵ 構建“xhr”屬性和方法
⑶ 通過“xhr”物件發出HTTP請求
⑷ 通過“xhr”物件的方法接收服務器回傳的資料
說明：
Ajax可以發出同步請求，也可以發出異步請求，
但多數情況下指的是異步請求，因為同步的Ajax請求對瀏覽器會產生“阻塞效應”，
2.xhr物件
在Ajax中對整個請求從創建到發送，有著一整套嚴格的流程標準，
需要至少以下幾個步驟：
⑴ 通過 XMLHttpRequest 類創建 xhr 物件；
⑵ 為 xhr 物件添加屬性和回呼方法；
⑶ xhr 物件執行 open() 方法，設定請求發送的目標url地址；
⑷ xhr 物件執行 send() 方法，發出請求，
語法：var xhr = new XMLHttpRequest();
說明：
XMLHttpRequest 物件用于在“瀏覽器”與“服務器”之間傳送資料，
3.xhr物件常用屬性和方法
⑴ onreadystatechange 屬性
該屬性指向一個回呼函式，當頁面加載狀態發生改變時，readyState屬性值就會隨即發生變化，
此時，readystatechange屬性所對應的回呼函式就會自動被呼叫，
語法：xhr.onreadystatechange = function(){}
⑵ readyState 屬性
該屬性為只讀屬性，用一個整數和對應的常量來表示XMLHttpRequest請求當前所處的狀態，
一般只會用在 onreadystatechange 事件的回呼函式中，
通過判斷 readyState屬性的值，進而執行不同狀態對應的函式，
語法：xhr.onreadystatechange = function(){
if(xhr.readystate==n){
//執行相應的函式
}
}
readyState屬性值說明：
0 值，對應常量“UNSENT”，
表示XMLHttpRequest實體已經生成，但是 open() 方法還沒有被呼叫；
1 值，對應常量“OPEND”，
表示 send() 方法還沒被呼叫，仍可以使用 setRequestHeader() 設定HTTP請求頭；
2 值，對應常量“HEADERS_RECEIVED”
表示 send() 方法已經執行，并且頭資訊和狀態碼已經收到；
3 值，對應常量“LOADING”，
表示正在接收服務器傳來的body部分的資料，如果 responseType的屬性
是 text 或者 空字串，responseText 就會包含已經收到的部分資訊；
4 值，對應常量“DONE”，
表示服務器資料已經完全接收，或者本次接收已經失敗了，
⑶ status 屬性
表示本次請求所得到的的HTTP狀態碼，是一個整數，
語法：if(xhr.readyState==4){
if(xhr.status==200){
//請求通信成功
}
}
說明：
該屬性為只讀屬性；
該屬性有以下幾種可能值：
200，OK，訪問正常； //一般情況下作為通信成功的標志，
301，Moved Permanently，永久移動；
302，Move Temporarily，暫時移動；
304，Not Modified，未修改；
307，Temporary Redirect，暫時重定向；
401，Unauthorized，未授權；
403，Forbidden，禁止訪問；
404，Not Found，未發現指定網址；
500，Internal Server Error，服務器發生錯誤，
⑷ statusText 屬性
表示服務器發送的狀態提示，是一個只讀字串，
語法：xhr.shtatusText;
說明：該屬性不同于 status，屬性值為回傳狀態碼所對應的狀態資訊，如“OK”，
⑸ responseText 屬性
用于獲取從服務器接收到的 字串 內容，該屬性為只讀，
如果本次請求沒有成功或者資料不完整，則屬性值等于 null；
如果服務器回傳的資料格式是 JSON，則可以使用 responseText屬性進行資料決議，
語法：xhr.responseText;
說明：
后臺回傳資料時，使用 echo json_encode();進行編碼；
前臺接收資料時，直接接收到的回傳結果為字串，使用 JSON.parse();進行決議，
⑹ open() 方法
表示要將請求發往目標地址，但只是設定而不是發送，
語法：xhr.open('請求型別','目標url地址',是否異步);
說明：
第一個引數“請求型別”用于設定 get 或 post 請求；
第二個引數“url地址”用于設定請求要發送到的地址鏈接；
第三個引數為布林值，用于設定是否異步發送，默認false表示同步發送
⑺ setRequestHeader() 方法
用于設定HTTP頭資訊，
語法：xhr.setRequestHeader('key','value');
說明：
本方法必須在 open() 之后、send() 之前被呼叫；
該方法用于設定在請求發送時，一并被發出的一些補充資訊，
⑻ send() 方法
用于實際發出HTTP請求，
語法：xhr.send(formData);
說明：
send() 方法的引數是表單資料，為post請求準備；
如果請求型別是 get請求，則引數直接寫 null 即可，
4.Ajax請求代碼示例
<script>
var uName = document.querySelector('.userName').value;
var uCode = document.querySelector('.userCode').value;
var xhr=new XMLHttpRequest(); //創建物件，準備發送Ajax請求
xhr.onreadystatechange=function () { //監聽后臺接收請求狀態的變化
if (xhr.readyState==4){ //判斷當前請求進行到何種狀態，屬性值 4 表示后臺已經接收到前臺請求
if (xhr.status==200){ //判斷前臺是否準確接收到后臺反饋的資料，屬性值 200 表示通信成功
console.log(xhr.responseText); //獲取后臺反饋的完整資料，json串
console.log(typeof xhr.responseText); //回傳結果為 string 型別
console.log(JSON.parse(xhr.responseText)); //將回傳結果轉換為物件
}
}
}
xhr.open('get','xhr.php?name=uName&code=uCode',true);
xhr.send(null);
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/251393.html
標籤：PHP
上一篇：php壓縮檔案夾并下載到本地
下一篇：PHP方法引數的那點事兒