XMLHttpRequest
var xhr = new XMLHttpRequest()
//創(chuàng)建一個(gè)新的http請(qǐng)求倚评，打開(kāi)請(qǐng)求头镊。(方式get/post隅要，url地址，是否異步)
xhr.open("GET",url,false)
//onreadystatechange 指定當(dāng)readyState屬性改變時(shí)的事件處理句柄隐砸。
//也就是每次readyState屬性改變時(shí)都會(huì)觸發(fā)這個(gè)函數(shù)
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
//將響應(yīng)信息作為字符串返回
alert(xhr.responseText)
}
}
xhr.send(null)
注：IE兼容性問(wèn)題
IE低版本使用ActiveXObject膝捞，和W3C標(biāo)準(zhǔn)不一樣
狀態(tài)碼
readyState
- 0-（未初始化）還沒(méi)調(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)容解析完成吞彤，可以在客戶(hù)端調(diào)用了
status
- 2xx-表示成功處理請(qǐng)求。如200
- 3xx-需要重定向叹放，瀏覽器直接跳轉(zhuǎn)
- 4xx-客戶(hù)端請(qǐng)求錯(cuò)誤饰恕，如404
- 5xx-服務(wù)器端錯(cuò)誤，如500
跨域
什么是跨域
瀏覽器有同源策略井仰，不允許Ajax訪問(wèn)其他域接口
跨域條件：協(xié)議懂盐、域名、端口糕档，有一個(gè)不同就算跨域有三個(gè)標(biāo)簽允許加載跨域資源
<img src=xxx>
<link href=xxx>
<script src=xxx>三個(gè)標(biāo)簽的應(yīng)用場(chǎng)景
<img> 用于打點(diǎn)統(tǒng)計(jì) 其他域的統(tǒng)計(jì)網(wǎng)站
<link> <script> 可以使用來(lái)自其他域的CDN
<script> 可以用于JSONP跨域注意事項(xiàng)
所有的跨域請(qǐng)求都必須經(jīng)過(guò)信息提供方允許
如果未經(jīng)允許即可獲得，那是瀏覽器同源策略出現(xiàn)漏洞
JSONP
-
JSONP實(shí)現(xiàn)原理
假如加載http://www.zhibu.com/index.html
不一定服務(wù)端就真的存在一個(gè)index.html
服務(wù)端可以根據(jù)請(qǐng)求拌喉，動(dòng)態(tài)生成一個(gè)文件并返回
同理 <script src="http://www.zhibu.com/api.js"> 也是如此
假如你的網(wǎng)站要跨域訪問(wèn)知乎的一個(gè)接口
知乎給你一個(gè)地址 http://www.zhibu.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://www.zhihu.com/api.js"></script>
<!-- eg: 以上將返回callback({x:100,y:200}) -->
服務(wù)器端設(shè)置 http header
- 服務(wù)器端設(shè)置http header是另外一個(gè)解決跨域的簡(jiǎn)潔方法速那，需要在服務(wù)器端操作。但是作為前端也要了解這個(gè)方法尿背，這是將來(lái)解決跨域問(wèn)題的一個(gè)趨勢(shì)端仰。
//注意 不同后端語(yǔ)言的寫(xiě)法不同
//第二個(gè)參數(shù)填寫(xiě)允許跨域的域名稱(chēng) 不建議直接寫(xiě)*
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");
練習(xí)題
練習(xí)題1、手動(dòng)編寫(xiě)一個(gè)ajax田藐，不依賴(lài)第三方庫(kù)
// 指定了請(qǐng)求目標(biāo)荔烧，也明確了如何處理之后，就可以發(fā)送請(qǐng)求了
var request = new XMLHttpRequest();
// 指定請(qǐng)求目標(biāo)汽久，三個(gè)參數(shù), GET or POST, 請(qǐng)求路徑 , 是否異步（默認(rèn)true鹤竭，可以不寫(xiě)）
request.open('GET',url,true);
request.onreadystatechange() = function(){
if(request.readyState === 4){
// 請(qǐng)求完成
if(request.status === 200){
// 請(qǐng)求成功，獲得一個(gè)成功的響應(yīng),此后可以開(kāi)始請(qǐng)求成功后的處理
//responseText 保存文本字符串格式
request.responseText
//responseXML 保存 Content-Type 頭部中指定為 "text/html" 的數(shù)據(jù)
request.responseXML
}else{
// 請(qǐng)求失敗景醇，根據(jù)響應(yīng)碼判斷失敗原因
console.log('error,status:'+request.status)
}
}else{
// 請(qǐng)求還在繼續(xù)
}
}
練習(xí)題2臀稚、跨域的幾種實(shí)現(xiàn)方式
JSONP
服務(wù)器端設(shè)置http header
