宜信同城网交流论坛技术专版技术专区XMLHttpRequest模块管理网络请求，与标准HTML中的XMLHttpRequest用途一致，差别在于前 ...对象： XMLHttpRequest: 跨域网络请求对象ProgressEvent: HTTP请求进度事件回调方法： XhrState ...

admin 发表于 2023-2-16 18:54:40

XMLHttpRequest模块管理网络请求，与标准HTML中的XMLHttpRequest用途一致，差别在于前 ...

<div id="article_content" class="article_content clearfix">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
 <div id="content_views" class="htmledit_views">
 <h2 style="margin-left:.8em;">对象：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest">XMLHttpRequest</a>: 跨域网络请求对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.ProgressEvent">ProgressEvent</a>: HTTP请求进度事件</li></ul>
<h2 style="margin-left:.8em;">回调方法：</h2>
<ul><li><ahref="https://www.html5plus.org/doc/zh_cn/xhr.html#plus.net.XhrStateChangeCallback">XhrStateChangeCallback</a>: 网络请求状态变化的回调函数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/xhr.html#plus.net.XhrProgressEventCallback">XhrProgressEventCallback</a>: 网络请求进度事件的回调函数</li></ul>
<h2 style="margin-left:.8em;">权限：</h2>
5+功能模块（permissions）
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
{
// ...
"permissions":{
// ...
"XMLHttpRequest": {
"description": "跨域网络连接"
}
}
}
</code></code></pre>
<h1 style="margin-left:0;">XMLHttpRequest</h1>
跨域网络请求对象
<h2 style="margin-left:.8em;">构造：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.XMLHttpRequest%28%29">XMLHttpRequest()</a>: 创建一个XMLHttpRequest 对象，对象创建时不触发任何时间和网络请求，需和open，send方法配合使用。</li></ul>
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.readyState">readyState</a>: HTTP 请求的状态</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.response">response</a>: 请求从服务器接收到的响应数据</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.responseText">responseText</a>: 请求从服务器接收到的响应数据（字符串数据）</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.responseType">responseType</a>: 请求响应数据response的类型</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.responseXML">responseXML</a>: 请求响应的Document对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.status">status</a>: 服务器返回的状态码</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.statusText">statusText</a>: 服务器返回的状态描述</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.timeout">timeout</a>: 请求服务器的超时时间，单位为毫秒（ms）</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.withCredentials">withCredentials</a>: 是否支持跨域请求</li></ul>
<h2 style="margin-left:.8em;">方法：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.abort">abort</a>: 取消当前响应，关闭连接并且结束任何未决的网络活动</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.getAllResponseHeaders">getAllResponseHeaders</a>: 获取HTTP响应头部信息</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.getResponseHeader">getResponseHeader</a>: 获取指定的HTTP响应头部的值</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.open">open</a>: 初始化HTTP/HTTPS请求参数，但是并不发送请求</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.overrideMimeType">overrideMimeType</a>: 重写服务器返回的MIME类型</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.send">send</a>: 发送HTTP请求</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.setRequestHeader">setRequestHeader</a>: 指定一个HTTP请求的Header</li></ul>
<h2 style="margin-left:.8em;">事件：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.onreadystatechange">onreadystatechange</a>: 网络请求状态发生变化事件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.onloadstart">onloadstart</a>: 网络请求开始事件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.onprogress">onprogress</a>: 网络请求传输数据事件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.onabort">onabort</a>: 网络请求取消事件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.onerror">onerror</a>: 网络请求错误事件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.onload">onload</a>: 网络请求成功事件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.ontimeout">ontimeout</a>: 网络请求超时事件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XMLHttpRequest.onloadend">onloadend</a>: 网络请求结束事件</li></ul>
<h1 style="margin-left:0;">XMLHttpRequest()</h1>
创建一个XMLHttpRequest 对象，对象创建时不触发任何时间和网络请求，需和open，send方法配合使用。
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var xhr = new plus.net.XMLHttpRequest();
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/xhr.html#plus.net.XMLHttpRequest">XMLHttpRequest</a> :
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
document.addEventListener('plusready', function(){
var xhr = new plus.net.XMLHttpRequest();
xhr.onreadystatechange = function () {
switch ( xhr.readyState ) {
case 0:
alert( "xhr请求已初始化" );
break;
case 1:
alert( "xhr请求已打开" );
break;
case 2:
alert( "xhr请求已发送" );
break;
case 3:
alert( "xhr请求已响应");
break;
case 4:
if ( xhr.status == 200 ) {
alert( "xhr请求成功："+xhr.responseText );
} else {
alert( "xhr请求失败："+xhr.readyState );
}
break;
default :
break;
}
}
xhr.open( "GET", "http://www.baidu.com/" );
xhr.send();
}, false );
</script>
</head>
<body onload="onload();">
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">readyState</h1>
HTTP 请求的状态
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
当XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。 5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义： 0 - Uninitialized，未初始化状态。XMLHttpRequest对象已创建或已被abort()方法重置。 1 - Open，open()方法已调用，但是send()方法未调用。请求还没有被发送。 2 - Sent，send()方法已调用，HTTP/HTTPS 请求已发送到服务器，但未接收到响应。 3 - Receiving，所有响应头部都已经接收到，响应体开始接收但未完成。 4 Loaded，HTTP响应已经完全接收。
<h1 style="margin-left:0;">response</h1>
请求从服务器接收到的响应数据
<h2 style="margin-left:.8em;">说明：</h2>
String 类型只读属性
如果没有从服务器接收到数据，则为null； 否则根据responseType类型决定： 如果responseType设置为空字符串或"text"，则返回空字符串； 如果responseType设置为"document"，则返回Document对象； 如果responseType设置为"json"，则返回JSON对象； 若服务器返回的数据与设置的responseType类型不区配，则返回null。
<h1 style="margin-left:0;">responseText</h1>
请求从服务器接收到的响应数据（字符串数据）
<h2 style="margin-left:.8em;">说明：</h2>
String 类型
如果还没有接收到数据的话，此属性值为空字符串； 如果readyState小于3，此属性值为空字符串； 如果readyState为3，此属性值返回目前已经接收的HTTP响应部分数据值； 如果readyState为4，此属性值保存了完整的HTTP响应数据体。如果HTTP请求返回的数据头中包含了Content-Type值中指定字符编码，就使用该编码，否则，使用UTF-8字符集。
<h1 style="margin-left:0;">responseType</h1>
请求响应数据response的类型
<h2 style="margin-left:.8em;">说明：</h2>
String 类型
默认值为空字符串，即reponse为String，类型可设置："document"表示Document对象，"json"表示JSON对象，"text"表示字符串。此值必须在调用send方法之前设置，否则设置的值不生效，仍使用之前设置的值。
<h1 style="margin-left:0;">responseXML</h1>
请求响应的Document对象
<h2 style="margin-left:.8em;">说明：</h2>
String 类型
对请求的响应，解析为 XML 并作为 Document 对象返回。如果请求未成功，或响应的数据无法被解析为XML，则返回null。
<h1 style="margin-left:0;">status</h1>
服务器返回的状态码
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
服务器返回的HTTP状态代码，如200表示成功，而404表示"Not Found"错误； 当readyState小于3的时候此属性值为0。
<h1 style="margin-left:0;">statusText</h1>
服务器返回的状态描述
<h2 style="margin-left:.8em;">说明：</h2>
String 类型
此属性值用名称而不是数字指定了请求的HTTP的状态代码。也就是说，当状态为200的时候它是"OK"；当状态为404的时候它是"Not Found"。和status属性类似，当readyState小于3的时候此属性值为空字符串。
<h1 style="margin-left:0;">timeout</h1>
请求服务器的超时时间，单位为毫秒（ms）
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
数值类型，单位为ms，其默认值为120秒。超时时间为服务器响应请求的时间（不是Http请求完成的总时间），如果设置为0则表示永远不超时。必须在请求发起前设置，否则当前请求将不生效，在当前请求完成后重新发起新请求时生效。
<h1 style="margin-left:0;">withCredentials</h1>
是否支持跨域请求
<h2 style="margin-left:.8em;">说明：</h2>
Boolean 类型只读属性
此对象创建的HTTP请求都支持跨域，所以永远返回true。
<h1 style="margin-left:0;">abort</h1>
取消当前响应，关闭连接并且结束任何未决的网络活动
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void xhr.abort();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
此方法把XMLHttpRequest对象重置为readyState为0的状态，并且取消所有未决的网络活动。调用此方法后将停止触发XMLHttpRequest对象的所有事件。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var xhr=null;
function testXHR(){
if(xhr){
return;
}
xhr=new plus.net.XMLHttpRequest();
xhr.onreadystatechange=function(){
console.log("onreadystatechange: "+xhr.readyState);
}
xhr.open( "GET", "http://www.dcloud.io/" );
xhr.send();
}
function abortXHR(){
if(xhr){
xhr.abort();
xhr=null;
}
}
</script>
</head>
<body>
<button onclick="testXHR()">XMLHttpRequest</button> 
<button onclick="abortXHR()">Abort</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">getAllResponseHeaders</h1>
获取HTTP响应头部信息
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
String xhr.getAllResponseHeaders();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
把HTTP响应头部作为未解析的字符串返回。如果readyState小于3，这个方法返回null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符"\r\n"隔开。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
String : HTTP 响应头
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var xhr=null;
function testXHR(){
if(xhr){
return;
}
xhr=new plus.net.XMLHttpRequest();
xhr.onreadystatechange=function(){
console.log("onreadystatechange: "+xhr.readyState);
}
xhr.open( "GET", "http://www.dcloud.io/" );
xhr.send();
}
// 获取所有HTTP响应头部信息
function allResponseHeader(){
if(xhr){
console.log(xhr.getAllResponseHeaders());
}
}
</script>
</head>
<body>
<button onclick="testXHR()">XMLHttpRequest</button> 
<button onclick="allResponseHeader()">getAllResponseHeaders</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">getResponseHeader</h1>
获取指定的HTTP响应头部的值
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
String xhr.getResponseHeader( headerName );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者readyState小于3则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>headerName: ( String ) 可选 HTTP响应头数据名称 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
String : HTTP响应头数据值
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var xhr=null;
function testXHR(){
if(xhr){
return;
}
xhr=new plus.net.XMLHttpRequest();
xhr.onreadystatechange=function(){
console.log("onreadystatechange: "+xhr.readyState);
}
xhr.open( "GET", "http://www.dcloud.io/" );
xhr.send();
}
// 获取所有HTTP响应Content-Type信息
function getResponseHeader(){
if(xhr){
console.log(xhr.getResponseHeader("Content-Type"));
}
}
</script>
</head>
<body>
<button onclick="testXHR()">XMLHttpRequest</button> 
<button onclick="getResponseHeader()">getResponseHeader</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">open</h1>
初始化HTTP/HTTPS请求参数，但是并不发送请求
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void xhr.open( method, url, username, password );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
初始化请求参数以供 send() 方法稍后使用。它把readyState设置为1，删除之前指定的所有请求头部，以及之前接收的所有响应头部，并且把responseText、responseXML、status 以及 statusText 参数设置为它们的默认值。当readyState为0的时候（当XMLHttpRequest对象刚创建或者abort()方法调用后）以及当readyState为4时（已经接收响应时），调用这个方法是安全的。当针对任何其他状态调用的时候，open()方法的行为是未指定的（可能出现异常现象）。除了保存供send()方法使用的请求参数，以及重置 XMLHttpRequest 对象以便复用，open()方法没有其他的行为。要特别注意，调用此方法时，不会创建到服务器的网络连接。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>method: ( String ) 必选 请求URL的HTTP协议方法 值可以为"GET"、"POST"。 </li><li>url: ( String ) 必选 请求URL地址 </li><li>username: ( String ) 可选 请求URL所需的授权提供认证资格用户名 </li><li>password: ( String ) 可选 请求URL所需的授权提供认证资格密码 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var xhr=null;
function testXHR(){
if(xhr){
return;
}
xhr=new plus.net.XMLHttpRequest();
xhr.onreadystatechange=function(){
console.log("onreadystatechange: "+xhr.readyState);
}
// 初始化HTTP请求
xhr.open( "GET", "http://www.dcloud.io/" );
xhr.send();
}
</script>
</head>
<body>
<button onclick="testXHR()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">overrideMimeType</h1>
重写服务器返回的MIME类型
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void xhr.overrideMimeType( mime );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
此方法覆盖HTTP请求返回数据头"Content-Type"字段值中包含的IMIE类型，如果设置的MIME类型无效则继续使用"Content-Type"字段值中包含的IMIE类型。如果MIME类型中指定了字符集类型（charset），则需按照指定的字符集类型对接收到的数据体（respose）进行处理，否则默认为UTF-8字符集。注意：此方法需在send方法前调用。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>mime: ( String ) 必选 要指定的MIME类型 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var xhr=null;
function testXHR(){
if(xhr){
return;
}
xhr=new plus.net.XMLHttpRequest();
xhr.onreadystatechange=function(){
console.log("onreadystatechange: "+xhr.readyState);
}
// 初始化HTTP请求
xhr.open( "GET", "http://www.dcloud.io/" );
xhr.overrideMimeType( "text/plain; charset=utf-8" ); // 将返回的数据当做UTF-8字符集的纯文本类型处理
xhr.send();
}
</script>
</head>
<body>
<button onclick="testXHR()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">send</h1>
发送HTTP请求
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void send( body );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
此方法触发HTTP请求发送，如果之前没有调用open()，即readyState不是1，send()抛出一个异常。否则，将发送HTTP请求，该请求由以下几部分组成： 之前调用open()时指定的HTTP方法、URL； 之前调用setRequestHeader()时指定的请求头部（如果有的话）； 传递给这个方法的body参数。一旦请求发送了，send()把readyState设置为2，并触发onreadystatechange事件； 如果服务器响应带有一个HTTP重定向，send()方法在后台线程自动遵从重定向； 当所有的HTTP响应头部已经接收，send()或后台线程把readyState设置为3并触发onreadystatechange事件； 如果响应较长，send()或后台线程可能在状态3中触发多次onreadystatechange事件； 最后，当响应完成，send()或后台线程把readyState设置为4，并最后一次触发onreadystatechange事件。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>body: ( String ) 可选 请求HTTP提交的数据内容 当open方法中设置的method参数为POST时必需传入body值。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var xhr=null;
function testXHR(){
if(xhr){
return;
}
xhr=new plus.net.XMLHttpRequest();
xhr.onreadystatechange=function(){
console.log("onreadystatechange: "+xhr.readyState);
}
xhr.open( "POST", "http://demo.dcloud.net.cn/test/xhr/post.php" );
var data={name:'HBuilder',version:'0.1.0'};
// 发送HTTP请求
xhr.send(JSON.stringify(data));
}
</script>
</head>
<body>
<button onclick="testXHR()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setRequestHeader</h1>
指定一个HTTP请求的Header
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void setRequestHeader( headerName, headerValue );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Http的Header应该包含在通过后续send()调用而发起的请求中。此方法只有当readyState为1的时候才能调用，即在调用open()之后，且在调用send()之前。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>headerName: ( String ) 必选 HTTP Header名称 </li><li>headerValue: ( String ) 必选 HTTP Header值 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - 2.2+ (支持) : 不支持设置“User-Agent”、“Cookie”的值。 </li><li>iOS - 5.1+ (支持) : 不支持设置“User-Agent”的值。 </li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var xhr=null;
function testXHR(){
if(xhr){
return;
}
xhr=new plus.net.XMLHttpRequest();
xhr.onreadystatechange=function(){
console.log("onreadystatechange: "+xhr.readyState);
}
xhr.open( "POST", "http://demo.dcloud.net.cn/test/xhr/post.php" );
var data={name:'HBuilder',version:'0.1.0'};
xhr.setRequestHeader('Content-Type','application/json');
// 发送HTTP请求
xhr.send(JSON.stringify(data));
}
</script>
</head>
<body>
<button onclick="testXHR()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">onreadystatechange</h1>
网络请求状态发生变化事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
xhr.onreadystatechange = function(){
// 判断xhr状态
};
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XhrStateChangeCallback">XhrStateChangeCallback</a> 类型
网络请求状态发生变化时触发，通常在函数中判断对象的state属性值来获取当前请求的状态。
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var url="http://demo.dcloud.net.cn/test/xhr/event.html";
var xhr=null;

function xhrEvent(){
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
console.log("onreadystatechange: "+xhr.readyState);
}
xhr.open( "GET", url );
xhr.send();
}
</script>
</head>
<body>
<button onclick="xhrEvent()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">onloadstart</h1>
网络请求开始事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
xhr.onloadstart = function(){
// xhr请求开始事件处理
};
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/xhr.html#plus.net.XhrProgressEventCallback">XhrProgressEventCallback</a> 类型
通常在调用send方法开始发起HTTP请求时触发。
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var url="http://demo.dcloud.net.cn/test/xhr/json.php";
var xhr=null;
function xhrEvent(){
xhr = new plus.net.XMLHttpRequest();
xhr.onloadstart=function(e){
var str="lengthComputable="+e.lengthComputable+"loaded="+e.loaded+";total="+e.total;
console.log("onloadstart: "+str);
}
xhr.open( "GET", url );
xhr.send();
}
</script>
</head>
<body>
<button onclick="xhrEvent()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">onprogress</h1>
网络请求传输数据事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
xhr.onprogress= function(){
// xhr数据传输开始事件处理
};
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/xhr.html#plus.net.XhrProgressEventCallback">XhrProgressEventCallback</a> 类型
在HTTP请求链接已经建立，开始传输数据时触发，数据传输的过程中可能多次触发，此事件与onreadystatechange事件触发状态3类似。
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var url="http://demo.dcloud.net.cn/test/video/nocrygirl.mp4";//访问一个大文件，以便多次触发onprogress事件
var xhr=null;
function xhrEvent(){
xhr = new plus.net.XMLHttpRequest();
xhr.onprogress=function(e){
var str="lengthComputable="+e.lengthComputable+"loaded="+e.loaded+";total="+e.total;
console.log("onprogress: "+str);
}
xhr.open( "GET", url );
xhr.send();
}
</script>
</head>
<body>
<button onclick="xhrEvent()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">onabort</h1>
网络请求取消事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
xhr.onabort = function(){
// xhr请求被取消事件处理
};
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/xhr.html#plus.net.XhrProgressEventCallback">XhrProgressEventCallback</a> 类型
通常在调用abort方法取消HTTP请求时触发。此事件在onreadystatechange事件触发状态4事件之后。
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var url="http://demo.dcloud.net.cn/test/video/nocrygirl.mp4";//访问一个大文件，以便操作触发onabort事件
var xhr=null;
function xhrEvent(){
xhr = new plus.net.XMLHttpRequest();
xhr.onabort=function(e){
var str="lengthComputable="+e.lengthComputable+"loaded="+e.loaded+";total="+e.total;
console.log("onabort: "+str);
}
xhr.open( "GET", url );
xhr.send();
}
function xhrAbort() {
if ( xhr ) {
xhr.abort();
xhr = null;
}
}
</script>
</head>
<body>
<button onclick="xhrEvent()">XMLHttpRequest</button> 
<button onclick="xhrAbort()">Abort</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">onerror</h1>
网络请求错误事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
xhr.onerror = function(){
// xhr请求出错事件处理
};
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/xhr.html#plus.net.XhrProgressEventCallback">XhrProgressEventCallback</a> 类型
通常在HTTP/HTTPS请求发生错误时触发，如无法连接到服务器等各种错误都触发此事件。此事件在onreadystatechange事件触发状态4事件之后。
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var url="http://demo.dcloud.net.cn/test/xhr/error.html";//访问无效的网络地址处罚onerror事件
var xhr=null;
function xhrEvent(){
xhr = new plus.net.XMLHttpRequest();
xhr.onerror=function(e){
var str="lengthComputable="+e.lengthComputable+"loaded="+e.loaded+";total="+e.total;
console.log("onerror: "+str);
}
xhr.open( "GET", url );
xhr.send();
}
</script>
</head>
<body>
<button onclick="xhrEvent()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">onload</h1>
网络请求成功事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
xhr.onload = function(){
// xhr请求成功事件处理
};
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/xhr.html#plus.net.XhrProgressEventCallback">XhrProgressEventCallback</a> 类型
通常在HTTP/HTTPS请求成功完成时触发，如果HTTP/HTTPS请求发生错误则不触发此事件。此事件在onreadystatechange事件触发状态4事件之后。
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var url="http://demo.dcloud.net.cn/test/xhr/json.php";
var xhr=null;
function xhrEvent(){
xhr = new plus.net.XMLHttpRequest();
xhr.onload=function(e){
var str="lengthComputable="+e.lengthComputable+"loaded="+e.loaded+";total="+e.total;
console.log("onload: "+str);
}
xhr.open( "GET", url );
xhr.send();
}
</script>
</head>
<body>
<button onclick="xhrEvent()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">ontimeout</h1>
网络请求超时事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
xhr.ontimeout = function(){
// xhr请求超时事件处理
};
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/xhr.html#plus.net.XhrProgressEventCallback">XhrProgressEventCallback</a> 类型
通常在HTTP/HTTPS请求超时时触发，此时不会触发onerror事件。此事件在onreadystatechange事件触发状态4事件之后。
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var url="http://demo.dcloud.net.cn/test/xhr/json.php";
var xhr=null;
function xhrEvent(){
xhr = new plus.net.XMLHttpRequest();
xhr.ontimeout=function(e){
var str="lengthComputable="+e.lengthComputable+"loaded="+e.loaded+";total="+e.total;
console.log("ontimeout: "+str);
}
xhr.timeout=1;// 设置极小的超时时间用于处罚ontimeout事件
xhr.open( "GET", url );
xhr.send();
}
</script>
</head>
<body>
<button onclick="xhrEvent()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">onloadend</h1>
网络请求结束事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
xhr.onloadend = function(){
// xhr请求结束事件处理
};
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://blog.csdn.net/qq_40575646/article/details/122841309#plus.net.XhrProgressEventCallback">XhrProgressEventCallback</a> 类型
通常在HTTP/HTTPS请求结束时触发，不管是HTTP请求失败、成功、或超时之后都会触发此事件。此事件在onreadystatechange事件触发状态4事件之后。
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var url="http://demo.dcloud.net.cn/test/xhr/json.php";
var xhr=null;
function xhrEvent(){
xhr = new plus.net.XMLHttpRequest();
xhr.onloadend=function(e){
var str="lengthComputable="+e.lengthComputable+"loaded="+e.loaded+";total="+e.total;
console.log("onloadend: "+str);
}
xhr.open( "GET", url );
xhr.send();
}
</script>
</head>
<body>
<button onclick="xhrEvent()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">ProgressEvent</h1>
HTTP请求进度事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface ProgressEvent : Event {
readonly attribute XMLHttpRequest target;
readonly attribute Boolean lengthComputable;
readonly attribute Number loaded;
readonly attribute Number total;
};
</code></code></pre>
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>target: (<ahref="https://www.html5plus.org/doc/zh_cn/xhr.html#plus.net.XMLHttpRequest">XMLHttpRequest</a> 类型 )事件的目标对象 通知HTTP请求进度事件的XMLHttpRequest对象。 </li><li>lengthComputable: (Number 类型 )进度信息是否可计算 HTTP请求进度信息是否有效，如果HTTP请求头中包含Content-Length头信息则为true，否则为false。 </li><li>loaded: (XMLHttpRequest 类型 )当前已经接收到的数据长度 HTTP请求接收到的数据长度，单位为字节。 </li><li>total: (XMLHttpRequest 类型 )总数据长度 HTTP请求返回的总数据长度，单位为字节。如果无法获取则设置为0。 </li></ul>
<h1 style="margin-left:0;">XhrStateChangeCallback</h1>
网络请求状态变化的回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onSuccess() {
// State changed code.
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var url="http://demo.dcloud.net.cn/test/xhr/json.php";
var xhr=null;
function xhrEvent(){
xhr = new plus.net.XMLHttpRequest();
xhr.onreadystatechange = function () {
console.log("onreadystatechange: "+xhr.readyState);
}
xhr.open( "GET", url );
xhr.send();
}
</script>
</head>
<body>
<button onclick="xhrEvent()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">XhrProgressEventCallback</h1>
网络请求进度事件的回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onProgressEvent( ProgressEvent event ) {
// Progress changed code.
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( <ahref="https://www.html5plus.org/doc/zh_cn/xhr.html#plus.net.ProgressEvent">ProgressEvent</a> ) 必选 HTTP请求进度事件 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>XMLHttpRequest</title>
<script type="text/javascript">
var url="http://demo.dcloud.net.cn/test/xhr/json.php";
var xhr=null;
function xhrEvent(){
xhr = new plus.net.XMLHttpRequest();
xhr.onloadend=function(e){
var str="lengthComputable="+e.lengthComputable+"loaded="+e.loaded+";total="+e.total;
console.log("onloadend: "+str);
}
xhr.open( "GET", url );
xhr.send();
}
</script>
</head>
<body>
<button onclick="xhrEvent()">XMLHttpRequest</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
 </div>
 </div>
 <div id="treeSkill"></div>

页: [1]

宜信同城网交流论坛's Archiver

XMLHttpRequest模块管理网络请求，与标准HTML中的XMLHttpRequest用途一致，差别在于前 ...