XMLHttpRequest,ajax,axios

---

一.基本知识

1.介绍

  Ajax是一种技术，通过浏览器内置对象XMLHttpRequest和服务器进行数据交互的技术。
  AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

2.服务器

i) 资源
  通俗的讲，服务器上的 网页(html文件)、图片、音乐、视频、字体文件、CSS文件、JS文件等等都称之为资源。所以资源代指服务器上存储的内容。
ii) 数据
数据是资源。而且是一个网站的灵魂。

        - HTML是骨架
        - CSS是颜值
        - JS是行为
        - 数据是灵魂

iii) 浏览器和服务器交互模式

    请求
    GET ，获取；如果向服务器发送请求，获取服务器的资源，使用GET方式

        - 比如获取页面中需要的数据
        - 比如获取一个用户的信息（用户名、昵称、头像等）

    POST，邮寄（提交）。如果提交数据给服务器，那么使用POST方式。

    - 比如，登录、注册（提交账号和密码给服务器）
    - 比如，添加评论，发布评论（贴吧中有）

    响应

3.network工具

二.http网络请求返回状态码

201 - 206都表示服务器成功处理了请求的状态代码，说明网页可以正常访问。
201创建成功
300 - 3007表示的意思是：要完成请求，您需要进一步进行操作。通常，这些状态代码是永远重定向的。
4XXHTTP状态码表示请求可能出错，会妨碍服务器的处理。
500至505表示的意思是：服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

三.jQuery使用ajax

     使用的 url，叫做数据接口，或者简称为接口。
     接口是服务器提供的一个url地址，通过这个url地址，我们可以操作服务器上的资源。
     通过Ajax技术向一个接口发送请求，也叫做调用接口。

1.发送get请求

  		$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
            console.log(res);
        })

2.发送post请求

  $.post('http://www.liulongbin.top:3006/api/addbook', 
  { bookname: '巴黎圣母院', author: '雨果', publisher: '北京人民出版社' }, function (res) {
            console.log(res);
        })

3.综合发送ajax请求

		$.ajax({
            url:'',
            type:,
            data:, //可以是对象 字符串 数组
            success:function(res) {

            }
        })

4.ajax拦截器

    在发送ajax之前，在jquery只后
    $.ajaxPrefilter()能够拦截所有ajax请求和响应;
    参数是一个回调函数，回调函数的参数，是我们每次ajax传递的参数;

   $.ajaxPrefilter(function(option) {
            option.url = "http://www.liulongbin.top:3006"+option.url
        })

5.表单提交
1)form submit serialize() serializeArray()

1.两个方法都能获取隐藏域（）的值
2.两个方法均不能获取 禁用状态（disabled）的输入框的值，可以获取readonly输入框的值
3.两个方法均不能获取文件域（）的值，所以无法完成文件上传。
4.button按钮的type属性为button，不能触动表单的subit事件

		 $('form').submit(function(e) {
            e.preventDefault()
            console.log($(this).serializeArray());
        })

2)formdata
jquery使用fromdata要添加两个属性
processData: false,
contentType: false,

		$.ajax({
            url:'',
            type:,
            processData:false,
            contentType:false,
            data:fd,
            success:function() {

            }
        })

四.js内置对象XMLHTTPRequest

level1

方法
xhr.open()
xhr.send()
属性
xhr.response
事件
onreadystatechange

    发送GET请求
    1.创建对象
    let xhr = new XMLHttpRequest()

    // 2.设置请求方式和资源路径 ------->请求参数写末尾
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=2')

    // 3.发送请求
    xhr.send()

    // 4.接收响应
    xhr.onreadystatechange = function () {
        if (xhr.status === 200 && xhr.readyState === 4) {
            console.log(JSON.parse(xhr.response));
        }
    }


    发送POST请求

    // 1.创建对象
    let xhr = new XMLHttpRequest()
    // 2.设置请求方式和请求路径
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
    // 设置请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 3.发送请求
    xhr.send('bookname=无人生还&author=阿加莎克里斯&publisher=北京人民出版社')
    // 4.接收响应
    xhr.onreadystatechange = function () {
        if (xhr.status === 200 && xhr.readyState === 4) {
            console.log(xhr.response);
        }
    }


    老版本的XMLHttpRequest对象有以下几个缺点：

    1. 只支持文本数据的传送，无法用来读取和上传二进制文件。
    2. 传送和接收数据时，没有进度信息，只能提示有没有完成。
    3. 受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据。

level2

    1.onload事件
    接收响应事件
    let xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=2')
    xhr.send()

    xhr.onload = function () {
        console.log(xhr.response);
    }

    // 2.设置响应超时 发送请求后 等待响应的时间
    属性:xhr.timeout
    事件:xhr.ontimeout

    let xhr = new XMLHttpRequest()

    // 设置响应超时时间
    xhr.timeout = 2000
    // 响应超时后执行
    xhr.ontimeout = function () {
        alert('请求超时 请检查网络')
    }

    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=2')
    xhr.send()

    xhr.onload = function () {
        console.log(xhr.response);
    }

    3.发送错误
    事件:xhr.onerror

    let xhr = new XMLHttpRequest()

    xhr.onerror = function() {
        alert('发送请求失败 请检查网络 或网址')
    }

    xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=2')
    xhr.send()

    xhr.onload = function() {
        console.log(xhr.response);
    }


    4.FormData对象 收集表单数据
    ajax操作往往用来传递表单数据。为了方便表单处理，HTML 5新增了一个FormData对象，可以模拟表单。
    1.直接获取表单的值
    表单必须有name属性
    方法
    set('属性', '属性值')
    append('属性', '属性值')
    forEach((value, key) => { })
    可通过...展开
    可以和原生js或jq使用
    一般用于上传文件


    document.querySelector('form').onsubmit = function (e) {
        e.preventDefault()
        let formdata = new FormData(this)       
    }

    2.添加表单项

    let formdata = new FormData()

    formdata.append('uname', '张三')
    formdata.append('gender', '男')
    formdata.append('hobby', '喝酒')
    formdata.set('密码', '123')
    console.log(Array.from(formdata) );


    FormData对象最大的作用是上传文件。假定files是一个"选择文件"的表单元素,我们将它装入FormData对象。
    let files =  document.querySelector('input').files

    document.querySelector('input').onchange = function () {
        let files = this.files
        let formdata = new FormData()
        for(let i= 0;i<files.length;i++) {
            formdata.append('fils'+i,files[i])
        }

        console.log(...formdata);
    }


    3.上传进度
    配合progress标签
    <progress max="" value=""></progress>
    xhr.upload.onloadstart = function () {

    }

    xhr.upload.onloadend = function () {

    }

    xhr.upload.onprogress = function (e) {
        progress.value = e.loaded
        progress.max = e.total
    }

五.axios

axios需要导入

   1.使用axios发送GET请求
    axios.get(url,data).then(res=>{
      })
    2.使用axios发送POST请求

    axios.post(url,data).then(res=>{

    })
    3.使用axios发送多种请求
    axios({
        // 不设置默认是get
        method: '',
        // 请求资源路径
        url: '',
        // 发送请求数据 get请求头 post请求体
        data: ''
        // 返回结果
    }).then(res => {
        console.log(res.data);
    })

    全局配置
    axios.defaults.baseURL = 'https://api.example.com';

    拦截器
    添加请求拦截器

    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);
    });

六.同步和异步

     异步传输是面向字符的传输，它的单位是字符；
    而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。
    代码运行时，JavaScript维护三个空间分别是  执行栈 异步任务处理区 任务队列 
    1.先执行，执行栈中的同步任务
    2.当遇到异步任务，将其放入异步任务处理区中，而后继续执行下面的同步任务
    3.当异步任务（如绑定的事件或计时器），在异步任务处理区中被触发JavaScript会按照触发顺序先后将其放入任务队列中等待被调用
    4.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
    回调函数
    函数的形参总是从外向内传递参数，但在JS中，如果形参碰到“关键字” callback 则完全相反，它表示从内向外反向调用某个外部函数
    异步
    事件 定时器 ajax

七.JSON

   JSON.parse()
   JSON.stringify()

八.编码和解码

1.数据在网络通讯中，都是以字符串形式进行传递的;
(对象会抓转换为JSON类型的字符串)
2.汉字和特殊字符要进行编译后才能发送;
3.多数情况浏览器会自动编码和解码; 特殊的时候需要我们自己编码;

 // 编码
        str = encodeURIComponent(str);
        console.log(str);
        // %E8%A5%BF%E6%B8%B8%E8%AE%B0

        // 解码
        console.log(decodeURIComponent('%E6%B8%B8'));
        // 原生js封装