一、所谓“神秘”的XMLHttpRequest对象

背景

在 1999 年，微软发布 IE5，第一次引入了新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这功能在当时并没有被引起注意，直到 2004 年 Gmail 和 2005 年 Google Map 的发布，才引起广泛的重视。在 2005 年 2 月，Ajax （Asynchronous JavaScript And XML，中文翻译是：异步的 JavaScript 和 XML ）这词第一次提出，指围绕这个功能进行开发的一整套做法。此后，Ajax 成为脚本发起 HTTP 通信的代名词，W3C 也在 2006 年发布了它的国际标准。

什么是 XHR 对象

XHR 是 XMLHttpRequest 的简称。这是微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。XHR 为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。

一、创建 XHR

IE5是第一款引入 XHR 对象的浏览器， 在 IE5中， XHR 对象是通过 MSXML 库中的一个 ActiveX 对象实现的，而 IE7+ 及其他标准浏览器都支持原生的 XHR 对象。

var xhr;
if (window.XMLHttpRequest) {
    xhr = new window.XMLHttpRequest();
} else {
    // IE5, IE6
    xhr = new ActiveXObject("Microsort.XMLHTTP");
}

注意：如果要建立 N 个不同的请求，就要使用 N 个不同的 XHR 对象。当然可以重用已存在的 XHR 对象，但这会终止之前通过该对象挂起的任何请求。

二、发送请求

发送请求的过程，包括 open 和 send 两个方法。

1）open
在使用 XHR 对象时，要调用的第一个方法是 open() ，该方法接收 3 个参数；

// xhr.open(method, url, async);
xhr.open('GET', 'example.php', false)
  • method 参数：即指定发送请求的方式，字符串类型，不区分大小写，但通常使用大写字母。如 GET、POST。还可以是 HEAD、OPTIONS、PUT。而由于安全风险的原因，CONNECT、TRACE、TRACK 被禁止使用。（ 关于HTTP协议8种常用方法的详细介绍，可以点击这里）
  • url 参数：所要请求 URL，该 URL相对于执行代码的当前页面，且只能向同一个域中使用相同端口和协议的 URL 发送请求。如果 URL 与启动请求的页面有任何差别，都会引发安全错误。
  • async 参数：表示是否异步发送请求，布尔类型（true 表示异步，false 表示同步）。 如果不填写，默认 true，表示异步发送。
  • 如果请求一个受密码保护的 URL，把用于认证的用户名和密码作为第 4 个和 第 5 个参数传递给 open() 方法。

如果接收的是同步响应，则需要将 open() 方法的第三个参数设置为 false，那么 send() 方法将阻塞直到请求完成。

同步请求是吸引人的，但应该避免使用它们。客户端 JavaScript 是单线程的，当 send() 方法阻塞时，他通常会导致整个页面冻结。如果连接的服务器响应慢，那么用户的浏览器看起来像“假死”状态。

2） send
send() 方法接收一个参数，即要作为请求主体发送的数据。调用 send() 方法后，请求被分派到服务器。

  • 如果 GET 请求， send() 方法无参数，或者参数为 null；
  • 如果是 POST 请求，send() 方法参数为要发送的数据，字符串类型，所以一般需要序列化。
xhr.open('GET', 'example.php', false);
xhr.send(null);
三、接收响应

一个完整的 HTTP 响应由状态码、响应头集合、响应主体组成。在收到响应后，这些都可以通过 XHR 对象的属性和方法使用，主要有以下 4 个属性：

  • responseText：作为响应主体被返回的文本（文本形式）；
  • responseXML：如果响应的内容是 text/xml 或 application/xml，这个属性中将保存这响应数据的 XML DOM 文档（document 形式）
  • status：HTTP 状态码（数字形式）
  • statusText：HTTP 状态说明（文本形式）

在接收到响应之后，第一步是检测 status 属性，以确定响应已经成功返回。一般来说，可以将 HTTP状态码为 200 作为成功的标志。此时，responseText 属性的内容已经就绪，而且在内容类型正确的情况下， responseXML 也可以访问了。此外，状态码为 304 表示请求的资源并没有被修改，可以直接使用浏览器中的缓存版本。当然，也意味着响应是有效的。

无论内容类型是什么，响应主体的内容都会保存到 responseText 属性中，而对于非 XML 数据而已，responseXML 属性的值将为 null。

// 这是同步的方式，（异步则需要监听 onreadystatechange 事件，继续往下看）
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
  alert(xhr.responseText);
} else {
  alert('request was unsuccessful: ' + xhr.status);
}
四、readyState

当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XHR 对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。

每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XHR 的状态信息。
readyState 存有 XHR 的状态，从 0 到 4 发生变化。

  • 0 （Uninitialized 未初始化）：请求未初始化（此阶段确认XMLHttpRequest对象是否创建，还没有调用 open() 方法）
  • 1（Loading 载入）：服务器连接已建立（此阶段调用 open() 方法进行初始化，并调用 send() 方法向服务端发送请求）
  • 2（Loaded 载入完成）：请求已接收（此阶段 send() 方法执行完成，且已接收到服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用）
  • 3（Interactive 交互）：请求处理中（此阶段解析接收到的服务器端响应数据，即根据服务器端响应头部返回的 MIME 类型把数据转换成能通过 responseBody，responseText 或 responseXML 的属性存取的格式）
  • 4（Completed 完成）：请求已完成，且响应已就绪（此阶段响应内容解析完成，可以在客户端调用了）
// 异步方式
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    alert('request was successful!');
  }
}

注意：理论上，只要 readyState 属性值发生改变，都会触发一次 onreadystatechange 事件。但是为了确保跨浏览器的兼容性，必须在调用 open() 之前指定 onreadystatechange 事件处理程序，否则将无法接收 readyState 属性为 0 和 1 的情况。

五、超时

XHR 对象的 timeout 属性等于一个整数，单位毫秒（ms），表示该请求的最大请求时间。即在多少毫秒后，如果请求仍然没有得到结果，就会自动终止。该属性默认为 0，表示没有时间限制。

如果请求超时，将会触发 ontimeout 事件。

xhr.open('POST', 'example.php', true);
xhr.ontimeout = function() {
  console.log('The request timed out');
}
xhr.timeout = 1000;
xhr.send();

IE8 浏览器不支持该属性。

最后

只要弄清楚了整个过程，就会发现其实它并没有那么神秘，对吧。
概而括之，整个 XHR 对象的生命周期应该包括如下阶段：创建 → 初始化请求 → 发送请求 → 接收数据 → 解析数据 → 完成。

// 整个过程
function httpRequest() {
    var xhr;

    // 创建 xhr 对象
    if (window.XMLHttpRequest) {
        xhr = new window.XMLHttpRequest();
    } else {
        // 为了兼容 IE5、IE6
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    // 异步方式必须采用 onreadystatechange 来监听
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            alert('The request was successful! ' + xhr.responseText)
            // handle statements...
        }
    }

    // 设置超时处理
    xhr.ontimeout = function () {
        alert('The request was timed out')
    }
    xhr.timeout = 3000;

    xhr.open('POST', './test.ajax', true);

    // 如需设置 HTTP 请求头，必须在 open() 之后、send() 之前调用，例如：
    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencode');

    // 序列化
    xhr.send(JSON.stringify({ name: 'test' }));
}

httpRequest();

下一篇：HTTP Content-Type详解

The end.


参考：

过程中遇到的一些问题，解疑：

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,941评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,397评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 165,345评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,851评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,868评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,688评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,414评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,319评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,775评论 1赞 315
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,945评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,096评论 1赞 350
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,789评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,437评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,993评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,107评论 1赞 271
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,308评论 3赞 372
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,037评论 2赞 355