整理Ajax的點點滴滴

最近看了下《Javascript高級程序設計》(第三版)關於Ajax部分，作了這篇筆記。

 

1、常規用法

 

第一步，建立XHR對象
var xhr = new XMLHttpRequest();
此方法兼容IE7+, 針對IE6須要使用new ActiveXObject("Microsoft.XMLHTTP");

 

第二步，準備請求
xhr.open("get","/testajax",false);
參數分別爲: 請求類型 、url、是否異步

 

第三步，發送請求
get請求的話就是xhr.send(null)
send須要一個參數，由於get請求中參數會在url中，因此這裏寫null（之因此寫null是由於不寫的話在某些瀏覽器會有問題）。
若是是post請求，那麼這裏面就寫post請求須要的參數。
可是首先須要設置content-type，例如:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
而後發送數據xhr.send("fname=Bill&lname=Gates");

 

第四步，請求發出去後，服務器響應的內容會自動填充到xhr對象的屬性上
有這些屬性
responseText 返回的文本
responseXML 若是content-type爲"text/xml'或者"application/xml"就把數據放這個屬性
status HTTP狀態碼
statusText 狀態說明

 

第五步、根據status檢查請求狀態
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText )
}else{}

不管類型是什麼，響應主題內容都會保存在responseText屬性中。
對於非xml格式數據而言，responseXML爲null。

 

第六步，若是是異步請求，那麼須要監聽readyState來判斷請求的狀態
經過onreadystatuschange事件判斷readyState的值

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log("success")
}
};

 

其餘注意點:
setRequestHeader用來設置頭信息
getResponseHeader獲得響應頭信息
getAllResponseHeaders獲得所有響應頭信息

get請求中，對參數使用encodeURIComponent方法

post請求中，設置content-type，參數序列化傳入，格式和get請求同樣
若是不設置content-type，那麼後臺就必須從raw request header中去獲得參數

 

2、xhr2中的功能

1: FormData()序列化表單數據
var data = new FormData();
data.append("hello","world");
xhr.send(data);
或者
xhr.send(document.forms[0])
這樣能夠快速傳入post參數，並且無需設置content-type。

 

2: timeout超時
xhr.timeout = 1000; //設置超時時間
xhr.ontimeout = function(){}; //處理超時狀況
xhr.send(null);

 

3:overrideMimeType
重寫MIME,MIME決定了你的responseXML或者responseText的值是否存在
MIME由content-type設置

 

4:進度事件，用來監視xhr的進度。
提供了一系列的事件，能夠作相似網頁加載進度條的效果。

 

3、跨域
CORS實現ajax的跨域訪問

1: 標準的實現:
首先，先發送一個跨域ajax請求（這裏能夠檢測是否支持CORS，經過新建一個xhr對象，檢測xhr2中的屬性是否存在在這個對象來實現）。
而後，普通狀況下，咱們確定會發現控制檯報錯，相似沒法訪問跨域資源這種錯誤。
這時須要服務器設置
Access-Control-Allow-Origin:* 表明全部域名均可以訪問到
Access-Control-Allow-Origin: http://www.cnblogs.com 限定了域名
請求和響應均不包含cookie信息

 

2: IE的實現:
經過XDomainRequest()來實現。
直接改變contenttype屬性來實現post請求
xdr.contentType= "";
不能發送同步請求

 

3: 自定義頭部：
在CORS中是不支持的，可是有固定接口能夠設置的頭部來傳輸信息。

 

4: 帶憑證的請求（cookie、ssl等）:
客服端經過withCredentials設置爲true來實現
服務器返回相應的頭部來確認便可。

4、其餘跨域技術

1: 動態建立一個圖片，src跨域，而後能夠返回一個像素圖或者204;
返回後的處理在onload和onerror裏面
能夠用於一些數據統計方面。

2: JSONP

 

5、服務器推送
一、輪詢
二、長輪詢
三、HTTP流
四、SSE
五、Web Sockets
先發一個http請求過去，服務器相應後會把http協議變爲web socket協議
連接變爲 ws://
var socket = new WebSocket("ws://xxx.com")
沒有同源限制
經過 socket.readyState 來判斷連接狀態
socket.close()關閉

數據交互
socket.send("xxx");發送消息
消息內容只能是純文本，因此對於複雜的數據須要序列化
socket.onmessage = function(event){
var data = event.data; //這裏是服務器返回的數據
}