[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:8000
情況二、域名不同 ：http://www.badiu.com 和 http://www.jd.com
解決辦法有 3 種：
1. jsonp
優點：沒有瀏覽器的限制（低端的 IE 也支持）
缺點：只能發送 GET 請求
2. CORS（跨站資源共享）
優點：由后端完成，前端完全不用改代碼，支持各種請求（GET、POST、PUT、DELETE等）
缺點：低端IE不支持
3. 服務器代理
優點：沒有任何限制
缺點：需要再寫個代理服務器的程序
