前端知识点之 ajax 与跨域

Ajax 是 JS 中非常重要的一块内容，虽然我们工作中可能经常会用 jquery 等来实现 Ajax, 原生 JS 的实现方式不得不了解

知识点：

• XMLHttpRequest
• 状态码说明
• 跨域

一、XMLHttpRequest

// ajax 的基本使用

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function (){
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText)
        }
    }
}
xhr.open('GET', './api', false)
xhr.setRequestHeader('Content-Type','application/json')
xhr.send()

注：IE 低版本下不支持XMLHttpRequest，要用ActiveXObject，但是我觉得不需要考虑了 IE 低版本浏览器了

二、状态码说明

readyState

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

status

• 2xx: 表示成功处理请求，如 200
• 3xx: 表示重定向，浏览器直接跳转
• 4xx: 客户端请求错误，如 404
• 5xx: 服务端错误

三、跨域

什么是跨域

• 浏览器有同源策略，不允许 ajax 访问其他域的接口
• 跨域条件：协议、域名、端口，有一个不同就是跨域
• 但有三个可以跨域的标签：
  <img src="xxx" />
  <link href="xxx" />
  <script src="xxx"></script>

<img>跨域场景：打点统计，比如百度统计
<link>引用外部的 css 文件
<script>可用于 JSONP

跨域的注意事项

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

跨域的方式

JSONP
JSONP 的实现原理：
可以通过 script 引用跨域地址的一个 js 文件，而这个文件返回了一个函数，接着就可以调用这个函数

<script>
    window.callback = function (res) {
        // 这是我们跨域得到的信息
        console.log(res)
    }
</script>
<!-- 下面的 js 返回 callback({x: 100, y: 200}) -->
<script src="http: //xxx.xxx.xxx/api.js"></script>

服务端设置http header

• 需要服务端来做

  
  image.png

以上为学习笔记，参考资料来源：慕课网的课程