ES5 Ajax

it2025-06-16 5

题目

手动编写一个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 —— （完成）响应内容解析完成，可以在客户端调用了 status2xx —— 表示成功处理请求。如2003xx —— 需要重定向，浏览器直接跳转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")

解答

最新回复(0)