課堂筆記
- 有哪些標(biāo)簽可以用于發(fā)送請(qǐng)求，它們各有哪些特點(diǎn)担猛？
<form>可以用任意方法提交請(qǐng)求幕垦，但提交請(qǐng)求后會(huì)刷新頁(yè)面或新開頁(yè)面
<a>可以發(fā)GET請(qǐng)求，但提交請(qǐng)求后會(huì)刷新頁(yè)面或新開頁(yè)面
<img>可以發(fā)GET請(qǐng)求傅联，但只能以圖片形式展示
<link>可以發(fā) GET 請(qǐng)求先改，但是只能以 CSS、favicon 的形式展示
<script>可以發(fā) GET 請(qǐng)求蒸走，但是只能以腳本的形式運(yùn)行
有沒(méi)有一種發(fā)請(qǐng)求的方式仇奶，可以以任意方法，任意形式展示比驻？有该溯，那就是AJAX - AJAX：async Javascript and XML
① 使用 XMLHttpRequest 發(fā)請(qǐng)求
② 服務(wù)器返回 XML 格式的字符串(包括但不只是XML格式)
③ JS 解析 XML，并更新局部頁(yè)面
怎么實(shí)現(xiàn)
let request = new XMLHttpRequest()
request.open(方法,路徑)//配置請(qǐng)求嫁艇。其中方法（大小寫無(wú)所謂）朗伶、路徑均是字符串。路徑可以可以是相對(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ā)出來(lái)代替XML稱為數(shù)據(jù)交換語(yǔ)言
語(yǔ)法與JS相似（抄襲JS的）
①數(shù)據(jù)類型有： string,number,boolean,object,array
②字符串必須加雙引號(hào)
window.JSON.parse(字符串)用于解析符合JSON語(yǔ)法的字符串console.time()console.timeEnd()把代碼放在兩個(gè)函數(shù)之間粒督，可以大致計(jì)算代碼運(yùn)行所需時(shí)間AJAX是受同源策略限制的
同源策略即：只有相同協(xié)議陪竿，域名，端口的兩個(gè)源（頁(yè)面屠橄，包括后臺(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策略來(lái)保護(hù) xml，html锐墙，json 的內(nèi)容
詳見(jiàn)：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è)頁(yè)面實(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)中沒(méi)有Access-Control-Allow-Origin字段，若允許吉挣，則有上述字段颖变。
后端通過(guò)response.setHeader('Access-Control-Allow-Origin',路徑) 將允許資源共享的url提前設(shè)置好
CORS比JSONP更強(qiáng)大
