原生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}