前言

1.从 提交，到 ajax ，前后端的交互变得更加灵活且舒适，再到 JQ 的 $ajax 、axios，我们好像写起来越来越方便了，但是，我越来越忘记了 ajax 原本到底是个什么东西，他原本长得什么样子？我有印象，但似乎，又不太知道他是个啥，除了 ajax ，fetch 又是什么？
这次，就让我好好复习，重温前后端的交互吧

ajax

是什么

1.ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML）
2.他并不是一种新的语言，而是一种使用现有技术标准的新方法
3.它可以再不重新加载整个页面的情况下，与服务器交换数据并能够更新部分网页的技术
4.通过在后台与服务器进行少量数据交换，ajax 可以使网页实现异步更新

基本使用

• ajax 基于 XMLHttpRequest 对象
• 创建 XMLHttpRequest 对象

    let xhr = new XMLHttpRequest();

• 配置请求参数
• 同步会造成代码阻塞，将在数据交互完成后（成功、超时、失败等）才可进行下一步操作，用户会感觉卡顿，用户体验不好，一般使用异步（可以调一下浏览器网速看看效果）

    xhr.open('get', '/checkUserName', true); // true 为异步 false 为同步

• 接收返还值
• 返回值将于 xhr.responseText 呈现

    xhr.onload = function () {
      console.log(this.responseText)
    }

• 发送至服务器

  xhr.send();

xhr.open(method, url, async)

1. 规定向服务器发送请求的配置

• method - 请求的类型；get 或 post
• url - 文件在服务器的位置 - 请求数据地址
• async - 是否采用异步处理 - true: 同步; false: 异步

get 和 post 注意点

• 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用

• 然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

发送数据

URL 传参

1. queryString

   • 一般形式为 ?key=val
   • 如果有多个参数则通过 & 进行拼接，如：?key1=val1&key2=val2

2. params

   • node - KoaRouter 后端表现形式为 /get/:key ，以 : 表示
   • 前端则是在 URL 后加上 /val 传
   • 如多个参数，后端: /get/:key1/:key2；前端: /val1/val2

   3.queryString 和 params 注意点

   • 选择使用 queryString 还是 params 其实都可以，视路由设计思路选择
   • 值得注意的是 和 function 的传参一样
   • 如果是 params 的话即使前面的传参不需要，也需要占位，例如：/val1/val2，val1 不需要的情况下也要写上占位

   • 而 queryString 则不需要，想要传哪一个参数，直接写对应的 key=val 就可以了

     • params 规定动态路由后，如不带参数，请求失败，例如：
     • 后端：get/:key
     • 前端必须请求：/get/val，如直接请求 /get 则会请求失败
     • URL 的传参与请求方式 get 和 post 无关，两种请求方式都可以 URL 携带参数

xhr.send()

• 在发送请求到服务器时，可携带参数
• 此方法仅用于 post

• 发送数据时需要设置http正文头格式

  • 请求头类型与 表单的 enctype 基本一样
    1.text/plain - 不写正文头格式 - 以 string 进行发送
    2.application/x-www-form-urlencoded - 以默认编码进行发送

    • 写法类似于 queryString ，不过没有 ?，以 & 进行连接

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(`key1=val1&key2=val2`); // -> { key1: 'val1', key2: 'val2' }

3.multipart/form-data - 以二进制编码进行发送 - 多用于发送文件等内容：FromData
4.application/json - 以 json 编码进行发送

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    key1: 'val1',
    key2: 'val2'
}));
// -> { key1: 'val1', key2: 'val2' }

返还信息 - XMLHttpRequest.response

• 获取返还头信息

  1. xhr.getAllResponseHeaders() - 获取所有信息
  2. xhr.getResponseHeader() - 获取指定信息，例：xhr.getResponseHeader('Content-Type')

• 获取返还正文

  1. xhr.response - 获得 ArrayBuffer、Blob、Document、Object 或 DOMString 形式的响应数据
  2. xhr.responseText - 获得字符串形式的响应数据
  3. xhr.responseXML - 获得 XML 形式的响应数据

  4. xhr.responseURL - 获得 序列化URL

     • 如果URL为空则返回空字符串
     • 如果URL有锚点，则位于URL # 后面的内容会被删除
     • 如果URL有重定向，responseURL 的值会是经过多次重定向后的最终 URL

• 注意：

  • 获取返还正文需要后台正确写入响应头 Content-Type
  • 如后台响应头 Content-Type 没写或者书写错误前端也可以进行重写修改

    xhr.overrideMimeType() // 重写 Content-Type

FromData

• FormData对象用以将数据编译成键值对，以便用 XMLHttpRequest 来发送数据
• 其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用

• 如果表单 enctype 属性设为 multipart/form-data，则会使用表单的 submit() 方法来发送数据，从而，发送数据具有同样形式

  const form = new FormData();
  // FormData 对象可添加多个键，这里第一个键是 input[type=file] 的files[0]
  form.append('img', file);
  form.append('name', '图片');
  const xhr = new XMLHttpRequest();
  xhr.open('post', '/upload', true);
  xhr.send(form); // send() 内正文提交

ajax 属性及事件钩子

1.xhr.readyState (只读) - 返回 一个无符号短整型（unsigned short）数字，代表请求的状态码

2.xhr.status - 返回 XMLHttpRequest 响应中的数字状态码

3.xhr.onreadystatechange - 当 readyState 属性发生变化时触发

• 这个方法不该用于同步的requests对象
• 当一个 XMLHttpRequest 请求被 abort() 方法取消时，其对应的 readystatechange 事件不会被触发

const xhr = new XMLHttpRequest();
xhr.open('post', '/demo', true);
xhr.onreadystatechange = function () {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        console.log(this.responseText);
    }
}
xhr.send();

4.xhr.timeOut - 最大请求时间（毫秒）

• 一个无符号长整型（unsigned long）数字
• 若超出该时间，请求会自动终止

5.XMLHttpRequestEventTarget.ontimeout - 当请求超时调用的 EventHandler
6.xhr.upload - 返回一个 XMLHttpRequestUpload 对象，用来表示上传的进度