(AJAX高级)XMLHttpRequest、Promise、封装简易版axios

最新推荐文章于 2024-07-23 10:01:18 发布
最新推荐文章于 2024-07-23 10:01:18 发布
阅读量266 收藏 1
点赞数 6
分类专栏： AJAX 文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51195865/article/details/136846405
版权
本文介绍了如何使用XMLHttpRequest(XHR)和其封装库axios在不刷新页面的情况下发送GET请求，包括携带查询参数、URL参数的拼接以及使用Promise处理异步操作，特别强调了Promise对象的状态凝固特性。
摘要由CSDN通过智能技术生成

XMLHttpRequest(XHR)

XHR对象用于与服务器交互，通过XMLHttpRequest可以在不刷新页面的情况下，请求特定的URL,获取数据
axios是封装的XHR

使用XHR

在这里插入图片描述

使用XHR携带查询参数
xhr.open('GET',`http://hmajax.itheima.net/api/city?pname=${pname}`)

url快速拼接参数的方法

//创建URLSearchParams对象
const paramsObj=new URLSearchParams({
参数名1：值1，
参数名2：值2
})
//2.生成指定格式查询参数，字符串
const queryString=paramsObj.toString()
//结束： 参数名1=值1&参数名2=值2

XHR数据提交

需要自己设置提交的数据格式
在这里插入图片描述

Promise

管理一个异步操作最终状态和结果值的对象
在这里插入图片描述

Promise-三种状态

在这里插入图片描述

状态凝固

默认是pending状态
promise存在状态凝固特性，一旦状态从pending修改为fulfillded或rejected后，就不会再修改了
在这里插入图片描述

Blizzar_front-end
关注
专栏目录
前端：一篇彻底搞懂Ajax,Promise,JQuery Ajax,Axios的差异(区别)
GIS摆渡人
04-28 1592
文章目录一. AJAX原理1.ajax 有那些优缺点?二. Promise封装Ajaxpromise 封装实现三. JQuery Ajax1.优缺点：四. Axios1.优缺点：五. Fetch1.优缺点：补充：为什么要用axios? 一. AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。 Ajax的过程只涉及Ja
Axios请求（对ajax的二次封装）——Axios API、Axios实例、请求配置、Axios响应结构
XSL_HR的博客
04-14 1438
一篇文章带你学会axios请求——Axios API、Axios实例、请求配置、Axios响应结构
XMLHttpRequest和Promis
m0_74076766的博客
11-15 648
1.了解原生Ajax语法 2.理解Promise的语法和回调地狱 3.案例-封装Ajax函数(了解) 4.案例-分类导航
使用Promise封装ajax
chibipu1176的博客
01-11 145
const getJSON = function(url) { const promise = new Promise(function(resolve, reject){ const handler = function() { if (this.readySt...
Ajax原理-XMLHttpRequest、Promise以及封装简易的axios函数
最新发布
2302_80141844的博客
07-23 592
浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值。
XMLHttpRequest、ajax、Promise、axios、async await
qq_43667537的博客
03-04 1242
xhr是浏览器提供的js对象，通过它来向服务器来请求资源。jquery中的Ajax是基于xhr对象来封装资源的数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少，所以，我们重点要学习的数据交换格式就是 JSON。
XMLHttpRequest,AJAX,Promise,Axios及操作实战
雾林小妖的博客
11-29 1353
比较AJAX、XMLHttpRequest、Promixe、axios及操作实战
Axios请求（对于ajax的二次封装）——Axios请求的响应结构、默认配置
XSL_HR的博客
04-14 1221
一篇文章带你学会Axios请求的响应结构与默认配置
利用promise简单封装axios函数发送Ajax请求
qq_42805569的博客
12-01 1046
最近对promise研究比较深入，逐渐也入了迷。 关于promise的作用还不太清楚的小伙伴可以先去看我上两篇文章，都有详细说明。https://blog.csdn.net/qq_42805569/article/details/110410469 写到博客里是想总结一下，一方面是对知识点的巩固，另一方面是想给promise这块有困惑的伙伴提供一些帮助 如有错误，欢迎留言，以便改正。 封装一个Ajax请求，我们先搭建原生Ajax发送请求的结构： const xhr =new XMLHttp.
Axios的介绍和Ajax的封装
weixin_70815247的博客
08-16 240
xhr.responseXML -------------------------------responseXML ：如果响应的内容类型是 "text/xml" 或 "application/xml" ，这个属性中将保存包含着响应数据的 XML DOM 文档。xhr.responseText---------------------------------responseText ：作为响应主体被返回的文本。已经调用 open() 方法，但尚未调用 send() 方法。尚未调用 open() 方法。...
AJAX原理——XMLHttpRequest和Promise对象学习
weixin_58089266的博客
06-14 217
AJAX原理是XMLHttpRequest对象定义：通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据关系：axios内部采用XMLHttpRequest与服务器交互好处：掌握使用XMLHttpRequest（XHR）与服务器进行数据交互，了解axios内部的原理 使用XMLHttpRequest的步骤： 路径生成指定格式的查询参数： 2.XMLHttpRequest——数据提交核心：请求头设置Content-Type:application/json
AJAX 原理（XMLHttpRequest+Promise+URLSearchParams）
qq_50260510的博客
04-15 592
AJAX 原理（XMLHttpRequest+Promise+URLSearchParams）
Ajax 异步JS&xml - XMLHttpRequest详解从XHR到Promise
CheAyuki13的博客
03-12 1692
Ajax 快速入门 从XHR对象到Promise的使用 详解 学习资源整合
封装XMLHTTPRequest
qq_41709082的博客
12-18 707
原生js封装promise 1.代码如下: function getJson(type,url,data){ const promise=new Promise(function(resolve, reject){ const handle=function(){ if(this.readyState!=4){ return; } ...
利用Promise封装XMLhttprequest
qq_58159494的博客
09-05 650
在代码中，我们使用了 Promise 的构造函数，将 XMLHttpRequest 封装成一个 Promise 对象，并在其中加入了异步请求的逻辑。当请求成功时，将调用 res() 方法，将请求的结果传递给下一个 then() 方法；Promise 是 JavaScript 中一种常用的处理异步操作的方式，它可以将异步操作封装成一个 Promise 对象，并提供 then 方法为操作成功时的回调函数和 catch 方法为操作失败时的回调函数，并且它能很好的避免了回调地狱的风险，使代码更加方便阅读。
AJAX ---- 3 XMLHttpRequest ◆ Promise
love33441314520的博客
08-16 157
定义：XMLHttpRequest对象用于服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据关系：axios 内部采用 XMLHttpRequest与服务器交互步骤：1. 创建 XMLHttpRequest 对象2. 配置请求方法和请求 url 地址3. 监听 loadend 事件，接收响应结果4. 发起请求。
AJAX 03 XMLHttpRequest、Promise、封装简易版 axios
yavlgloss的博客
03-14 1228
AJAX 3 原理 XMLHttpRequest； Promise；封装简易版 axios
使用XMLHttpRequest与Promise封装axios
weixin_57251940的博客
01-21 539
基于 Promise 和 XHR 封装 Axios 函数
用promise封装原生ajax, 实现axios
06-08
好的，下面是用 Promise 封装原生 Ajax 实现 Axios 的代码： ```javascript function axios(config) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open(config....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值