AJAX总结（三），XMLHttpRequest对象

前言

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

http://hiztx.top/2017/01/13/a...

---

  这篇文章介绍了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权威指南