🥇 所有请求均已异步请求方式

🥇 AJAX 简介

AJAX 全称为Asynchronous Javascript And XML，就是异步的 JS 和 XML。
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，不是新的一门独立的技术，而是一种使用现有标准的新方法。

🥇 AJAX 的工作原理

Ajax的工作原理相当于在用户和服务器之间加了一个中间层(Ajax引擎)，使用户操作与服务器响应异步化。

🥇 AJAX 的特点

🥈 AJAX 的优点

可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。

🥈 AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题
SEO不友好

🥇 AJAX 的使用

🥈 Ajax 的实现

  1. function ajax(url, methods, body, headers) {
  2.   return new Promise((resolve, reject) => {
  3.     let req = new XMLHttpRequest();
  4.     req.open(methods, url);
  5.     for (let key in headers) {
  6.       req.setRequestHeader(key, headers[key]);
  7.     }
  8.     req.onreadystatechange = () => {
  9.       if (req.readystate == 4) {
  10.         if (req.status >= '200' && req.status <= 300) {
  11.           resolve(req.responeText);
  12.         } else {
  13.           reject(req);
  14.         }
  15.       }
  16.     };
  17.     req.send(body);
  18.   });
  19. }

🥈 核心对象

XMLHttpRequest，AJAX的所有操作都是通过该对象进行的。

🥈 使用步骤

  1. 创建XMLHttpRequest对象

    1. var xhr = new XMLHttpRequest();

  2. 设置请求信息

    1. xhr.open(method, url);
    2. //可以设置请求头，一般不设置 post 必须设置请求头
    3. xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  3. 发送请求

    1. xhr.send(body)  //get请求不传body参数，只有post请求使用

  4. 接收响应

    1. //xhr.responseXML 接收xml格式的响应数据
    2. //xhr.responseText 接收文本格式的响应数据
    3. xhr.onreadystatechange = function (){
    4.  if(xhr.readyState === 4 && xhr.status === 200){
    5.      var text = xhr.responseText;
    6.      console.log(text);
    7.  }
    8. }

🥈 AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态

  1.   1. 对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
  2.   2. 对应常量OPENED，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
  3.   3. 对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。
  4.   4. 对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
  5.   5. 对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了

🥇 解决IE缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据url地址来记录的，所以我们只需要修改url地址即可避免缓存问题

  1. // 在 URL 后边加上一个时间，每次请求的 url 地址不一样时 就会避免IE缓存
  2. xhr.open("get","/testAJAX?t="+Date.now());

🥇 jQuery 中的AJAX

🥈 get 请求

$.get(url, [data], [callback], [type])

  1.   1. url：请求的URL地址。
  2.   2. data：请求携带的参数。
  3.   3. callback：载入成功时回调函数。
  4.   4. type：设置返回内容格式，xml, html, script, json, text, _default。
  1. $.ajax({
  2.     url: 'https://www.baidu.com',
  3.     method: 'get',
  4.     data: {
  5.         name: 'chen',
  6.         age: 25
  7.     },
  8.     success: function (result) {
  9.         console.log(result);
  10.     },
  11.     error: function (err) {
  12.         console.log(err);
  13.     }
  14. })
  16. // 精简版
  17. $.get(
  18.     'https://www.baidu.com', {
  19.         name: 'chen',
  20.         age: 25
  21.     },
  22.     (data) => {
  23.         console.log(data);
  24.     }
  25. )

🥈 post 请求

$.post(url, [data], [callback], [type])

  1.   1. url：请求的URL地址。
  2.   2. data：请求携带的参数。
  3.   3. callback：载入成功时回调函数。
  4.   4. type：设置返回内容格式，xml, html, script, json, text, _default。

🥈 封装 AJAX

  1. function myAjax(option) {
  2.     let {
  3.         url,
  4.         method,
  5.         data,
  6.         success,
  7.         error
  8.     } = option;
  9.     // 实例化 xhr
  10.     let xhr = new XMLHttpRequest();
  11.     // 绑定监听
  12.     xhr.onreadystatechange = function () {
  13.         if (xhr.readyState !== 4) {
  14.             return
  15.         }
  16.         if (xhr.status >= 200 && xhr.status <= 299) {
  17.             if (success) success(xhr.response)
  18.         } else {
  19.             if (error) error('请求出错')
  20.         }
  21.     }
  22.     // 整理参数
  23.     let str = ''
  24.     for (let key in data) {
  25.         str += `${key}=${data[key]}&`
  26.     }
  27.     //根据请求方式决定如何携带参数
  28.     if (method.toUpperCase() === 'GET') {
  29.         xhr.open(method, url + '?' + str)
  30.         xhr.send()
  31.     } else {
  32.         xhr.open(method, url)
  33.         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  34.         xhr.send(str)
  35.     }
  36.     return xhr
  37. }

🥇 跨域问题

🥈 JSONP

关于 jsonp 解决跨域

  1.   1. 原理：利用了script标签发请求不受同源策略的限制。所以不会产生跨域问题
  2.   2. 套路：动态构建script节点，利用节点的src属性，发出get请求，从而绕开ajax引擎
  3.   3. 弊端：(1).只能解决get请求跨域的问题。(2).后端工程师必须配合前端
  4.   4. 备注：有这样一种感觉：前端定义函数，后端“调用”。后端返回的数据，前端以js格式解析，并且运行。
  1. // JSONP 跨域 - 客户端
  2. jsonp.addEventListener('click', () => {
  3.       // 提前定义好一个被调用的函数
  4.     window.fun = function (data) {
  5.         console.log(data);
  6.     }
  7.       // 创建一个 script 节点
  8.     const scriptNode = document.createElement('script');
  9.       // 为节点指定 src 地址,同时指定好回调函数的名字
  10.     scriptNode.src = 'http://localhost:3000/?callback=fun'
  11.       // 将节点插入页面
  12.     document.body.appendChild(scriptNode)
  13. })
  15. // JSONP 跨域 - 服务端
  16. app.get('/', function (request, response) {
  17.       // 接收客户端传过来的数据 获得回调函数并结构赋值获得回调函数的名称
  18.     let {
  19.         callback
  20.     } = request.query;
  21.       // 要返回客户端的数据
  22.     let personArr = [{
  23.         name: 'chen',
  24.         age: 25
  25.     }]
  26.     // 将准备好的数据 利用回调函数返回给客户端
  27.     response.send(`${callback}(${JSON.stringify(personArr)})`)
  28. })

🥈 CORS

cors 解决跨域问题只需要在服务端代码中加入一行代码即可

  1. app.use((request, response, next) => {
  2.      response.set('Access-Control-Allow-Origin', '*') // * 原意为可以通过的请求地址 * 表示所有请求都可以通过
  3.      next();
  4. })