[TOC]
# 題1、什么是 Ajax？干什么用的？
答： Ajax （Asynchronous Javascript And XML）
翻譯： 異步的 Javascript 和 XML。
用途：Javascript 這門語言來和其他計算機進行數據通信的技術。
俗稱：調用服務器接口用的。
# 題2、JS 如何實現 Ajax？
答： 三種方法：
1. 使用 JS 原生的 Ajax 技術
2. 使用 jQuery 中封裝好的 $.ajax 技術
3. 使用基于 Promise 的 axios 包， 使用這個包的好處是已經將Ajax都封裝成 Promise 對象
# 題3、使用 JS 實現原生 Ajax 的流程？
答： 流程：
1. 創建 `XMLHttpRequest` 對象 （`瀏覽器` 中有一個XMLHttpRequest 對象，使用它來執行 Ajax的）
2. 配置這個對象： 提交地址、回調函數等
3. 發送請求
4. 根據請求的狀態來執行不同的操作
代碼演示：JS 執行原生 AJAX
~~~
// 1. 創建 XMLHttpRequest 對象
const xhr = new XMLHttpRequest()
// 2. 設置回調函數，用來監聽 AJAX 的狀態變化
xhr.onreadystatechange = function() {
? ?// 2.1. 根據不同的狀態做不同的處理
? ?// 判斷是否連接服務器成功并且服務器返回狀態碼為 200
? ?if(xhr.readyState == 4 && xhr.status == 200) {
? ? ? ?// 2.2. 打印返回值
? ? ? ?console.log( xhr.responseText )
? }
}
// 3. 設置請求方式及請求地址
xhr.open('GET', 'http://xxxxx')
// 4. 發送請求
xhr.send()
~~~
# 題4、如何將原生的 AJAX 封裝成 Promise 對象來使用？流程是什么？
答：首先創建一個函數，在函數中創建一個 Promise 對象并返回，在 Promise 對象中放一個回調函數，這個回調函數上有兩個參數，第一個參數是在成功時調用設置返回的信息，第二個參數是在失敗時調用設置失敗信息。將異步代碼放到這個回調函數中，然后判斷如果異步代碼執行成功就調用 Promise 的第一個參數的函數來設置返回值，如果異步失敗就調用第二個參數的函數來設置失敗信息。
代碼演示：
~~~
// 封裝一個發送 get 請求的函數
// 參數：請求地址
// 返回：Promise 對象
const xhr = new XMLHttpRequest()
function get(url) {
? ?// 參數一、ok：函數，成功時設置返回值
? ?// 參數二、err：函數，失敗時設置失敗的信息
? ?return new Promise(function (ok, err) {
? ? ? ?xhr.onreadystatechange = function () {
? ? ? ? ? ?if (xhr.readyState == 4 && xhr.status == 200) {
? ? ? ? ? ? ? ?ok(xhr.responseText)
? ? ? ? ? } else {
? ? ? ? ? ? ? ?err("連接失敗")
? ? ? ? ? }
? ? ? }
? ? ? ?xhr.open('GET', url)
? ? ? ?xhr.send()
? })
}
?
// 用法一、ES6
get('http://xxxxxx').then(res => {
? ?console.log(res.data)
})
?
// 用法二、ES8
async function getData() {
? ?let { data } = await get('http://xxxxxx')
? ?console.log(data)
}
getData()
~~~
# 題5、 什么是 Ajax 跨域？怎么解決？
答：出于安全考慮，瀏覽器會限制 Ajax 不允許跨域請求服務器。
什么情況出現跨域？
情況一、端口號不同 ： [http://localhost:9000](http://localhost:9000/) 和 [http://localhost:8000](http://localhost:8000/) 情況二、域名不同 ：[http://www.badiu.com](http://www.badiu.com/) 和 [http://www.jd.com](http://www.jd.com/)
3 種解決方法：
1. jsonp
優點：沒有瀏覽器的限制（支持低端的 IE 瀏覽器）
缺點：只能發送 GET 請求
2. CORS （跨站資源共享）
優點： 由后端完成，前端完全不用寫代碼，支持各種請求（GET、POST、PUT、DELETE等）
缺點： 低端瀏覽器不支持 IE
3. 服務器代理
優點：沒有任何限制
缺點：需要再寫個代理服務器的程序
