tip:代碼要多敲,不然很容易忘記
- 什么是同源策略以及限制
- 前后端如何通信
- 如何創(chuàng)建Ajax
- 跨域通信的幾種方式
- 什么是同源策略以及限制
3-13 通信類.mp4_20171124_134205.254_看圖王.jpg
- 什么是源:協(xié)議 域名 端口
- 前后端如何通信
- Ajax 同源策略下的通信方式
- WebSocket 不限制同源策略下的通信方式
- CORS 支持跨域通信,也支持同源通信
- 如何創(chuàng)建Ajax
- 面試官會(huì)留意的問(wèn)題
- XMLHtttpRequest 對(duì)象的工作流程 第一步干嘛,第二步干嘛,第三步干嘛
- 兼容性處理 判斷你考慮問(wèn)題是否周全
- 事件觸發(fā)的條件
- 事件觸發(fā)的順序
var xhr = XMLHttpRequest:new XMLHttpRequest() || new ActiveObject(); //第一步:創(chuàng)建xhr對(duì)象
xhr.open('GET','/api',false); //第二步:確定XMLHttpRequest發(fā)送方式
xhr.send(null); //第三步:發(fā)送請(qǐng)求,把這個(gè)請(qǐng)求發(fā)送出去
xhr.onreadystatechange = function() { //第四步:響應(yīng)
//這里的函數(shù)異步執(zhí)行,可以參考之前js基礎(chǔ)中的 異步模塊
if (xhr.readyState == 4) { //狀態(tài)的變化
if (xhr.status === 200 || xhr.status === 304) { //服務(wù)端返回的狀態(tài)碼
console.log(responseText) //服務(wù)端返回的內(nèi)容
}
}
}
- 跨域通信的幾種方式
- JSONP
- Hash 地址URL#號(hào)后面的東西,hash變動(dòng)頁(yè)面不會(huì)刷新,這是hash實(shí)現(xiàn)跨域通信的基本原理;?號(hào)后面的search是會(huì)改變頁(yè)面地址的,所以它不能做跨域通信
- postMessage HTML5中新增的解決跨域通信的
- WebSocket
- CORS 可以理解為支持跨域通信的Ajax,瀏覽器在識(shí)別出你發(fā)送Ajax請(qǐng)求用到了跨域時(shí),會(huì)在你的HTTP請(qǐng)求頭中加一個(gè)origin來(lái)允許跨域通信.如果是普通Ajax跨域請(qǐng)求時(shí),瀏覽器就會(huì)給你攔截了
- JSONP
- 運(yùn)行的原理:就是運(yùn)用script標(biāo)簽的異步加載實(shí)現(xiàn)的
