課堂筆記
- 有哪些標(biāo)簽可以用于發(fā)送請(qǐng)求，它們各有哪些特點(diǎn)？
<form>可以用任意方法提交請(qǐng)求，但提交請(qǐng)求后會(huì)刷新頁面或新開頁面
<a>可以發(fā)GET請(qǐng)求，但提交請(qǐng)求后會(huì)刷新頁面或新開頁面
<img>可以發(fā)GET請(qǐng)求，但只能以圖片形式展示
<link>可以發(fā) GET 請(qǐng)求，但是只能以 CSS、favicon 的形式展示
<script>可以發(fā) GET 請(qǐng)求，但是只能以腳本的形式運(yùn)行
有沒有一種發(fā)請(qǐng)求的方式，可以以任意方法，任意形式展示？有，那就是AJAX - AJAX：async Javascript and XML
① 使用 XMLHttpRequest 發(fā)請(qǐng)求
② 服務(wù)器返回 XML 格式的字符串(包括但不只是XML格式)
③ JS 解析 XML，并更新局部頁面
怎么實(shí)現(xiàn)
let request = new XMLHttpRequest()
request.open(方法,路徑)//配置請(qǐng)求。其中方法（大小寫無所謂）、路徑均是字符串。路徑可以可以是相對(duì)，絕對(duì)路徑，瀏覽器會(huì)自動(dòng)轉(zhuǎn)為絕對(duì)路徑
request.send()//發(fā)送請(qǐng)求。
request.status()在請(qǐng)求結(jié)束后返回響應(yīng)狀態(tài)碼：200、404等-
request.readyState()返回請(qǐng)求與響應(yīng)當(dāng)前所處狀態(tài)
request.readyState request.responseText()以字符串的形式返回響應(yīng)的第四部分requset.onreadystatechange()請(qǐng)求與響應(yīng)并非是一次性全部發(fā)送的，而是分部分發(fā)送的，響應(yīng)的第一部分就已經(jīng)包含請(qǐng)求是否成功的信息。所以是先有
request.status后有request.readyStateJSON
被開發(fā)出來代替XML稱為數(shù)據(jù)交換語言
語法與JS相似（抄襲JS的）
①數(shù)據(jù)類型有： string,number,boolean,object,array
②字符串必須加雙引號(hào)
window.JSON.parse(字符串)用于解析符合JSON語法的字符串console.time()console.timeEnd()把代碼放在兩個(gè)函數(shù)之間，可以大致計(jì)算代碼運(yùn)行所需時(shí)間AJAX是受同源策略限制的
同源策略即：只有相同協(xié)議，域名，端口的兩個(gè)源（頁面，包括后臺(tái)數(shù)據(jù)）可以進(jìn)行資源交互
不符合同源策略的AJAX其request.status() === 0
-
為什么用
<form>發(fā)請(qǐng)求不受同源策略的影響，而AJAX請(qǐng)求則不行
解答
其實(shí)不受同源策略限制的標(biāo)簽還包括：<script><img><link>等
這仍然可能會(huì)存在安全漏洞
因此谷歌會(huì)采用CORB策略來保護(hù) xml，html，json 的內(nèi)容
詳見：https://segmentfault.com/a/1190000016126079 對(duì)象屬性增強(qiáng)
ES5中：
var x = 'sss'
var o = {}
o[x] = 1
ES6中：
var x = 'sss'
var o = {[x]:1}
CORS
corss-orign resource sharing 跨域資源共享
要讓不同源的兩個(gè)頁面實(shí)現(xiàn)資源共享怎么做？（此時(shí)會(huì)發(fā)送請(qǐng)求，但不會(huì)有響應(yīng)）
這時(shí)候要用到CORS。
CORS請(qǐng)求分為兩種一種簡(jiǎn)單請(qǐng)求，一種非簡(jiǎn)單請(qǐng)求
滿足以下條件的被稱為簡(jiǎn)單請(qǐng)求
（1) 請(qǐng)求方法是以下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain
對(duì)于簡(jiǎn)單請(qǐng)求，瀏覽器在請(qǐng)求頭中添加Origin，將url附上，如果該url不被后端允許跨域，則響應(yīng)中沒有Access-Control-Allow-Origin字段，若允許，則有上述字段。
后端通過response.setHeader('Access-Control-Allow-Origin',路徑) 將允許資源共享的url提前設(shè)置好
CORS比JSONP更強(qiáng)大
