ajax

一、ajax的介绍

数据是网页的灵魂

Ajax：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax

Ajax可以轻松实现网页和服务器之间的数据交互，是一种通过js异步获取xml格式数据的技术

二、ajax的请求

ajax请求分为五种

①get请求 用于向服务器申请数据

②post请求 用于向服务器增加数据

③delete请求 用于删除服务器数据

④put请求 用于更新数据（全部）

⑤patch请求 用于更新数据（局部）

1.get

语法格式
 axios({ // 这个对象要引入axios.js文件才能使用
    method: 'get', // 请求方式
    url: 'http://www.itcbc.com:3006/api/getbooks' // 接口地址
    params:{
     // 指定查询哪条数据
     id:1 // 表示查询id为1的那条数据，多个参数是且的关系
 }
}).then(res => {
     // 请求成功后所执行的代码
 });

2.post

语法格式
 axios({ // 这个对象要引入axios.js文件才能使用
    method: 'post', // 请求方式
    url: 'http://www.itcbc.com:3006/api/addbook' // 接口地址
    data:{
     // 要添加的数据，属性名要按格式书写
 }
}).then(res => {
     // 请求成功后所执行的代码
 });

3.delete

语法格式
 axios({ // 这个对象要引入axios.js文件才能使用
    method: 'delete', // 请求方式
    url: 'http://www.itcbc.com:3006/api/delbook' // 接口地址
    params:{
     // 要删除的参数
     id:1 // 表示删除id为1的那条数据
 }
}).then(res => {
     // 请求成功后所执行的代码
 });

小tips：获取表单数据，将其转为对象格式的封装

function getForm(formSelect) {
// 传入formSelect为了选择对应的form，后面的属性选择器要加空格，表示哪个form里面的name
  const ipt = document.querySelectorAll(formSelect + ' [name]'); // 假设form的calss为f1，则传入进来拼接就变成'f1 [name]'
  const obj = {};
   // 伪数组也有foreach方法
  ipt.forEach(val => obj[val.name] = val.value); // 相当于obj['username']=11
       return obj;
}

[]表示属性选择器,[name]表示选取带有name属性的标签

4.put

axios({
   method: 'put',
   url: 'http://www.itcbc.com:3006/api/updatebook',
   data: {
       // 要修改的全部参数
   }
}).then(res => {
   // 修改后执行的代码
})

5.axios的简写

1.params类型请求的简写
// params格式是{params{参数}},[]意思是可选参数,可以不带
axios.get(url,[params]) 

2.data类型请求的简写
// 参数格式可以是对象也可以是字符串
axios.post(url,传入的数据)

三、ajax的其他拓展

1.es6快速获取表单内input数据并转换成字符串

 function getFormData(select) {
// 这个实例用于收集指定表单里的数据
 const formObj = new FormData(document.querySelector(select));
// usp实例负责处理表单数据,括号里接收要处理的对象数据
 const usp = new URLSearchParams(formObj);
// usp实例将传递过来的键值对转换成字符串
 return usp.toString();
}

2.图片的上传

 ipt.addEventListener('change', function() {
// this.files用于获取上传的文件数组
  const file = this.files[0];
// 获取浏览器内存里图片地址固定写法
  const src = URL.createObjectURL(file);
// 将地址赋值给图片的src
  img.src = src;
  const formObj = new FormData();
// formData对象所带有的append方法，通过键值对方式添加数据,avatar为传递文件的固定属性名
  formObj.append('avatar', src);
// 将formObj作为参数传递，相当于{avatar: src}
  axios.post('http://www.itcbc.com:3006/api/formdata', formObj).then(res =>                 console.log(res));
})

3.拦截器

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


2.响应拦截器
// 添加响应拦截器
   axios.interceptors.response.use(
     function(response) {
     // 服务器响应请求回来后做些什么
     return response;
   },
     function(error) {
     // 对响应错误做些什么  
     return Promise.reject(error);
   }
);

4.报文

5.状态码

1.http状态码

①2xx 表示请求成功

②3xx 表示重定向（当前网页没有所需资源，要跳转到另一个网页上获取）

③4xx 表示客户端错误

④5xx 表示服务器错误

2.业务状态码

后端自定义的状态码

http状态码和业务状态码的区别：http状态码是行业内通用的，业务状态码只在项目内，或者是公司内部通用；

http状态码只能判断你的请求有没有发送到服务器，业务状态码则是判断你请求的业务是否正常响应

6.原生的ajax代码

发送get请求

// 原生代码发送ajax请求需要new一个XMLHttpRequest对象
 const xhr = new XMLHttpRequest();
// 传递参数，原生代码get请求传递参数只能拼接到url字符上
 xhr.open('get', 'http://www.itcbc.com:3006/api/getbooks?appkey=asoul123');
// 发送请求
 xhr.send();
// 给xhr实例添加load事件，利用this.response获取返回的结果，返回的结果为字符串格式，需要通过json.parse()转成对象格式
 xhr.addEventListener('load', function() {
      const data = JSON.parse(this.response);
      console.log(data);
})

发送post请求

const xhr = new XMLHttpRequest();
xhr.open('post', 'http://www.itcbc.com:3006/api/addbook')
// 当发送post请求时，参数要写在send方法里
const data = {
   bookname: '我将埋葬众神',
   author: '见异思剑',
   publisher: '起点中文网',
   appkey: 'asoul123'
}
const usp = new URLSearchParams(data);
const str = usp.toString();// 将data从对象转换成a=1&b=2的格式
// 这里的参数格式的是字符串类型，Content-type是请求头，字符串类型的参数请求头的值为application/x-www-form-urlencoded（固定写法）
// 若参数是对象格式，需要用JSON.stringify()方法转换成json格式，请求头的值为application/json
// 若参数是formdata格式，请求头的值可以不写，浏览器会自动设置
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(str);
xhr.addEventListener('load', function() {
    console.log(this.response);
})

7.ajax原生代码封装

// 传入参数格式
    const data = {
        type: 'post',
        url: 'http://www.itcbc.com:3006/api/addbook',
        data: {
            bookname: '诸天尽头',
            author: '凤嘲凰',
            publisher: '起点中文网',
            appkey: '1234'
        },
        success: function(res) {
            console.log(res);
        }
    }
// 用原生ajax代码进行发送请求的封装
    function ajax({type,url,data = '',success}// 对象解构和函数默认值) {
        const xhr = new XMLHttpRequest();
        if (type === 'get') { // 当发送get请求时
            // 当data为对象格式时
        (typeof data === 'object') && (data = (new URLSearchParams(data)).toString());
            // 当data为字符串格式或者是为空
            xhr.open(type, url + '?' + data);
            xhr.send();
        } else if (type === 'post') { // 当发送post请求
            xhr.open(type, url);
            if (typeof data === 'string') { // 传入参数格式为字符串
              xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
              xhr.send(data);
            } else if (typeof data === 'object') {
                if (data instanceof FormData) { // 传入参数格式为对象，且是FormData的实例
                    xhr.send(data);
                } else { // 传入参数格式仅为对象
                    xhr.setRequestHeader('Content-type', 'application/json');
                    xhr.send(JSON.stringify(data)); // 将对象转换成json格式
                }
            }
        }
        xhr.addEventListener('load', function() {
            const obj = JSON.parse(this.response);
            success(obj);
        })
    }
    ajax(data);

8.防抖和节流

防抖
let timeid;
// 每次开启延时器前，将上一个延时器清除
clearTimeout(timeId);
// 设置延时器就是为了减少请求次数，当执行下一次请求前，先将上一个请求清除，从而实现在固定的秒数内只能发送一次请求
timeId = setTimeout(function() {
   axios.get(...) // 发送一次get请求
}, 1000)

节流
// 节流的原理就是在当前动作未完成时，禁止执行下一个动作
const btn = document.querySelector('button');
// 设置一个控制发送请求的全局变量，默认为false，即没有请求在发送
let flag = false;
btn.addEventListener('click', function() {
  // 当有请求在发送时，直接退出
  if (flag) {
     return;
  }
// 当没有请求在发送时
  if (flag === false) {
  // 将状态改为有请求发送
     flag = true;
  // 发送请求
     axios.get('http://www.itcbc.com:3006/api/getbooks?appkey=asoul123').then(res => {
          console.log('请求成功');
          // 发送完后将状态改为无请求在发送
          flag = false;
     });
   }
})