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);
    })
相关推荐
焦糖酒11 分钟前
终端应用开发沉思录
javascript·前端框架
谢尔登21 分钟前
前端开发调试之 PC 端调试
开发语言·前端
每天吃饭的羊23 分钟前
在循环中只set一次
开发语言·前端·javascript
_默_3 小时前
adminPage-vue3依赖DetailsModule版本说明：V1.2.1——1) - 新增span与labelSpan属性
前端·javascript·vue.js·npm·开源
也无晴也无风雨5 小时前
深入剖析输入URL按下回车，浏览器做了什么
前端·后端·计算机网络
Martin -Tang6 小时前
Vue 3 中，ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational7 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心，方可放逐7 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄8 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、9 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03Windows10安装PCL1.14.0及点云配准04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测09Coze扣子平台完整体验和实践（附国内和国际版对比）10C++——超强级病毒代码