fixes
This commit is contained in:
parent
a6552ebe84
commit
d79c761d81
2 changed files with 16 additions and 14 deletions
|
@ -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?
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue