AjaxDay03

XMLHttpRequest

什么是 XMLHttpRequest?

是浏览器内置的一个构造函数

作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。
axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR）封装出来的！

使用 XMLHttpRequest 发起 GET 请求

get不携带参数

主要的 4 个实现步骤：

创建 xhr 对象
调用 xhr.open() 函数
调用 xhr.send() 函数
监听 load 事件

在这里插入图片描述

get携带带参数

可以在请求的 URL 地址后面通过 ? 的形式携带查询参数。示例代码如下：

在这里插入图片描述

使用 XMLHttpRequest 发起 POST 请求

携带`查询参数`

在这里插入图片描述

携带`请求体参数`

当需要携带请求体数据时，需要进行额外的两步操作：

在 xhr.open() 之后，调用 xhr.setRequestHeader() 函数，指定请求体的编码格式
在 xhr.send() 中，指定要提交的请求体数据

在这里插入图片描述

数据交换格式

数据交换格式，就是服务器端与客户端之间数据传输的格式,现在主要使用JSON交换格式

在这里插入图片描述

把 JSON 数据转换为 JS 数据

调用浏览器内置的 SON.parse() 函数，可以把 JSON 格式的字符串转换为 JS 数据，例如：

在这里插入图片描述

把 JS 数据转换为 JSON 数据

调用浏览器内置的 JSON.stringify() 函数，可以把 JS 数据转换为 JSON 格式的字符串，例如：

在这里插入图片描述

JSON文件的语法要求

封装自己的 Ajax 函数

function SelfAjax(options) {
  //初始化对象
  const xhr = new XMLHttpRequest()
  //处理get请求传参,本质上是将参数对象做处理后追加到url后面
  if (options.params) {
    let arr = []
    for (k in options.params) {
      arr.push(`${k}=${options.params[k]}`)
    }
    options.url +='?'+arr.join('&')
  }
  //准备数据
  xhr.open(options.method, options.url)
  
  //如果是post请求
  if (options.method.toLowerCase() == 'post' && options.data) {
    //如果data属性值是FormData类型,直接发送数据请求(fd为二进制对象,可不做编码处理)
    if (options.data instanceof FormData) {
      xhr.send(options.data)
    }//如果data属性值是String类型,需定义头部请求中编码格式再发送数据请求(表单对象.serialize()可获取字符串类型的表单提交数据)
    else if (typeof options.data === 'string') {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      xhr.send(options.data)
    }//如果data属性值是Object类型,需定义头部请求中编码格式为json再发送数据请求
    else if (typeof options.data === 'object') {
      xhr.setRequestHeader('Content-Type', 'application/json')
      //将object对象转换为json字符串
      xhr.send(JSON.stringify(options.data))
    }
  } else {
  //发送数据请求
  xhr.send()
  }
  //监听onload事件,获得返回值
  xhr.addEventListener('load', function () {
    //将返回的json数据转换为js对象
    let data = JSON.parse(xhr.response)
    //服务器返回的数据交给函数调用的业务逻辑处理
    options.success && options.success(data)
  })
}

同源策略 & 跨域

什么是同源?

同源指的是两个 URL 地址具有相同的协议、主机名、端口号。

例如，下表给出了相对于 http://www.test.com/index.html 页面的 5 个同源检测结果：

URL	是否同源	原因说明
http://www.test.com/other.html	是	同源（协议、域名、端口相同）
https://www.test.com/about.html	否	协议不同（http 与 https）
http://blog.test.com/movie.html	否	域名不同（www.test.com 与 blog.test.com）
http://www.test.com:7001/home.html	否	端口不同（默认的 80 端口与 7001 端口）
http://www.test.com:80/main.html	是	同源（协议、域名、端口相同）

什么是跨域?

同源指的是两个 URL 的协议、主机名、端口号完全一致，反之，则是跨域。

出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。例如：
网页：http://www.test.com/index.html
接口：http://www.api.com/userlist
受到同源策略的限制，上面的网页请求下面的接口会失败！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ajNtr4At-1642253567805)(assets/1642211195677.png)]

突破浏览器跨域限制的三种方案

方案	诞生的时间	方案来源	优点	缺点
JSONP	出现较早	民间（非官方）	兼容性好（兼容低版本 IE）	仅支持 GET 请求
CORS	出现较晚	W3C 官方标准	支持 GET、POST、PUT、DELETE、PATCH等常见的请求方式	不兼容某些低版本浏览器