XMLHttpRequest

最新推荐文章于 2023-09-18 15:19:22 发布
置顶 最新推荐文章于 2023-09-18 15:19:22 发布
阅读量798 收藏
点赞数
分类专栏： web前端 文章标签： XMLHttpReqeust ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y2010081134/article/details/71436200
版权

原英文链接：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

参照原英文文章，翻译过来，然后加入自己的理解和拓展。

XMLHttpRequest是客户端（如浏览器）的一个API接口，提供一个客户端和服务器之间传输数据的功能。它使从一个URL获取数据变得容易而不用刷新整个页面。在更新页面一部分数据的同时不会打断用户的其它操作。XMLHttpRequest经常应用于AJAX编程。

XMLHttpRequest起初是由Microsoft设计实现的，最终被Mozilla，Apple和Google采纳。现在被WHATWG标准化。不管它的名字是什么，XMLHttpRequest可以被用来传输任何形式的数据，不仅仅是XML，还支持除了HTTP协议外的其它协议（包括file和ftp）。

EventTarget <--- XMLHttpRequestEventTarget <--- XMLHttpRequest

构造函数

XMLHttpRequest()

该构造函数初始化一个XMLHttpRequest。它必须在调用任何其它方法之前调用。

例子：

 

var myRequest = new XMLHttpRequest();

 

 

 

属性

XMLHttpRequest接口也继承XMLHttpRequestEventTarget和EventTarget的属性。

XMLHttpRequest.onreadystatechange

一个EventHandler，当readyState属性值改变时就会被调用。

语法：XMLHttpRequest.onreadystatechange = callback;

例子：

 

var xhr = new XMLHttpRequest(),
      method = "GET",
      url = "https://developer.mozilla.org";

xhr.open(method, url, true);
xhr.onreadystatechange = function () {
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){
        console.log(xhr.responseText);
    }
};
xhr.send();

 

XMLHttpRequest.readyState

返回unsigned short类型，表示请求的状态

 

ValueStateDescription
0UNSENT请求已经创建，但是还没调用open()
1OPENEDopen()已调用，在此期间，可以使用setRequestHeader()方法设置请求头
2HEADERS_RECEIVEDsend()已调用，响应头已接收到
3LOADING正在接收响应数据，如果responseType是“text”或者空字符串，responseText将会存储已加载的部分数据
4DONE操作完成。返回成功或者失败

 

 

 

 

 

 

 

 

 

例子：

 

var xhr = new XMLHttpReqeust();
console.log("UNSENT", xhr.readyState); // 0

xhr.open("GET", "/api", true); 
console.log("OPENED", xhr.readyState); // 1

xhr.onprogress = function () {
    console.log("LOADING", xhr.readyState); // 3
};

xhr.onload = function () {
    console.log("DONE", xhr.readyState); // 4
};

xhr.send(null);

 

XMLHttpRequest.response

返回一个ArrayBuffer，Blob，Document，JavaScript对象，或者一个DOMString，取决于XMLHttpRequest.responseType的值（包含在响应实体中）。

 

Value of responseTypeData type of response property
""DOMString(默认值)
"arraybuffer"ArrayBuffer
"blob"Blob
"document"Document
"json"JavaScript对象，从服务器返回的JSON字符串中解析出来
"text"DOMString

 

 

 

 

 

 

 

 

 

例子：

 

var url = "somePage.html";

function load(url, callback){
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4){
            console.log(xhr.response); // Outputs a DOMString by default
        }
    }
    xhr.open("GET", url, true);
    xhr.send("");
}

 

 

XMLHttpRequest.responseText

返回一个包含响应数据的DOMString或者当请求不成功或者请求没发送时为null

例子：

 

var xhr = new XMLHttpRequest();
xhr.open("GET", "/server", true);

// If specified, responseType must be empty string or "text"
xhr.responseType = "text";

xhr.onload = function () {
    if (xhr.readyState === xhr.DONE) {
        if (xhr.status === 200){
            console.log(xhr.response);
            console.log(xhr.responseText);
        }
    }
};

xhr.send(null);

 

XMLHttpRequest.responseType

一个枚举类型用来定义响应类型

 

ValueData type of response property
""DOMString(默认值)
"arraybuffer"ArrayBuffer
"blob"Blob
"document"Document
"json"JavaScript对象，从服务器返回的JSON字符串中解析
"text"DOMString

 

 

 

 

 

 

 

 

XMLHttpRequest.responseURL

返回响应的序列化URL或者当URL是null时返回空字符串

例子：

 

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/test");
xhr.onload = function () {
    console.log(xhr.responseURL); // http://example.com/test
};
xhr.send(null);

 

 

XMLHttpRequest.responseXML

对响应返回一个文档，或者如果请求不成功、请求还没发送或者不能将相应文本解析为XML或者HTML文档，就返回null。

语法： var data = XMLHttpRequest.responseXML;

例子：

 

var xhr = new XMLHttpRequest();
xhr.open("GET", "server", true);

// If specified, responseType must be empty string or "document"
xhr.responseType = "document";

// overrideMimeType() can be used to force the response to be parsed as XML
xhr.overrideMimeType("text/xml");

xhr.onload = function () {
    if(xhr.readyState === xhr.DONE){
        if(xhr.status === 200){
            console.log(xhr.response);
            console.log(xhr.responseXML);
        }
    }
};

xhr.send(null);

readyState为客户端的状态信息，当readyState为xhr.DONE时，说明请求完成（成功或者失败）；请求完成后，再去判断服务端返回的状态信息，如果status为200，说明请求成功，然后对数据做进一步处理。

 

XMLHttpRequest.status

返回一个unsigned short类型的数据，表示服务器返回的状态信息。

常见的状态信息如下：

 

statusdescription
200ok（表示请求成功）
304Not Modified
400Bad Request(服务器不能理解发来的请求或者请求中包含语法错误)
403Forbidden（客户端没有权限访问服务器）
404Not Found
500Internal Server Error
502Bad Gateway

 

 

 

 

 

 

 

 

 

 

例子：

 

var xhr = new XMLHttpRequest();
console.log("UNSET", xhr.status);

xhr.open("GET", "/server", true);
console.log("OPENED", xhr.status);

xhr.onprogress = function () {
    console.log("LOADING", xhr.status);
};

xhr.onload = function () {
    console.log("DONE", xhr.status);
};

xhr.send(null);

/**
* Outputs the following:
*
* UNSENT 0
* OPENED 0
* LOADING 200
* DONE 200
*/


XMLHttpRequest.statusText

 

返回一个HTTP服务器响应的DOMString字符串。与XMLHTTPRequest.status不同，这个字符串包含整个的响应状态信息（如“200 OK”）。

例子：

 

var xhr = new XMLHttpRequest();
console.log("0 UNSENT", xhr.statusText);

xhr.open("GET", "/server", true);
console.log("1 OPENED", xhr.statusText);

xhr.onprogress = function () {
    console.log("3 LOADING", xhr.statusText);
};

xhr.onload = function () {
    console.log("4 DONE", xhr.statusText);
};

xhr.send(null);

/**
* Outputs the following:
*
* 0 UNSENT
* 1 OPENED
* 3 LOADING OK
* 4 DONE OK
*/

 

 

XMLHttpRequest.timeout

表示一个unsigned long的毫秒值，如果一个请求在经过给定毫秒值后没有成功，该请求将被自动终止。
例子：

 

var xhr = new XMLHttpRequest();
xhr.open("GET", "/server", true);

xhr.timeout = 2000; // time in milliseconds

xhr.onload = function () {
    // Request finished. Do processing here.
}

xhr.ontimeout = function (e) {
    // XMLHttpRequest timed out. Do something here.
};

xhr.send(null);

 

 

XMLHttpRequestEventTarget.ontimeout

一个EventHandler，当请求超时时会调用。

 

XMLHttpRequest.upload

是一个XMLHttpRequestUpload，表示上传的进度。XMLHttpRequestUpload上传数据到客户端。

 

EventListenersData type of response property
onloadstart开始获取数据
onprogress正在传输数据
onabort获取数据操作被终止
onerror获取数据失败
onload获取数据成功
ontimeout在限定的超时时间内，数据没有获取完成
onloadend获取数据完成（成功或者失败）

 

 

 

 

 

 

 

 

 

 

 

 

XMLHttpRequest.withCredentials

一个boolean值，表明在跨站点的权限控制中是否需要证书，如cookies或者认证头。

例子：

 

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/", true);
xhr.withCredentials = true;
xhr.send(null);

 

非标准属性

XMLHttpRequest.channel

 

是一个nsIChannel（指定用特定的协议创建多个“GET”请求，并统一处理这些请求）。该通道将被XMLHttpRequest使用当处理request请求时。

 

XMLHttpRequest.mozAnon

是一个boolean值。如果是true，请求发送时将不带cookie和认证头。

 

XMLHttpRequest.mozSystem

是一个boolean值。如果是true，同样的原始策略将不会被执行（？不懂）。

 

XMLHttpRequest.mozBackgroundRequest

是一个boolean值。它表明对象是否表示一个后台服务请求。

 

XMLHttpRequest.mozResponseArrayBuffer

是一个ArrayBuffer。请求的响应结果，是一个JavaScript数组。

 

XMLHttpRequest.multipart

已废弃

Event Handlers

onreadystatechange作为XMLHttpRequest实例的一个属性，被所有浏览器支持。

尽管，不同的浏览器都有实现一些其它的事件句柄（onload，onerror，onprogress等等）。这些Firefox都支持。尤其，熟悉nsIXMLHttpRequestEventTarget和使用XMLHttpRequest。

近期一些浏览器，包括Firefox，除了为所有属性设置到一个处理函数外，也支持通过标准的addEventListener APIs来监听XMLHttpRequest事件。

Methods

XMLHttpRequest.abort()

当请求发送后终止。

语法：xhrInstance.abort();

例子：

var xhr = new XMLHttpRequest(),
      method = "GET",
      url = "https://developer.mozilla.org/";
xhr.open(method, url, true);

xhr.send();

xhr.abort();

 

XMLHttpRequest.getAllResponseHeaders()

返回所有的响应头，以CRLF分隔为一个个字符串，或者当没有响应数据时返回null。
语法：var headers = request.getAllResponseHeaders();

例子：

var request = new XMLHttpRequest();
request.open("GET", "foo.txt", true);
request.send();
request.onreadystatechange = function(){
    if(this.readyState == this.HEADERS_RECEIVED){
            console.log(request.getAllResponseHeaders());
        }
}

 

XMLHttpRequest.getResponseHeader()

返回一个包含指定头的值的字符串，或者响应没有收到时或者不存在对应头时，返回null。

语法：var myHeader = getResponseHeader(name);

例子：

var client = new XMLHttpRequest();
client.open("GET", "unicorns-are-teh-awesome.txt", true);
client.send();
client.onreadystatechange = function(){
    if(this.readyState == this.HEADERS_RECEIVED){
           console.log(client.getResponseHeader("Content-Type")); 
        }
}

 

XMLHttpRequest.open()

初始化一个请求。这个方法被用作在JavaScript中初始化一个http请求。
语法：

xhrReq.open(method, url);

xhrReq.open(method, url, async);

xhrReq.open(method, url, async, user);

xhrReq.open(method, url, async, user, password);

其中user和password参数用来进行认证，默认情况下，值为null。

 

XMLHttpRequest.overrideMimeType()

覆盖服务器返回的MIME类型。

例子：

// if the server doesn't specify, the returned text gets treated like xml
// and when you receive plain text or something instead of xml
// you get an error: XML Parsing Error: not well-formed

// this shows how to receive plain text 
req = new XMLHttpRequest();
req.overrideMimeType("text/plain");
req.addEventListener("load", callback);
req.open("get", url);
req.send();

 

XMLHttpRequest.send()

发送请求。如果请求是异步的（默认），请求发出时，方法立即返回一个值。当是同步时，只有当服务器响应时，方法才返回值。

语法：

void send();
void send(ArrayBuffer data);
void send(ArrayBufferView data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

例子：GET

var xhr = new XMLHttpRequest();
xhr.open("GET", "/server", true);

xhr.onload = function(){
    // Request finished. Do processing here.
};

xhr.send(null);
// xhr.send("string");
// xhr.send(new Blob());
// xhr.send(new Int8Array());
// xhr.send({ form: "data" });
// xhr.send(document);

例子：POST

var xhr = new XMLHttpRequest();
xhr.open("POST", "/server", true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function(){//Call a function when the state changes.
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
        // Request finished. Do processing here.
    }
}
xhr.send("foo=bar&lorem=ipsum");
// xhr.send("string");
// xhr.send(new Blob());
// xhr.send(new Int8Array());
// xhr.send({ form: "data" });
// xhr.send(document);

GET与POST的区别：

GET发送数据到服务器时，大小有限制，且参数得在url中指定，会暴露在浏览器地址栏中，安全性低。send中参数指定为null。

POST发送数据到服务器时，大小没有限制，参数在send中设定，作为http消息实体的一部分。安全性高。

XMLHttpRequest.setRequestHeader()

设置HTTP请求头的值。你必须在open()后和send()前调用。

语法：myReq.setRequestHeader(header, value);

 

非标准方法

XMLHttpRequest.init()

初始化对象以便在C++中使用。

警告：该方法不能在JavaScript中调用。

 

XMLHttpRequest.openRequest()

用open()代替。

 

XMLHttpRequest.sendAsBinary()
send()的变体，发送二进制数据。（只在某些浏览器中有用，不赞成使用）

浏览器适配情况

PC端

FeatureChromeEdgeFirefox(Gecko)Internet ExplorerOperaSafari(Webkit)
Basic support(XHR1)1(Yes)1.0 (1.7 or earlier)7(Yes)1.2
send(ArrayBuffer)9

(Yes)		9.0 (9.0)1011.60?
send(ArrayBufferView)22(Yes)20.0(20.0)???
send(Blob)7(Yes)3.6(1.9.2)1012?
send(FormData)6(Yes)4.0 (2.0)1012?
sendAsBinary(DOMString)No supportNo support2.0(1.8.1)No supportNo supportNo support
response10(Yes)6.0 (6.0)1011.60(Yes)
responseType = "arraybuffer"10(Yes)6.0 (6.0)1011.60(Yes)
responseType = 'blob'19(Yes)6.0 (6.0)1012(Yes)
responseType = 'document'18(Yes)11.0(11.0)10No support6.1
responseType = 'json'31No support10.0(10.0)No support12
No support
16
17		(Yes)
Progress Events7(Yes)3.5(1.9.1)1012(Yes)
withCredentials3(Yes)3.5(1.9.1)10124
timeout29.0(Yes)12.0(12.0)812
16		(Yes)
responseType = 'moz-blob'No supportNo support12.0(12.0)No supportNo supportNo support

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

移动端：

 

FeatureAndroidChrome for AndroidEdgeFirefox Mobile(Gecko)IE PhoneOpera MobileSafari Mobile
Basic support?1.0(Yes)(Yes)???
send(ArrayBuffer)??(Yes)????
send(ArrayBufferView)??(Yes)????
send(Blob)??(Yes)????
send(FormData)??(Yes)????
sendAsBinary(DOMString)??No support????
response??(Yes)????
responseType = 'arraybuffer'??(Yes)????
responseType = 'blob'??(Yes)????
responseType = 'document'??(Yes)????
responseType = 'json'??No support????
Progress Events??(Yes)????
withCredentials??(Yes)????
timeout??(Yes)????
responseType = 'moz-blob'??No support????

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

码上飞跃
关注
专栏目录
XMLHttpRequest 详解
m0_48982503的博客
12-03 1万+
XMLHTTPRequest对象，顾名思义：是基于XML的HTTP请求。XMLHTTPRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。自从浏览器提供有了XMLHTTPRequest这个接口之后，ajax操作就此诞生
【精简版】XMLHttpRequest 详解
最新发布
weixin_46485638的博客
07-07 1700
精简的 XMLHttpRequest 详解。
深入解析XMLHttpRequest：实现异步通信的利器
墨辰JC的博客
06-11 3429
在网络应用程序开发中，XMLHttpRequest（XHR）方法是一种用于向服务器发送HTTP请求和接收服务器响应的技术。它为开发者提供了一种使用JavaScript进行服务器通信的简单和灵活的方式。本篇博客将详细介绍XMLHttpRequest的使用方法和注意事项，并通过代码示例进行调试和演示。XMLHttpRequest是一个在JavaScript中使用的对象，它可以与服务器进行通信，发送HTTP请求并获取服务器的响应。通过XHR，我们可以在不刷新整个页面的情况下更新部分页面内容，实现动态交互。
XMLHTTPRequest的方法和属性介绍
驽马十驾 才定不舍
05-21 3194
使用XMLHTTPRequest对象的好处是可以在后台下载网页数据，不需要启动浏览器程序，并且可以下载各种类型的网页内容，例如XML文档、Javascript数据以及图像文件等。 这里先介绍一下XMLHTTPRequest对象的方法和属性。 XMLHTTPRequest对象 XMLHTTPRequest对象提供客户端和HTTP服务器之间通讯的协议支持。 下面的Visual Basic例子创
微信小程序：Failed to read the ‘responseText‘ property from ‘XMLHttpRequest‘
weixin_45427548的博客
01-27 6377
开发微信小程序的过程中，用wx.request获取服务器的数据时，发现总是收不到服务器传来的json数据 错误代码如下： wx.request({ url: 'http://localhost:8000/v1/quote', data: {}, header: { 'content-type': 'application/json' }, responseType : 'json', success (res) { co
【解决】axios 下载文件 Failed to read the ‘responseText‘ property from ‘XMLHttpRequest‘
Miozus Blog
04-28 3214
故障原因：排查一个早上，也参考了 Github 一些仓库的代码，在另一个项目也正常用的，这个语法没有问题。最后才发现，是 axios 版本太 TM 老了。有问题（换个网页下载试试，就不提示了），Edge 浏览器一直会欺骗你， Google 浏览器偶会欺骗你。⇒ 如果开发项目，检查后端接口正常。因为它检测到浏览器集成插件未安装，所以诱导你安装。实际上，装了插件问题也会出现。更新到 1.3.6 ，网页点击下载，就正常了。问题一：idm一些网站不允许请求同一文件两次。1.很可能是你点击网页的。
Uncaught DOMException: Failed to read the ‘responseText‘ property from ‘XMLHttpRequest‘: The value i
东扯葫芦西扯瓜——前端小菜鸟的博客
09-05 7328
main.js:67 Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json'). at myXHR.get [as responseText] (chrome-extension://nhpjggchkhn
XMLHttpRequest详解
wfly blog
11-01 3983
XMLHttpRequest是做什么的 使用 XMLHttpRequest（XHR）对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 AJAX 编程中，XMLHttpRequest 被大量使用。 发送一个 HTTP 请求，需要创建一个 XMLHttpRequest 对象，打开一个 URL，最后发送请求。当所有这些事务...
你真的会使用XMLHttpRequest吗？
weixin_33885676的博客
01-17 3591
看到标题时，有些同学可能会想：“我已经用xhr成功地发过很多个Ajax请求了，对它的基本操作已经算挺熟练了。” 我之前的想法和你们一样，直到最近我使用xhr时踩了不少坑儿，我才突然发现其实自己并不够了解xhr，我知道的只是最最基本的使用。于是我决定好好地研究一番xhr的真面目，可拜读了不少博客后都不甚满意，于是我决定认真阅读一遍W3C的X...
XMLHttpRequest 对象(AJAX通信)
好好睡觉
01-07 3017
XMLhttprequest对象、AJAX通信基础知识
让大家都能理解 XMLHttpRequest
zhtbs的博客
03-30 2798
XMLHttpRequest 是一个 JavaScript 对象，它能够在浏览器和 Web 服务器之间发送和接收数据。即使在从 Web 服务器读取了所有数据之后，XMLHttpRequest 仍然可以发送和接收数据，从而实现不重新加载页面就能够重写页面内容的功能。在当今的 Web 服务中，使用 XMLHttpRequest 发送和接收数据是非常必要的。
第1讲：XMLHttpRequest详解（ajax基础）
软件之家的博客
06-09 2624
XMLHTTPRequest对象，是基于XML的HTTP请求。XMLHTTPRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通讯。自从浏览器提供了XMLHTTPRequest这个接口之后，ajax操作就此诞生。本讲详细介绍XMLHTTPRequest对象的使用方法，各种属性的使用及实现的详细步骤。
XMLHttpRequest介绍
西凉的悲伤博客
09-18 2227
2.初始化 使用 open 方法进行一些初始化配置，method 和 URL 是必传的，其余的是可选的。参数说明：method —— HTTP 方法。通常是 “GET” 或 “POST”，小写也可。 URL —— 要请求的 URL，通常是一个字符串，也可以是 URL 对象。 async —— 是否同步。如果不传默认为true，如果显式地设置为 false，那么请求将会以同步的方式处理。 user，password —— HTTP 基本身份验证（如果需要的话）的登录名和密码。 使用 send 方法就会建立连
XMLHTTPRequest
07-28
通过XMLHTTPRequest对象，我们可以在不刷新页面的情况下请求特定URL获取数据。使用XMLHTTPRequest对象在服务器之间通信时，传输的数据使用XML的方式，但最终会被转换成JSON数据格式来使用。\[1\]\[2\]\[3\] #### ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上飞跃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值