【JS面试】第九章 Ajax & 跨域

  1. 手动编写一个Ajax，不依赖第三方库
  2. 跨域的几种实现方式

XMLHttpRequest

  • IE低版本使用ActiveXObject，和W3C标准不同
var xhr = new XMLHttpRequest();
xhr.open('GET', '/app', false); // false 异步
xhr.onreadystatechange = function () {
  // 这里的函数异步执行，可参考之前JS基础中的异步模块
  if (xhr.readyState == 4) {
    if (xhr.state == 200) {
      alert(xhr.responseText)
    }
  }
}
xhr.send(null)

状态码说明

xhr.readyState == 4

状态码 状态 说明
0 未初始化 还没有调用send()方法
1 载入 已调用send()方法，正在发生请求
2 载入完成 send()方法执行完成，已接收到全部相应内容
3 交互 正在解析相应内容
4* 完成 响应内容解析完成，可以在客户端调用了

xhr.status == 200

状态码 说明
2xx 表示成功处理请求，如200
3xx 需要重定向，浏览器直接跳转
4xx 客户端请求错误，如404
5xx 服务端错误

跨域

什么是跨域

浏览器有同源策略，不允许Ajax访问其他域接口

跨域条件

  • 协议
  • 域名
  • 端口（HTTP默认80；HTTPS默认443）

有一个不同就算跨域

但是有三个标签允许跨域加载资源

  • <img src = xxx>用于打点统计，统计网站可能是其他域，防盗链
  • <link href = xxx>、<script src = xxx>可以使用CDN，CDN的也是其他域
  • <script src = xxx>script可以用于JSONP

注意事项：

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

JSONP

实现原理

加载 http://codeing.m.imooc.com/classindex.html

  • 不一定服务器端真正有一个classindex.html
  • 服务器可以根据请求，动态生成一个文件，返回
  • 同理于<script src = 'http://coding.m.imooc.com/api.js'>

例如你的网站要跨域访问慕课网的一个接口

<script>
  window.callback = function (data) {
    // 这里是我们跨域得到的信息
    console.log(data)
  }
</script>
<script src="http://coding.m.imooc.com/api.js"></script>

服务器端设置http header

跨域趋势，简洁方法，服务端设置

response.setHeader('Access-Control-Allow-Origin',"http://a.com")
response.setHeader('Access-Control-Allow-Headers','X-Requestd-Width')
response.setHeader('Access-Control-Allow-Method','PUT,POST,GET,DELETE,OPTIONS')
response.setHeader('Access-Control-Allow-Credentials','true') // 接受宽裕的cookie

题目解答

  1. 手动编写一个Ajax，不依赖第三方库
  1. 跨域的几种实现方式
  • JSONP
  • 服务器端设置http header
posted @ 2019-03-16 15:43  冯天祥  阅读(153)  评论(0)  编辑  收藏  举报