学习
实践
活动
专区
工具
TVP
写文章

XHRajax,axios,fetch傻傻分不清?

相关定义: XMLHttpRequest Fetch AJAX 先从AJAX入手,下面的定义很重要: AJAX(Asynchronous JavaScript And XML )是一种使用 XMLHttpRequest AJAX允许只更新一个 HTML 页面的部分 DOM,而无须重新加载整个页面。AJAX还允许异步工作,这意味着当网页的一部分正试图重新加载时,您的代码可以继续运行。 回答 1: AJAX vs Fetch AJAX 和 Fetch都可以访问和操纵 HTTP 管道(发出HTTP请求与接收HTTP响应),是解决动态网页的技术方案。 未来发展方向是Fetch取代AJAX 回答 2: XHR vs AJAX XHR(XMLHttpRequest)对象用于与服务器交互,是AJAX技术方案的基础,也可以说,使用XHR对象来发送一个Ajax 看看如何使用 XHR 发送 AJAX请求。

20630

【原生Ajax】全面了解xhr的概念与使用。

作者主页: 作者主页查看更多前端教学 专栏分享:css重难点教学 Node.js教学 从头开始学习 ajax学习 文章目录 XHR的基本使用   什么是XHR   使用xhr发起GET请求 FormData对象管理表单数据     上传文件 XHR的基本使用   什么是XHR xhr是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源,之前所学的jquery的ajax readyState属性,用来表示当前Ajax请求所处的状态,每个Ajax请求必然处于一下状态中的一个: 值 状态 描述 0 UNSENT XMLHttpRequest对象已被创建,但尚未调用open 封装自己的Ajax函数   要实现的效果 定义一个名为itheima的ajax函数,导入js文件之后,可以进行调用文件内的相关函数。 有时,Ajax操作很耗时,而且无法预知要花多少时间。

11320
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【笔记】跨域重定向中使用AjaxXHR请求)导致跨域失败

    背景: 1、前端Web中有两个域名,a.com和b.com,其中a.com是访问主站(页面),b.com是数据提交接口的服务器(XHR请求) 2、a.com中用XHR调用b.com/cerate【没有指定协议 】,保存数据,写法如下: $.ajax({ url: "//b.com/create", type: 'POST', data: requestParams, dataType url 3、之前没有关注过跨域重定向问题,StackOverFlow之: https://stackoverflow.com/questions/18539403/chrome-cancels-cors-xhr-upon-http #38810391 4、W3C标准 https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0 5、总的来说,就是对于非简单请求(XHR 等),当跨域预检(Option请求)时,如果出现非20X等时,会直接失败,抛出readtState: 0 解决方法: 1、在Ajax中明确https协议,避免b.com预检时返回302 $.ajax({

    1.4K30

    油猴脚本重写fetch和xhr请求

    写过几个油猴脚本,经常对页面请求返回的数据进行拦截或者覆盖,这篇文章就做个总结,涉及到 fetch 和 xhr 两种类型的请求。 环境搭建 先简单写个 html 页面,搭一个 koa 服务进行测试。 xhr 我们将 fetch 改为用 xhr 发送请求,因为页面简单所以请求可能在油猴脚本重写之前就发送了,正常网站不会这么快,所以这里加一个 setTimeout 进行延时。 setTimeout(() => { const xhr = new XMLHttpRequest(); xhr.open('GET', 'http://localhost:3002/api /query'); xhr.send(); xhr.onload = function() { const res = JSON.parse(this.responseText 总 通过对 fetch 和 xhr 的重写,我们基本上可以对网页「为所欲为」了,发挥想象力通过油猴脚本应该可以做很多有意思的事情。

    21720

    jQuery ajax - ajax() 方法jQuery ajax - ajax() 方法

    jQuery ajax - ajax() 方法 http://www.w3school.com.cn/jquery/ajax_ajax.asp jQuery Ajax 参考手册 实例 通过 AJAX 加载一段文本 beforeSend(XHR) 类型:Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。 complete(XHR, TS) 类型:Function 请求完成后回调函数 (请求成功或失败之后均调用)。 参数: XMLHttpRequest 对象和一个描述请求类型的字符串。 xhr 类型:Function 需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。 $.ajax 函数返回它创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象,但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。

    46930

    Web Spider XHR断点 千千XX 歌曲下载(三)

    Web Spider XHR断点 千千XX 歌曲下载 首先声明: 此次案例只为学习交流使用,切勿用于其他非法用途 注:网站url、接口url请使用base64.b64decode自行解码 文章目录 Web Spider XHR断点 千千XX 歌曲下载 前言 一、资源推荐 二、任务说明 三、网站分析 四、XHR断点调试,使用WT-JS还原JS加密代码 五、代码实现 1、JS加密代码:encode.js 2 接口,来到歌曲播放页面,歌曲的下载链接由下列接口返回的; 获取歌曲下载链的XHR接口url:aHR0cHM6Ly9tdXNpYy45MXEuY29tL3YxL3NvbmcvdHJhY2tsaW5r 断点调试,使用WT-JS还原JS加密代码 逆向思路 1、通过浏览器,资源面板,添加XHR断点,让其在浏览器请求之前断住,以便我们分析请求参数; 2、通过资源面板下的调用堆栈,进行跟值,找到加密代码处; 3、拿到加密明文后,使用WT-JS还原JS加密代码 4、通过python代码调用JS代码实现整个任务; 1、根据接口的url,下XHR断点,这里以获取歌曲下载链的XHR接口为例; 如果浏览器向该接口发送请求则会在发包前进行断点

    7320

    【JS 逆向百例】XHR 断点调试,Steam 登录逆向

    XHR 断点定位 本次案例我们使用 XHR 断点来定位加密的位置,首先了解一下什么是 XHRXHR 全称 XMLHttpRequest,XHR 可以在不重新加载页面的情况下更新网页、在页面已加载后从服务器请求 、接收数据,是 Ajax 的基础,属于 Ajax 特殊的请求类型,利用浏览器控制台可以过滤 XHR 请求。 既然是 XHR 断点,那么这种方法就只能用于 XHR 请求,这也是这种方法的缺点,通过 XHR 断点,定位到的位置通常在加密处理完成之后,已经准备发送请求了,这样的优点是我们可以跟踪栈,能比较容易地找到加密的地方 XHR 断点定位有两种方法,第一种是找到发送请求的 URL 之后,截取 URL 的一部分,在 Source 面板下,右侧 XHR/fetch Breakpoints 里添加你截取的 URL,如下图所示, 已成功断下: [03.png] 第二种方法,在 Network 面板,点击 XHR 过滤 XHR 请求,在 Initiator 项里可以看到调用的 JS,鼠标移到 JS 上,可以看到调用栈,点击第一个,

    33321

    【融职培训】Web前端学习 第6章 jQuery Ajax 2 Ajax入门

    一、Ajax概述 在我们之前学习的内容中,向服务器发送请求后,再浏览器中响应的页面都是整页刷新。 在某些项目中,我们只希望获取页面的局部数据,而不必整页刷新,这个时候就需要使用Ajax来实现功能了。 ajax的优缺点 优点:按需获取数据,提升系统性能。 缺点:异步获取数据,不利于搜索引擎优化。 二、Ajax原理 考虑一个问题,在之前的学习内容中,我们是如何向服务器发送请求的? 20 alert(xhr.responseText) 21 } 22 } 这里需要注意的是,上面的代码,我们在实际开发项目中并不常用,因为通常情况下,我们会引入第三方Ajax库来处理异步请求 三、封装一个Ajax方法 回调函数 将上面的程序封装到一个myAjax方法,实例代码如下所示,这里需要注意的是,因为Ajax是异步的操作,因此封装的Ajax不能用return获取返回值。 下面的示例使用的是回调函数封装的Ajax方法 1 function myAjax(method,url,next) { 2 let xhr = new XMLHttpRequest(); 3

    18420

    异步编程Ajax的详解,并对其进行封装整理

    异步编程——Ajax 一、什么是Ajax 二、Ajax的优缺点 (1)优点 (2)缺点 三、Ajax的使用 (1)状态码 (2)xhr的基本使用 (3)发送get请求 (4)发送post请求 四、封装Ajax ) 三、Ajax的使用 Ajax的基本流程:创建XHR对象 => 发送数据 => 接收数据 (1)状态码 既然Ajax涉及到前后端的数据交互,那么我们就先来简单的看一下几种类型的状态码,如下表: 状态码 console.log(xhr.responseText); } } } 四、封装Ajax 文章开头提到,JQuery早已对Ajax请求进行了成熟的封装 , xhr) } } } } } (5)封装$.ajax方法 在JQuery中还有一个 ajax 方法,其既可以发送 get 请求,也可以发送 post 请求,该方法可传入多种参数, (xhr.status) // 请求失败,返回状态码 } } } }) } } 五、Ajax的约束 默认情况下,Ajax一般只能向同源的域发送请求,这是受到了浏览器的同源策略的限制

    14820

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 前端性能监控

      前端性能监控

      腾讯云前端性能监控(RUM)是一站式前端监控解决方案,用户只需要安装 sdk 到自己的项目中,通过简单配置化,即可实现对用户页面质量的全方位守护,真正做到了低成本使用和无侵入监控。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券