AJAX ---- 3 XMLHttpRequest ◆ Promise

最新推荐文章于 2024-03-20 18:12:45 发布
最新推荐文章于 2024-03-20 18:12:45 发布
阅读量149 收藏
点赞数
文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/love33441314520/article/details/132326610
版权

XMLHttpRequest

定义：XMLHttpRequest对象用于服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据

关系：axios 内部采用 XMLHttpRequest与服务器交互

 步骤：

1. 创建 XMLHttpRequest 对象

2. 配置请求方法和请求 url 地址

3. 监听 loadend 事件，接收响应结果

4. 发起请求

    <p></p>
  <script>
    /**
     * 目标：使用XMLHttpRequest对象与服务器通信
     *  1. 创建 XMLHttpRequest 对象
     *  2. 配置请求方法和请求 url 地址
     *  3. 监听 loadend 事件，接收响应结果
     *  4. 发起请求
    */
  //  1. 创建 XMLHttpRequest 对象
  const xhr = new XMLHttpRequest()

  // 2. 配置请求方法和请求 url 地址
  xhr.open('GET', 'http://hmajax.itheima.net/api/province')

  // 3. 监听 loadend 事件，接收响应结果
  xhr.addEventListener('loadend', () => {
    console.log(xhr.response)
    const data = JSON.parse(xhr.response).list.join('<br>')
    // console.log(data.list.join('<br>'))
    document.querySelector('p').innerHTML = data
  })

  // 4. 发起请求
  xhr.send()
  </script>

XMLHttpRequest-查询参数

<body>
  <p class="city-p"></p>
  <script>
    /**
     * 目标：使用XHR携带查询参数，展示某个省下属的城市列表
    */
   const xhr = new XMLHttpRequest()
   xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=四川省')
   xhr.addEventListener('loadend', () => {
    console.log(xhr.response)
    const data = JSON.parse(xhr.response)
    document.querySelector('.city-p').innerHTML = data.list.join('<br>')
   })
   xhr.send()
  </script>
</body>

查询参数对象->查询参数字符串

new URLSearchParams()

转换为URLSearchParams对象，在toString()转换为字符串

// 3.组织查询参数字符串
    const qObj = {
      属性名：属性值
    }

    // 查询参数对象->查询参数字符串
    const paramsObj = new URLSearchParams(qObj)
    const queryString = paramsObj.toString()
    console.log(queryString)

案例_地区查询

<body>
  <div class="container">
    <form id="editForm" class="row">
      <!-- 输入省份名字 -->
      <div class="mb-3 col">
        <label class="form-label">省份名字</label>
        <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
      </div>
      <!-- 输入城市名字 -->
      <div class="mb-3 col">
        <label class="form-label">城市名字</label>
        <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
      </div>
    </form>
    <button type="button" class="btn btn-primary sel-btn">查询</button>
    <br><br>
    <p>地区列表: </p>
    <ul class="list-group">
      <!-- 示例地区 -->
      <li class="list-group-item">东城区</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标: 根据省份和城市名字, 查询对应的地区列表
    */
  //  1.查询按钮->点击事件
  document.querySelector('.sel-btn').addEventListener('click', () => {
    // 2.收集省份和城市名字
    const pname = document.querySelector('.province').value
    const cname = document.querySelector('.city').value

    // 3.组织查询参数字符串
    const qObj = {
      pname,
      cname
    }

    // 查询参数对象->查询参数字符串
    const paramsObj = new URLSearchParams(qObj)
    const queryString = paramsObj.toString()
    console.log(queryString)

    // 4.使用XHR对象，查询地区列表
    const xhr = new XMLHttpRequest()
    xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)
    xhr.addEventListener('loadend', () => {
      console.log(xhr.response)
      const data = JSON.parse(xhr.response)
      const htmlStr = data.list.map(areaName => {
        return `<li class="list-group-item">${areaName}</li>`
      }).join('')
      console.log(htmlStr)
      document.querySelector('.list-group').innerHTML = htmlStr
    })
    xhr.send()
  })
  </script>
</body>

Promise

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

语法：

<script>
    /**
     * 目标：使用Promise管理异步任务
    */
  //  创建Promise对象
   const p = new Promise((resolve, reject) => {
    // Promise对象创建时，这里的代码都会执行
    // 2.执行异步任务
    setTimeout(() => {
      // resolve() => 'fulfilled状态-已兑现' => then()
      resolve('模拟AJAX请求--成功')
      // reject() => 'rejected状态-已拒绝' => then()
      // reject(new Error('模拟AJAX请求--失败'))
    }, 2000)
   })
   console.log(p) // pending 待定
  
  //  3.获取结果
  p.then(result => {
    console.log(result)
  }).catch(error => {
    console.log(error)
  })
  </script>

Promise - 三种状态

作用：了解Promise对象如何关联的处理函数，以及代码执行顺序

概念：一个Promise对象，必然处于以下几种状态之一

        待定（pending） ：初始状态，既没有被兑现，也没有被拒绝

        已兑现（fulfilled） ：意味着，操作成功完成

        已拒绝（rejected） ：意味着，操作失败

注意：Promise对象一旦被兑现/拒绝 ，就是已敲定了，状态无法再被改变

封装简易版 axios

封装_简易axios_获取省份列表

<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：封装_简易axios函数_获取省份列表
     *  1. 定义myAxios函数，接收配置对象，返回Promise对象
     *  2. 发起XHR请求，默认请求方法为GET
     *  3. 调用成功/失败的处理程序
     *  4. 使用myAxios函数，获取省份列表展示
    */
  //  1. 定义myAxios函数，接收配置对象，返回Promise对象
  function myAxios(config) {
    return new Promise((resolve, reject) => {
      // 2. 发起XHR请求，默认请求方法为GET
      const xhr = new XMLHttpRequest()
      xhr.open(config.method || 'GET', config.url)
      xhr.addEventListener('loadend', () => {
        // 3. 调用成功/失败的处理程序
        if(xhr.status >= 200 && xhr.status < 300) {
          resolve(JSON.parse(xhr.response))
        }else {
          reject(new Error(xhr.response))
        }
      })
      xhr.send()
    })
  }
  
      // 4. 使用myAxios函数，获取省份列表展示
      myAxios({
        url: 'http://hmajax.itheima.net/api/province'
      }).then(result => {
        console.log(result)
        document.querySelector('.my-p').innerHTML = result.list.join('<br>')
      }).catch(error => {
        console.dir(error)
        document.querySelector('.my-p').innerHTML = error.message
      })
  </script>
</body>

封装_简易axios_获取省份列表

<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：封装_简易axios函数_获取地区列表
     *  1. 判断有params选项，携带查询参数
     *  2. 使用URLSearchParams转换，并携带到url上
     *  3. 使用myAxios函数，获取地区列表
    */
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        // 1. 判断有params选项，携带查询参数
        if(config.params) {
          // 2. 使用URLSearchParams转换，并携带到url上
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          // 把查询参数字符串，拼接在url?后面
          config.url += `?${queryString}`
        }
        xhr.open(config.method || 'GET', config.url)
        xhr.addEventListener('loadend', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })
        xhr.send()
      })
    }

    // 3. 使用myAxios函数，获取地区列表
    myAxios({
      url: 'http://hmajax.itheima.net/api/area',
      params: {
        pname: '四川省',
        cname: '成都市'
      }
    }).then(result => {
        console.log(result)
        document.querySelector('.my-p').innerHTML = result.list.join('<br>')
      }).catch(error => {
        console.dir(error)
        document.querySelector('.my-p').innerHTML = error.message
      })
  </script>
</body>

封装_简易axios_注册用户

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：封装_简易axios函数_注册用户
     *  1. 判断有data选项，携带请求体
     *  2. 转换数据类型，在send中发送
     *  3. 使用myAxios函数，完成注册用户
    */
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()

        if (config.params) {
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          config.url += `?${queryString}`
        }
        xhr.open(config.method || 'GET', config.url)

        xhr.addEventListener('loadend', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })

        // 1. 判断有data选项，携带请求体
        if(config.data) {
          // 转换数据类型，在send中发送
          const jsonStr = JSON.stringify(config.data)
          xhr.setRequestHeader('Content-Type', 'application/json')
          xhr.send(jsonStr)
        }else {
          // 如果没有data参数，正常发起请求
          xhr.send()
        }
      })
    }
    
    // 给注册按钮绑定点击事件
    document.querySelector('.reg-btn').addEventListener('click', () => {
      // 3. 使用myAxios函数，完成注册用户
      myAxios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
          username: 'itheima555',
          password: '1234567'
        }
      }).then(result => {
        console.log(result)
      }).catch(error => {
        console.dir(error)
      })
    })
 </script>
</body>

案例 - 天气预报

小鲫鱼学前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
XMLHttpRequest和Promis
m0_74076766的博客
11-15 636
1.了解原生Ajax语法 2.理解Promise的语法和回调地狱 3.案例-封装Ajax函数(了解) 4.案例-分类导航
AJAX原理——XMLHttpRequest和Promise对象学习
weixin_58089266的博客
06-14 186
AJAX原理是XMLHttpRequest对象定义：通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据关系：axios内部采用XMLHttpRequest与服务器交互好处：掌握使用XMLHttpRequest（XHR）与服务器进行数据交互，了解axios内部的原理 使用XMLHttpRequest的步骤： 路径生成指定格式的查询参数： 2.XMLHttpRequest——数据提交核心：请求头设置Content-Type:application/json
AJAX 原理（XMLHttpRequest+Promise+URLSearchParams）
qq_50260510的博客
04-15 582
AJAX 原理（XMLHttpRequest+Promise+URLSearchParams）
XMLHttpRequest、ajax、Promise、axios、async await
qq_43667537的博客
03-04 1212
xhr是浏览器提供的js对象，通过它来向服务器来请求资源。jquery中的Ajax是基于xhr对象来封装资源的数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少，所以，我们重点要学习的数据交换格式就是 JSON。
【JavaScript 教程】事件——进度事件
油墨香^-^的博客
06-08 1365
作者 | 阮一峰 1、进度事件的种类 进度事件用来描述资源加载的进度，主要由 AJAX 请求、<img>、<audio>、<video>、<style>、<link>等外部资源的加载触发，继承了ProgressEvent接口。它主要包含以下几种事件。 abort：外部资源中止加载时（比如用户取消）触发。如果发生错误导致中止，不会触发该事件。 error：由于错误导致外部资源无法加载时触发。 load：外部资源加载成
前端网络基础 - axios使用
伏城之外的博客
02-20 5841
基于XMLHttpRequest实现AJAX的步骤非常繁琐，XMLHttpRequest发送一个HTTP请求至少需要经过如下几个步骤： 1、创建XMLHttpRequest实例xhr 2、调用xhr.open方法，设置HTTP请求方法，HTTP请求URL 3、调用xhr.send方法，发送HTTP请求 另外，XMLHttpRequest实例接收的HTTP响应通常是异步的，所以需要监听readystatechange事件，获取判断xhr.readyState状态值，当状态值为4时，才表示收到完整的异步
重写axios核心原理
weixin_44823731的博客
01-01 695
1.从基本使用去分析axios // 方式一： axios({ method: 'get', url: 'http://localhost:5000/getTest' }) // 方式二： axios.get('http://localhost:5000/getTest') 结论：axios可以通过传进去一个配置对象去发送ajax，或者通过axios.xxx去发起ajax。 2.实现axios class MyAxios() { request(config) { return this.se
利用Promise封装XMLhttprequest
qq_58159494的博客
09-05 628
在代码中，我们使用了 Promise 的构造函数，将 XMLHttpRequest 封装成一个 Promise 对象，并在其中加入了异步请求的逻辑。当请求成功时，将调用 res() 方法，将请求的结果传递给下一个 then() 方法；Promise 是 JavaScript 中一种常用的处理异步操作的方式，它可以将异步操作封装成一个 Promise 对象，并提供 then 方法为操作成功时的回调函数和 catch 方法为操作失败时的回调函数，并且它能很好的避免了回调地狱的风险，使代码更加方便阅读。
使用Promise封装ajax
chibipu1176的博客
01-11 140
const getJSON = function(url) { const promise = new Promise(function(resolve, reject){ const handler = function() { if (this.readySt...
Ajax 异步JS&xml - XMLHttpRequest详解从XHR到Promise
CheAyuki13的博客
03-12 1663
Ajax 快速入门 从XHR对象到Promise的使用 详解 学习资源整合
(AJAX高级)XMLHttpRequest、Promise、封装简易版axios
最新发布
m0_51195865的博客
03-20 261
XHR对象用于与服务器交互，通过XMLHttpRequest可以在不刷新页面的情况下，请求特定的URL,获取数据。
XMLHttpRequest,AJAX,Promise,Axios及操作实战
雾林小妖的博客
11-29 1324
比较AJAX、XMLHttpRequest、Promixe、axios及操作实战
使用promise 封装XMLHttpRequest
Raywh的博客
08-18 1999
/* 使用promise 封装XMLHttpRequest (resove, reject) 对应请求的(then,catch) config 请求参数 data 可选 url 必须 method 必须 timetout 可选默认（3000） responseType 可选 使用时，then先后catch */ export default function xhrRequest (config) { return new Promise(function dispRequest .
请求方法ajax,axios,xmlhttprequest
qq_45234274的博客
12-01 917
最近在学习react的语法，手写了一下各种请求 Ajax 过程中我遇到的最大问题就是跨域问题，有两种解决方法，一种是后端解决，另一种在前端可以设置代理，详细步骤百度 Axios 这是使用axios请求，方法都大同小异，需要注意的是请求的数据格式 请认真仔细找好自己要用的数据，不要因为数据位置没找到而一直报错（此时小夹子流下一把辛酸泪） Xmlhttprequest 使用原生写法，出现跨域问题就找后端解决吧 这是请求的数据类型，如果在页面上有需求自行转换下 Json.parse
XHR XMLHttpRequest() progress
探秘
03-09 4846
progress http://www.w3.org/TR/progress-events/ http://www.w3.org/TR/XMLHttpRequest/ https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest f
XMLHttpRequestEventTarget与XMLHttpRequest的addEventListener事件写法
jiaoqi6132的博客
02-23 2198
第一种： XMLHttpRequestEventTarget.onabort 包含当请求中止并且abort该对象接收到事件时要调用的函数。 XMLHttpRequestEventTarget.onerror 包含当请求遇到错误并且error此对象接收到事件时调用的函数。 XMLHttpRequestEventTarget.onload 包含在成功获取内容后HTTP请求返回并且load此对象...
addEventListener() 事件监听
weixin_30741653的博客
06-05 843
addEventListener() 用于向指定元素添加事件。可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。语法：element.addEventListener(event,fn,useCaption );参数说明：tr件，比如 click mouseenter mouseleavefn 回调函数useCaption 用于描述是冒泡还是捕获。默认值是fals...
XHR对象的进度事件
weixin_30823227的博客
02-09 1280
首先要明确的是对事件的监听方法是在 on + 事件名，比如load事件，load事件的监听方法就是onload，也可以使用addEventListener方法，这个方法的参数就是事件名称（'load'） 言归正传，Progress Events规范是W3C的一个草案，定义了与客户端服务器通信有关的事件。有如下7个进度事件： abort：在因为调用abort()方法而终止连接时触发。 er...
简述什么是Promise及其作用，本质
洲粥的博客
02-23 8481
什么是Promise所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。Promise的作用Promise的出现主要是解决地狱回调的问题，比如你需要结果需要请求很多个接口，这些接口的参数需要另外那个的接口返回的数据作为依赖，这样就需要我们一层嵌套一层，但是有了Promise 我们就无需...
使用Element-UI构建前端工程化页面实战指南
Ajax的使用在过去较为繁琐，需要手动创建XMLHttpRequest对象、设置请求参数、处理响应数据。随着库和框架的发展，现在开发者更倾向于使用如Axios这样的库来简化Ajax请求。Axios是一个基于Promise的HTTP库，可以用于...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值