XMLHttpRequest以及Promise对象的使用

超雄代码狂2024-11-10 8:41

AJAX原理

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

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

如何使用XMLHttpRequest

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

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

JavaScript 复制代码 
/**
     * 目标：使用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如何添加查询参数

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

地区查询

步骤

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

代码：

JavaScript 复制代码 
 /**
     * 目标: 根据省份和城市名字, 查询对应的地区列表
    */
    //为查询按钮绑定点击事件
    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);

数据提交案例之注册用户

步骤：

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

代码：

JavaScript 复制代码 
 /**
     * 目标：使用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内部原理

如何使用

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

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

步骤

  1. 为注册按钮绑定点击事件
  2. 创建Promise对象
  3. 创建xhr对象
  4. 带上请求方法和地址
  5. 为xhr对象绑定loadend事件，以便返回响应结果
  6. 由于响应结果为JSON格式的字符串，无法进行判断，因此进行数据类型替换
  7. 对响应结果进行判断，以此来判断调用哪个函数 -- reslove or reject
  8. 配置请求头信息 -- 要传数据给服务器，由于响应结果为JSON格式的字符串，无法进行判断，因此进行数据类型替换
  9. 将数据转换为json格式
  10. 分别调用then和catch进行关联状态的函数
JavaScript 复制代码 
/**
     * 目标：使用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);
      })
    })

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

代码:

JavaScript 复制代码 
 /**
     * 目标：使用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);
    })

AJAX原理

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

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

如何使用XMLHttpRequest

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

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

JavaScript 复制代码 
/**
     * 目标：使用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如何添加查询参数

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

地区查询

步骤

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

代码：

JavaScript 复制代码 
 /**
     * 目标: 根据省份和城市名字, 查询对应的地区列表
    */
    //为查询按钮绑定点击事件
    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);

数据提交案例之注册用户

步骤：

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

代码：

JavaScript 复制代码 
 /**
     * 目标：使用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内部原理

如何使用

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

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

步骤

  1. 为注册按钮绑定点击事件
  2. 创建Promise对象
  3. 创建xhr对象
  4. 带上请求方法和地址
  5. 为xhr对象绑定loadend事件，以便返回响应结果
  6. 由于响应结果为JSON格式的字符串，无法进行判断，因此进行数据类型替换
  7. 对响应结果进行判断，以此来判断调用哪个函数 -- reslove or reject
  8. 配置请求头信息 -- 要传数据给服务器，由于响应结果为JSON格式的字符串，无法进行判断，因此进行数据类型替换
  9. 将数据转换为json格式
  10. 分别调用then和catch进行关联状态的函数
JavaScript 复制代码 
/**
     * 目标：使用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);
      })
    })

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

代码:

JavaScript 复制代码 
 /**
     * 目标：使用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);
    })
相关推荐
cwj&xyp1 小时前
Python（二）str、list、tuple、dict、set
前端·python·算法
dlnu20152506221 小时前
ssr实现方案
前端·javascript·ssr
古木20191 小时前
前端面试宝典
前端·面试·职场和发展
轻口味3 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王4 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发4 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀4 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪5 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef6 小时前
32岁前端干了8年，是继续做前端开发，还是转其它工作
前端
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07构建高效的广告投放系统：应用架构的设计与实现08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10【一文读懂】NTN（非地面网络）技术介绍