XMLHttpRequest以及Promise对象的使用

AJAX原理

通过[XHR]XMLHttpRequest对象来和服务器进行交互，axios库的底层也是通过XMLHttpRequest来和服务器进行交互，只是将实现细节进行了封装，让操作更加简洁

可以用于某些只需和服务器进行少次交互的静态网站进行使用，减少代码的体积

如何使用XMLHttpRequest

创建对象
配置请求方法和url地址–对象.open('请求方法','请求url地址')
监听loadend事件–即为该对象绑定loadend事件，通过回调函数接收响应结果
通过对象.send()来发起请求

通过获取省份来进行这个对象的使用

/**
     * 目标：使用XMLHttpRequest对象与服务器通信
     *  1. 创建 XMLHttpRequest 对象
     *  2. 配置请求方法和请求 url 地址
     *  3. 监听 loadend 事件，接收响应结果
     *  4. 发起请求
    */
    //创建对象
    const xhr = new XMLHttpRequest();
    //通过open方法配置请求方法和请求url地址
    xhr.open('GET', 'http://hmajax.itheima.net/api/province');
    //为该对象绑定loadend事件
    xhr.addEventListener('loadend', () => {
      //获取响应结果
      console.log(xhr.response);
      //由于返回的结果为json格式的数据，所以需要转换为对象格式的数据
      const data = JSON.parse(xhr.response);
      console.log(data.list.join('<br>'));
      document.querySelector('.province').innerHTML = data.list.join('<br>');
    })
    //发起一次请求
    xhr.send();

XMLHttpRequest如何添加查询参数

在地址后面加上?变量名=变量值&变量名=变量值...

地区查询

步骤

为查询按钮绑定点击事件
获取省份名字和城市名字
创建XMLHttpRequest对象并发起请求
将获取的地区列表进行map()方法的调用,将每个元素变为一个li标签，并通过join()方法实现拼接变成字符串
获取要插入标签，并将字符串插入其中

代码：

 /**
     * 目标: 根据省份和城市名字, 查询对应的地区列表
    */
    //为查询按钮绑定点击事件
    document.querySelector('.btn-primary').addEventListener('click', () => {
      //获取省份名字和城市名字
      const provincedata = document.querySelector('.province').value;
      const citydata = document.querySelector('.city').value;
      // console.log(provincedata);
      // console.log(citydata);
      //创建XMLHttpRequest对象并发起请求
      const xhrwhere = new XMLHttpRequest();
      xhrwhere.open('GET', `http://hmajax.itheima.net/api/area?pname=${provincedata}&cname=${citydata}`);
      xhrwhere.addEventListener('loadend', () => {
        // console.log(xhrwhere.response);
        console.log(JSON.parse(xhrwhere.response).list);

        //将获取的地区列表进行map()方法的调用,将每个元素变为一个li标签，并通过join()方法实现拼接变成字符串
        const wherestr = JSON.parse(xhrwhere.response).list.map(function (ele) {
          return `<li class="list-group-item">${ele}</li>`
        }).join('');
        //获取要插入标签
        document.querySelector('.list-group').innerHTML = wherestr;
      })

      xhrwhere.send();
    })

如何发起请求的同时进行数据提交

首先得设置请求头，表明要传输数据的格式 setRequestHeader

在发起请求的时候要同时将要传的数据通过参数进行传输 send(data)

小知识：将对象转为JSON字符串格式

const str = JSON.stringify(obj);

数据提交案例之注册用户

步骤：

为注册按钮绑定点击事件
创建xhr对象
带上请求方法和地址
为xhr绑定loadend事件，并通过回调函数接收响应结果
配置请求头，如传输数据格式
发送请求并携带要提交的数据

代码：

 /**
     * 目标：使用xhr进行数据提交-完成注册功能
    */
    //为注册按钮绑定点击事件
    document.querySelector('.reg-btn').addEventListener('click', () => {
      //创建xhr对象
      const xhr = new XMLHttpRequest();
      //带上请求方法和地址
      xhr.open('POST', 'http://hmajax.itheima.net/api/register');
      //为xhr对象绑定loadend事件，以便返回响应结果
      xhr.addEventListener('loadend', () => {
        //获取响应结果
        console.log(xhr.response);
      })
      //配置请求头信息 -- 由于要传数据给服务器
      xhr.setRequestHeader('Content-Type', 'application/json');
      //设置请求体数据
      const user = {
        username: "lhwoaini",
        password: "1234567"
      };
      //将数据转换为json格式
      const userStr = JSON.stringify(user);
      //发送请求并携带json格式数据
      xhr.send(userStr);

    })

认识Pormise

一个对象，用于表示一个异步操作的最终完成或失败及其结果值

作用

成功和失败程序，可以关联对应处理程序
了解axios内部原理

如何使用

创建一个Promise对象
在构造函数中调用resolve和reject函数
在Promise对象的回调函数中进行异步操作，并通过判断来执行对应resolve还是reject函数
分别进行已兑现和已拒绝状态进行不同的关联处理then(result => {}) catch(error => {})

注册用户成功与否来印证Promise对象的作用

步骤

为注册按钮绑定点击事件
创建Promise对象
创建xhr对象
带上请求方法和地址
为xhr对象绑定loadend事件，以便返回响应结果
由于响应结果为JSON格式的字符串，无法进行判断，因此进行数据类型替换
对响应结果进行判断，以此来判断调用哪个函数 – reslove or reject
配置请求头信息 – 要传数据给服务器，由于响应结果为JSON格式的字符串，无法进行判断，因此进行数据类型替换
将数据转换为json格式
分别调用then和catch进行关联状态的函数

/**
     * 目标：使用xhr进行数据提交-完成注册功能
    */
    //为注册按钮绑定点击事件
    document.querySelector('.reg-btn').addEventListener('click', () => {
      //创建Promise对象
      const p = new Promise((resolve, reject) => {
        //创建xhr对象
        const xhr = new XMLHttpRequest();
        //带上请求方法和地址
        xhr.open('POST', 'http://hmajax.itheima.net/api/register');
        //为xhr对象绑定loadend事件，以便返回响应结果
        xhr.addEventListener('loadend', () => {
          //获取响应结果
          console.log(xhr.response);
          //由于响应结果为JSON格式的字符串，无法进行判断，因此进行数据类型替换
          const reData = JSON.parse(xhr.response);
          console.log(reData);
          //对响应结果进行判断
          if (reData.code == 10000) {
            resolve('成功注册');
          } else {
            reject('因为各种原因注册失败了');
          }

        })
        //配置请求头信息 -- 由于要传数据给服务器
        xhr.setRequestHeader('Content-Type', 'application/json');
        //设置请求体数据
        const user = {
          username: "lhwoain1111",
          password: "1234567"
        };
        //将数据转换为json格式
        const userStr = JSON.stringify(user);
        //发送请求并携带json格式数据
        xhr.send(userStr);
      })
      //分别调用then和catch进行关联状态的函数
      p.then(result => {
        console.log(result);
      }).catch(error => {
        console.log(error);
      })
    })

案例之是否成功获取省份列表

代码:

 /**
     * 目标：使用Promise管理XHR请求省份列表
     *  1. 创建Promise对象
     *  2. 执行XHR异步代码，获取省份列表
     *  3. 关联成功或失败函数，做后续处理
    */
    //创建Promise对象
    const p = new Promise((resolve, reject) => {
      //创建xhr对象
      const xhr = new XMLHttpRequest();
      //配置地址以及请求方法
      xhr.open('GET', 'http://hmajax.itheima.net/api/province');
      //绑定loadend事件，并返回响应结果
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response);
        //将JSON格式的字符串转换为对象，并获取省份列表
        const datalist = JSON.parse(xhr.response);
        console.log(datalist.list);
        //获取要写入标签并写入
        document.querySelector('.my-p').innerHTML = datalist.list.join('<br>')
        //判断是否获取省份成功，并调用对应函数
        if (datalist.message === '获取省份成功') {
          resolve('成功了')
        } else {
          reject('因为不知名原因出错哩')
        }
      })
      //发起请求
      xhr.send();
    })
    //为p的两种状态分别配置两种不同的处理函数
    p.then(result => {
      alert(result);
    }).catch(error => {
      //大多数报错不用让用户显性知道内容
      console.log(error);
    })