03_XHR的理解和使用

最新推荐文章于 2023-12-25 18:12:05 发布
最新推荐文章于 2023-12-25 18:12:05 发布
阅读量929 收藏 3
点赞数
分类专栏： axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43952245/article/details/103873765
版权

xhr的理解

  1. 使用 XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送 ajax 请求
  2. 前端可以获取到数据，而无需让整个的页面刷新。
  3. 这使得 Web 页面可以只更新页面的局部，而不影响用户的操作。

区别一般Http请求和ajax请求

  1. ajax请求是一种特殊的http请求

  2. 普通的http请求，请求回来的是一个完整的页面，浏览器接到之后会进行解析、渲染呈现页面

  3. ajax请求带回来的不是一个完整的页面，而是纯数据，并且数据不会自己跑到页面上，数据会交给js代码，由于开发人员操作了dom ,数据才跑到页面上

    即也就是我们所说的ajax的无刷新获取数据： 无刷新：指得是不会触发浏览器自己刷新页面（此时如果想要刷新页面呈现数据则需要自己操作dom）

  4. 对于服务器来说两者没有任何区别，区别在于浏览器

    普通Http请求： 默认返回的是一个页面，浏览器会对其进行解析、展现
    ajax请求： 默认操作是不管返回的什么都会交给开发者定义的回调函数进行处理

  5. 浏览器端发送请求:只有XHR或fetch发出的才是ajax请求，其他的所有的都是非ajax请求

       axios和jquery风中的ajax也都是对XHR的二次封装

  6. 浏览器接收的响应：
    （1）一般请求：浏览器一般会直接显示响应体的数据（也就是我们常说的自动刷新/跳转页面）
    （2）ajax请求：浏览器不会对页面进行任何更新操作，只是调用监视的回调函数并传入响应相关数据

Lomon6
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax的实现，基于XHR的原理
wocaonima332的博客
01-04 474
function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); //IE8及以上和其他浏览器，不管IE6，IE7这段就行了 } else if (typeof ActiveXObject != "undefined"){ if
深入理解ajax系列第一篇之XHR对象
10-21
ajax是asynchronous javascript and XML的简写，中文翻译是异步的javascript和XML，这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验
用户点击页面跳转时发送请求
weixin_43837268的博客
05-21 1336
// HTML 代码如下 // <a id="target" href="https://baidu.com">click</a> const clickTime = 350; const theLink = document.getElementById('target'); function log() { let xhr = new XMLHttpReques...
JavaScript 网络请求与远程资源(一)-------XHR与CORS
m0_61773971的博客
05-19 1122
这样的请求在发送时会有一个额外的头部Origin。
网络请求的方式(XHR,fetch,...)
zhangsuren1的博客
12-25 377
总的来说：ajax是一种思想，是通过封装xhr来达到网络请求的目的，而实现网络请求的方式有xhr/fetch，这也是浏览器devTools网络里为啥有这个选项，然而axios是一个库，里边是对xhr实现了改写，同时提供了一些非常实用的拦截方法以及防御措施，具体源码你可以找个文章研究下。库呢，axios是xhr的子集，内部改写了xhr的内容，并且提供了一些内置的方法，而且也避免了回调地狱的问题这就导致了占据市场的主流。3. 然而这么好用的东西人们为啥不用，随着vue的兴起，而是使用主流的。
不用刷新网页继续加载(获取)新的内容XHR
Nurbiya_K的博客
03-24 1971
昨天的博客里面有提到过，当requests.get()获取到的网页源码中没有我们需要的信息时，需要去查看Network里面的信息 XHR的功能是传输数据，其中有非常重要的一种数据是用json格式写成的，和html一样，这种数据能够有组织地存储大量内容。json的数据类型是“文本”，在Python语言当中，我们把它称为字符串。我们能够非常轻易地将json格式的数据转化为列表/字典，也能将列表/字...
ajax 上传文件_XHR和AJAX终于搞懂了！！
weixin_39986178的博客
11-27 471
XMLHttpRequest分析参考资料： XMLHttpRequest Level 2 使用指南---阮一峰之前分析面试常被问的跨域问题，另一个面试难题就是ajax原理相关的问题了，今天我们就来solve它。开篇先来介绍一个之前看过的一篇文章，讲的是如何回答面试中的原理题，我们也可以把以下的这种方法运用到学习前端知识上面。回答原理题流程：如果是英文词汇就先翻译成中文一句话描述该技术的用途描述该技...
关于网页请求/sockjs-node/info?t=＜当前时间戳＞
m0_51431448的博客
08-23 3994
npm run serve启动项目之后，在network中会自动持续发送 /sockjs-node/info?t= 请求（vue/cli5是目前最新的版本，绝大多数项目都是在vue/cli5版本以下搭建的，通过vue/cli5搭建的项目没有该接口，应该有其他替换），那么这个请求有什么用呢？
浏览器的url和请求接口有什么区别？
青椒
12-06 2341
url是获取页面资源接口是获取服务器资源浏览器的url是可以请求当前url下所有的资源，包括静态资源、图片资源、接口请求接口是页面某一个按钮触发的请求入口页面url：domain.com.cn --请求服务器这个路径下所有资源浏览器接口请求：domain.com.cn --登录接口
xhr基本使用
热门推荐
weixin_51810350的博客
02-17 1万+
1. XMLHttpRequest（简称xhr）是浏览器提供的 JavaScript对象，通过他它，可以请求服务器上的数据资源 。之前所学的jQuery中的Ajax函数，就是基于xhr对象封装出来了的 2.用xhr发起 get请求 创建xhr对象 调用xhr. open（）函数 调用xhr. send（）函数 监听xhr.onreadystatechange事件 3. xhr的readyState属性，用来表示当前 Ajax请求所处的状态 。每个Ajax请求必然处于以下状态中的一个 : ...
JavaScript中完整的Ajax异步请求的理解和使用
01-20
Ajax异步请求的理解和使用1. Ajax 异步请求 说明2. Ajax 实现对象：XMLHttpRequest2.1 xhr 建立 Ajax 流程2.2 xhr 属性、句柄、方法3. Ajax 异步 GET/POST 请求3.1 Ajax GET 请求3.2 Ajax POST 请求 1. Ajax 异步...
深入理解Ajax的get和post请求
11-24
设置参数，true表示使用异步模式 xhr.open("get", "GetTime.ashx?name= Mr靖", true); //3.让get请求不从浏览器获取缓存数据 xhr.setRequestHeader("If-Modified-Since","0"); //3.设置回调函数 xhr....
3dB带宽定义和理解[归纳].pdf
10-19
"3dB带宽定义和理解[归纳].pdf" 本资源主要讲解了3dB带宽的定义和理解，包括通频带、3dB带宽、三阶截点和1dB压缩点等概念。 1. 通频带： 通频带是衡量放大电路对不同频率信号的放大能力的参数。在输入信号频率较...
XHR的用法详细解读
castiel1234的博客
04-29 1万+
ajax是asynchronous javascript and XML的简写，中文翻译是异步的javascript和XML，这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。虽然名字中包含XML，但ajax通信与数据格式无关。 ajax包括几个步骤： 1：创建ajax请求， 2：发出http请求 3：收到服务器传回的消息 4：更新网页数据、 概括起来，就是一句话，ajax通...
手拉手带你读懂XHR、Ajax，Fetch到底是个啥以及用他们进行网络请求的过程解析
weixin_44995391的博客
06-29 4327
手拉手带你读懂XHR、Ajax，Fetch到底是个啥以及用他们进行网络请求的过程解析
什么是xhr？XMLHttpRequest的基本使用及xhr Level2的新特性详解及案例
背心的博客
10-19 8854
什么是xhr？XMLHttpRequest的基本使用及xhr Level2的新特性详解及案例
XHR简介及基本使用
wenxin_liu的博客
06-14 7354
XHR简介 XHR是XMLHttpRequest 的简写 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。XHR接口强制要求每个请求都具备严格的HTTP语义–应用提供数据和URL，浏览器格式化请求并管理每个连接的完整生命周期，所以XHR仅仅允许应用自定义一些HTTP首部，但更多的首部是不能自
什么是xhr?
我就叫贝塔
07-13 1万+
1、概念 xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax功能实现所依赖的对象，jquery中的ajax就是对 xhr的封装。 2、xhr XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。 xhr 接口强制要求每个请求都具备严格的HTT
51单片机控制步进电机三轴联动51单片机控制步进电机三轴联动51单片机控制步进电机3轴联动c语言，抛砖引玉供大家参考。.zip
最新发布
06-16
51单片机控制步进电机三轴联动51单片机控制步进电机三轴联动51单片机控制步进电机3轴联动c语言，抛砖引玉供大家参考。
form.on('select(guimo)', function (data) { vue.detail.guimo=data.value; }); form.on('select(zhuangkuang)', function (data) { vue.detail.zhuangkuang=data.value; }); var edit = tinymce.render({ elem: "#xiangqing", height: 600, images_upload_handler: function(blobInfo, succFun, failFun) { var xhr, formData; var file = blobInfo.blob(); //转化为易于理解的file对象 xhr = new XMLHttpRequest(); xhr.withCredentials = false; xhr.open('POST', http.baseurl + 'file/upload'); xhr.setRequestHeader("Token", localStorage.getItem('Token')); //设置请求头 xhr.onload = function() { var json; if (xhr.status != 200) { failFun('HTTP Error: ' + xhr.status); return; } json = JSON.parse(xhr.responseText); if (!json || typeof json.file != 'string') { failFun('Invalid JSON: ' + xhr.responseText); return; } succFun(http.baseurl + 'upload/' + json.file); }; formData = new FormData(); formData.append('file', file, file.name); //此处与源文档不一样 xhr.send(formData); } }, (opt) => { });
05-26
这段代码是通过layui的form模块和tinymce插件来处理表单的输入数据。其中form.on('select(guimo)', function (data) { ... })和form.on('select(zhuangkuang)', function (data) { ... })是监听“规模”和“状态”两个下拉列表的选择事件，并将选择的值赋值给vue实例的detail属性中对应的字段。这些字段的值将在表单提交时一并提交。 同时，该代码还使用了tinymce插件来实现富文本编辑器的功能，其中通过images_upload_handler函数来处理图片上传的逻辑。它将图片文件转化为FormData对象，并通过XMLHttpRequest对象向服务器发送POST请求，将图片文件上传到服务器。如果上传成功，将会返回上传后的图片URL地址，并将该地址插入到编辑器中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值