??由于JavaScript能力有限，它所提供的API都只停留在單機階段，這樣會造成一些功能無法實作，如：無法實作用戶登錄時，用戶在輸入用戶賬戶時顯示用戶對應的頭像；無法實作用戶注冊時，用戶輸入賬號或用戶名時提示是否存在；無法實作在留言板功能看到最新的用戶留言，
??上述這些問題的共同點就是：資料存放在服務端，無法通過已知的API獲取，而Ajax的出現就解決了這些問題，
??已知的發送請求的方式，就是在地址欄輸入地址，回車重繪，對特定的元素的href或src屬性，表單的提交，使用ajax通過JavaScript直接發送網路請求，對服務器發出請求并接受服務端回傳的回應，這樣實作的功能會更多，不再是單機游戲，
此時Ajax的出現就解決了這些問題
Ajax（Asynchronous JavaScript and XML）是瀏覽器端進行網路編輯（發送請求、接受回應）的技術方案，可以通過JavaScript直接獲取服務端最新的內容而不必重新加載頁面（區域重繪），
??Ajax就是瀏覽器提供的一套API，可以通過JavaScript呼叫，從而實作通過代碼控制請求與回應，實作通過JavaScript進行網路編程，
??通常應用于自動更新頁面內容，區域重繪頁面，用戶資料校驗，按需獲取資料，
這里展示一套原生Ajax發送請求步驟
//發送ajax請求步驟
//1 創建一個XMLHTTPRequest 型別的物件 --- 相當于打開了一個瀏覽器
// var xhr = new XMLHttpRequest();
// 如下是 IE6 兼容寫法法
var xhr = null;
if (window.XMLHttpRequest) {
// 標準瀏覽器
xhr = new XMLHttpRequest;
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 請求未發送前的一個狀態----unsent--0
console.log("UNSENT",xhr.readyState);
//2 打開一個與網址之間的連接 --- 相當于在地址欄輸入網址
xhr.open("GET","https://jsonplaceholder.typicode.com/users");
//open（方法method，介面地址url）方法
// 開啟請求 get、post、put、delete，獲取、提交、更改、洗掉
// 剛打開連接，但是還未發送 OPENDED---1
console.log("OPENED", xhr.readyState);
// setRequestHeader()
// 設定請求頭
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//若是get方法，不需要在send中傳引數,也不用設定請求頭
//因為它的引數都寫在網址上了（不需要再在send中傳引數）
// xhr.open("GET", "https://jsonplaceholder.typicocde.com/users?id=1");
//post
// xhr.open("POST","https://jsonplaceholder.typicocde.com/users");
// xhr.send("name=harry&age=19");
//3 通過連接發送一次請求 --- 相當于點擊回車或者超鏈接
xhr.send("name=harry&age=19");
// send（資料體），在發送請求時，當需要發送一些資料或者給資料庫寫入、更改資料時，就需要傳遞資料體
// 傳遞的資料體，要根據 請求頭 中的型別進行傳參
// 所以在send之前 ，open之后，需要設定一個方法 --- setRequestHeader()
// 如上；
//4 指定xhr狀態變化事件處理函式 --- 相當于處理網頁呈現后的操作
//指定回呼函式，處理得到的資料
xhr.onreadystatechange = function(){
//通過判斷 xhr 的readyState，確定此次請求是否完成
if(this.readyState === 2){
console.log("headers received",xhr.readyState);
console.log(xhr.responseText)
}else if(this.readyState === 3){
console.log("loading",xhr.readyState)
console.log(xhr.responseText)
}else if(this.readyState === 4){
console.log("done",xhr.readyState)
console.log(xhr.responseText)
}
}
發送Ajax請求步驟：
①創建XMLHttpRequest型別的物件
②準備發送，打開與一個網址之間的連接
③執行發送動作
④指定xhr狀態變化事件處理函式
其中，XMLHttpRequest 型別物件是Ajax API中核心提供的XMLHttpRequest型別，所有的Ajax操作都需要使用到這個型別，
? var xhr = new XMLHttpRequest（）；
? 或 xhr = new ActiveXObject（”Microsoft.XMLHTTP“）；（IE6兼容）
本質上XMLHttpRequest就是JavaScript在web平臺上發送HTTP請求的手段，所以發送出去的仍然是HTTP請求，符合HTTP約定的格式，
-
open（）方法開啟請求，xhr.open(請求方法.url)
-
發送請求方式有：get、post、delete、put
-
get 請求，獲取或查詢資料，在get請求中，引數的傳遞是直接在url上通過 ‘ ? ’進行引數傳遞的；get請求時，無需設定回應體，
-
post 請求，post請求中，使用請求體來承載需要提交的資料，與get請求相比更安全；post請求需要設定請求頭Content-Type，便于服務端接收資料，
-
put 請求，更新資料請求
-
delete 請求，洗掉資料請求
-
xhr.open（）方法還有第三個引數，第三個引數要求傳入的是一個布林值，作用就是設定此次請求是否采用異步方式執行，默認值是true，表示異步，false是同步執行，這里不建議同步執行，否則代碼會卡死在send（）這一步，
【關于，同步與異步的理解：
-
同步就是一個人在做一件事時，同一個時刻只能做一件事，做完這件才能做下件事，其他事情只能等待；
-
異步就是一個人在做一件事時不需要等待這件事完成，可以做其他事，】
-
-
-
setRequestHeader（）方法設定請求頭，這個方法必須在open（）和send（）之間呼叫，xhr.setRequestHeader（header，value）；
其中：
? ??header一般都設定為 ”Content-Type“，傳輸資料型別，服務器需要傳輸的資料型別；? ??value則是具體的資料型別，常用”application/x-www-form-urlencode“ 和 ”application/json“
-
-
send（）方法發送請求，用于發送HTTP請求，xhr.send(資料體)，資料體是根據請求頭中的型別進行傳參；如果是get方法，無需設定資料體，你可以傳null或者不傳參，
【通常為了確定事件一定會觸發，在發送請求send（）之前，一定先注冊readystatechange，這樣不論是同步還是異步都能觸發成功】
-
readyState屬性回傳一個XMLHTTPRequest代理當前所處的狀態，由于readyStatechange事件是在xhr物件狀態變化時觸發的，所以這個事件會被觸發多次，它有5個不同的狀態值：
readyState 狀態描述 說明 0 UNSENT xhr被創建，但還未呼叫open（）方法;（初始化） 1 OPENED open（）方法被呼叫，建立連接；（建立連接） 2 HEADERS_RECEIVED send（）方法被呼叫，獲取到了狀態行和回應頭；（接收到回應頭） 3 LOADING 回應體下載中，部分資料已經在responseText中了；（回應體加載中） 4 DONE 回應體下載完成，可以直接使用responseText了；（加載完成） 一般情況下，在readyState值為4時，執行回應的后續邏輯，如：一些事件函式等，
xhr.onreadystatechange = function(){
??if(this.readyState == 4){
??? //后續的邏輯.......
??}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/282697.html
標籤：JavaScript
上一篇：jQuery中Ajax的使用