原生Ajax的原理和實現

核心：XMLHttpRequest對象（XHR）

var xhr = new XMLHttpRequest() xhr.onreadystatechange= function(){
	// 此函數異步執行,readyStatus變化則觸發      
	if(xhr.readyState === 4){ //請求處理狀態        
		if (xhr.status >= 200 && xhr.status < 300 ||xhr.status === 304){ //服務端返回狀態
			// xhr.responseText 返回的文本
			// xhr.responseXml 返回類型若是xml，則保存着響應數據的XML DOM文檔
		}
	}
}
xhr.timeout = 1000 //設置超時時間(ms)
xhr.ontimeout = function(){}
xhr.setRequestHeader(header, value) //設置http頭部信息
//GET:
xhr.open("get", url, isAsync)
xhr.send(null)
//POST:
xhr.open("post", url, isAsync)
xhr.send(serialize(form)) //請求數據
//使用FormData則不必明確的setRequestHeader:
var data = newFormData();
data.append(key,val);
xhr.send(data)
xhr.abort() //取消異步請求

狀態碼 xhr.readyState

(0)---open---(1)--->send---(2)--->收到部分響應數據(3)--->接收並解析完成，可以在客戶端調用(4)

 

HTTP Status

2xx：成功處理

3xx：重定向，304：Not Modified，可用本地緩存

4xx：客戶端請求錯誤

5xx：服務端處理錯誤

 

跨域

域名、協議、端口，其中之一不同就算跨域；瀏覽器有同源策略，默認禁止ajax跨域訪問；

可以跨域加載資源的：<img><link><script>

 

跨域源資源共享：

一、 CORS草案（Cross-Origin Resource Sharing）

用自定義的HTTP頭部讓瀏覽器於服務器進行溝通。需附加額外的Origin頭部，包含請求頁面的源信息。

需服務器端配合，根據頭部信息決定是否給予響應。

二、JSONP (JSON with padding)

被包含在函數調用中的JSON，利用<script>跨域加載數據；

functionhandleResponse(response){
	alert("You're at IP address " + response.ip +", whichi is in "+ response.city + ", " +response.region_name);
}
functionappendScriptTag(src){ //動態增加以重複調用
       var script = document.createElement("script")
       script.src = src
       document.body.appendChild(script)
}
appendScriptTag("http://freegeoip.net/json/?callback=handleResponse");

//http://freegeoip.net/json/ 

{"ip":"61.173.8.236","country_code":"CN","country_name":"China","region_code":"31","region_name":"Shanghai","city":"Shanghai","zip_code":"","time_zone":"Asia/Shanghai","latitude":31.0456,"longitude":121.3997,"metro_code":0}