1.請(qǐng)描述一下cookie，sessionStorage烹棉，和localStorage的區(qū)別
2.手動(dòng)編寫一個(gè)ajax烹卒，不依賴第三方庫(kù)
3.跨域的幾種實(shí)現(xiàn)方式
知識(shí)點(diǎn)#####
cookie
本身用于客戶端服務(wù)端通信蜂怎，但它有本地存儲(chǔ)的功能于是就被‘借用’，使用
documen.cookie=...獲取和修改-
缺點(diǎn)：
- 存儲(chǔ)量太小始花，只有4kb
- 所有http請(qǐng)求都帶著妄讯，會(huì)影響獲取資源的效率
- API簡(jiǎn)單，需要封裝才能用 衙荐，
document.cookie=...用起來麻煩
-
localStorage和sessionStorage
- HTML5專為存儲(chǔ)設(shè)計(jì)捞挥，最大容量5M
- API：
localStorage.setItem(key,value); localStorage.getItem(key); - IOS Safari隱藏模式下，
localStorage.getItem(key);會(huì)報(bào)錯(cuò)忧吟，建議同意使用try-catch封裝
XMLHttpRequest
var xhr=new XMLHttpRequest()
xhr.open('GET','/api',false)
xhr.onreadystatechange=function(){
//這里的函數(shù)異步執(zhí)行
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.responseText)
}
}
}
xhr.send(null)
IE低版本使用ActiveXObject砌函，和W3C標(biāo)準(zhǔn)不一樣
- 狀態(tài)碼說明
- readyState
- 0-（未初始化）還沒有調(diào)用send()方法
- 1-（載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求
- 2-（載入完成）send()方法執(zhí)行完成溜族，已經(jīng)收到全部響應(yīng)內(nèi)容
- 3-（交互）正在解析響應(yīng)內(nèi)容
- 4-（完成）響應(yīng)內(nèi)容解析完成讹俊，可以在客戶端調(diào)用了
- status
- 2xx-成功處理請(qǐng)求。如200
- 3xx-需要重定向煌抒，瀏覽器直接跳轉(zhuǎn)
- 4xx-客戶端請(qǐng)求錯(cuò)誤仍劈，如404（地址錯(cuò)誤）
- 5xx-服務(wù)器端錯(cuò)誤
- readyState
- 跨域
-
什么是跨域
- 瀏覽器有同源策略，不允許ajax訪問其他域接口
- 跨域條件：協(xié)議寡壮、域名贩疙、端口，有一個(gè)不同就算跨域
JSONP
加載http://coding.m.imooc.com/classindex.html况既，不一定服務(wù)器端真的有一個(gè)classindex.html文件这溅，服務(wù)器可以根據(jù)請(qǐng)求動(dòng)態(tài)生成一個(gè)文件來返回，同理于<script src='http://coding.m.imooc.com/api.js'>實(shí)現(xiàn)原理
假如你的網(wǎng)站要跨域訪問慕課網(wǎng)的一個(gè)接口棒仍，慕課網(wǎng)給你一個(gè)地址http://coding.m.imooc.com/api.js悲靴，返回內(nèi)容格式如callback({x:100,y:200})（可動(dòng)態(tài)生成）
-
<script>
window.callback=function(data){
//這是我們跨域得到的信息
console.log(data);
}
</script>
<script src='http://coding.m.imooc.com/api.js'></script>
<!-- 以上將返回callback({x:100，y:200}) -->
- 服務(wù)端設(shè)置http header
另外一個(gè)解決跨域的簡(jiǎn)單方法莫其，需要服務(wù)器端來做癞尚，但是作為交互方，我們必須知道這個(gè)方法乱陡，是將來解決跨域問題的一個(gè)趨勢(shì)
//注意：不同后端語(yǔ)言的寫法可能不一樣
//第二個(gè)參數(shù)填寫允許跨域的域名稱浇揩，不建議直接寫"*"
response.setHeader('Access-Control-Allow-Origin','http://a.com,http://b.com');
response.setHeader('Access-Control-Allow-Headers','X-Request-With');
response.setHeader('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');
//接受跨域的cookie
response.setHeader('Access-Control-Allow-Credentials','true');
-
可以跨域的三個(gè)標(biāo)簽：
<img src=''><link href=''><script src=''>
三個(gè)標(biāo)簽的場(chǎng)景
<img>用于打點(diǎn)統(tǒng)計(jì)，統(tǒng)計(jì)網(wǎng)站可能是其它域<link><script>可以使用CDN憨颠，CDN也是其它域<script>可以用于JSONP-
跨域注意事項(xiàng)
- 所有的跨域請(qǐng)求都必須經(jīng)過信息提供方的允許
- 如果未經(jīng)允許即可獲取临燃，那就是瀏覽器的同源策略出現(xiàn)漏洞
解題#####
1.請(qǐng)描述一下cookie，sessionStorage烙心，和localStorage的區(qū)別
- 容量區(qū)別膜廊，cookie為4k，localStorage和sessionStorage為5M
- cookie每次請(qǐng)求都會(huì)被攜帶在ajax中淫茵，localStorage和sessionStorage不會(huì)被攜帶只作為存儲(chǔ)使用
- API易用性
2.手動(dòng)編寫一個(gè)ajax爪瓜，不依賴第三方庫(kù)
var xhr=new XMLHttpRequest()
xhr.open('GET','/api',false)
xhr.onreadystatechange=function(){
//這里的函數(shù)異步執(zhí)行
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.responseText)
}
}
}
xhr.send(null)
3. 跨域的幾種實(shí)現(xiàn)方式
- JSONP
- 服務(wù)器端設(shè)置http header
