前端必备HTTP技能之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个参数,

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事件监听器。

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

    var xmlhttp;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", filepath , false);
        xmlhttp.send(null);
    }
sendRequestHeader方法

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

setRequestHeader( Name, Value )

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

send方法

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

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方法调用前调用。

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

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

abort()

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

HTTP响应

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

跨域请求

早起的web开发中,通过使用js在一个web站点和另一个不安全的站点交换信息的方式,很容易突破用户的安全防线。因此所有的现代浏览器实现了一个同源策略来阻止类似攻击,例如跨站脚本。XMLHttpRequest数据也受这种安全策略支配,但是有时web开发想有意的规避这种限制。因为有时需要合法使用子域,例如在foo.example.com域上的页面发送XMLHttpRequest请求获取bar.example.com域上的数据通常会失败。

存在各种规避这种安全策略的方法,例如可以使用JSONP,跨域资源共享(CORS),或者flash,silverlight插件。跨域XMLHttpRequest请求在W3C的XMLHttpRequest Level 2规范中有提及。IE10+才支持CORS。IE8,IE9提供类似功能的XDomainRequest API。

CORS协议也有几点限制,支持两种模式。简单模式不允许设置自定义头并且忽略cookie,只支持HEAD,GET,POST请求方法,其中POST方法只允许"text/plain","application/x-www-urlencoded","multipart/form-data"的MIME类型,最初支持的只有"text/plain"类型。另一个模式检测何时请求复杂特性之一,然后给服务端发送一个请求确认来协商特性。

做好前端开发必须对HTTP的相关知识有所了解,所以我创建了一个专题前端必备HTTP技能专门收集前端相关的HTTP知识,欢迎关注,投稿。


PS:本文翻译自维基百科,原文地址https://en.wikipedia.org/wiki/XMLHttpRequest

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,630评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,405评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,382评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,548评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,853评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,276评论 1 209
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,638评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,350评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,015评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,309评论 2 240
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,836评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,206评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,767评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,972评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,715评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,319评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,222评论 2 258

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,467评论 6 13
  • 本文详细介绍了 XMLHttpRequest 相关知识,涉及内容: AJAX、XMLHTTP、XMLHttpReq...
    semlinker阅读 13,504评论 2 18
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,083评论 18 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,292评论 18 399
  • 翻手机图片翻出了一张考哥的截图,忍不住少女心又泛滥了一下。 曾经有很长一段时间里,我热衷收图,除去手绘练习素材,其...
    秃濎阅读 277评论 0 0