AJAX 原理（XMLHttpRequest+Promise+URLSearchParams）

已于 2023-04-15 15:42:46 修改
阅读量568 收藏 3
点赞数 1
分类专栏： JavaScript 文章标签： ajax javascript ecmascript
于 2023-04-15 14:58:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50260510/article/details/130169771
版权

一、XMLHttpRequest

XMLHttpRequest (XHR)对象用于与服务器交互，通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。 XMLHttpRequest 在AJAX 编程中被大量使用。

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

好处：掌握使用 XHR 与服务器进行数据交互，了解 axios 内部原理

 1.2 使用 XMLHttpRequest步骤

（1）创建 XMLHttpRequest 对象

（2）配置请求方法和请求

（3）url 地址 监听 loadend 事件

（4）接收响应结果 发起请求

 代码展示:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XMLHttpRequest_基础使用</title>
</head>

<body>
  <p></p>
  <script>
    /**
     * 目标：使用XMLHttpRequest对象与服务器通信
     *  1. 创建 XMLHttpRequest 对象
     *  2. 配置请求方法和请求 url 地址
     *  3. 监听 loadend 事件，接收响应结果
     *  4. 发起请求
     * get http://hmajax.itheima.net/api/province
    */
    // 1. 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest()
    // 2. 配置请求方法和请求 url 地址
    xhr.open('get', 'http://hmajax.itheima.net/api/province')
    // 3. 监听 loadend 事件，接收响应结果
    xhr.addEventListener('loadend', () => {
      const res = JSON.parse(xhr.response)
      console.log(res)
      document.querySelector('p').innerHTML = res.list.join('<br>')
    })
    // 4. 发起请求
    xhr.send()
  </script>
</body>

</html>

1.3 XMLHttpRequest - 查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据 语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XMLHttpRequest_查询参数</title>
</head>

<body>
  <p></p>
  <script>
    /**
     * 目标：使用XHR携带查询参数，展示某个省下属的城市列表
     * get http://hmajax.itheima.net/api/city
     * 请求参数(查询参数): pname
     * 查询参数都是在 url 后面使用 ? 拼接
     * ?参数名1=参数值1&参数名2=参数值2
    */
    // 1. 创建 xhr
    const xhr = new XMLHttpRequest()
    // 2. 设置请求方法和 url
    xhr.open('get', 'http://hmajax.itheima.net/api/city?pname=湖北省')
    // 3. 添加事件监听 loadend
    xhr.addEventListener('loadend', () => {
      const res = JSON.parse(xhr.response)
      console.log(res)
      document.querySelector('p').innerHTML = res.list.join('<br>')
    })
    // 4. 发送请求
    xhr.send()
  </script>
</body>

</html>

1.4 XMLHttpRequest - 数据提交

需求：通过 XHR 提交用户名和密码，完成注册功能

核心： 请求头设置 Content-Type：application/json 请求体携带 JSON 字符串

代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XMLHttpRequest_数据提交</title>
</head>

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：使用xhr进行数据提交-完成注册功能
     * POST http://hmajax.itheima.net/api/register
     * Body 参数(application/json)
     * username
     * password
    */
    document.querySelector('.reg-btn').addEventListener('click', () => {
      // 1. 创建 xhr 对象
      const xhr = new XMLHttpRequest()
      // 2. 设置请求方法和 url
      xhr.open('post', 'http://hmajax.itheima.net/api/register')
      // 3. 监听 loadend 事件获取响应
      xhr.addEventListener('loadend', () => {
        const res = JSON.parse(xhr.response)
        console.log(res)
      })
      // 4. 设置请求头
      // 参数1: 键
      // 参数2: 值
      xhr.setRequestHeader('Content-Type', 'application/json')
      // 5. 发请求 -> 携带参数
      const user = {
        username: 'mrdrager123',
        password: '123456'
      }
      xhr.send(JSON.stringify(user))
    })
  </script>
</body>

</html>

二、Promise

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

2.好处：

逻辑更清晰

了解 axios 函数内部运作机制

能解决回调函数地狱问题

3.一个Promise对象，必然处于以下几种状态之一

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

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

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

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

代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>认识Promise</title>
</head>

<body>
  <script>
    /**
     * 目标：使用 Promise 管理异步任务
     * 用定时器来模拟请求
    */
    // Promise 对象是帮助我们完成异步任务的, 所有的异步任务都会有成功或失败的结果
    // 可以通过 Promise 对象的 .then 方法获取成功的结果 .catch 获取失败的结果
    // 1. 创建 Promise 对象
    // 参数: 回调函数, 会立即执行
    const p = new Promise((resolve, reject) => {
      // console.log('我会立即执行')
      // 在回调函数中, 可以执行异步任务 (定时器 / AJAX)
      // 回调函数中有两个参数: 
      // 参数1: resolve 成功的回调
      // 参数2: reject 失败的回调
      setTimeout(() => {
        // console.log('模拟 AJAX 请求结果 - 成功')
        // resolve('模拟 AJAX 请求结果 - 成功')
        reject('模拟 AJAX 请求 - 失败')
      }, 3000)
    })

    p.then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  </script>
</body>

</html>

三、封装简易版 axios

案例展示1：

需求：基于 Promise + XHR 封装 myAxios 函数，获取省份列表展示

步骤： 定义 myAxios 函数，

（1）接收配置对象，返回 Promise 对象

（2）发起 XHR 请求，默认请求方法为 GET

（3）调用成功/失败的处理程序

（4）使用 myAxios 函数，获取省份列表展示

代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装_简易axios函数_获取省份列表</title>
</head>

<body>
  <p></p>
  <script>
    /**
     * 目标：封装_简易axios函数_获取省份列表
     *  1. 定义myAxios函数，接收配置对象，返回Promise对象
     *  2. 发起XHR请求，默认请求方法为GET
     *  3. 调用成功/失败的处理程序
     *  4. 使用myAxios函数，获取省份列表展示
    */

    /**
     * 参数1: config 配置对象 
     * */
    // 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', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            // 传递成功的结果
            resolve(JSON.parse(xhr.response))
          } else {
            // 传递失败的结果
            reject(new Error(xhr.response))
          }
        })
        xhr.send()
      })
    }

    myAxios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(res => {
      console.log(res)
      document.querySelector('p').innerHTML = res.list.join('<br>')
    }).catch(e => {
      console.log(e.message)
      document.querySelector('p').innerHTML = e.message
    })
  </script>
</body>

</html>

案例展示2：

需求：修改 myAxios 函数支持传递查询参数，获取"辽宁省"，"大连市"对应地区列表展示

步骤：

（1）myAxios 函数调用后，判断 params 选项

（2）基于 URLSearchParams 转换查询参数字符串

（3）使用自己封装的 myAxios 函数展示地区列表

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装_简易axios函数_获取地区列表</title>
</head>

<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：封装_简易axios函数_获取地区列表
     *  1. 判断有params选项，携带查询参数
     *  2. 使用URLSearchParams转换，并携带到url上
     *  3. 使用myAxios函数，获取地区列表
    */
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        // 1. 判断有没有传入 params 参数
        if (config.params) {
          // 2. 如果有 params 需要将其转换成查询参数字符串: xxx=xxx&aaa=aaa
          const obj = new URLSearchParams(config.params)
          // console.log( obj.toString() )
          // 3. 将参数字符串拼接到 url 后面
          config.url += `?${obj.toString()}`
        }
        const xhr = new XMLHttpRequest()
        // 要在设置请求方法和 url 之前对查询参数进行处理
        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()
      })
    }

    myAxios({
      url: 'http://hmajax.itheima.net/api/area',
      params: {
        pname: '湖北省',
        cname: '武汉市'
      }
    }).then(res => {
      console.log(res)
    })
  </script>
</body>

</html>

案例展示3：

需求：修改 myAxios 函数支持传递请求体数据，完成注册用户功能

步骤： 

（1）myAxios 函数调用后，判断 data 选项 转换数据类型，

（2）在 send 方法中发送 使

（3）用自己封装的 myAxios 函数完成注册用户功能

代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装_简易axios函数_注册用户</title>
</head>

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：封装_简易axios函数_注册用户
     *  1. 判断有data选项，携带请求体
     *  2. 转换数据类型，在send中发送
     *  3. 使用myAxios函数，完成注册用户
     * 查询字符串: 参数=参数值&参数2=参数值
     * 请求体参数字符串:
     *   1. 设置请求头: Content-Type: application/json
     *   2. 请求体携带: JSON 字符串
    */
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        if (config.params) {
          const obj = new URLSearchParams(config.params)
          config.url += `?${obj.toString()}`
        }
        const xhr = new XMLHttpRequest()
        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))
          }
        })
        if (config.data) {
          // 1. 设置请求头: Content-Type: application/json
          xhr.setRequestHeader('Content-Type', 'application/json')
          // 2. 请求体携带: JSON 字符串
          xhr.send(JSON.stringify(config.data))
        } else {
          xhr.send()
        }
      })
    }

    document.querySelector('.reg-btn').addEventListener('click', () => {
      myAxios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'post',
        data: {
          username: 'xiaochun',
          password: '123456'
        }
      }).then(res => {
        console.log(res)
      }).catch(e => {
        console.log(e)
      })
    })
  </script>
</body>

</html>

四、URLSearchParams

1.URLSearchParams 对象专门用于处理url网址信息中的查询字符串，在网址字符串中通常都是 ? 问号之后的内容(不包含问号)。
在URL对象中也有一个属性 searchParams 返回该对象，会对查询字符串做解析处理，以等号分割生成对应的 key-value 键值对的数据形式。
 

2.URLSearchParams实例方法

URLSearchParams 对象提供了多个实例方法，用于读取或修改查询字符串数据，还提供了三个方法用来对数据进行遍历。

3.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
例如当我们在 web 浏览器的地址栏中输入： www.baidu.com ，具体发生了：
1. 对 www.baidu.com 这个网址进行 DNS 域名解析，得到对应的 IP 地址 2. 根据这个 IP ，找到对应的服务器，发起 TCP 的三次握手
3. 建立 TCP 连接后 , 发起 HTTP 请求
4. 服务器响应 HTTP 请求，浏览器得到 html 代码
5. 浏览器解析 html 代码，并请求 html 代码中的资源（如 js 、 css 、图片等）（先得到 html 代
码，才能去找这些资源）
6. 服务器响应对应的资源
7. 响应数据完毕 , 四次挥手，关闭 TCP 连接
8. 浏览器对页面进行渲染呈现给用户
你想要那颗糖
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsp+ajax+servlet+jdbc案例
08-08
2. **AJAX请求**：当用户点击登录按钮时，使用JavaScript的XMLHttpRequest对象或者更现代的fetch API，发送AJAX请求到对应的Servlet。 3. **Servlet处理**：Servlet接收到请求后，通过JDBC连接数据库，执行查询用户...
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
10-29
Ajax无刷新读取数据库数据技术是指使用JavaScript、XMLHttpRequest和ASP.NET技术实现无刷新读取数据库数据的功能。本文将详细介绍该技术的实现过程。 一、技术背景 随着Web应用程序的发展，对数据的实时更新和读取...
XMLHttpRequest、ajax、Promise、axios、async await
qq_43667537的博客
03-04 1174
xhr是浏览器提供的js对象，通过它来向服务器来请求资源。jquery中的Ajax是基于xhr对象来封装资源的数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少，所以，我们重点要学习的数据交换格式就是 JSON。
复习AJAX03 -axios 拦截器,文件上传,XMLHttpRequest
vip77778888的博客
01-11 557
拦截器,文件上传,XMLHttpRequest,JSON 用法
XMLHttpRequest与Axios详解
最新发布
警警的博客
05-10 712
XMLHttpRequest与Axios详解
使用promise 封装XMLHttpRequest
Raywh的博客
08-18 1972
/* 使用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 .
前端网络基础 - axios使用
伏城之外的博客
02-20 5802
基于XMLHttpRequest实现AJAX的步骤非常繁琐，XMLHttpRequest发送一个HTTP请求至少需要经过如下几个步骤： 1、创建XMLHttpRequest实例xhr 2、调用xhr.open方法，设置HTTP请求方法，HTTP请求URL 3、调用xhr.send方法，发送HTTP请求 另外，XMLHttpRequest实例接收的HTTP响应通常是异步的，所以需要监听readystatechange事件，获取判断xhr.readyState状态值，当状态值为4时，才表示收到完整的异步
通过阅读axios源码重新学习AJAX和XMLHttpRequest
MPFLY的博客
07-08 684
今天单位活儿比较少，遂打开了axios源码阅读了一番。 照着axios的文档进行阅读，事半功倍。一边看源码，一边又顺着把AJAX和XMLHttpRequest看了一遍，以下是我的收获。 由于XMLHttpRequest很长，我们一般将其简称为XHR，下面我将会使用简称进行书写。 1. axios和AJAX的区别 在写详细的文章之前，可能很多同学不是很清楚axios和ajax的区别（清楚的同学可略过~????），下面我们来简单讨论一下。 AJAX = Asynchronous JavaScript an
Ajax通讯原理XMLHttpRequest
12-10
XMLHttpRequest 是 AJAX 的关键 现在浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 向后台请求数据readyState有五个状态0：服务器未初始化，1：服务器连接已建立，2请求已接受收，3请求...
Fetch+Promise教程
09-19
Fetch+Promise教程 Fetch API 是一种现代化的网络请求方式，旨在取代传统的 XMLHttpRequest。它提供了许多优点，包括链式调用的语法、返回 Promise 等。Fetch API 的概念和用法、Headers 对象、Request 对象等都是...
四、JavaScript 网络请求[XMLHttpRequest、fetch、axios]
黑日里不灭的light
11-06 748
解释：其是相对原生的异步请求库，属于，，核心是使用 XMLHttpRequest 对象,使用较多并有先后顺序的话，容易产生回调地狱。（）
5.XMLHttpRequest的基本用法
potato123232的博客
11-25 1286
XMLHttpRequest简称xhr，是浏览器提供的Javascript对象。之前我们使用的都是jQuery中的Ajax，现在我们使用原生JS的Ajax。
Ajax - 使用 XMLHttpRequest 发起请求 - get / get带参 / post （原生）
Henry_ID的博客
09-06 3906
1. 使用XMLHttpRequest发起get无参请求 (原生方法) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible"
XMLHttpRequest发送网络请求的基本使用，和封装自己的ajax
小陈的博客
06-30 4650
作用： 基于出来的实例对象，可以发起ajax请求用法：代码示例： 2. 使用发起请求（带参数） 代码示例： 3. 使用发送请求（有请求体） 请求体格式：参数=值&参数=值代码示例： 以格式传参代码示例： 格式...
通过ajax put提交html代码报错net::ERR_CONNECTION_REFUSED 解决方案
qq_43102118的博客
05-08 1359
通过ajax put提交html代码报错net::ERR_CONNECTION_REFUSED 解决方案 一般出现这种错误，就是一些小细节的问题，没有什么办法可言，只能仔细查看代码，如： 就是因为application写错，数据没有传到后台，才导致affectedRows没有定义，改正确就ok了 ...
请求方法ajax,axios,xmlhttprequest
qq_45234274的博客
12-01 913
最近在学习react的语法，手写了一下各种请求 Ajax 过程中我遇到的最大问题就是跨域问题，有两种解决方法，一种是后端解决，另一种在前端可以设置代理，详细步骤百度 Axios 这是使用axios请求，方法都大同小异，需要注意的是请求的数据格式 请认真仔细找好自己要用的数据，不要因为数据位置没找到而一直报错（此时小夹子流下一把辛酸泪） Xmlhttprequest 使用原生写法，出现跨域问题就找后端解决吧 这是请求的数据类型，如果在页面上有需求自行转换下 Json.parse
javascript 用Promise和XMLHTTPRequest手写ajax
qq_21522331的博客
08-10 582
<body> <button id="ajaxButton" type="button" onclick="ajax()">Make a request</button> <script> function getJson(type = 'GET', url = './test.json', data = {}) { //设定默认值 return new Promise((resolve, reject) => {
XMLHttpRequest对象的一个简单运用示例
遇见小美好
04-24 5150
XMLHttpRequest（）是一个构建HTTP请求的JavaScript对象（即构造器）。 XMLHttpRequest（）对象的用法，主要分为两个有效步骤： * 发送请求； * 处理响应
XMLHttpRequest.send()
热门推荐
雾里看花叹朦胧
03-14 2万+
XMLHttpRequest.send()方法用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只有一个 URL，没有数据体，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。 下面是 GET 请求的例子。 var xhr = new XMLHttpRequest(); xhr.open('GET...
jQuery AJAX XMLHttpRequest对象PPT
04-27
本PPT主要是关于jQuery AJAX XMLHttpRequest对象的介绍，涵盖了XMLHttpRequest对象的来源、发展历程、属性、方法以及事件等内容。XMLHttpRequest是一种用于在客户端脚本与服务器之间进行数据交互的技术，使得开发者...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值