Skip to content

Commit 3754064

Browse files
authored
translate article.md
1 parent fa8965c commit 3754064

File tree

1 file changed

+23
-24
lines changed

1 file changed

+23
-24
lines changed

5-network/08-xmlhttprequest/article.md

+23-24
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
这些术语听起来都很熟悉是么?如果是那么请继续阅读下面 `XMLHttpRequest` 内容。如果还不是很熟悉的话,那么请先阅读关于 <info:fetch> 的基础内容。
1616

17-
## The basics
17+
## XMLHttpRequest 基础
1818

1919
XMLHttpRequest 有两种执行模式:同步(synchronous) 和 异步(asynchronous)。
2020

@@ -24,7 +24,7 @@ XMLHttpRequest 有两种执行模式:同步(synchronous) 和 异步(asyn
2424

2525
1. 创建 `XMLHttpRequest`
2626
```js
27-
let xhr = new XMLHttpRequest(); // the constructor has no arguments
27+
let xhr = new XMLHttpRequest(); // 构造函数没有参数
2828
```
2929

3030
2. 初始化 `XMLHttpRequest`
@@ -35,7 +35,7 @@ XMLHttpRequest 有两种执行模式:同步(synchronous) 和 异步(asyn
3535
`new XMLHttpRequest` 之后我们通常调用 `xhr.open` 函数。它指定了请求的主要参数:
3636

3737
- `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) 对象。
3939
- `async` — 如果显式的设置为 `false`,那么请求将会以同步的方式处理,我们稍后会讨论它。
4040
- `user``password`HTTP 基本身份认证(如果需要的话)的登录名和密码。
4141

@@ -121,22 +121,22 @@ xhr.onerror = function() {
121121
`response`(以前的脚本可能用的是 `responseText`
122122
: 服务器响应。
123123

124-
We can also specify a timeout using the corresponding property:
124+
我们还可以使用相应的属性指定超时(timeout)时间:
125125

126126
```js
127-
xhr.timeout = 10000; // timeout in ms, 10 seconds
127+
xhr.timeout = 10000; // timeout 单位是 ms,此处即 10
128128
```
129129

130-
If the request does not succeed within the given time, it gets canceled and `timeout` event triggers.
130+
如果在给定时间内请求没有成功执行,请求就会被取消,并且触发 `timeout` 事件。
131131

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) 对象:
134134

135135
```js
136136
let url = new URL('https://google.com/search');
137137
url.searchParams.set('q', 'test me!');
138138
139-
// the parameter 'q' is encoded
139+
// 参数 'q' 被编码
140140
xhr.open('GET', url); // https://google.com/search?q=test+me%21
141141
```
142142

@@ -208,19 +208,19 @@ xhr.onreadystatechange = function() {
208208
};
209209
```
210210

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` 以及其他事件。
212212

213213
如今,它们已被 `load/error/progress` 事件替代。
214214

215-
## Aborting request
215+
## 终止请求(aborting)
216216

217-
We can terminate the request at any time. The call to `xhr.abort()` does that:
217+
我们可以随时终止请求。调用 `xhr.abort()` 即可:
218218

219219
```js
220-
xhr.abort(); // terminate the request
220+
xhr.abort(); // 终止请求
221221
```
222222

223-
That triggers `abort` event, and `xhr.status` becomes `0`.
223+
它将会触发 `abort` 事件且 `xhr.status` 变为 `0`
224224

225225
## 同步请求
226226

@@ -272,7 +272,7 @@ HTTP-headers 有三种方法:
272272
一些请求头可能由浏览器专门管理,比如,`Referer``Host`
273273
参见 [规范](http://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader-method) 以获取更多信息。
274274
275-
`XMLHttpRequest` is not allowed to change them, for the sake of user safety and correctness of the request.
275+
为了用户安全和请求的正确性,`XMLHttpRequest` 不允许修改请求头。
276276
```
277277

278278
````warn header="不能移除 header"
@@ -340,7 +340,7 @@ let formData = new FormData([form]); // 创建对象,可以用表单元素 <fo
340340
formData.append(name, value); // 追加一个字段
341341
```
342342

343-
We create it, optionally from a form, `append` more fields if needed, and then:
343+
我们可以从一个表单中创建它,如果需要的话还可以`追加(append`更多的字段:
344344

345345
1. `xhr.open('POST', ...)` — 使用 `POST` 方法。
346346
2. `xhr.send(formData)` 发送表单到服务器。
@@ -394,13 +394,13 @@ xhr.send(json);
394394

395395
`progress` 事件仅仅在下载阶段工作。
396396

397-
也就是说:如果 `POST` 一些内容,`XMLHttpRequest` 首先上传我们的数据(the request body),然后下载响应数据。
397+
也就是说:如果 `POST` 一些内容,`XMLHttpRequest` 首先上传我们的数据(请求体(request body),然后下载响应数据。
398398

399-
如果我们正在上传的文件很大,这时我们肯定对追踪上传进度感兴趣。But `xhr.onprogress` doesn't help here.
399+
如果我们正在上传的文件很大,这时我们肯定对追踪上传进度感兴趣。但是 `xhr.onprogress` 在这里并不起作用。
400400

401401
这里有个其他对象 `xhr.upload`,没有方法,专门用于上传事件。
402402

403-
The event list is similar to `xhr` events, but `xhr.upload` triggers them on uploading:
403+
XMLHttpRequest 事件和 `xhr` 类似,但是 `xhr.upload` 可以在上传阶段被触发:
404404

405405
- `loadstart` — 上传开始。
406406
- `progress` — 上传期间定期触发。
@@ -473,7 +473,7 @@ xhr.open('POST', 'http://anywhere.com/request');
473473
...
474474
```
475475

476-
See the chapter <info:fetch-crossorigin> for details about cross-origin headers.
476+
参见 <info:fetch-crossorigin> 章节以了解更多关于 cross-origin headers 的信息。
477477

478478

479479
## 总结
@@ -515,12 +515,11 @@ xhr.onerror = function() {
515515
- `error` — 发生连接错误,例如,域名错误。不会响应诸如 404 这类的 HTTP 错误。
516516
- `load` — 请求成功完成。
517517
- `timeout` — 请求超时被取消(仅仅发生在 timeout 被设置的情况下)。
518-
- `loadend`triggers after `load`, `error`, `timeout` or `abort`.
518+
- `loadend``load``error``timeout` 或者 `abort` 之后触发。
519519

520-
The `error`, `abort`, `timeout`, and `load` events are mutually exclusive. Only one of them may happen.
520+
`error``abort``timeout` `load` 事件是互斥的,即一次只能有一个事件发生。
521521

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` 处理程序来检查响应,看看其发生了什么。
524523

525524
我们还了解了一些其他事件:`readystatechange`。由于历史原因,它在规范建立之前就已经出现。现如今已经没有必要使用他们了,我们可以用新的事件代替它,但是在旧的代码中仍然比较常见。
526525

0 commit comments

Comments
 (0)