AJAX总结（三），XMLHttpRequest对象

2019年8月31日 119次阅读 来源: Stillwater

媒介

博主博客：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值

常量值寄义
UNSENT0open()还没有挪用
OPENED1open()已挪用
HEADERS_RECEIVED2吸收到头信息
LOADING3吸收到相应主体
DONE4相应完成

为了监听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威望指南

    原文作者：Stillwater
    原文地址: https://segmentfault.com/a/1190000008112371
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞