首页
学习
活动
专区
圈层
工具
发布

AJAX 与跨域通信(一):AJAX

):获得一个包含所有头部信息的长字符串; 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() 方法而终止连接时触发

1.3K20

AJAX 与跨域通信(一):AJAX 与同源策略

):获得一个包含所有头部信息的长字符串; 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 失败

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

    Ajax与Comet

    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级语法分别定义各个事件。

    1K32

    AJax(XHR+Get和Post+AJax的封装)

    当请求发送到服务器端,收到响应后,响应的数据会自动填充 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

    49410

    Ajax向服务器端发送请求

    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) { // 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数

    3.1K20

    前后端交互的弯弯绕绕

    因为,普通用户不会去控制台里看错误信息,我们要编写代码拿到错误并展示给用户在页面上,使用 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包裹可能产生错误的代码

    1.5K20

    Ajax 的简介与使用

    一、什么是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:(服务器内部错误) 服务器遇到错误,无法完成请求

    1.3K10

    XMLHttpRequest使用指南大全

    XMLHttpRequest兼容性 关于xhr的浏览器兼容性,大家可以直接查看“Can I use”这个网站提供的结果XMLHttpRequest兼容性,下面提供一个截图。 ?...,请参考本文【可以发送什么类型的数据】一节; setRequestHeader必须在open()方法之后,send()方法之前调用,否则会抛错; setRequestHeader可以调用多次,最终的值不会采用覆盖...,此时才能调用xhr.responseText,否则抛错。...- 当xhr为一个**sync同步请求时,xhr.timeout必须置为0**,否则会抛错。原因可以参考本文的【如何发一个同步请求】一节。...一旦程序抛出错误,如果不 catch 就无法继续执行后面的代码,所以调用 xhr.send(data)方法时,应该用 try-catch捕捉错误。

    1.7K30

    面试官:你是怎么处理vue项目中的错误的?

    特定的错误信息,比如错误所在的生命周期钩子 // 只在 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

    1.5K20

    你真的会使用XMLHttpRequest吗?

    XMLHttpRequest兼容性 关于xhr的浏览器兼容性,大家可以直接查看“Can I use”这个网站提供的结果XMLHttpRequest兼容性,下面提供一个截图。 ?...,请参考本文【可以发送什么类型的数据】一节; setRequestHeader必须在open()方法之后,send()方法之前调用,否则会抛错; setRequestHeader可以调用多次,最终的值不会采用覆盖...,此时才能调用xhr.responseText,否则抛错 只有当请求成功时,才能拿到正确值。...当xhr为一个sync同步请求时,xhr.timeout必须置为0,否则会抛错。原因可以参考本文的【如何发一个同步请求】一节。...一旦程序抛出错误,如果不 catch 就无法继续执行后面的代码,所以调用 xhr.send(data)方法时,应该用 try-catch捕捉错误。

    2K30

    Web基础知识

    当服务器响应后,再来处理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请求时,无法区分每个回调函数。 为了解决这两个问题,我们可以编写代码实现自动生成一个随机的回调函数名,并在请求时将函数名传递给服务器,服务器在返回结果中调用指定的函数。

    1.9K10

    原生JS--Ajax

    并不是同步 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 //不包含没有名字的表单字段

    7.9K21

    前端架构师之01_JavaScript_Ajax

    当服务器响应后,再来处理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请求时,无法区分每个回调函数。 为了解决这两个问题,我们可以编写代码实现自动生成一个随机的回调函数名,并在请求时将函数名传递给服务器,服务器在返回结果中调用指定的函数。

    1.2K10

    原生AJAX请求教程

    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的状态,可以帮助我们进行对象请求结果的判断处理。

    3.1K00

    AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法

    以下是一些常用的属性和方法:属性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 序列化,并作为请求体发送到服务器。

    1.8K30

    重走Ajax之路1

    重走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) { } }; 当收到响应后

    58710
    领券