Es6新语法-ajax请求的五种状态状态

更多学习质料等你来拿！！！：www.axios-js.com/

ajax请求的五种状态状态

   (1)面试点 : ajax请求状态
      提问1 : 能简单的说一下ajax有哪几种请求状态吗？
      提问2 ： ajax发送请求的时候，状态如何变化的

    (2)学习目标:  XMLHttpRequest对象两个事件
        xhr.onload : 服务器响应数据执行 ( 一次请求,只会执行一次 )
          * 当xhr.readyState == 4 才会执行
        xhr.onreadystatechange : ajax请求状态变化执行 (一次请求,会执行多次)
          请求状态: xhr.readyState
          0: 请求未初始化  (open之前,没有设置地址和方法)
          1: 服务器连接已建立 (open之后,已经设置了地址和方法)
          2: 请求已接收 (onreadystatechange事件里面执行，服务器已接收请求)
          3: 请求处理中 (onreadystatechange事件里面执行，服务器正在处理)
          4: 请求已完成，且响应已就绪 (onreadystatechange事件里面执行，服务器正在响应)
          

代码详细讲解

//(1).实例化ajax对象
        let xhr = new XMLHttpRequest()
        console.log( xhr.readyState )//0  xhr没有初始化
        
        //(2).设置请求方法和地址
        //get请求的数据直接添加在url的后面 格式是 url?key=value
        xhr.open('get', 'http://ajax-base-api-t.itheima.net/api/getbooks')
        console.log( xhr.readyState )//1  xhr已建立连接 

        //(3).发送请求
        xhr.send()
        console.log( xhr.readyState )//1  xhr已建立连接

        //(4).注册回调函数
        xhr.onreadystatechange = function() {
          console.log( xhr.readyState )//2 3 4  接收请求  处理请求  响应请求
          console.log(xhr.responseText)
        }

get与post区别

  /*get与post区别 
   
   1.传参方式不同 
        get : 参数直接在url后面拼接 (请求行)
        post：参数在xhr.send()中发送(请求体)

   2.传参速度不同
        get : 速度快
        post : 速度慢

   3.数据大小不同
        get : 有大小限制。 不同浏览器大小不一样 。 一般2-5KB
        post : 无限制
            * 一般带文件的接口都是post

   4.安全性不同
        get : 安全性低
        post : 安全性高
            * 一般登录注册都是post
   */

axios拦截器

1.axios拦截器作用 :  在  请求或响应 之前拦截ajax
2.axios拦截器原理流程 : 
  (1) axios()发送请求
  (2) 执行： 请求拦截器
  (3) 请求拦截器 把请求 发给 服务器
  (4) 服务器响应数据
  (5) 执行: 响应拦截器
  (6) 响应拦截器 把数据 发给 then(res=>{})

代码演示

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

ajax组成部分 : 异步js和XML

1.  A : 异步  asynchronous 
      (1)js代码主要两种: 同步代码 与  异步代码
      (2)同步代码 : 按照从上往下顺序解析
      (3)异步代码 : 不会立即执行，而是延迟执行
        事件处理函数、 定时器函数 、 ajax回调
    
2. j : javascript

3. a : and

4. X 
      (1)XMLHttpRequest : 发送ajax请求
      (2)XML :  作用和json完全一致，都是解决跨平台数据传输 （json之前的初代王者）
        * ajax技术刚出来的时候,json还没有流行。 那个时候ajax返回的是XML数据格式。 后面json普及之后，所有的接口都是返回json。 但是XML格式由于对ajax历史的贡献，一直保留至今。