ES5 Ajax

题目

• 手动编写一个ajax，不依赖第三方库
• 跨域的几种实现方式

知识点

• XMLHttpRequest
• 状态码说明
• 跨域

//XMLHttpRequest 源码
var xhr = new XMLHttpRequest()
xhr.open('GET', '/api', false)//首先打开
//method，地址
//false代表异步
xhr.onreadystatechange = function(){//定义完，后面再执行
	//这里的函数异步执行，所以定义完了之后暂存起来
	if(xhr.readyState == 4){
		if(xhr.status == 200){//服务端返回200，说明成功
			console.log(xhr.responseText)
		}
	}
}
xhr.send(null)
//send完了之后，xhr这个对象会随时监听状态变化
//每次状态变化（即每次readyState变化）触发readystatechange函数的执行
//函数里面要判断它的readyState，还要判断服务器端返回的status状态码

IE兼容性问题

• IE低版本使用ActiveXObject，和W3C标准不一样
• IE低版本使用量非常少，很多网站都早已不支持
• 建议对IE低版本的兼容性：了解即可，无需深究
• 如果遇到对IE低版本要求苛刻的面试，果断放弃

状态码说明

readyState

• 0 —— （未初始化）还没有调用send()方法
• 1 —— （载入）已调用send()方法，正在发送请求
• 2 —— （载入完成）send()方法执行完成，已经接收到全部响应内容
• 3 —— （交互）正在解析响应内容
• 4 —— （完成）响应内容解析完成，可以在客户端调用了
  status
• 2xx —— 表示成功处理请求。如200
• 3xx —— 需要重定向，浏览器直接跳转
• 4xx —— 客户端请求错误，如404（客户端请求错误）
• 5xx —— 服务器错误， 如504（服务端请求超时）

关于代码演示

• 以上是ajax的实现原理，后续会使用jquery演示代码
  实际中使用 fetch、jquery、zepto等实现ajax

跨域

• 什么是跨域
• JSONP （前端使用JSONP实现跨域）
• 服务器端设置http header（实现跨域）

什么是跨域

• 浏览器有同源策略，不允许ajax访问其他域接口
• 跨域条件： 协议、域名、端口、以上有一个不同就算跨域

可以跨域的三个标签

• 但是有三个标签允许跨域加载资源
• < img src = xxx > 百度，知乎做了防盗链处理
• < link href=xxx >
• < script src=xxx >

三个标签的使用场景

• < img > 用于打点统计，统计网站可能是其他域
  小网站可以用百度统计、站长统计
• < link >< script > 可以使用CDN，CDN的也是其他域
• 可以用于JSONP跨域请求

跨域注意事项

• 所有的跨域请求必须经过信息提供方允许
• 如果未经允许即可获取，那是浏览器同源策略出现漏洞

JSONP

• 加载http://coding.m.imooc.com/classindex.html
• 不一定服务端真正有一个classindex.html文件
• 服务器可以根据请求，动态生成一个文件，返回给客户端（如动态网页）
• 同理于< script src=“http://coding.m.imooc.com/api.js” >

JSONP实现原理

• 例如你的网站要跨域访问慕课网的一个接口
• 慕课给你一个地址http://coding.m.imooc.com/api.js
• 返回内容格式如callback({x:100,y:200})（可动态生成）

//JSONP实现原理
<script>
	window.callback = function(){
		//这是我们跨域得到的信息
		console.log(data)
	}
</script>
<script src="http://coding.m.imooc.com/api.js"></script>
//以上将返回callback({x:100,y:200})
//script可以绕过跨域限制

服务器端设置http header

• 另外一个解决跨域的简洁方法，需要服务器端来做
• 但是作为交互方，我们必须知道这个方法
• 是将来解决跨域问题的一个趋势

//注意：不同后端语言的写法可能不一样
//第二个参数填写允许跨域的域名称，不建议直接写“ * ”
response.setHeader("Access-Control-Allow-Origin","http://a.com,http://b.com");
response.setHeader("Access-Control-Allow-headers","X-Requested-With");
response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
//接收跨域的cookie
response.setHeader("Access-Control-Allow-Credentials","true")

解答