14
14
15
15
这些术语听起来都很熟悉是么?如果是那么请继续阅读下面 ` XMLHttpRequest ` 内容。如果还不是很熟悉的话,那么请先阅读关于 < info:fetch > 的基础内容。
16
16
17
- ## The basics
17
+ ## XMLHttpRequest 基础
18
18
19
19
XMLHttpRequest 有两种执行模式:同步(synchronous) 和 异步(asynchronous)。
20
20
@@ -24,7 +24,7 @@ XMLHttpRequest 有两种执行模式:同步(synchronous) 和 异步(asyn
24
24
25
25
1 . 创建 ` XMLHttpRequest ` :
26
26
``` js
27
- let xhr = new XMLHttpRequest (); // the constructor has no arguments
27
+ let xhr = new XMLHttpRequest (); // 构造函数没有参数
28
28
```
29
29
30
30
2. 初始化 ` XMLHttpRequest` :
@@ -35,7 +35,7 @@ XMLHttpRequest 有两种执行模式:同步(synchronous) 和 异步(asyn
35
35
在 ` new XMLHttpRequest` 之后我们通常调用 ` xhr.open` 函数。它指定了请求的主要参数:
36
36
37
37
- ` method` — HTTP 方法。通常是 ` "GET"` 或者 ` "POST"` 。
38
- - ` URL` — the URL to request, a string, can be [URL ](info: url) object.
38
+ - ` URL` — 要执行请求(request)的 URL 字符串,可以是 [URL ](info: url) 对象。
39
39
- ` async` — 如果显式的设置为 ` false` ,那么请求将会以同步的方式处理,我们稍后会讨论它。
40
40
- ` user` ,` password` — HTTP 基本身份认证(如果需要的话)的登录名和密码。
41
41
@@ -121,22 +121,22 @@ xhr.onerror = function() {
121
121
` response` (以前的脚本可能用的是 ` responseText` )
122
122
: 服务器响应。
123
123
124
- We can also specify a timeout using the corresponding property :
124
+ 我们还可以使用相应的属性指定超时( timeout)时间:
125
125
126
126
` ` ` js
127
- xhr.timeout = 10000; // timeout in ms, 10 seconds
127
+ xhr.timeout = 10000; // timeout 单位是 ms,此处即 10 秒
128
128
` ` `
129
129
130
- If the request does not succeed within the given time, it gets canceled and ` timeout` event triggers.
130
+ 如果在给定时间内请求没有成功执行,请求就会被取消,并且触发 ` timeout` 事件。
131
131
132
- ` ` ` ` smart header= " URL search parameters"
133
- To pass URL parameters, like ` ?name=value` , and ensure the proper encoding, we can use [URL ](info: url) object :
132
+ ` ` ` ` smart header= " URL 搜索参数(URL search parameters) "
133
+ 要传递诸如 ` ?name=value` 这样的 URL 参数,并确保参数被正确编码,我们可以使用 [URL ](info: url) 对象:
134
134
135
135
` ` ` js
136
136
let url = new URL('https://google.com/search');
137
137
url.searchParams.set('q', 'test me!');
138
138
139
- // the parameter 'q' is encoded
139
+ // 参数 'q' 被编码
140
140
xhr.open('GET', url); // https://google.com/search?q=test+me%21
141
141
` ` `
142
142
@@ -208,19 +208,19 @@ xhr.onreadystatechange = function() {
208
208
};
209
209
` ` `
210
210
211
- You can find ` readystatechange` listeners in really old code, it ' s there for historical reasons, as there was a time when there were no `load` and other events.
211
+ 你可能在古老的代码中发现 ` readystatechange` 这样的事件监听器,它的存在是基于一些历史原因,因为在很长一段时间内都没有 ` load` 以及其他事件。
212
212
213
213
如今,它们已被 ` load/error/progress` 事件替代。
214
214
215
- ## Aborting request
215
+ ## 终止请求(aborting)
216
216
217
- We can terminate the request at any time. The call to `xhr.abort()` does that:
217
+ 我们可以随时终止请求。调用 ` xhr.abort()` 即可:
218
218
219
219
` ` ` js
220
- xhr.abort(); // terminate the request
220
+ xhr.abort(); // 终止请求
221
221
` ` `
222
222
223
- That triggers `abort` event, and `xhr.status` becomes `0`.
223
+ 它将会触发 ` abort` 事件且 ` xhr.status` 变为 ` 0` 。
224
224
225
225
## 同步请求
226
226
@@ -272,7 +272,7 @@ HTTP-headers 有三种方法:
272
272
一些请求头可能由浏览器专门管理,比如,` Referer` 和 ` Host` 。
273
273
参见 [规范](http://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader-method) 以获取更多信息。
274
274
275
- `XMLHttpRequest` is not allowed to change them, for the sake of user safety and correctness of the request.
275
+ 为了用户安全和请求的正确性, ` XMLHttpRequest ` 不允许修改请求头。
276
276
` ` `
277
277
278
278
` ` ` ` warn header= " 不能移除 header"
@@ -340,7 +340,7 @@ let formData = new FormData([form]); // 创建对象,可以用表单元素 <fo
340
340
formData.append(name, value); // 追加一个字段
341
341
` ` `
342
342
343
- We create it, optionally from a form, ` append` more fields if needed, and then:
343
+ 我们可以从一个表单中创建它,如果需要的话还可以 ` 追加( append) ` 更多的字段:
344
344
345
345
1. ` xhr.open('POST', ...)` — 使用 ` POST` 方法。
346
346
2. ` xhr.send(formData)` 发送表单到服务器。
@@ -394,13 +394,13 @@ xhr.send(json);
394
394
395
395
` progress` 事件仅仅在下载阶段工作。
396
396
397
- 也就是说:如果 `POST` 一些内容,`XMLHttpRequest` 首先上传我们的数据(the request body),然后下载响应数据。
397
+ 也就是说:如果 ` POST` 一些内容,` XMLHttpRequest` 首先上传我们的数据(请求体( request body) ),然后下载响应数据。
398
398
399
- 如果我们正在上传的文件很大,这时我们肯定对追踪上传进度感兴趣。But `xhr.onprogress` doesn ' t help here.
399
+ 如果我们正在上传的文件很大,这时我们肯定对追踪上传进度感兴趣。但是 ` xhr.onprogress` 在这里并不起作用。
400
400
401
401
这里有个其他对象 ` xhr.upload` ,没有方法,专门用于上传事件。
402
402
403
- The event list is similar to ` xhr` events, but ` xhr.upload` triggers them on uploading :
403
+ XMLHttpRequest 事件和 ` xhr` 类似,但是 ` xhr.upload` 可以在上传阶段被触发:
404
404
405
405
- ` loadstart` — 上传开始。
406
406
- ` progress` — 上传期间定期触发。
@@ -473,7 +473,7 @@ xhr.open('POST', 'http://anywhere.com/request');
473
473
...
474
474
` ` `
475
475
476
- See the chapter < info: fetch- crossorigin> for details about cross- origin headers.
476
+ 参见 < info: fetch- crossorigin> 章节以了解更多关于 cross- origin headers 的信息。
477
477
478
478
479
479
## 总结
@@ -515,12 +515,11 @@ xhr.onerror = function() {
515
515
- ` error` — 发生连接错误,例如,域名错误。不会响应诸如 404 这类的 HTTP 错误。
516
516
- ` load` — 请求成功完成。
517
517
- ` timeout` — 请求超时被取消(仅仅发生在 timeout 被设置的情况下)。
518
- - ` loadend` — triggers after ` load` , ` error` , ` timeout` or ` abort` .
518
+ - ` loadend` — 在 ` load` , ` error` , ` timeout` 或者 ` abort` 之后触发。
519
519
520
- The ` error` , ` abort` , ` timeout` , and ` load` events are mutually exclusive . Only one of them may happen.
520
+ ` error` , ` abort` , ` timeout` 和 ` load` 事件是互斥的,即一次只能有一个事件发生。
521
521
522
- // 最常用的事件是加载完成(`load`),加载失败(`error`)以及用来处理进度的 `progress`。
523
- The most used events are load completion (` load` ), load failure (` error` ), or we can use a single ` loadend` handler and check the response to see what happened.
522
+ 最常用的事件是加载完成(load completion)(` load` ),加载失败(load failure)(` error` ),或者我们可以只用 ` loadend` 处理程序来检查响应,看看其发生了什么。
524
523
525
524
我们还了解了一些其他事件:` readystatechange` 。由于历史原因,它在规范建立之前就已经出现。现如今已经没有必要使用他们了,我们可以用新的事件代替它,但是在旧的代码中仍然比较常见。
526
525
0 commit comments