axios、ajax、xhr、xml、http你都懂了吗？

---

---

一、一般请求和ajax请求

1. 一般请求：通过httpRequest向请求服务器接受请求返数据，在浏览器中地址栏输入后回车的都是普通请求。
2. ajax请求：Ajax 即Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

两者之间的区别：
1. ajax请求是一种特别的异步http请求
2. 对服务器端来说, 没有任何区别, 区别在浏览器端
3. 浏览器端发请求: 只有XHR或fetch（现在几乎不用了）发出的才是ajax请求, 其它所有的都是非ajax请求

浏览器端接收到响应后的行为：

• 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的自动刷新/跳转页面
• ajax请求: 浏览器不会对页面进行自动更新显示操作，页面不会有任何变化，只是调用监视的回调函数传入响应的相关数据，如果需要更新显示页面元素数据，需要自己在程序中手动去获取元素进行更新，当然如果是使用vue的话就不需要获取dom元素了，只需要设置对应的变量值为返回的数据就可以了

1、ajax请求的优势和劣势：

（1）优点:

1. 不需要插件的⽀持，原⽣ js 就可以使⽤
2. 户体验好（不需要刷新⻚⾯就可以更新数据）
3. 减轻服务端和带宽的负担

（1）缺点：

• 搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到

2、ajax请求的请求过程和工作原理：

请求过程：

后端响应：

1. 首先通过PHP页面将数据库中的数据取出
2. 取出后转成json格式（前后端交互主流数据格式）的字符串，后利用ajax把字符串返还给前台
3. 再利用json.parse解析通过循环添加到页面上

前端请求：
4. 前端的数据利用ajax提交到后台
5. 但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上
6. 最后再由PHP将数据插入到数据库中

注意：
如果是异步ajax（默认是异步）请求，过程是先接收服务器传回的数据，再发HTTP请求（open（），send（）），需要用存储函数onreadystatechange，每当 readyState 属性改变时就会调用该函数，相当于一直监听服务器传回的数据 ；而同步的Ajax请求则相反，因为是阻塞的，所以不用实时监听。

工作原理：

3、常见四种请求方式：

4、详解GET请求和POST请求参数类型和数据格式：

• GET请求：参数携带于请求头，参数形式有querry和params
querry格式例下：
  

• POST请求：使用POST，请求体传参需要申明请求头用来指明传参格式，且服务器端收到POST请求需要中间件解析请求体内容
  

---

二、ajax和xhr你需要知道的

xhr可不是小黄人哦！

1、XHR是ajax的基础

XHR:浏览器的API,它负责后台和服务器之间交换数据，允许了一次加载部分内容。如果浏览器不通过XHR直接向服务器提出请求，那么所有内容就会一次加载完成。

2、手写ajax

function get() {
            var xhr = new XMLHttpRequest()
            // open后面有三个参数：
            // 规定请求的类型、URL 以及是否异步处理请求。
            // method：请求的类型；GET 或 POST
            // url：文件在服务器上的位置
            // async：true（异步）或 false（同步） 默认为true
            xhr.open('get', '/getTest?name=niuma&age=20')

            // 发送请求到后端（服务器）
            xhr.send()

            // 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
            // 每当 readyState 改变时，就会触发 onreadystatechange 事件。
            // readyState 属性存有 XMLHttpRequest 的状态信息，4代表已经接收到全部响应数据
            // 在xhr的准备状态发生改变的时候，调用该方法
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText)
                }
            }
        }

        function post() {
            var xhr = new XMLHttpRequest()
            // post 请求方式，接口后面不能追加参数
            xhr.open('post', '/postTest')

            // 如果使用post 请求方式， 而且是以key=value 这种形式提交的
            // 那么需要设置请求头的类型
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            xhr.send('num=1&des=我爱你')

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText)
                }
            }

        }

3、番外之readyState的五个值:

XHR对象的readyState属性对应有五个值，它们的含义如下：

0：未初始化。尚未调用open()方法

1：启动。已经调用open()方法，但是还没有调用send()方法

2：发送。已经调用send()方法，但是还没有接收响应

3：接收。已经接收到部分数据

4：完成。已经接收到全部响应数据，并且可以在客户端使用了

---

三、axios的理解和使用

1、 axios是什么?

前端最流行的ajax请求库

为什么要用？
react/vue官方都推荐使用axios发ajax请求，两个最6的前端框架都推荐使用，你敢不学？
官方文档: https://github.com/axios/axios

2、 axios特点

1. 基本promise的异步ajax请求库
2. 浏览器端/node端都可以使用
3. 支持请求／响应拦截器
4. 支持请求取消
5. 请求/响应数据转换
6. 批量发送多个请求

3、使用axios发ajax请求

1. GET请求: 从服务器端获取数据

function testGet() {
  axios({
    url: 'http://localhost:3000/posts',
    // url: 'http://localhost:3000/posts2',
    method: 'GET',
    //注意这里的params代表参数的意思，并不是代表params参数，实则querry参数
    params: {
      id: 1,
      xxx: 'abc'
    }
  }).then(
    response => {
      console.log(response.data, response.status, response.statusText)
    },
    error => {
      alert(error.message)
    }
  )
}

2. POST请求: 服务器端保存数据

function testPost() {
  axios({
    url: 'http://localhost:3000/posts',
    method: 'POST',
    data: {
      "title": "json-server---", 
      "author": "typicode---"
    }
  }).then(
    response => {
      console.log(response.data)
    },
    error => {
      alert(error.message)
    }
  )
}

3. PUT请求: 服务器端更新数据

function testPut() {
  axios({
    url: 'http://localhost:3000/posts/1',
    method: 'put',
    data: {
      "title": "json-server+++", 
      "author": "typicode+++"
    }
  }).then(
    response => {
      console.log(response.data)
    },
    error => {
      alert(error.message)
    }
  )
}

4. DELETE请求: 服务器端删除数据

function testDelete() {
  axios({
    url: 'http://localhost:3000/posts/6',
    method: 'delete'
  }).then(
    response => {
      console.log(response.data)
    },
    error => {
      alert(error.message)
    }
  )
}

---

四、axios常用API

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定url发get请求
axios.request(config): 等同于axios(config)
axios.get(url[, config]): 发get请求
axios.delete(url[, config]): 发delete请求
axios.post(url[, data, config]): 发post请求
axios.put(url[, data, config]): 发put请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的axios(但它没有下面的功能)
axios.CancelToken(): 用于创建取消请求的token对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求

1、axios.create(config)

• 根据指定配置创建一个新的axios, 也就就每个新axios都有自己的配置
• 新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
• 为什么要设计这个语法?
  (1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
  (2) 解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

2、拦截器函数/ajax请求/请求的回调函数的调用顺序

说明: 调用axios()并不是立即发送ajax请求, 而是需要经历一个较长的流程
流程: 请求拦截器=> 发ajax请求 => 响应拦截器 =>请求的回调

3、 取消请求

• 基本流程
  ① 配置cancelToken对象
  ② 缓存用于取消请求的cancel函数
  ③ 在后面特定时机调用cancel函数取消请求
  ④ 在错误回调中判断如果error是cancel, 做相应处理
• 实现功能
  点击按钮, 取消某个正在请求中的请求
  在请求一个接口前, 取消前面一个未完成的请求