Ajax

手写写Ajas请求

//get请求
const xhr = new XMLHttpRequest()	//实例
xhr.open('GET','/api',true) 	//请求方式，发送参数，是否异步
xhr.onreadystatechange = function(){	//状态变化
	if(xhr.readyState ===4){	//状态码
		if(xhr.status===200){
			console.log(xhr.responseText)	//返回响应数据
		}
	}
}
xhr.send(null)

http的readyState状态码

• 0 ——（未初始化）还没有调用send（）方法
• 1 ——（载入）已调用send（）方法，正在发送请求
• 2 ——（载入完成）send（）方法执行完成，已经接收到全部响应内容
• 3 ——（交互）正在解析响应内容
• 4 ——（完成）响应内容解析完成，可以在客户端调用

status状态码

• 2** ——表示成功处理请求，如200
• 3** ——需要重定向，浏览器直接跳转，如301，302，304
• 4** ——客户端请求错误，如404,403
• 5** ——服务器错误

同源策略

• ajax请求时，浏览器要求当前网页和server必须同源(安全)
• 同源：协议、域名、端口，三者必须统一
• 加载图片，css，js可无视同源策略

跨域

• 所有的跨域，都必须经过server端的允许和配合
• 未经server端允许就实现跨域，说明浏览器有漏洞，危险信号

JSONP

<script>
	window.callback = funtion (data){
		console.log(data)
	}
</script>
<script src='http://localhost:8080/jsonp.js?name=aaa'></script>

$.ajax({
	url:'',
	dataType:'jsonp',
	jsonpCallback:'callback-aaa',
	success:(res)=>{
	
	}
})