This commit is contained in:
Ilya Kantor 2019-06-26 23:29:08 +03:00
parent a6552ebe84
commit d79c761d81
2 changed files with 16 additions and 14 deletions

View file

@ -14,7 +14,7 @@ In modern web-development `XMLHttpRequest` may be used for three reasons:
Does that sound familiar? If yes, then all right, go on with `XMLHttpRequest`. Otherwise, please head on to <info:fetch-basics>.
## Basic flow
## The basics
XMLHttpRequest has two modes of operation: synchronous and asynchronous.
@ -22,17 +22,17 @@ Let's see the asynchronous first, as it's used in the majority of cases.
To do the request, we need 3 steps:
1. Create `XMLHttpRequest`.
1. Create `XMLHttpRequest`:
```js
let xhr = new XMLHttpRequest(); // no arguments
let xhr = new XMLHttpRequest(); // the constructor has no arguments
```
2. Initialize it.
2. Initialize it:s
```js
xhr.open(method, URL, [async, user, password])
```
This method is usually called first after `new XMLHttpRequest`. It specifies the main parameters of the request:
This method is usually called right after `new XMLHttpRequest`. It specifies the main parameters of the request:
- `method` -- HTTP-method. Usually `"GET"` or `"POST"`.
- `URL` -- the URL to request.
@ -203,7 +203,7 @@ xhr.onreadystatechange = function() {
};
```
You can find `readystatechange` listeners in really old code, for historical reasons.
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.
Nowadays, `load/error/progress` handlers deprecate it.
@ -257,7 +257,7 @@ There are 3 methods for HTTP-headers:
Several headers are managed exclusively by the browser, e.g. `Referer` and `Host`.
The full list is [in the specification](http://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader-method).
XMLHttpRequest is not allowed to change them, for the sake of user safety and correctness of the request.
`XMLHttpRequest` is not allowed to change them, for the sake of user safety and correctness of the request.
```
````warn header="Can't remove a header"
@ -325,7 +325,7 @@ let formData = new FormData([form]); // creates an object, optionally fill from
formData.append(name, value); // appends a field
```
Create it, optionally from a form, `append` more fields if needed, and then:
We create it, optionally from a form, `append` more fields if needed, and then:
1. `xhr.open('POST', ...)` use `POST` method.
2. `xhr.send(formData)` to submit the form to the server.
@ -373,19 +373,19 @@ xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.send(json);
```
The `.send(body)` method is pretty omnivore. It can send almost everything, including Blob and BufferSource objects.
The `.send(body)` method is pretty omnivore. It can send almost everything, including `Blob` and `BufferSource` objects.
## Upload progress
The `progress` event only works on the downloading stage.
That is: if we `POST` something, `XMLHttpRequest` first uploads our data, then downloads the response.
That is: if we `POST` something, `XMLHttpRequest` first uploads our data (the request body), then downloads the response.
If we're uploading something big, then we're surely more interested in tracking the upload progress. But `progress` event doesn't help here.
If we're uploading something big, then we're surely more interested in tracking the upload progress. But `xhr.onprogress` doesn't help here.
There's another object `xhr.upload`, without methods, exclusively for upload events.
Here's the list:
The event list is similar to `xhr` events, but `xhr.upload` triggers them on uploading:
- `loadstart` -- upload started.
- `progress` -- triggers periodically during the upload.
@ -458,6 +458,8 @@ xhr.open('POST', 'http://anywhere.com/request');
...
```
See the chapter <info:fetch-crossorigin> for details about cross-origin headers.
## Summary
@ -468,7 +470,7 @@ let xhr = new XMLHttpRequest();
xhr.open('GET', '/my/url');
xhr.send(); // for POST, can send a string or FormData
xhr.send(); s
xhr.onload = function() {
if (xhr.status != 200) { // HTTP error?

View file

@ -237,6 +237,6 @@ Parentheses groups are numbered left-to-right, and can optionally be named with
The content, matched by a group, can be referenced both in the replacement string as `$1`, `$2` etc, or by the name `$name` if named.
So, parentheses groups are called "capturing groups", as they "capture" a part of the match. We get that part separately from the result.
So, parentheses groups are called "capturing groups", as they "capture" a part of the match. We get that part separately from the result as a member of the array or in `.groups` if it's named.
We can exclude the group from remembering (make in "non-capturing") by putting `?:` at the start: `(?:...)`, that's used if we'd like to apply a quantifier to the whole group, but don't need it in the result.