前言

博主博客：Stillwater的博客
知乎专栏：前端汪汪
本文为作者原创转载请注明出处：

这篇文章介绍了XMLHttpRequest对象相关知识。包括：XMLHttpRequest对象的本质，Http请求和Http响应。

一、XMLHttpRequest对象的本质

为了更好的理解XMLHttpRequest对象的本质，我们将其分成三部分来理解。顾名思义，

XMLHttpRequest = XML + Http + Request 。

什么是XML？

XML设计用来传送及携带数据信息，不用来表现或展示数据，HTML语言则用来表现数据，所以XML用途的焦点是它说明数据是什么，以及携带数据信息。XML被广泛用来作为跨平台之间交互数据的形式，主要针对数据的内容。
例如，XML定义结构、存储信息、传送信息。下例为小张发送给大元的便条，存储为XML。这XML文档仅是纯粹的信息标签，这些标签意义的展开依赖于应用它的程序。

<?xml version="1.0"?>
<小纸条>
<收件人>大元</收件人>
<发件人>小张</发件人>
<主题>问候</主题>
<具体内容>早啊，饭吃了没？ </具体内容>
</小纸条>
什么是Http？

超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是互联网上应用最为广泛的一种网络协议。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。本文后面会详细介绍AJAX技术相关的Http知识。

什么是Request？

Request翻译为请求，这个大家都知道。但是很多人会误解，只有用浏览器（Chrome，Safari，IE），我们才能向服务器发送Http请求。这是不对的。我们换个角度，从服务器的角度思考。当服务器收到全世界各地发来的Http请求的时候，它并不知道屏幕的对面是谁，有可能是正在网上冲浪的你，也有可能仅仅是一只网络爬虫，甚至有可能就是我们编写的AJAX程序中的XMLHttpRequest对象而已。

回到我们的问题，XMLHttpRequest对象的本质是什么？

是一个可以发送Http请求，处理Http响应，与服务器之间进行异步交换数据的对象，其核心是Http。

所以要想深入理解XMLHttpRequest对象，那就要学习一些Http的知识了。请往下看。

二、Http请求

一个Http请求由4部分组成：

Http请求方法（GET、POST、DELETE、PUT）

正在请求的URL（/home/index.html）

请求头（可选）

请求主体（可选）

创建XMLHttpRequest对象之后，发起Http请求的下一步是调用XMLHttpRequest对象的open()方法去指定这个请求的两个必要部分：请求方法和URL。

request.open("GET",/home/index.html);//请求方法：GET，URL：/home/index.html

open()的第一个参数指定Http请求方法，通常用大写字母来匹配Http协议。open()的第二个参数是URL，是请求的主要内容。如果有请求头的话，请求进程的下一个步骤是设置它。例如，POST请求需要“Content-type”。

request.setRequestHeader("Content-type","text/plain");

使用XMLHttpRequest发起Http请求的最后一步是指定请求主体（可选）并向服务器发送它。使用send()方法像如下这样做：

request.send(null);

GET请求没有主体，所以应该传递null或省略这个参数。

Http请求的各部分有指定顺序：请求方法和URL首先到达，然后是请求头，最后是请求主体。调用XMLHttpRequest方法的顺序必须匹配Http请求的顺序。例如：setRequestHeader()方法的调用必须在open()方法之后，send()方法之前，否则将抛出异常。

例：用POST方法发送纯文本给服务器

function postMessage(msg){
var request = new XMLHttpRequest();//创建新请求
request.open("POST","/log.php"); //用POST向服务器端发送脚本
request.setRequestHeader("Content-type","text/plain;charset=UTF-8");//请求头设置
request.send(msg);//把msg作为请求主体发送
} //由于没有指定响应函数，所以我们将忽略任何响应
三、Http响应

服务器返回的Http响应包含3部分：

数字和文字组成的状态码，用来显示请求的成功和失败

响应头

响应主体

我们可以通过XMLHttpRequest对象的属性和方法来获取上述响应包括的三个部分。

status和statusText属性以数字和文本的形式返回Http状态码。

使用getResponseHeader()和getAllResponseHeaders()能查询响应头。

响应主体可以从responseText属性中得到文本形式的，从responseXML属性中得到Document形式的。

readyState是一个整数，指定了Http请求的状态。

表：XMLHttpRequest的readyState值

| 常量 | 值 | 含义 |
| :----: | :----: | :----: |
| UNSENT | 0 | open()尚未调用 |
| OPENED | 1 | open()已经调用 |
| HEADERS_RECEIVED | 2 |接收到头信息 |
| LOADING | 3 | 接收到响应主体 |
| DONE | 4 | 响应完成 |

为了监听readystatechange事件，请把事件处理函数设置为XMLHttpRequest对象的onreadystatechange属性。

例：获取Http响应的onreadystatechange

//发出一个Http GET请求以获得指定URL的内容
//当响应成功到达，验证它是否是纯文本
//如果是，把它传递给指定回调函数
function getText(url,callback){
var request = new XMLHttpRequest(); //创建新请求
request.open("GET",url);//指定待获取的URL
request.onreadystatechange = funciton(){//定义事件处理函数
if (request.readyState===4&&request.status===200{ //如果请求完成，则它是成功的
var type = request.getResponseHeader("Content-Type");
if(type.match(/^text/)) //确保响应是文本
callback(request.responseText); //把它传递给回调函数
}
};
request.send(null)//立即发送请求
}
四、总结

本文介绍了XMLHttpRequest对象的本质是一个可以发送Http请求，处理Http响应，与服务器之间进行异步交换数据的对象，其核心是Http。然后介绍了Http请求和响应包括的具体内容。Http请求包括：方法，URL，请求头，请求主体。Http响应包：状态码，响应头和响应主体。

参考文献：

[1]维基百科
[2]JavaScript权威指南