首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    重走Ajax之路2

    同步请求 调用open方法时,第三个参数是false时,就是同步请求,这时候,JavaScript会堵塞,当服务器响应之后才继续执行。...这时候,绑定的readystatechange事件不会有反应,因为同步请求的话,JavaScript会堵塞,当服务器响应之后才继续执行,所以当我们绑定事件时,已经接收到响应了,所以状态不会再变也就不会触发...open方法之前,这样子,当服务器响应之后,状态会从0变成4,就会触发事件。...和设置请求头类似,我们有时候从服务器响应中获取响应头,比如把token放到了响应头里。...如果我们直接将对象发过去,会自动调用toString方法变成字符串形式。 那么,我们在换成JSON字符串再试试。

    71420

    Ajax笔记

    2、依靠对象 XMLHttpRequest对象 fetch对象 (兼容性较弱) 二、采用同步的方式通过ajax获取数据(简单版) 1、代码 我在当前html文件下伪造了一个hello.json的文档,作为服务器资源.../第一个参数是请求获取数据的方式,第二个参数是请求服务器对应地址,参数三是false是同步获取,true是异步获取 xhr.send() var data= xhr.responseText console.log...成功的含义取决于HTTP方法: GET:资源已被提取并在消息正文中传输。 HEAD:实体标头位于消息正文中。 POST:描述动作结果的资源在消息体中传输。...status是请求链接到服务器,服务器响应错误后服务器返回浏览器的状态码。...(但尚未调用 open() 方法) 1 载入,XMLHttpRequest对象开始发送请求 2 载入完成,XMLHttpRequest对象的请求发送完成 3 下载解析中,XMLHttpRequest对象开始读取服务器的响应

    1K60

    Web前端-Ajax基础技术(下)

    ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问。 浏览器发送请求,获取服务器的数据: 地址栏输入地址,表单提交,特定的href或src属性。...效果 readyState 0 xhr被创建,未调用open()方法 1 open()方法被调用,建立了连接 2 send()方法被调用,可以获取状态行和响应头 3 响应体下载中,responseTest...= 4) return; console.log(this); } 服务器响应,使用 XMLHttpRequest 对象的responseText或responseXML属性。...responseText获取字符串形式的响应数据,responseXML获取xml形式的响应数据。...阅读他的文章,会上瘾!,帮你成为更好的自己。长按下方二维码可关注,欢迎分享,置顶尤佳。

    2.5K30

    Web基础知识

    常见的Web服务器软件有Apache HTTP Server(简称Apache)、Nginx等。 浏览器与服务器交互 在Web服务器中,请求资源又分为静态资源和动态资源。...当服务器响应后,再来处理Ajax对象获取到的响应结果。 同步方式:是阻塞的,当Ajax对象向Web服务器发送请求后,会等待Web服务器响应的数据接收完成,再继续执行后面的代码。...获取响应信息:responseText属性、responseXML属性等 当请求服务器成功且数据接收完成时,可以使用Ajax对象提供的相关属性获取服务器的响应信息。...与XML对比:使用JSON对象访问属性的方式获取数据更加方便,在JavaScript中可以轻松地在JSON字符串与对象之间转换。 JSON格式的数据交互实现。...以前的方法:通过DOM操作手动获取用户在表单中填写的值。 缺点:表单中的数据非常多时,使用此方式将会给开发和维护带来许多麻烦。 HTML5提供的方法:FormData表单数据对象。

    13510

    Ajax与Comet

    (2)调用send()之后,请求就会被分派到服务器 补充:xhr.open()方法为“false”,即同步请求,JavaScript代码会等到服务器响应后再继续执行;否则,继续执行后续代码。...在收到服务器响应后,相应的数据会自动填充XHR对象的属性。...如果,服务器返回的MIME类型是text/plain,但数据中实际包含的是XML。根据MIME类型,responseXML属性中仍然是null。...,在不依赖XHR对象的情况下也能发送某种请求,其不需要修改服务器端代码。...(1)长轮询:页面发起一个到服务器的请求,然后服务器一直保持连接打开,直到有数据可发送。发送完数据之后,浏览器关闭连接,随即又发起一个到服务器的新请求。

    67132

    从零开始学 Web 之 Ajax(三)Ajax 概述,快速上手

    如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit”按钮,表单开始提交,浏览器就会刷新页面,然后在新页面里告诉你操作是成功了还是失败了。...在IE6及以下的时候,是不支持 XMLHttpRequest 对象的,那么与之对应写法为: var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 所以为了兼容性...status:服务器返回的状态码 this.status == 200:表示响应成功;404 表示没有找到请求的资源;500 表示服务器端错误。...send 方法已经被调用,已经可以获取状态行和响应头 3 LOADING 响应体下载中,responseText 属性可能已经包含部分数据 4 DONE 响应体下载完成,可以直接调用 responseText...当 readyState == 3 时,可能已经获取部分数据体,但是处理数据是不可靠的,所以一般一般我们都是在 readyState 值为 4 时,执行响应的后续逻辑 。

    1.1K30

    前端架构师之01_JavaScript_Ajax

    常见的Web服务器软件有Apache HTTP Server(简称Apache)、Nginx等。 浏览器与服务器交互 在Web服务器中,请求资源又分为静态资源和动态资源。...当服务器响应后,再来处理Ajax对象获取到的响应结果。 同步方式:是阻塞的,当Ajax对象向Web服务器发送请求后,会等待Web服务器响应的数据接收完成,再继续执行后面的代码。...获取响应信息:responseText属性、responseXML属性等 当请求服务器成功且数据接收完成时,可以使用Ajax对象提供的相关属性获取服务器的响应信息。...与XML对比:使用JSON对象访问属性的方式获取数据更加方便,在JavaScript中可以轻松地在JSON字符串与对象之间转换。 JSON格式的数据交互实现。...以前的方法:通过DOM操作手动获取用户在表单中填写的值。 缺点:表单中的数据非常多时,使用此方式将会给开发和维护带来许多麻烦。 HTML5提供的方法:FormData表单数据对象。

    4610

    Web前端-Ajax基础技术(上)

    Web前端-Ajax基础技术 Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应...(this.status) // 获取响应状态描述 console.log(this.statusText) // 获取响应头信息 // 获取指定响应头 console.log(this.getResponseHeader...('Content-Type')) // 获取全部响应头 console.log(this.getAllResponseHeader()) // 获取响应体 // 获取响应文本形式 console.log...,true); xmlhttp.send(); 请求类型,为get和post,url文件在服务器上的位置,true异步和false同步。...responseBody将回应信息文体 status返回当前请求的状态码 statusText返回当前请求的响应的状态 abort取消当前请求 getAllResponseHeaders获取响应指定的

    1.5K40

    Ajax向服务器端发送请求

    获取服务器端给与客户端的响应数据 xhr.onload = function () { console.log(xhr.responseText); } 服务器端响应的数据格式 服务器端大多数情况下会以...JSON对象作为响应数据的格式 在http请求和响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转换为对象字符串进行传输。...,通常响应中已经有部分数据可以使用了 4 响应已经完成,可以获取并使用服务器响应了 xhr.readyState;//获取Ajax状态值 onreadstatechange事件 Ajax状态码发生变化的时候触发...服务端错误,服务器不能正确执行一个正确的请求 低版本浏览器缓存问题 由于缓存的存在,在请求地址不发生改变的情况下,只有第一次的数据请求会发送到服务器端,后续的请求都会从浏览器的缓存中获取 解决方法:...else { xhr.send(); } // 请求加载完成 xhr.onload = function () { // 获取服务器端返回数据的类型 var contentType

    2.2K20

    原生AJAX请求教程

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用。本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信....XMLHttpRequest 对象 浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面。...method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步) send(string) 将请求发送到服务器。...0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 onreadystatechange 每当 readyState 属性改变时,就会调用该函数...开发人员,可以通过监听XMLHttpRequest对象的onreadystatechange事件,在事件的回调函数中判断readyState的状态,可以帮助我们进行对象请求结果的判断处理。

    2.7K00

    你真的会使用XMLHttpRequest吗?

    XMLHttpRequest Level 1主要存在以下缺点: 受同源策略的限制,不能发送跨域请求; 不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据; 在发送和获取数据的过程中,...无法实时获取进度信息,只能判断是否完成; 那么Level 2对Level 1 进行了改进,XMLHttpRequest Level 2中新增了以下功能: 可以发送跨域请求,在服务端允许的情况下;...这个字段中列举的 header 字段就是服务器允许暴露给客户端访问的字段。...—— xhr.loadend事件触发的时候。 另外,还有2个需要注意的坑儿: 可以在 send()之后再设置此xhr.timeout,但计时起始点仍为调用xhr.send()方法的时刻。...在不限制超时的情况下,有可能同步请求一直处于pending状态,服务端迟迟不返回响应,这样整个页面就会一直阻塞,无法响应用户的其他交互。

    1.6K30

    Ajax第四节

    可以获取数据传输的进度信息 注意:我们现在使用new XMLHttpRequest创建的对象就是2.0对象了,我们之前学的是1.0的语法,现在学习一些2.0的新特性即可。...用户体验不友好,xhr2.0中的formData对象支持文件的异步上传。...("file", file); xhr.send(formData); 显示文件进度信息 xhr2.0还支持获取上传文件的进度信息,因此我们可以根据进度信息可以实时的显示文件的上传进度。...上传的进度信息会存储事件对象e中 3. e.loaded表示已上传的大小 e.total表示整个文件的大小 代码参考: xhr.upload.onprogress = function (e) {...("Access-Control-Allow-Origin:http://www.study.com"); CORS的具体流程(了解) 浏览器发送跨域请求 服务器端收到一个跨域请求后,在响应头中添加Access-Control-Allow-Origin

    66120

    初学者必看Ajax的总结

    而采用了 AJAX 技术之后,大部分的计算工作,都是在用户不察觉的情况下,交由服务器去完成了 ? ?...2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 4:响应已完成;您可以获取并使用服务器的响应了。...在客户端声明回调函数之后,客户端通过 script 标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数 用 XMLHttpRequest 时,我们得到一个字符串;要用JSON.parse...把字符串转化成对象,使用 jsonp 时,script 标志会解析并执行返回的代码,等我们处理数据时,已经是一个 JavaScript 对象了 注意浏览器的缓存问题 在末尾增加一个随机数可避免频繁请求同一个链接出现的缓存问题...在 PHP 中,GET 方式用$_GET[]获取;POST 方式用$_POST[]获取;两种方式都可用$_REQUEST[]来获取 总结 使用load() 、$.get()和$.post()方法完成了一些常规的

    2.6K40
    领券