文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    你真的会使用XMLHttpRequest吗？

    我之前的想法和你们一样，直到最近我使用xhr时踩了不少坑儿，我才突然发现其实自己并不够了解xhr，我知道的只是最最基本的使用。...以下3种情况下值都为null：请求未完成、请求失败、请求成功但返回数据无法被正确解析时 如何追踪ajax请求的当前状态 在发一个ajax请求后，如果想追踪请求当前处于哪种状态，该怎么做呢？...注意：只有xhr处于OPENED状态，才能调用xhr.setRequestHeader()和xhr.send(),否则会报错 2 HEADERS_RECEIVED(已获取响应头) send()方法已经被调用...在不限制超时的情况下，有可能同步请求一直处于pending状态，服务端迟迟不返回响应，这样整个页面就会一直阻塞，无法响应用户的其他交互。...触发xhr.upload.onloadend //上传结束，下载阶段开始： 触发xhr.onprogress 触发xhr.onload 触发xhr.onloadend 发生abort

    2K30

    ajax跨域的基本流程

    注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。 最后调用send()方法才真正发送请求。...AJAX本身是不能跨域的，AJAX直接请求普通文件存在跨域无权限访问的问题，只要是跨域请求，一律不准；但是配合后台可以跨域。 因为同源策略限制的是浏览器但是对服务器不限制，服务器可以跨域。...对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。...如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。 2.2 图像Ping 我们知道，一个网页可以从任何网页中加载图像，不用担心跨域不跨域。这也是在线广告跟踪浏览量的主要方式。...与图像Ping相比，它的优点在于能够直接访问响应文本，支持在浏览器与服务器之间双向通信。不过，JSONP也有两点不足。 首先，安全性问题。JSONP是从其他域中加载代码执行。

    1.3K10

    ajax和它的超时

    日常开发中一般都会使得ajax去获了数据，但有两点是需要值得注意的： 1、ajax请求队列 2、ajax的超时处理 为什么要注意这两点？为了让用户在其可视区域内更快速的看见内容。...假设页面结构分为三栏：左、中、右，而且页面数据会比较多，页面呈现的顺序则是是按从上而下执行的（当然是从左至右开始，一个模块一个模块加载数据），如果不采用队列，那么在页面可视范围之外的模块可能已经加载完数据了...从ajax创建开始，这里优化的一点是针对IE浏览器，只循环获取一次使用哪种MSXML库，副作用就是需要使用额外的属性来记录它 function createXHR() { if (typeof...而setTimeout中的fn函数，在处理时会先检测请求是否已经处理过了，这里它并没有对延时器进行引用，会导致的一种情况是，请求已经结束，延时器还在跑，直到达到指定的时间间隔。...xhr对象的onload事件，只要浏览器开始接收到响应，就会触发它，所以在这个函数里面还是需要对它的status属性进行判断。

    1.9K10

    Ajax笔记

    如果需要采用异步的方式获取ajax数据，就需要绑定load事件，等加载后再执行var data= xhr.responseText，才返回数据 三、采用异步绑定事件的方式获取ajax数据 1、代码 异步绑定数据...该状态码用于表示特定 HTTP 请求是否已成功完成，这个状态码是服务器发给浏览器的 2、status数值分类 ?...onerror是定义一个事件，当ajax连接失败（浏览器发送ajax请求根本没有连接到服务器）浏览器自己输出error。...status是请求链接到服务器，服务器响应错误后服务器返回浏览器的状态码。...五、readystate 1、概念 XMLHttpRequest 的一个属性，用来表示当前XMLHttpRequest对象处于什么状态 有5个值，mdn的解析 0 初始化，XMLHttpRequest对象还没有完成初始化

    1.3K60

    关于ajax无刷新上传和下载

    formData = new FormData(); formData.append("key", value); // 创建xhr对象 var xhr = new XMLHttpRequest(); // 监听状态..."); }; // loadend传输结束，不管成功失败都会被触发 xhr.onloadend = function (event) { console.log("load end"); }; //...优点：兼容该死的 ie 低版本浏览器 缺点：跨域上传不支持，还需自定义反向代理，因为 iframe onload 不支持跨域 上传接口 API： 成功返回： { code: 1, msg: '上传成功...缺点：现代浏览器会自动识别文件类型，如 pdf，会自动在浏览器打开 优雅一点的下载： function download() { var a = document.createElement("a"..., url, true); // 也可以使用POST方式，根据接口 xhr.responseType = "blob"; // 返回类型blob // 定义请求完成的处理函数，请求前也可以增加加载框

    3K20

    UEM系列（二）初识UEM“探针”技术

    浏览器探针的作用在于以下几点： 1. 采集浏览器基本信息 2. 采集页面性能数据（Navigation Timing API） 3. 采集AJAX性能数据+请求/响应数据 4....将捕获的数据上传到UEM Server，便于进行后续的存储、多维度分析、预警和优化等 浏览器探针是根据浏览器状态来采集页面性能数据的。...每次页面请求，当获取到onload事件结束，则以事件结束时间定义为页面完成时间。当有异步请求再次加载内容，那么这些异步请求记录在AJAX数据当中。基于采集到的数据，可以得到以下页面性能指标： ?...基于这些指标，页面加载流程的分解和可视化将会变得十分简单。 3、 页面加载流程可视化 ? 页面加载流程可视化是UEM数据统计的一个重要手段，是UEM成果的通俗展示方式。...上图是页面加载流程可视化的一个示意图。上述页面性能数据是实时上传的，但数据上传分四个时机：整个页面加载完成后上传、离开页面时上传、发生JS错误时上传和有AJAX请求时上传。

    1.2K20

    在前端 Network 还能这样玩

    一、在线或离线检测 在现代的浏览器中，可以通过 navigator.onLine 获取当前网络的在线状态，该属性会根据用户的网络在线状态返回 true 或 false。...在页面加载后，设置正确的网络状态 navigator.onLine ?...由于 AJAX 请求有跨域的限制，所以不能通过 AJAX 方式来实现。Ping.js 的实现方式是使用从任意主机加载 favicon.ico 图片来确认响应时间。...4.1 通过 AJAX 测算网速 该方案通过创建 XMLHttpRequest 对象并记录开始时间，然后发起 AJAX 请求，当请求成功后获取 'Content-Length' 响应头来取得资源的大小并记录结束时间...4.2 通过创建 Image 对象加载指定图片来测算网速 该方案是通过创建 Image 对象并记录开始时间，然后绑定 onload 回调函数，接着指定一个有效的图片地址，一旦图片加载完成就会触发 onload

    1.7K20

    看完这几道 Promise 面试题，还被面试官问倒算我输

    ); // 要求分别输出 // 1 // 2 // 3 // done // [1, 2, 3] 解析 首先 ajax1 、ajax2、ajax3 都是函数，只是这些函数执行后会返回一个 Promise...执行console.log(4)，输出【4】，宏任务执行结束。 再执行微任务，执行 then1，输出【1】， 执行 then2，输出【2】。 到此为止，第一轮事件循环结束。开始执行第二轮。...= reject img.src = url }) }; 解析 题目的意思是需要我们这么做，先并发请求 3 张图片，当一张图片加载完成后，又会继续发起一张图片的请求，让并发数保持在...3 个，直到需要加载的图片都全部发起请求。...，然后从数组（promises ）中删掉这个 Promise 对象，再加入一个新的 Promise，直到全部的 url 被取完，最后再使用 Promise.all 来处理一遍数组（promises ）中没有改变状态的

    1K20

    前端 实战项目·动态加载 JS 文件

    defer：此布尔属性被设置为向浏览器指示脚本在文档被解析后执行。 async：设置此布尔属性，以指示浏览器如果可能的话，应异步执行脚本。...所以通俗来讲，浏览器首先会请求 HTML 文档，然后对其中的各种资源调用相应的资源加载器进行异步网络请求，同时进行 DOM 渲染，直到遇 到标签的时候，主进程才会停止渲染等待此资源加载完毕然后执行...recaptchaScript.defer = true } else { recaptchaScript.async = true } recaptchaScript.onload.../ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0...来控制脚本文件的执行顺序有很大的风险，但可以通过监听 onload 事件来判断文件是否加载完成，配合 Promise 等待上一个脚本文件加载完成后再加载下一个文件，从而实现按次序加载执行脚本。

    6.8K40

    Comet技术详解：基于HTTP长连接的Web端实时通信技术前言学习交流概述“服务器推”（Comet技术）的应用范围来看看更传统的基于客户端套接口的“服务器推”技术基于 HTTP 长连接的“服务器

    使用 AJAX 实现“服务器推”与传统的 AJAX 应用不同之处在于： 服务器端会阻塞请求直到有数据传递或超时才返回。...当 readystate 为 4 时，数据传输结束，连接已经关闭。...HTTP 1.1 与 1.0 规范有一个很大的不同：1.0 规范下服务器在处理完每个 Get/Post 请求后会关闭套接口连接； 而 1.1 规范下服务器会保持这个连接，在处理两个请求的间隔时间里，这个连接处于空闲状态...当连接处于空闲时，为这个连接分配的线程资源会返还到线程池，可以供新的连接使用；当原来处于空闲的连接的客户发出新的请求，会从线程池里分配一个线程资源处理这个请求。...4）在客户和服务器之间保持“心跳”信息 在浏览器与服务器之间维持一个长连接会为通信带来一些不确定性：因为数据传输是随机的，客户端不知道何时服务器才有数据传送。

    6.8K11

    promise执行顺序面试题令我头秃，你能作对几道

    / 要求分别输出// 1// 2// 3// done// [1, 2, 3]解析首先 ajax1 、ajax2、ajax3 都是函数，只是这些函数执行后会返回一个 Promise，按题目的要求我们只要顺序执行这三个函数就好了...执行console.log(4)，输出【4】，宏任务执行结束。 再执行微任务，执行 then1，输出【1】， 执行 then2，输出【2】。 到此为止，第一轮事件循环结束。开始执行第二轮。...= reject img.src = url })};解析题目的意思是需要我们这么做，先并发请求 3 张图片，当一张图片加载完成后，又会继续发起一张图片的请求，让并发数保持在 3...个，直到需要加载的图片都全部发起请求。...，然后从数组（promises）中删掉这个 Promise 对象，再加入一个新的 Promise，直到全部的 url 被取完，最后再使用 Promise.all 来处理一遍数组（promises）中没有改变状态的

    61820

    关于 ES6 中 Promise 的面试题

    ); // 要求分别输出 // 1 // 2 // 3 // done // [1, 2, 3] 解析 首先 ajax1 、ajax2、ajax3 都是函数，只是这些函数执行后会返回一个 Promise...执行console.log(4)，输出【4】，宏任务执行结束。 再执行微任务，执行 then1，输出【1】， 执行 then2，输出【2】。 到此为止，第一轮事件循环结束。开始执行第二轮。...= reject img.src = url }) }; 解析 题目的意思是需要我们这么做，先并发请求 3 张图片，当一张图片加载完成后，又会继续发起一张图片的请求，让并发数保持在...3 个，直到需要加载的图片都全部发起请求。...，然后从数组（promises）中删掉这个 Promise 对象，再加入一个新的 Promise，直到全部的 url 被取完，最后再使用 Promise.all 来处理一遍数组（promises）中没有改变状态的

    1.4K10

    promise执行顺序面试题令我头秃

    / 要求分别输出// 1// 2// 3// done// [1, 2, 3]解析首先 ajax1 、ajax2、ajax3 都是函数，只是这些函数执行后会返回一个 Promise，按题目的要求我们只要顺序执行这三个函数就好了...执行console.log(4)，输出【4】，宏任务执行结束。 再执行微任务，执行 then1，输出【1】， 执行 then2，输出【2】。 到此为止，第一轮事件循环结束。开始执行第二轮。...= reject img.src = url })};解析题目的意思是需要我们这么做，先并发请求 3 张图片，当一张图片加载完成后，又会继续发起一张图片的请求，让并发数保持在 3...个，直到需要加载的图片都全部发起请求。...，然后从数组（promises）中删掉这个 Promise 对象，再加入一个新的 Promise，直到全部的 url 被取完，最后再使用 Promise.all 来处理一遍数组（promises）中没有改变状态的

    77920

    最常见的 20 个 jQuery 面试问题及答案

    ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。...如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。 　　...使用类“.active"来标记它们的未激活和激活状态，等等. 　　16. 使用 CDN 加载 jQuery 库的主要优势是什么 ? (答案) 　　这是一个稍微高级点儿的jQuery问题。...ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。...使用类“.active"来标记它们的未激活和激活状态，等等. 　　16. 使用 CDN 加载 jQuery 库的主要优势是什么 ? (答案) 　　这是一个稍微高级点儿的jQuery问题。

    15.3K30

    高性能JavaScript-JS脚本加载与执行对性能的影响

    defer在IE4就引入了，目前几乎所有浏览器都支持。defer的js文件在并行下载结束后并不立即执行，其执行时机是在文档加载完毕后window.onload触发之前。...async是HTML5引入的新规范，目前获得了大多数浏览器的支持。async的js文件在并行下载结束后立即执行。...比较defer和async的区别可以得到以下结论： 两者都是并行下载，不影响html文档的解析； defer文件的执行时机是在window.onload之前，所以defer文件的位置任意； async文件下载结束后立即执行...大多数浏览器都支持script.onload事件： script.onload = function(){} IE浏览器没有实现onload事件，而是会触发readystatechange事件。...当readyState的状态为loaded或complete时便可以认为js脚本文件已加载完毕。

    2.4K91
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券