ajax请求构成,突破:Ajax请求 | 您所在的位置:网站首页 › 构成ajax的技术有 › ajax请求构成,突破:Ajax请求 |
==> 本人文章纯属个人理解,如有差池万望斧正 var xhr = new ActiveObject('Microsoft.XMLHTTP') } -------------------------- var xhr if(window.XMLHttpRequest){ xhr = new XMLHttpRequest() }else{ xhr = new ActiveObject('Microsoft.XMLHTTP') } 2,定义请求内容 通过实例.open(请求方法,请求URL,是否异步) 定义请求的发送方式和内容,与HTTP请求不同的是,Ajax仅可以使用get或post两种请求方法;请求URL同HTTP标准;请求行中,用于填写协议版本的部分,此处可以忽略或写入一个布尔值。布尔值默认为true,此时请求被异步处理,如果为false则进行同步处理。 当同步处理进行时,页面的其他行为将陷入停滞无法被触发,因为JS的线程正在被占用,直到Ajax收到响应数据或失败结果后才会恢复。这种请求可用于移动端APP,你在看到滚动条或loading图时,任何动作都不会被浏览器捕获到,因为此时的浏览器无暇顾及你的其他命令。 虽然JS是单线程,但浏览器不是,所以当异步操作时,发送后进入等待状态的Ajax会被浏览器开启另一个线程挂起,收到回复后,会把这个Ajax结果放回JS主线程队列的末端。这时不会影响到页面的其他行为。如:在视频缓存的同时,仍然可以查看陈大脸先生播放列表里都是哪些老师的作品。 xhr.open('GET','http://www.nichousha.com',true) 定义请求头 实例.setRequestHeader(请求头键,请求头值) 基本不会用到的方法,但它的存在能够强化对Ajax本质的了解,即Ajax是一种具有较高完整度的,特殊的HTTP请求,你可以只定义几个关键内容就能正常地发送了。 3,发送请求 实例.send(请求体) 可以发送这次请求,如果请求的方法是post,此处可以写入请求体。如果向服务器发送的请求不涉及过于复杂的内容。此处可以send空值并使用get方法加问号传参的方式发送。为了保障兼容性,如果get方法发送空值,此处建议写入null。如:实例.send(null) xhr.send(null) 4,接收并处理响应 确认Ajax是否收到结果取决于两个具体条件:Ajax状态码和http请求状态码。这个判断由onreadystatechange触发,每当Ajax进行到一个阶段都会触发这个状态码改变事件,并产生一次判断,Ajax对应0-4共5个状态码: (0)未初始化 (1)正在send发送 (2)完成send发送 (3)请求处理中 (4)请求完成或失败,已收到确切响应 Ajax状态码(readyState)结果一定为4,才能判定为成功。此时我们还无法证实它是否带回了我们想要的结果,因为它可能兴致冲冲地迎上去,却遭遇了404这种不友善错误的无情拒绝。所以这时还需要第二层判断: http请求状态码(status) 如果请求被顺利返回,此时的http状态码一定是200。 *假如缺少对http请求状态码的二次判断,onreadystatechange会分别在Ajax状态码1,2,3的改变事件触发后进行完整的Ajax结果处理,相当于你在碗里什么东西都没有的情况下进食了约45分钟。 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ //处理结果 } } Ajax的钩子 ES标准中,还定义了一部分Ajax实例发送过程的阶段型事件。常用的:如强制终止,最大时限,对不同结果的处理等... 绝对事件: 1.实例.onloadstart 当Ajax请求被发起,就会触发这个钩子 2.实例.onprogress(event) 进度访问,该钩子可以周期性地访问两个属性:loaded和total(当前量传输和总量)一般用于显示一个较大文件的上传进度。 2.实例.onloadend 无论成功或是失败,Ajax最终都会获得一个必然结果,并触发这个钩子。 3.实例.onload 成功地获取了预期的请求结果。 4.实例.onerror 返回的实例并不是一个正确的结果 意外事件: 1.实例.ontimeout 设置最大时限,配合 实例.timeout = 毫秒数,当Ajax超时,触发这个钩子 2.实例.onabort 请求终止,当实例.abort()终止请求时,触发该钩子 xhr.timeout = 1000; xhr.ontimeout = function(){ alert('已超时') } Ajax的结果处理 Ajax获得的结果可以是XML或JSON,前者调用responseXML直接解析为DOM对象。JSON则可以被responseText转换为字符串格式 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |