原生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跨域访问;

可以跨域加载资源的:

你可能感兴趣的:(JS基础)