原生xhr对象请求 ，数据交换， json 以及axios的概念及应用

最新推荐文章于 2024-09-21 06:10:12 发布
最新推荐文章于 2024-09-21 06:10:12 发布
阅读量1.6k 收藏 4
点赞数 1
文章标签： 服务器 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66430536/article/details/122583944
版权
这篇博客详细介绍了XMLHttpRequest对象的使用，包括GET、POST请求及其参数传递。讲解了查询字符串的概念，并对比了XML和JSON两种数据交换格式，强调了JSON的广泛使用和优势。还介绍了axios库，阐述其优点和发起请求的方法。
摘要由CSDN通过智能技术生成

XMLHttpRequest的基本使用

什么XMLHttpRequest

XMLHttpRequest 是浏览器提供一个javascript 对象 通过它 可以实现跟服务器的交互 实现数据传输

前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的

使用xhr发起GET请求（⭐⭐⭐）

步骤

创建一个xhr对象

调用xhr.open函数

调用xhr.send函数

监听xhr.onreadystatechange事件

 xhr 对象的readyState 属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求 必然处于以 下状态中的一个

 使用xhr发起带参数的get请求

使用xhr对象发起get请求时 在xhr.open()中 为url加入指定参数即可

最低0.47元/天 解锁文章
蒙奇-D-鑫伟
关注
ajax请求复杂的json数据实例
01-31
以下是一个使用原生XMLHttpRequest对象发送AJAX请求的简单示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/data.json', true); xhr.onreadystatechange = function() {...
xhr请求是什么？
zqzgng的博客
12-19 1948
xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax功能实现所依赖的对象，jquery中的ajax就是对 xhr的封装。
什么是xhr?
s_156的博客
10-20 1446
什么是xhr?
XHR 请求
最新发布
lsx202406的博客
09-21 419
XHR请求是Web开发中的一项重要技术，它通过异步方式发送和接收数据，提高了Web应用的性能和用户体验。掌握XHR请求的使用方法对于Web开发者来说至关重要。随着Web技术的不断发展，XHR请求在未来的Web开发中将继续发挥重要作用。
xhr基本使用
weixin_51810350的博客
02-17 2万+
1. XMLHttpRequest（简称xhr）是浏览器提供的 JavaScript对象，通过他它，可以请求服务器上的数据资源 。之前所学的jQuery中的Ajax函数，就是基于xhr对象封装出来了的 2.用xhr发起 get请求 创建xhr对象 调用xhr. open（）函数 调用xhr. send（）函数 监听xhr.onreadystatechange事件 3. xhr的readyState属性，用来表示当前 Ajax请求所处的状态 。每个Ajax请求必然处于以下状态中的一个 : ...
XHR请求与fetch请求
qq_27368993的博客
07-28 8192
文章目录一.XMLHttpRequest对象1.使用XHR(1).代码示例(2).GET请求(3).POST请求(4).注意事项2.XMLHttpRequest Level 2(1).FormData(2).超时(3).overrideMimeType二.XMLHttpRequest事件1.事件类型2.load事件3.progress事件三.特殊网络请求1.跨域请求(1).简要说明(2).请求体和响应头交互(3)注意事项2.预检请求3.凭据请求四.Fetch API五.Streams API 一.XMLHt
手拉手带你读懂XHR、Ajax，Fetch到底是个啥以及用他们进行网络请求的过程解析
weixin_44995391的博客
06-29 7076
手拉手带你读懂XHR、Ajax，Fetch到底是个啥以及用他们进行网络请求的过程解析
ajax请求数据
07-26
在实际使用Ajax时，我们可以利用JavaScript库，如jQuery、axios或者原生的XMLHttpRequest对象来发起请求。以jQuery为例，发起一个简单的Ajax请求的代码可能如下： ```javascript $.ajax({ url: '...
axios-0.18.1.zip
06-10
4. **自动转换请求和响应数据**：Axios会自动将JSON数据转换为字符串，并将响应的JSON数据自动解析为JavaScript对象。这简化了与服务器的数据交互过程。 5. **取消请求**：Axios 提供了一个机制可以取消正在进行的...
JavaScript案例-原生ajax
02-16
如果是JSON数据，可能需要`JSON.parse(xhr.responseText)`将其转换为JavaScript对象。 7. **跨域问题**：默认情况下，JavaScript的同源策略限制了Ajax请求只能访问同一域名下的资源。但通过设置服务器端的CORS（跨...
原生ajax使用
11-29
原生Ajax技术是Web开发中的一个关键组成部分，它允许开发者在不刷新整个页面的情况下与服务器进行异步数据交换。在JavaScript中，XMLHttpRequest对象是实现Ajax的核心，它提供了与服务器进行通信的能力。以下是对...
xhr-get请求
weixin_54244483的博客
11-18 951
1、协议名称(http://)2、服务器地址：可以是域名，也可以是IP(123.57.142.211)3、端口号，可以省略，不写端口号，浏览器请求的时候会自动加上端口号，http协议默认的端口号80，https默认端口号是443。(8080)4、路径：描述了要访问服务器上具体哪个资源。1、2、3都相同为同源，有一个不相同为跨域。
xhr的get和post请求的简单实现
热门推荐
qq_39138295的博客
08-30 2万+
        ajax技术的核心是XMLHttpRequest对象(简称XHR)，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息。 ajax是数据请求方式的一种。 特点： 1：前端可以发送数据到后端 2. 可以接收从后端传过来的数据 3：可以解析从后端传过来的数据 4：可以对页面进行局部刷新操作--> xhr数据请求流程： 1....
43 Ajax xhr请求 数据交换格式json 封装ajax函数 FormData 上传进度条 axios发起请求
Write less，do more
09-16 573
目标 能够知道如何使用XMLHttpRequest发起Ajax请求 能够知道如何封装自己的Ajax函数 能够使用XMLHttpRequest Level2中提供的新特性 能够知道jQuery中如何实现文件上传与loading效果 能够知道如何使用axios发起Ajax请求 XMLHttpRequest的基本使用 什么XMLHttpRequest XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之 前所学的 jQuery 中的 A
JavaScript 网络请求与远程资源(一)-------XHR与CORS
m0_61773971的博客
05-19 1352
这样的请求在发送时会有一个额外的头部Origin。
Ajax基础，xhr和JSON格式
weixin_46273011的博客
04-07 3151
Ajax请求的步骤 1，实例化，2，对请求进行监听，3，准备请求，4，发送请求。 请求的返回，是请求监听处的代码返回的。 <!-- 没有ajax，科研同XMLHttpRequest构造函数实例化来创建 --> <script> //要连接的后端地址 const url = 'https://www.imooc.com/api/http/search/suggest?words=js'; // Ajax的使用步骤
xhr如何发起请求
m0_63873004的博客
11-17 1633
xhr如何发起请求
JS原生：XMLHttpRequest发送GET&POST请求
欢迎来到长风沛雨的博客
11-01 1万+
学到了xhr发起GET和POST请求，在此记录一下。
xhr发起POST请求（原生）
m0_50599032的博客
12-04 6483
1.创建xhr对象 var xhr = new XMLHttpRequest() 2.调用open（） xhr.open(‘POST’,‘请求的地址’ ) 3. 设置Content-Type 属性（注意这是固定写法） xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’) 4.调用send（） (若果要提交数据，以字符串的形式提交) 例：xhr.send(‘name-张三&age-18&sex-男’
AJAX技术比较：原生、jQuery、fetch及axios使用示例
资源摘要信息:"本文将详细介绍ajax在日常开发中的各种使用方法，包括原生ajax、jQuery中ajax、fetch API以及axios的使用。同时，对于跨域问题的解决方法也将进行阐述。" 知识点一：原生ajax 原生ajax，即不依赖...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值