):获得一个包含所有头部信息的长字符串; abort():取消异步请求; 以及以下属性: responseText:包含响应主体返回文本; responseXML:如果响应的内容类型是 text/xml...默认情况下,当发送 AJAX 请求时,会附带以下头部信息: Accept:浏览器能够处理的内容类型; Accept-Charset: 浏览器能够显示的字符集; Accept-Encoding:浏览器能够处理的压缩编码...这里就用到前面讲过的 xhr.readyState 属性,readyState 会随着 AJAX 的进程而不断变化,我们可以通过 onreadystatechange() 去监听它的变化,进而判断何时收到服务器的响应结果...捕获这个错误。 4.3 overrideMimeType() 方法 服务器返回的响应头中有一个是 Content-Type,用以告诉客户端返回的资源类型(MIME)以及应该用什么编码去解码。...有以下6个进度事件: loadstart:在接受到响应数据的第一个字节时触发 progress:在接受响应期间持续不断地触发 error:在请求错误时触发 abort:在因为调用 abort() 方法而终止连接时触发
):获得一个包含所有头部信息的长字符串; abort():取消异步请求; 以及以下属性: responseText:包含响应主体返回文本; responseXML:如果响应的内容类型是 text/xml...默认情况下,当发送 AJAX 请求时,会附带以下头部信息: Accept:浏览器能够处理的内容类型; Accept-Charset: 浏览器能够显示的字符集; Accept-Encoding:浏览器能够处理的压缩编码...捕获这个错误。 4.3 overrideMimeType() 方法 服务器返回的响应头中有一个是 Content-Type,用以告诉客户端返回的资源类型(MIME)以及应该用什么编码去解码。...有以下6个进度事件: loadstart:在接受到响应数据的第一个字节时触发 progress:在接受响应期间持续不断地触发 error:在请求错误时触发 abort:在因为调用 abort() 方法而终止连接时触发...以 http://test.com/dist/demo.html 为例,不同源以及同源可能有以下情况: 类型 URL 结果 不同协议 https://test.com/dist/demo.html 失败
responseText:作为响应主体被返回的文本 responseXML:如果响应的内容类型是”text/xml”或”application/xml”,这个属性中将保存包含着响应数据的XML DOM文档...); } 说明: (1)有的浏览器会错误的报告成功状态码为204 (2)无论内容类型是什么,响应主体的内容都会保存到responseText属性中;而对于XML数据而言,responseXML同时也将被赋值...如果,服务器返回的MIME类型是text/plain,但数据中实际包含的是XML。根据MIME类型,responseXML属性中仍然是null。...error:在请求发生错误时触发。 abort:在因为调用abort()方法而终止时触发。 load:在接收到完整的响应数据时触发。...error:在发生错误时触发,连接不能持续。 close:在连接关闭时触发。 注意:WebSocket对象不支持DOM 2级事件侦听器,必须使用DOM 0级语法分别定义各个事件。
当请求发送到服务器端,收到响应后,响应的数据会自动填充 XHR 对象的属性。那么一共有四个属性:接受响应之后,第一步检查 status 属性,以确定响应已经成功返回。...四:课程代码附件1)ajax同步请求实现流程:同步:1、得到核心对象XMLHttpRequest对象var xhr = new XMLHttpRequest();2、准备/打开请求open(请求类型GET...10",true); // 异步请求// 3、发送请求 send(参数/null);xhr.send(null);// 监听readystate事件 (0=尚未调用open方法;1=已调用open方法未调用..."uname=zhangsan&uage=10"); // post请求如果有参数,需要将参数设置在send方法中// 监听readystate事件 (0=尚未调用open方法;1=已调用open方法未调用...callback();}}} else { // 同步请求// 处理响应结果callback();}// 处理响应结果function callback() {// 4、解析响应数据if (xhr.status
Ajax是一种异步进程,程序不会等待异步代码执行完后再继续执行后续代码 当后续代码需要调用Ajax返回的数据时,可能会有数据未返回的问题 Ajax的实现步骤 创建Ajax对象 var xhr =...4 响应已经完成,可以获取并使用服务器响应了 xhr.readyState;//获取Ajax状态值 onreadstatechange事件 Ajax状态码发生变化的时候触发 // 当Ajax状态码发生变化时触发事件...xhr.onreadystatechange = function () { // 判断当Ajax状态码为4时 if (xhr.readyState == 4) {...5xx 服务端错误,服务器不能正确执行一个正确的请求 低版本浏览器缓存问题 由于缓存的存在,在请求地址不发生改变的情况下,只有第一次的数据请求会发送到服务器端,后续的请求都会从浏览器的缓存中获取 解决方法...responseText = JSON.parse(responseText); } // 如果请求成功 if (xhr.status == 200) { // 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
因为,普通用户不会去控制台里看错误信息,我们要编写代码拿到错误并展示给用户在页面上,使用 axios 的 catch 方法,捕获这次请求响应的错误并做后续处理,具体的错误处理过程如下:如果请求成功发出且服务器也响应了状态码...,但状态代码超出了 2xx 的范围,Axios 会捕获到一个 error.response 对象,其中包含了响应的数据、状态码和头部信息如果请求已经成功发起,但没有收到响应,error.request...也会被捕获如果在发送请求时出了问题,比如请求配置有误;开发者可以使用 .catch() 方法来处理这些错误;Demo用户注册请求: 部分平台对用户名有唯一的限制,对于相同的用户会错误提醒;POST http...同步执行的,并可以在其中定义异步任务; 它接受一个执行器,函数作为参数,执行器函数又接受两个参数,resolve和reject 分别用于在异步操作成功时兑现Promise,或者在出现错误时拒绝PromisePromise.then...Promise 被拒绝,await 表达式会抛出拒绝的值/* 目标:async和await_错误捕获 */async function getData() { // 1. try包裹可能产生错误的代码
一、什么是Ajax Ajax 的全称是 Asynchronous JavaScript and XML(即异步的 JavaScript 和 XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术...Microsoft.XMLHTTP"); //IE6,IE5 2、创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息 XHR.open(method,url,async); // method:请求类型...对象的三个重要的属性 onreadystatechange:存储函数,每当 readyState 属性改变时,就会调用该函数 readyState:存有 XMLHttpRequest 的状态 0:请求未初始化...比较常见的有: 200:“OK”(当 readyState 等于 4 且状态为 200 时,表示响应已就绪) 304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意...) 403:(禁止) 服务器拒绝请求 404:(未找到) 服务器找不到请求的网页 408:(请求超时) 服务器等候请求时发生超时 500:(服务器内部错误) 服务器遇到错误,无法完成请求
XMLHttpRequest兼容性 关于xhr的浏览器兼容性,大家可以直接查看“Can I use”这个网站提供的结果XMLHttpRequest兼容性,下面提供一个截图。 ?...,请参考本文【可以发送什么类型的数据】一节; setRequestHeader必须在open()方法之后,send()方法之前调用,否则会抛错; setRequestHeader可以调用多次,最终的值不会采用覆盖...,此时才能调用xhr.responseText,否则抛错。...- 当xhr为一个**sync同步请求时,xhr.timeout必须置为0**,否则会抛错。原因可以参考本文的【如何发一个同步请求】一节。...一旦程序抛出错误,如果不 catch 就无法继续执行后面的代码,所以调用 xhr.send(data)方法时,应该用 try-catch捕捉错误。
特定的错误信息,比如错误所在的生命周期钩子 // 只在 2.2.0+ 可用 } errorHandler指定组件的渲染和观察期间未捕获错误的处理函数。...同样的,当这个钩子是 undefined 时,被捕获的错误会通过 console.error 输出而避免应用崩 从 2.4.0 起,这个钩子也会捕获 Vue 自定义事件处理函数内部的错误了 从 2.6.0...,当捕获到一个来自子孙组件的错误时被调用 基本类型 (err: Error, vm: Component, info: string) => ?...boolean 此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。...== undefined import { isPromise } from 'shared/util' // 当错误函数处理错误时,停用deps跟踪以避免可能出现的infinite rendering
XMLHttpRequest兼容性 关于xhr的浏览器兼容性,大家可以直接查看“Can I use”这个网站提供的结果XMLHttpRequest兼容性,下面提供一个截图。 ?...,请参考本文【可以发送什么类型的数据】一节; setRequestHeader必须在open()方法之后,send()方法之前调用,否则会抛错; setRequestHeader可以调用多次,最终的值不会采用覆盖...,此时才能调用xhr.responseText,否则抛错 只有当请求成功时,才能拿到正确值。...当xhr为一个sync同步请求时,xhr.timeout必须置为0,否则会抛错。原因可以参考本文的【如何发一个同步请求】一节。...一旦程序抛出错误,如果不 catch 就无法继续执行后面的代码,所以调用 xhr.send(data)方法时,应该用 try-catch捕捉错误。
/** * ajax简易demo * @param type 请求类型 * @param url 请求地址 * @param data 请求数据 * @returns {Promise}...*/ const ajax = function(type,url,data){ return new Promise((resolve,reject)=>{ const xhr = new...创建请求 // 监听请求 xhr.onreadystatechange = function(resp){ if (xhr.readyState===4){ // 状态 0请求未初始化...1请求已创建但未发送 2发送请求完成,处理中 3解析请求数据 4返回结果 if(xhr.status===200){ // http状态码 resolve(xhr.responseText...}else if(xhr.status===404){ // 处理一个404 reject(new Error('404 not found')) // 告知404错误
如果需要采用异步的方式获取ajax数据,就需要绑定load事件,等加载后再执行var data= xhr.responseText,才返回数据 三、采用异步绑定事件的方式获取ajax数据 1、代码 异步绑定数据...POST:描述动作结果的资源在消息体中传输。...TRACE:消息正文包含服务器收到的请求消息 3.2)404 Not Found 请求失败,被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。...onerror是定义一个事件,当ajax连接失败(浏览器发送ajax请求根本没有连接到服务器)浏览器自己输出error。...status是请求链接到服务器,服务器响应错误后服务器返回浏览器的状态码。
什么Ajax 在现实Ajax之前,我们需要了解下什么Ajax?...当使用结合了这些技术的 AJAX 模型以后, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。...同步交互与异步交互的区别在于同步交互需要等待结果,而异步交互不需要等待。 举个简单的例子就是当点击某个按钮后,程序会去请求一些数据,而这个过程整个页面是不会刷新的。...(404,服务器错误等),readyState属性最终都会变成4,因此需要通过status属性判断响应码。...{ // 当请求成功时执行的代码 console.log(xhr.responseText); } } ?
这个属性有五个值: 值 状态 说明 0 未初始化 尚未调用open()方法 1 启动 已经调用open()方法,但尚未调用send()方法 2 发送 已经调用send()方法,但尚未接受响应 3 接受...在Ajax使用的过程中,GET的使用频率要比POST高。 在了解这两种请求方式前,我们先了解一下HTTP头部信息,包含服务器返回的响应头信息和客户端发送出去的请求头信息。...encodeURIComponent()方法时,在一些特殊字符比如“&”,会出现错误导致无法获取。...POST请求 POST请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是使用的POST传输方式。...JSON也可以使用Ajax来建立回调访问。 var url = 'demo.json?
当服务器响应后,再来处理Ajax对象获取到的响应结果。 同步方式:是阻塞的,当Ajax对象向Web服务器发送请求后,会等待Web服务器响应的数据接收完成,再继续执行后面的代码。...例如,当请求成功时,状态码为200。 另外还有一个类似的属性statusText,值为字符型数据,包含了描述短语,如“200 OK”。...); // 查看服务器返回数据的类型:string eval('var obj = ' + xhr.responseText); // 用eval()函数将字符型转成对象...console.log(typeof xhr.responseText); // 查看服务器返回数据的类型:string eval('var obj = ' + xhr.responseText);...当需要发送多个JSONP请求时,无法区分每个回调函数。 为了解决这两个问题,我们可以编写代码实现自动生成一个随机的回调函数名,并在请求时将函数名传递给服务器,服务器在返回结果中调用指定的函数。
并不是同步 3.发送请求 oAjax.send(); 4.接收返回值 请求状态监控:onreadystatechange事件:当自己的Ajax与服务器之间有通讯时触发 主要通过...--readyState属性:请求状态 --0(未初始化)还没有调用open方法 --1(载入)已经调用send()方法,正在发送请求 --2(载入完成...-->返回的数据类型可能是xml(几乎已经淘汰),json(现在常用) 示例1:原生Ajax向服务器请求数据(即GET方法) data/arr3.txt为:[{user:'blue',pass:'123...t='+new Date().getTime(),"user-info",function(str){ 24 //当后台返回的是json数据时,可以用eval(函数来处理),与get...103 } 104 //执行默认操作 105 default: 106 //不包含没有名字的表单字段
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用。本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信....', true); xhr.send(); 方法 描述 open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。...method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步) send(string) 将请求发送到服务器。...0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 onreadystatechange 每当 readyState 属性改变时,就会调用该函数...开发人员,可以通过监听XMLHttpRequest对象的onreadystatechange事件,在事件的回调函数中判断readyState的状态,可以帮助我们进行对象请求结果的判断处理。
以下是一些常用的属性和方法:属性onreadystatechange:用于定义当 readyState 属性发生改变时调用的函数。...0:未初始化。XMLHttpRequest 对象已创建但尚未调用 open() 方法。1:已打开。open() 方法已调用,但尚未调用 send() 方法。2:已发送。...参数 method 表示请求的类型(GET、POST 等),url 表示请求的 URL,async 表示是否异步,默认为 true。send([data]):发送 AJAX 请求。...当 readyState 变为 4(已完成)且 status 为 200(成功)时,表示服务器返回了有效的响应。我们可以通过 responseText 属性获取服务器返回的文本,并按需进行解析和处理。...在这个示例中,我们将一个包含用户名和密码的对象进行了 JSON 序列化,并作为请求体发送到服务器。
重走Ajax之路(一) 复习篇。现在做的项目请求这块都是用的axios,但是还是不能忘本。...插一嘴:Ajax 名字中包含 XML,但是这并不意味着并不代表格式一定是XML。实际上,感觉JSON更香。 Ajax 使用步骤(异步) Ajax 的使用主要分为 4 步。 1....这时候并不会发送请求,而只是启动一个请求 open方法接收 3 个参数:请求类型、请求 URL、请求是否异步(默认为true,表示异步执行) xhr.open("get", "example.txt",...绑定 readystatechange 事件 XHR 对象会有一个readyState属性,这个属性表示当前处于请求响应过程的哪个阶段 0(未初始化):还没有调用open方法 1(已打开):已经调用open...xhr.onreadystatechange = function () { console.log(xhr.readyState); if (xhr.readyState === 4) { } }; 当收到响应后