AJAX总结（三），XMLHttpRequest对象

DrizzleX 发布于2019-08-20 13:42 / 1112人阅读

摘要：包括对象的本质，请求和响应。下例为小张发送给大元的便条，存储为。表的值常量值含义尚未调用已经调用接收到头信息接收到响应主体响应完成为了监听事件，请把事件处理函数设置为对象的属性。响应包状态码，响应头和响应主体。

前言

博主博客：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文档仅是纯粹的信息标签，这些标签意义的展开依赖于应用它的程序。


<小纸条>
 <收件人>大元
 <發件人>小張
 <主題>問候
 <具體內容>早啊，飯吃了沒？

什么是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权威指南

云服务器 GPU云服务器大学三年php总结 AJAX核心对象 js ajax对象 XMLHttpRequest

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81196.html

AJAX总结（二），手写AJAX

摘要：创建对象指定响应函数打开连接指定请求发送请求创建响应函数注第三步是使用对象的方法，字面意思是打开的意思，即打开连接。前言博主博客：Stillwater的博客知乎专栏：前端汪汪本文为作者原创转载请注明出处：http://hiztx.top/2017/01/12/a... 在前端面试的时候经常会有如下情景。AJAX会吗？能不能手写个AJAX？第一个问题可以参见我的另一篇博客，AJAX...

娣辩孩 2019-08-20 13:41 评论0 收藏0
Ajax笔记

摘要：本文主要是我学习的笔记，不涉及到原理，只是记录如何使用。成功的含义取决于方法资源已被提取并在消息正文中传输。是请求链接到服务器，服务器响应错误后服务器返回浏览器的状态码。是指响应时间，开始请求到接收到响应开始处理的时间，单位为。本文主要是我学习ajax的笔记，不涉及到原理，只是记录如何使用。如果有错欢迎各位大佬指出。提前先转一篇写的非常全面的博客你真的会使用XMLHttpReques...

macg0406 2019-08-23 13:48 评论0 收藏0
Ajax的全面总结

摘要：实现流程创建对象打开请求地址，初始化数据发送请求数据监听回调函数状态收到服务器返回的应答结果。请求完成后回调函数请求成功或失败时均调用。 Ajax在前端开发中有着举足轻重的地位，关于Ajax的使用和注意事项一直是一个重要的话题，借此机会，本文希望对Ajax做一个全面的总结，彻底揭开Ajax的神秘面纱。一.什么是Ajax Ajax(Asynchronous JavaScript and...

lookSomeone 2019-08-20 18:54 评论0 收藏0
从0到1学AJAX，这篇就够了！（进阶三）

摘要：一定在发送请求之前注册不管同步或者异步为了让这个事件可以更加可靠一定触发，一定是先注册了解同步模式即可，切记不要使用同步模式。至此，我们已经大致了解了的基本。一种数据描述手段，基本现在的项目不用了，淘汰的原因数据冗余太多。什么是ajax？ AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程 1、使用 AJAX 的...

CoderDock 2019-08-23 15:32 评论0 收藏0
从0到1学AJAX，这篇就够了！（进阶三）

摘要：一定在发送请求之前注册不管同步或者异步为了让这个事件可以更加可靠一定触发，一定是先注册了解同步模式即可，切记不要使用同步模式。至此，我们已经大致了解了的基本。一种数据描述手段，基本现在的项目不用了，淘汰的原因数据冗余太多。什么是ajax？ AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程 1、使用 AJAX 的...

microelec 2019-07-01 11:24 评论0 收藏0