一. XMLHttpRequest由来及原生介绍

XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据。这个对象是浏览器的js环境提供的。从XHR获取数据的目的是为了持续修改一个加载过的页面,XHR是Ajax设计的底层概念。XHR使用的协议不同于HTTP,不仅可以使用XML格式的数据,也支持JSON,HTML或者纯文本。

WHATWG组织负责维护一个动态的XHR标准文档。W3C基于WHATWG标准创建了一个固定的规范。

历史

XMLHttpRequest对象背后的概念最开始是被微软Outlook Web Access工作组为Microsoft Exchange Server 2000提出的。一个IXMLHTTPRequest接口被开发出来,第二代的MSXML库实现了这个概念。1999年的发布的IE5使用了第二代的MSXML库,通过ActiveX访问IXMLHTTPRequest接口,这个接口在MSXML中通过XMLHTTP包装。

IE5,IE6没有在他们的脚本语言中定义XMLHttpRequest对象的标识符,当时IE5,IE6发布时,XMLHttpRequest标识符本身还不是一个标准。如果XMLHttpRequest标识符不存在,通过对象检测可以获得向后兼容性。微软在2006年发布的IE7时,定义了XMLHttpRequest对象标识符。

Mozilla项目组为Gecko布局引擎开发实现的接口称为nsIXMLHttpRequest。这个接口被建模成尽可能的接近微软的IXMLHTTPRequest接口。Mozilla通过js对象为这个接口创建了一个包装器称为XMLHttpRequest。XMLHttpRequest首次可用是在2000年12月6号发布的Gecko 0.6版本中,但是还不是全功能版本直到2002年6月5号发布的1.0版本的Gecko。XMLHttpRequest对象在其他主要的web客户端中变成了一个事实标准,在2004年2月发布得Safari 1.2版本,2005年4月发布的KonquerorOpera8.0版本,2005年9月发布的iCab 3.0b352版本中都实现了这个对象。

随着跨浏览器JS库(例如jQuery)流行,开发者再调用XMLHttpRequest功能时不用再直接接触底层API。

标准

W3C在2006年4月5号发布了一个关于XMLHttpRequest对象的工作草案规范,起草人是Opera的Anne van Kesteren和W3C的Dean Jackson。它的目标是“基于现有的实现,文档化一个最小的可以互相协作的特性,以便web开发者可以不用编写特定平台代码来使用这些特性”。

W3C在2008年2月25号又发布了另一个关于XMLHttpRequest对象的工作草案,称为"XMLHttpRequest Level 2"。这个版本的XMLHttpRequest包括了XMLHttpRequest对象的扩展功能,例如事件处理,支持跨域请求,支持处理字节流。2011年底,这个规范被遗弃了,其中的内容收录在原始的规范中。

在2012年底,WHATWG接管了这个事情,并且用Web IDL定义了一个标准。W3C目前的草案就是基于WHATWG标准创建的。

HTTP请求

下面的章节展示了符合W3C工作草案标准的用户代理如何使用XMLHttpRequest对象功能发起http请求。因为W3C关于XMLHttpRequest对象的标准仍然是一个草案,所以用户代理可能没有完全实现草案规定的功能,也就是下面的这些是有可能变化的。当使用XMLHttpRequest对象的脚本跨用户代理使用时,要考虑下这种影响。本文将试着列出主要的用户代理之间不一致的地方。

open方法

XMLHttpRequest对象的HTTP和HTTPS请求必须通过opent方法初始化。这个方法必须在实际发送请求之前调用,以用来验证请求方法,URL以及用户信息。这个方法不能确保URL存在或者用户信息必须正确。初始化请求可以接受5个参数,

  1. open( Method, URL, Asynchronous, UserName, Password )

第一个参数是一个字符串值标识HTTP的请求方法。请求方法必须是用户代理支持的方法以及W3C的XMLHttpRequest对象草案规定的方法,如下:

  • GET (IE7+,Mozilla 1+)
  • POST (IE7+,Mozilla 1+)
  • HEAD (IE7+)
  • PUT
  • DELETE
  • OPTIONS (IE7+)

然而请求方法并不限于以上列出的这些。W3C草案声明浏览器可以自行决定支持的请求方法。

第二个参数也是一个字符串值,标示请求的URL。W3C推荐当有跨域请求时,浏览器应该报个错误。

第三个参数是一个布尔值类型,标示请求是否是异步的,在W3C草案中并不是一个必须参数。如果没有提供,符合W3C规范的用户代理应该默认为true。异步请求("true")不会等待服务器响应在继续执行其他脚本之前,可以调用XMLHttpRequest对象的onreadystatechange事件监听器来获取请求的不同状态。一个同步的请求("false")会阻塞js执行直到请求完成,这时就没必要调用onreadystatechange事件监听器。

第四个和第五个参数分别是用户名和密码。这些参数是服务端为了验证请求使用的。

  1. var xmlhttp;
  2. if (window.XMLHttpRequest) {
  3. xmlhttp = new XMLHttpRequest();
  4. xmlhttp.open("GET", filepath , false);
  5. xmlhttp.send(null);
  6. }
sendRequestHeader方法

在成功初始化请求之后,XMLHttpRequest对象的setRequestHeader方法可以用来设置请求头。

  1. setRequestHeader( Name, Value )

第一个参数是header的字符串名称,第二个参数是字符串值。如果请求需要多个header,这个方法就要被调用多次。这个方法附加的请求头,在下次open方法调用时会被清空。

send方法

XMLHttpRequest对象的send方法用来发送请求,这个方法接收一个参数,这个参数就是要发送的内容。

  1. send(Data)

如果不需要发送内容,这个参数可以省略。W3C草案声明这个参数可以是任意类型的值只要能被js转成字符串,除了DOM对象。如果用户代理无法序列化这个参数,这个参数会被忽略。Firefox3.0.x以及之前版本在send方法没传参数时会抛出异常。

如果参数是DOM对象,用户代理应该确保文档已经被转成XML格式,通过文档对象的inputEncoding属性编码。如果请求头的Content-Type还没有通过setRequestHeader方法设置,用户代理应该自动的增加一个值"application/xml;charset=charset",其中的charset应该是用来编码文档的编码格式。

如果用户代理被配置成使用代理服务器,XMLHttpRequest对象应该适当修改请求连接代理而不是源服务器,发送Proxy-Authorization头配置。

onreadystatechange事件监听器

如果XMLHttpRequest对象的send方法第三个参数是true,也就是发送了异步请求,onreadystatechange事件监听器将自动在XMLHttpRequest对象的readyState属性改变时被触发。

状态改变过程如下:

  • open方法被成功调用,readyState属性被置为1(OPEND)
  • send方法被调用,成功接收到HTTP响应头,readyState属性被置为2(HEADERS_RECEIVED)
  • 一旦HTTP响应内容开始加载,readyState属性被置为3(LOADING)
  • 一旦HTTP响应内容结束加载,readyState属性被置为4(DONE)

当监听器被定义之后,每次状态改变时都会触发。为了检测状态1和状态2,监听器必须在open方法调用前调用。open方法必须在send方法调用前调用。

  1. var request = new XMLHttpRequest();
  2. request.onreadystatechange = function () {
  3. var DONE = this.DONE || 4;
  4. if (this.readyState === DONE){
  5. alert(this.readyState);
  6. }
  7. };
  8. request.open('GET', 'somepage.xml', true);
  9. request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  10. request.send(null);
abort方法

如果XMLHttpRequest对象的readyState属性还没有变成4,这个方法可以终止请求。这个方法可以确保异步请求中的回调不被执行。

  1. abort()

一些AJAX库使用abort方法来取消潜在重复请求以及无序请求。

HTTP响应

当成功调用XMLHttpRequest对象的send方法之后,如果服务端响应式格式正确的XML,并且已经把Content-Type头设置成用户代理支持的XML类型,XMLHttpRequest对象的responseXML属性将会包含一个DOM文档对象。另外一个属性responseText将会包含服务端返回的文本类型,而不管它是否被理解为XML。

二. XMLHttpRequest对象介绍

 

jquery ajax-jqXHR  介绍

http://www.css88.com/jqapi-1.9/jQuery.ajax/#jqXHR

  1. jqXHR 对象
  2.  
  3. jQuery 1.5开始,$.ajax() 返回XMLHttpRequestjqXHR)对象,该对象是浏览器的原生的XMLHttpRequest对象的一个超集。例如,它包含responseTextresponseXML属性,以及一个getResponseHeader()方法。当传输机制不是是XMLHttpRequest时(例如,一个JSONP请求脚本,返回一个脚本 tag 时),jqXHR对象尽可能的模拟原生的XHR功能。
  4.  
  5. jQuery 1.5.1开始, jqXHR对象还包含了overrideMimeType方法 (它在jQuery 1.4.x中是有效的,但是在jQuery 1.5中暂时的被移除)。.overrideMimeType() 方法可能用在beforeSend()的回调函数中,例如,修改响应的Content-Type信息头:
  6.  
  7. $.ajax({
  8. url: "http://fiddle.jshell.net/favicon.png",
  9. beforeSend: function ( xhr ) {
  10. xhr.overrideMimeType("text/plain; charset=x-user-defined");
  11. }
  12. }).done(function ( data ) {
  13. if( console && console.log ) {
  14. console.log("Sample of data:", data.slice(0, 100));
  15. }
  16. });
  17.  
  18. jQuery 1.5 开始,$.ajax()返回的jqXHR对象 实现了 Promise 接口, 使它拥有了 Promise 的所有属性,方法和行为。(见Deferred object获取更多信息)。
    为了让回调函数的名字统一,便于在$.ajax()中使用。jqXHR也提供.error() .success()和.complete()方法。这些方法都带有一个参数,该参数是一个函数,
    此函数在 $.ajax()请求结束时被调用,并且这个函数接收的参数,与调用 $.ajax()函数时的参数是一致。这将允许你在一次请求时,对多个回调函数进行赋值,
    甚至允许你在请求已经完成后,对回调函数进行赋值(如果该请求已经完成,则回调函数会被立刻调用)。
  19.  
  20. jqXHR.done(function(data, textStatus, jqXHR) {});
  21.  
  22. 一个可供选择的 success 回调选项的构造函数,.done()方法取代了的过时的jqXHR.success()方法。请参阅deferred.done()的实现细节。
  23. jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});
  24.  
  25. 一种可供选择的 error 回调选项的构造函数,.fail()方法取代了的过时的.error()方法。请参阅deferred.fail()的实现细节。
  26. jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { });(在jQuery 1.6 中添加)
  27.  
  28. 一种可供选择的 complete 回调选项的构造函数,.always()方法取代了的过时的.complete()方法。
  29.  
  30. 在响应一个成功的请求后,该函数的参数和.done()的参数是相同的:data, textStatus, jqXHR 对象.对于失败的请求,参数和.fail()的参数是相同的:jqXHR 对象, textStatus, errorThrown
    请参阅deferred.always()的实现细节。
  31. jqXHR.then(function(data, textStatus, jqXHR) {}, function(jqXHR, textStatus, errorThrown) {});
  32.  
  33. 包含了 .done() .fail()方法的功能,(从 jQuery 1.8 开始)允许底层被操纵。请参阅deferred.then()的实现细节。
  34.  
  35. 推荐使用的注意事项: jqXHR.success(), jqXHR.error(), jqXHR.complete()回调从 jQuery 1.8开始 被弃用过时。他们将最终被取消,您的代码应做好准备,
    jQuery 3.0开始被删除,你可以使用jqXHR.done(), jqXHR.fail(), jqXHR.always() 代替。
  36.  
  37. // Assign handlers immediately after making the request,
  38. // and remember the jqxhr object for this request
  39. var jqxhr = $.ajax( "example.php" )
  40. .done(function() { alert("success"); })
  41. .fail(function() { alert("error"); })
  42. .always(function() { alert("complete"); });
  43.  
  44. // perform other work here ...
  45.  
  46. // Set another completion function for the request above
  47. jqxhr.always(function() { alert("second complete"); });
  48.  
  49. this在所有的回调中的引用,是这个对象在传递给$.ajax的设置中上下文;如果没有指定context(上下文),this 引用的是Ajax设置的本身。
  50.  
  51. 为了向后兼容XMLHttpRequest ,一个 jqXHR 对象将公开下列属性和方法:
  52.  
  53. readyState
  54. responseXML 和/或 responseText 当底层的请求分别作出 XML 和/或 文本响应
  55. status
  56. statusText
  57. abort( [ statusText ] )
  58. getAllResponseHeaders() 一个字符串
  59. getResponseHeader( name )
  60. overrideMimeType( mimeType )
  61. setRequestHeader( name, value ) 用新值替换旧值,而不是将新值与旧值连接起来,这偏离了标准
  62. statusCode( callbacksByStatusCode )
  63.  
  64. 假如没有onreadystatechange属性,因为不同的状态可以分别在 success error completestatusCode 方法中进行处理。
  65. Callback Function Queues(回调函数)
  66.  
  67. beforeSend, error, dataFilter, success complete接受的回调函数是在合适的时间调用。
  68.  
  69. jQuery 1.5开始, fail done ,和从jQuery 1.6开始的always回调钩子(hooks)采用先入先出队列管理。这意味着你可以为每个挂钩分配多个回调。
    Deferred object methods ,这是实现内部的$.ajax()回调钩子(hooks)。
  70.  
  71. 这里有$.ajax()提供的回调钩子 hooks),如下:
  72.  
  73. beforeSend 在发送请求之前调用,它接收jqXHR对象和settings作为参数对象。
  74. error 在请求出错时调用。如果请求失败,在它们的顺序依次登记。他们接受jqXHR ,字符串表示的错误类型,以及异常对象(如果有的话)。
          一些内置的错误会将 "abort", "timeout", "No Transport" 等字符串作为异常对象。
  75. dataFilter 在请求成功之后调用。传入返回的数据以及dataType参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
  76. success 当请求成功并接收到返回数据之后调用。传入返回后的数据,以及包含成功代码的字符串和jqXHR对象。
  77. Promise callbacks .done(), .fail(), .always(), and .then() 根据他们注册的顺序被调用。
  78. complete 请求完成时,无论是在失败或成功,它们按顺序依次执行回调。他们收到jqXHR对象,以及一个包含成功或错误代码。

【转载并整理】AJAX XmlHttpRequest对象详解的更多相关文章

  1. Ajax中的XMLHttpRequest对象详解

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

  2. Ajax中的XMLHttpRequest对象详解(转)

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

  3. window.XMLHttpRequest对象详解

    来自:http://blog.csdn.net/lccone/article/details/7743946 window.XMLHttpRequest XMLHttpRequest对象是当今所有AJ ...

  4. 转载:jQuery的deferred对象详解

    一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...

  5. jQuery的deferred对象详解(转载)

    本文转载自: jQuery的deferred对象详解(转载)

  6. jQuery的deferred对象详解(转载)

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本.(由于无法转载,复制原文 .原文链接——原作者:阮一峰) 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5. ...

  7. mvc-servlet---ServletConfig与ServletContext对象详解(转载)

    ServletConfig与ServletContext对象详解 一.ServletConfig对象    在Servlet的配置文件中,可以使用一个或多个<init-param>标签为s ...

  8. django中request对象详解(转载)

    django中的request对象详解 Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并将  HttpRequest对象  作为第一个参数传入该函数. ...

  9. jQuery的deferred对象详解(一)

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

随机推荐

  1. javascript基于原型的语言的特点

    一.基于原型的语言的特点 1 只有对象,没有类;对象继承对象,而不是类继承类. 2  “原型对象”是基于原型语言的核心概念.原型对象是新对象的模板,它将自身的属性共享给新对象.一个对象不但可以享有自己 ...

  2. python globals和locals

    文章里面说globals和locals函数返回的是命名空间 - 一个存有对应作用域的所有的变量.方法的字典,注意这里和dir函数返回数组的不一样 Python命名空间的本质 class Test(ob ...

  3. Mongostat 2.6详解

    Mongostat C:\Users\John>Mongostat connected to: 127.0.0.1 insert query update delete getmore comm ...

  4. ES6 class 技术点拾遗

    语法 方法不需要加function,方法之间不需要加分号 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() ...

  5. SCD Type2 in ODI

    缓慢变化维(Slowly changing Dimensions)指的是维表中的维度字段值会随着时间或业务调整,而在后续的分析中,历史数据仍然要使用旧的维度值,新的数据会使用当前维度值.在数据仓库建设 ...

  6. 转 php安装错误configure: error: Please reinstall the libcurl distribu

    今天配置一台server的php支持curl的时候, 出现如下报错 checking for cURL in default path... not foundconfigure: error: Pl ...

  7. iscsi共享分区测试

    要求:在服务器端Server0上创建一个分区/dev/sdb1(无需格式化),配置成iscsi target设备,块设备名称为sun1,iqn名称为iqn.2018-01.com.ultrapower ...

  8. java操作csv文档通用工具类

    https://blog.csdn.net/rodge_rom/article/details/78898015 另: 参考该博主的关于FTP, EXCEL, WORD, 等工具类文章...

  9. 快排法求第k大

    快排法求第k大,复杂度为O(n) import com.sun.media.sound.SoftTuning; import java.util.Arrays; import java.util.Ra ...

  10. 【RS】BPR:Bayesian Personalized Ranking from Implicit Feedback - BPR:利用隐反馈的贝叶斯个性化排序

    [论文标题]BPR:Bayesian Personalized Ranking from Implicit Feedback (2012,Published by ACM Press) [论文作者]S ...