Javascript基礎知識體系化學習總結（八）Ajax
一、XMLHttpRequset
1.這個是ajax中最核心的API，不過一般不需要我們去手寫，學習階段倒是可以。
2.它是一個對象，使用時需要new創建。
3.該對象包含open方法、onreadystatechange方法、send方法。
4.open方法有三個參數，第一個是選擇請求方式（get/post等等），第二個是請求的地址，第三個是是否異步（寫布爾值，一般採用true即異步）。
5.onreadystatechange方法可以監聽請求的狀態碼state和是否接受到的碼readystate，可以利用這個方法對請求過程進行判斷。
6.send方法是把我們請求需要的參數發送出去，如果是get方法則寫null即可，如果是其它需要發送參數的請求則寫上參數，注意必須寫有get方法才能真正發生請求！
7.手寫一個簡單的ajax請求函數（帶promise）：
<!DOCTYPE html>
<html>
<head>
<title>手寫Ajax</title>
</head>
<body>
<script type="text/javascript">
function ajax(url) {
const p = new Promise((resolve, reject) =>{
const xhr = new XMLHttpRequest() // 該對象需要先實例化
xhr.open('GET', url, true) // 確定請求的方式、地址、是否異步等
xhr.onreadystatechange = function () { // 監聽發送過程中碼的變化
if(xhr.readyState === 4){ // 代表已經請求回來數據並且可以使用
if(xhr.status === 200) { // 代表請求成功
resolve(Json.parse(xhr.responseText))
}
}else {
reject(new Error('請求失敗'))
}
}
xhr.send(null) // 發送請求！！必須寫！
})
return p // 最後把promise返回即可！
}
</script>
</body>
</html>
二、狀態碼
1.首先是readyState：
0代表未發送
1代表已經調用send方法，正在發生
2代表已經發送成功，請求回來數據
3代表正在解析請求回來的數據
4代表數據已經請求回來且解析成功可以使用
2.接下來是state，這個比較多且複雜，具體可以百度自行查看，我們簡略的說一下：
以2xx開頭的是成功請求
以3xx開頭的是需要重定向，瀏覽器自動跳轉
以4開頭的是客戶端錯誤
以5開頭的是服務端錯誤
三、跨域
1.首先是爲什麼要跨域，因爲同源策略，在客戶端纔有，爲了安全，瀏覽器要求必須是保證域名、協議、端口三者一致（當前網頁與服務器端比較）才能發生ajax請求。而所有的跨域都需要經過服務端的配合，否則就是改瀏覽器自身存在問題，不安全！
2.誰可以不用跨域？包括img、link和script三個標籤可以無視同源策略。
3.跨域的方法有兩種jsonp（客戶端）和cors（服務器端）。
4.客戶端如何實現一個簡單的jsonp跨域請求：
<script>
window.abc = function (data) { // 回調函數是由我們發送跨域請求時定義的名字
console.log(data)
}
</script>
<script src="https://localhost:8080?name=DD&callback=abc"></script>
5.實現ajax的插件，因爲一般情況是不會自己手寫請求的，我們瞭解一下一些請求的插件：
jquery：比較適合簡單的場景，無異步
fetch：存在兼容性問題
axios：應用較爲廣泛，比較推薦！
好了，javascript的第八個模塊大概就是這些內容了，我會將它分爲11個模塊然後13篇文章左右把它講完（有的模塊內容多會範圍上下期大概。。。），學完這些模塊相信大家對基礎的js會有一個比較體系化的認識，那麼大家加油，我是O5,我們下次見！