1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
---
title: 'XMLHttpRequest: error 事件'
slug: Web/API/XMLHttpRequest/error_event
translation_of: Web/API/XMLHttpRequest/error_event
---
<div>{{APIRef}}</div>
<p><span>当请求遇到错误时，将触发</span><code>error</code> 事件。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row">可冒泡</th>
<td>No</td>
</tr>
<tr>
<th scope="row">可取消</th>
<td>No</td>
</tr>
<tr>
<th scope="row">接口</th>
<td>{{domxref("ProgressEvent")}}</td>
</tr>
<tr>
<th scope="row">事件处理程序属性</th>
<td>{{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}}</td>
</tr>
</tbody>
</table>
<h2 id="示例">示例</h2>
<h3 id="在线示例">在线示例</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div class="controls">
<input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
<input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
<input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
</div>
<textarea readonly class="event-log"></textarea></pre>
<div class="hidden">
<h4 id="CSS">CSS</h4>
<pre class="brush: css">.event-log {
width: 25rem;
height: 4rem;
border: 1px solid black;
margin: .5rem;
padding: .2rem;
}
input {
width: 11rem;
margin: .5rem;
}
</pre>
</div>
<h4 id="JS">JS</h4>
<pre class="brush: js">const xhrButtonSuccess = document.querySelector('.xhr.success');
const xhrButtonError = document.querySelector('.xhr.error');
const xhrButtonAbort = document.querySelector('.xhr.abort');
const log = document.querySelector('.event-log');
function handleEvent(e) {
log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
}
function addListeners(xhr) {
xhr.addEventListener('loadstart', handleEvent);
xhr.addEventListener('load', handleEvent);
xhr.addEventListener('loadend', handleEvent);
xhr.addEventListener('progress', handleEvent);
xhr.addEventListener('error', handleEvent);
xhr.addEventListener('abort', handleEvent);
}
function runXHR(url) {
log.textContent = '';
const xhr = new XMLHttpRequest();
addListeners(xhr);
xhr.open("GET", url);
xhr.send();
return xhr;
}
xhrButtonSuccess.addEventListener('click', () => {
runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
});
xhrButtonError.addEventListener('click', () => {
runXHR('https://somewhere.org/i-dont-exist');
});
xhrButtonAbort.addEventListener('click', () => {
runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
});</pre>
<h4 id="结果">结果</h4>
<p>{{ EmbedLiveSample('在线示例', '100%', '150px') }}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('XMLHttpRequest', '#event-xhr-error')}}</td>
<td>{{Spec2('XMLHttpRequest')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.XMLHttpRequest.error_event")}}</p>
<h2 id="其他">其他</h2>
<ul>
<li>相关事件: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}}</li>
<li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">监视进度</a></li>
</ul>
|
