突破:Ajax请求

2019-11-02 admin

==> 本人的文章不代表权威与正确,纯属个人理解,如有差池万望斧正<==

Ajax的介绍

Ajax请求是现代网页最重要的构成元素之一,通过这项技术,用户可以在不重载整个页面的情况下,完成局部数据的交互与刷新。如果这项功能不存在,那每一次向服务器申请数据,所有内容都需要重新下载、排列。 虽然听上去这是一个凌驾于网页规则之上的高阶技术。但本质上它仍然是http请求,或者说主要以该请求为载体,这个请求可以具备HTTP请求的所有特征,如:请求行,请求头,请求体。并开放了一些可供开发者自定义的内容。我们不需要关心XMLHttpRequest实例的具体实现方式,只需要了解——这个请求帮你向服务器传达什么?它返回的响应如何处理? Ajax请求一般以DOM的某个事件驱动,如加载完毕,点击等

Ajax的流程

一个完整的Ajax具有以下4个执行步骤:

1,创建实例 Ajax通过XMLHttpRequest()的实例来实现,其中XML是一种经典的、标准的、兼容性强的数据存储格式。但当下的主要网络传输方式,大都以更加轻量、易读的JSON进行。IE6及IE5并不支持该实例的创建,如果考虑到兼容上述浏览器,可以创建ActiveXObject(“Microsoft.XMLHTTP”) 实例。常用的兼容写法如下:

try{
    var xhr = new XMLHttpRequest()
}catch{
    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转换为字符串格式

[转载]原文链接:https://segmentfault.com/a/1190000020886055

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78777.html

文章标题:突破:Ajax请求

相关文章
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
Ajax入门手册chm
下载地址:Ajax入门手册chm ...
2015-11-12
ajax分页效果(bootstrap模态框)
ajax分页效果图: 上干货: &#x2F;** * ajax分页 *&#x2F; $(function(){ $(&quot;.modal-body&quot;).find(&quot;.pagination&quot;...
2017-02-20
Ajax教程之Ajax介绍
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述...
2015-11-12
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
下面通过文字说明和代码分析的方式给大家分享移动端图片上传之localResizeIMG先压缩后ajax无刷新上传,具体实现过程请看下文。 现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动...
2017-03-29
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
借助于 XMLHttpRequest,浏览器可以在整个页面不刷新的情况下与服务端进行交互,这就是所谓的 Ajax(Asynchronous JavaScript and XML)。Ajax 可以为用户提供更为丰富的用户体验。 Ajax 请求...
2017-03-29
JS使用ajax方法获取指定url的head信息中指定字段值的方法
本文实例讲述了JS使用ajax方法获取指定url的head信息中指定字段值的方法。分享给大家供大家参考。具体分析如下: 下面的JS代码用来获取ajax_info.txt的head信息中的Last modified属性,最后修改时间 &lt;...
2017-03-21
浅谈angular2的http请求返回结果的subcribe注意事项
实例如下: this.monitorSer.getVehicleLonAndLat(vehicleIds) .subscribe( data =&gt; { &#x2F;&#x2F;将data下的data字符串转化为vehdat...
2017-03-14
JS使用ajax从xml文件动态获取数据显示的方法
本文实例讲述了JS使用ajax从xml文件动态获取数据显示的方法。分享给大家供大家参考。具体分析如下: 下面的JS代码通过ajax检索xml文件的内容动态展示到网页,真个页面无刷新 &lt;!DOCTYPE html&gt; &lt;htm...
2017-03-21
回到顶部