由於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){
//后續的邏輯.......
}
}