Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update XHR event pages #12896

Merged
merged 1 commit into from
Feb 10, 2022
Merged

Update XHR event pages #12896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions files/en-us/_redirects.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9503,7 +9503,13 @@
/en-US/docs/Web/API/XMLHttpRequest/How_to_check_the_secruity_state_of_an_XMLHTTPRequest_over_SSL /en-US/docs/Web/API/XMLHttpRequest
/en-US/docs/Web/API/XMLHttpRequest/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL /en-US/docs/Web/API/XMLHttpRequest
/en-US/docs/Web/API/XMLHttpRequest/XMLHttpRequest.response /en-US/docs/Web/API/XMLHttpRequest/response
/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange /en-US/docs/Web/API/XMLHttpRequest/readystatechange_event
/en-US/docs/Web/API/XMLHttpRequest/responseresponseText /en-US/docs/Web/API/XMLHttpRequest/responseText
/en-US/docs/Web/API/XMLHttpRequestEventTarget/onabort /en-US/docs/Web/API/XMLHttpRequest/abort_event
/en-US/docs/Web/API/XMLHttpRequestEventTarget/onerror /en-US/docs/Web/API/XMLHttpRequest/error_event
/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload /en-US/docs/Web/API/XMLHttpRequest/load_event
/en-US/docs/Web/API/XMLHttpRequestEventTarget/onloadstart /en-US/docs/Web/API/XMLHttpRequest/loadstart_event
/en-US/docs/Web/API/XMLHttpRequestEventTarget/onprogress /en-US/docs/Web/API/XMLHttpRequest/progress_event
/en-US/docs/Web/API/XMLHttpRequestResponseType /en-US/docs/Web/API/XMLHttpRequest/responseType
/en-US/docs/Web/API/XPathEvaluator/XPathEvaluator.createExpression() /en-US/docs/Web/API/XPathEvaluator/createExpression
/en-US/docs/Web/API/XPathResult/XPathResult.booleanValue /en-US/docs/Web/API/XPathResult/booleanValue
Expand Down
120 changes: 30 additions & 90 deletions files/en-us/_wikihistory.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90313,36 +90313,6 @@
"MashKao"
]
},
"Web/API/XMLHttpRequest/onreadystatechange": {
"modified": "2020-10-15T21:36:57.266Z",
"contributors": [
"chrisdavidmills",
"mfuji09",
"Konservator-mn",
"anonyco",
"ikarasz",
"vapier",
"SteveVS",
"ExE-Boss",
"nolcay",
"erikadoyle",
"Ende93",
"david_ross",
"merksam",
"kaashan",
"sean-roberts",
"afrianjunior",
"MashKao",
".",
"jsx",
"maybe",
"akinjide",
"teoli",
"imme_emosol",
"JiangSheng",
"mlcheng"
]
},
"Web/API/XMLHttpRequest/open": {
"modified": "2020-10-15T21:40:00.147Z",
"contributors": [
Expand Down Expand Up @@ -90401,6 +90371,36 @@
"jcanepa"
]
},
"Web/API/XMLHttpRequest/readystatechange_event": {
"modified": "2020-10-15T21:36:57.266Z",
"contributors": [
"chrisdavidmills",
"mfuji09",
"Konservator-mn",
"anonyco",
"ikarasz",
"vapier",
"SteveVS",
"ExE-Boss",
"nolcay",
"erikadoyle",
"Ende93",
"david_ross",
"merksam",
"kaashan",
"sean-roberts",
"afrianjunior",
"MashKao",
".",
"jsx",
"maybe",
"akinjide",
"teoli",
"imme_emosol",
"JiangSheng",
"mlcheng"
]
},
"Web/API/XMLHttpRequest/response": {
"modified": "2020-10-15T21:39:34.381Z",
"contributors": [
Expand Down Expand Up @@ -90605,66 +90605,6 @@
"kscarfone"
]
},
"Web/API/XMLHttpRequestEventTarget/onabort": {
"modified": "2020-10-15T21:43:02.578Z",
"contributors": [
"ExE-Boss",
"erikadoyle",
"blainesch",
"teoli",
"rolfedh",
"Sheppy"
]
},
"Web/API/XMLHttpRequestEventTarget/onerror": {
"modified": "2020-10-15T21:43:01.033Z",
"contributors": [
"ExE-Boss",
"erikadoyle",
"teoli",
"rolfedh",
"Sheppy"
]
},
"Web/API/XMLHttpRequestEventTarget/onload": {
"modified": "2020-10-15T21:43:03.505Z",
"contributors": [
"ExE-Boss",
"ChrisBrownie55",
"CornerKitten",
"direvus",
"ferhtgoldaraz",
"erikadoyle",
"teoli",
"rolfedh",
"Sheppy"
]
},
"Web/API/XMLHttpRequestEventTarget/onloadstart": {
"modified": "2020-10-15T21:43:01.513Z",
"contributors": [
"rossisi",
"ExE-Boss",
"erikadoyle",
"teoli",
"rolfedh",
"Sheppy"
]
},
"Web/API/XMLHttpRequestEventTarget/onprogress": {
"modified": "2020-10-15T21:45:23.450Z",
"contributors": [
"eltociear",
"ExE-Boss",
"sheeldotme",
"yan",
"erikadoyle",
"nekjine",
"donnapep",
"teoli",
"Taoja"
]
},
"Web/API/XMLSerializer": {
"modified": "2020-10-15T21:14:30.148Z",
"contributors": [
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/learn/javascript/client-side_web_apis/fetching_data/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ This series of files will act as our fake database; in a real application, we'd
request.responseType = 'text';
```

8. Fetching a resource from the network is an {{glossary("asynchronous")}} operation, meaning that you have to wait for that operation to complete (e.g., the resource is returned from the network) before you can do anything with that response, otherwise, an error will be thrown. XHR allows you to handle this using its {{domxref("XMLHttpRequest.onload", "onload")}} event handler — this is run when the {{event("load")}} event fires (when the response has returned). When this has occurred, the response data will be available in the `response` property of the XHR request object.
8. Fetching a resource from the network is an {{glossary("asynchronous")}} operation, meaning that you have to wait for that operation to complete (e.g., the resource is returned from the network) before you can do anything with that response, otherwise, an error will be thrown. XHR allows you to handle this using its {{domxref("XMLHttpRequest.load_event", "load")}} event (when the response has returned). When this has occurred, the response data will be available in the `response` property of the XHR request object.

Add the following below your last addition. You'll see that inside the `onload` event handler we are setting the [`textContent`](/en-US/docs/Web/API/Node/textContent) of the `poemDisplay` (the {{htmlelement("pre")}} element) to the value of the {{domxref("XMLHttpRequest.response", "request.response")}} property.

Expand Down
48 changes: 26 additions & 22 deletions files/en-us/web/api/xmlhttprequest/abort_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,32 @@ browser-compat: api.XMLHttpRequest.abort_event

The `abort` event is fired when a request has been aborted, for example because the program called {{domxref("XMLHttpRequest.abort()")}}.

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("ProgressEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}}
</td>
</tr>
</tbody>
</table>
## Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

```js
addEventListener('abort', event => { })

onabort = event => { }
```

## Event type

An {{domxref("ProgressEvent")}}. Inherits from {{domxref("Event")}}.

{{InheritanceDiagram("ProgressEvent")}}

## Event properties

_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._

- {{domxref("ProgressEvent.lengthComputable", "lengthComputable")}} {{readonlyInline}}
- : A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.
- {{domxref("ProgressEvent.loaded", "loaded")}} {{readonlyInline}}
- : A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.
- {{domxref("ProgressEvent.total", "total")}} {{readonlyInline}}
- : A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

## Examples

Expand Down
48 changes: 26 additions & 22 deletions files/en-us/web/api/xmlhttprequest/error_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,32 @@ browser-compat: api.XMLHttpRequest.error_event

The `error` event is fired when the request encountered an error.

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("ProgressEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}}
</td>
</tr>
</tbody>
</table>
## Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

```js
addEventListener('error', event => { })

onerror = event => { }
```

## Event type

An {{domxref("ProgressEvent")}}. Inherits from {{domxref("Event")}}.

{{InheritanceDiagram("ProgressEvent")}}

## Event properties

_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._

- {{domxref("ProgressEvent.lengthComputable", "lengthComputable")}} {{readonlyInline}}
- : A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.
- {{domxref("ProgressEvent.loaded", "loaded")}} {{readonlyInline}}
- : A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.
- {{domxref("ProgressEvent.total", "total")}} {{readonlyInline}}
- : A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

## Examples

Expand Down
3 changes: 1 addition & 2 deletions files/en-us/web/api/xmlhttprequest/getallresponseheaders/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,7 @@ Each line is terminated by both carriage return and line feed characters

## Example

This example examines the headers in the request's {{domxref("XMLHttpRequest/readystatechange_event", "readystatechange")}} event
handler, {{domxref("XMLHttpRequest.onreadystatechange")}}. The code shows how to obtain
This example examines the headers in the request's {{domxref("XMLHttpRequest/readystatechange_event", "readystatechange")}} event. The code shows how to obtain
the raw header string, as well as how to convert it into an array of individual headers
and then how to take that array and create a mapping of header names to their values.

Expand Down
32 changes: 11 additions & 21 deletions files/en-us/web/api/xmlhttprequest/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ If your communication needs to involve receiving event data or message data from

_This interface also inherits properties of {{domxref("XMLHttpRequestEventTarget")}} and of {{domxref("EventTarget")}}._

- {{domxref("XMLHttpRequest.onreadystatechange")}}
- : An [Event handler](/en-US/docs/Web/Events/Event_handlers) that is called whenever the `readyState` attribute changes.
- {{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
- : Returns an `unsigned short`, the state of the request.
- {{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
Expand All @@ -53,15 +51,12 @@ _This interface also inherits properties of {{domxref("XMLHttpRequestEventTarget
- {{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
- : Returns an `unsigned short` with the status of the response of the request.
- {{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}

- : Returns a {{domxref("DOMString")}} containing the response string returned by the HTTP server. Unlike {{domxref("XMLHttpRequest.status")}}, this includes the entire text of the response message ("`200 OK`", for example).

> **Note:** According to the HTTP/2 specification ([8.1.2.4](https://http2.github.io/http2-spec/#rfc.section.8.1.2.4) [Response Pseudo-Header Fields](https://http2.github.io/http2-spec/#HttpResponse)), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.

- {{domxref("XMLHttpRequest.timeout")}}
- : Is an `unsigned long` representing the number of milliseconds a request can take before automatically being terminated.
- {{domxref("XMLHttpRequestEventTarget.ontimeout")}}
- : Is an [Event handler](/en-US/docs/Web/Events/Event_handlers) that is called whenever the request times out.
- {{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
- : Is an {{domxref("XMLHttpRequestUpload")}}, representing the upload process.
- {{domxref("XMLHttpRequest.withCredentials")}}
Expand All @@ -78,14 +73,6 @@ _This interface also inherits properties of {{domxref("XMLHttpRequestEventTarget
- {{domxref("XMLHttpRequest.mozBackgroundRequest")}}
- : Is a boolean. It indicates whether or not the object represents a background service request.

### Event handlers

`onreadystatechange` as a property of the `XMLHttpRequest` instance is supported in all browsers.

Since then, a number of additional `on*` event handler properties have been implemented in various browsers (`onload`, `onerror`, `onprogress`, etc.). See [Using XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest).

More recent browsers, including Firefox, also support listening to the `XMLHttpRequest` events via standard {{domxref("EventTarget.addEventListener", "addEventListener()")}} APIs in addition to setting `on*` properties to a handler function.

## Methods

- {{domxref("XMLHttpRequest.abort()")}}
Expand All @@ -107,25 +94,28 @@ More recent browsers, including Firefox, also support listening to the `XMLHttpR

- {{domxref("XMLHttpRequest/abort_event", "abort")}}
- : Fired when a request has been aborted, for example because the program called {{domxref("XMLHttpRequest.abort()")}}.
Also available via the {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} property.
Also available via the `onabort` event handler property.
- {{domxref("XMLHttpRequest/error_event", "error")}}
- : Fired when the request encountered an error.
Also available via the {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} property.
Also available via the `onerror` event handler property.
- {{domxref("XMLHttpRequest/load_event", "load")}}
- : Fired when an {{domxref("XMLHttpRequest")}} transaction completes successfully.
Also available via the {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} property.
- : Fired when an `XMLHttpRequest` transaction completes successfully.
Also available via the `onload` event handler property.
- {{domxref("XMLHttpRequest/loadend_event", "loadend")}}
- : Fired when a request has completed, whether successfully (after {{domxref("XMLHttpRequest/load_event", "load")}}) or unsuccessfully (after {{domxref("XMLHttpRequest/abort_event", "abort")}} or {{domxref("XMLHttpRequest/error_event", "error")}}).
Also available via the {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} property.
Also available via the `onloadend` event handler property.
- {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}
- : Fired when a request has started to load data.
Also available via the {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} property.
Also available via the `onloadstart` event handler property.
- {{domxref("XMLHttpRequest/progress_event", "progress")}}
- : Fired periodically when a request receives more data.
Also available via the {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} property.
Also available via the `onprogress` event handler property.
- {{domxref("XMLHttpRequest/readystatechange_event", "readystatechange")}}
- : Fired whenever the {{domxref("XMLHttpRequest.readyState", "readyState")}} property changes.
Also available via the `onreadystatechange` event handler property.
- {{domxref("XMLHttpRequest/timeout_event", "timeout")}}
- : Fired when progress is terminated due to preset time expiring.
Also available via the {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} property.
Also available via the `ontimeout` event handler property.

## Specifications

Expand Down
Loading