recursal/MDN huggingface dataset:
XMLHttpRequest: error イベント
==========================

`error` イベントは、リクエストでエラーが発生したときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


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

onerror = (event) => {};
```

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*下記のプロパティに加え、親インターフェイスである `Event` のプロパティを利用できます。*

`lengthComputable` 読取専用 

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用 

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### ライブデモ

#### HTML


```html
<div class="controls">
  <input
 class="xhr success"
 type="button"
 name="xhr"
 value="Click to start XHR (success)" />
  <input
 class="xhr error"
 type="button"
 name="xhr"
 value="Click to start XHR (error)" />
  <input
 class="xhr abort"
 type="button"
 name="xhr"
 value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
```


```
.event-log {
  width: 25rem;
  height: 4rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

input {
  width: 11rem;
  margin: 0.5rem;
}
```


#### JavaScript


```js
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR("example-image.jpg");
});

xhrButtonError.addEventListener("click", () => {
  runXHR("https://example.com/notfound.jpg");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR("example-image.jpg").abort();
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-error |
| XMLHttpRequest Standard # handler-xhr-onerror |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント: `loadstart`, `load`, `progress`, `loadend`, `abort`
* 進捗の監視
XMLHttpRequest: mozSystem プロパティ
===============================

**`mozSystem`** は論理値です。 true の場合、同じ発信元ポリシーはリクエストに適用されません。
XMLHttpRequest: timeout イベント
============================

**`timeout`** イベントは、設定された時間が経過したことで進行が終了すると発行されます。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("timeout", (event) => {});

ontimeout = (event) => {};
```

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントのプロパティ
----------

*以下に挙げたプロパティに加えて、親インターフェイスである `Event` から継承したプロパティが利用できます。*

`lengthComputable` 読取専用 

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用 

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-


```js
const client = new XMLHttpRequest();
client.open("GET", "http://www.example.org/example.txt");
client.ontimeout = () => {
  console.error("Timeout!!");
};

client.send();
```


イベントハンドラーは `addEventListener()` メソッドを使用して設定することもできます。


```js
client.addEventListener("timeout", () => {
  console.error("Timeout!!");
});
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-timeout |
| XMLHttpRequest Standard # handler-xhr-ontimeout |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `XMLHttpRequest`
XMLHttpRequest: readystatechange イベント
=====================================

`readystatechange` イベントは、 `XMLHttpRequest` の `readyState` プロパティが変化するたびに発生します。

**警告:** これは同期リクエストで使用してはいけません。また、ネイティブコードから使用してはいけません。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("readystatechange", (event) => {});

onreadystatechange = (event) => {};
```

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-


```js
const xhr = new XMLHttpRequest();
const method = "GET";
const url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = () => {
  // ローカルファイルでは、 Mozilla Firefox で成功するとステータスは0になります
  if (xhr.readyState === XMLHttpRequest.DONE) {
    const status = xhr.status;
    if (status === 0 || (status >= 200 && status < 400)) {
      // リクエストが正常に終了した
      console.log(xhr.responseText);
    } else {
      // あらら! リクエストでエラーが発生しました!
    }
  }
};
xhr.send();
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-readystatechange |
| XMLHttpRequest Standard # handler-xhr-onreadystatechange |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XMLHttpRequest: getAllResponseHeaders() メソッド
============================================

`XMLHttpRequest` の **`getAllResponseHeaders()`** メソッドは、すべてのレスポンスヘッダーを CRLF で区切った文字列として返し、レスポンスを受信していない場合は `null` を返します。

ネットワークエラーが発生した場合は、空文字列が返されます。

**メモ:** マルチパートリクエストでは、これはリクエストの元のチャンネルではなく、*現在の*部分を返します。

構文
--


```js
getAllResponseHeaders()
```

### 引数

なし。

### 返値

CRLF で区切ったすべてのレスポンスヘッダー（フィールド名が `Set-Cookie` のものを除く）を表す文字列、またはレスポンスを受信していなければ `null` です。ネットワークエラーが発生した場合は、空文字列が返されます。

生のヘッダー文字列がどのように見えるかの例です。


```http
date: Fri, 08 Dec 2017 21:04:30 GMT\r\n
content-encoding: gzip\r\n
x-content-type-options: nosniff\r\n
server: meinheld/0.6.1\r\n
x-frame-options: DENY\r\n
content-type: text/html; charset=utf-8\r\n
connection: keep-alive\r\n
strict-transport-security: max-age=63072000\r\n
vary: Cookie, Accept-Encoding\r\n
content-length: 6502\r\n
x-xss-protection: 1; mode=block\r\n
```


各行はキャリッジリターンとラインフィード文字 (`\r\n`) の両方で終わります。これらはそれぞれのヘッダーを区切る基本的なデリミターです。

**メモ:** 最近のブラウザーでは、ヘッダー名は最新の仕様書にあるように、すべて小文字で返されます。

例
-

この例では、リクエストの `readystatechange` イベントの中でヘッダーを調べます。このコードは生のヘッダー文字列を取得する方法、またそれを個別のヘッダーの配列に変換する方法、そして配列からヘッダー名とその値のマップを生成する方法を示しています。


```js
const request = new XMLHttpRequest();
request.open("GET", "foo.txt", true);
request.send();

request.onreadystatechange = () => {
  if (request.readyState === this.HEADERS\_RECEIVED) {
    // 生のヘッダー文字列を取得
    const headers = request.getAllResponseHeaders();

    // ヘッダー文字列を個別のヘッダーの
    // 配列に変換
    const arr = headers.trim().split(/[\r\n]+/);

    // ヘッダー名と値のマップを生成
    const headerMap = {};
    arr.forEach((line) => {
      const parts = line.split(": ");
      const header = parts.shift();
      const value = parts.join(": ");
      headerMap[header] = value;
    });
  }
};
```


いったんこれを行えば、次のようなことができます。


```js
const contentType = headerMap["content-type"];
```


これは `Content-Type` ヘッダーの値を変数 `contentType` の中に入れます。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-getallresponseheaders()-method |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* XMLHttpRequest の使用
* リクエストヘッダーの設定: `setRequestHeader()`
XMLHttpRequest: responseType プロパティ
==================================

`XMLHttpRequest` (XHR) の **`responseType`** プロパティは列挙型の文字列値で、レスポンスに含まれているデータの型を示します。

作者がレスポンスの型を変更することもできます。 `responseType` の値として空文字列が設定された場合は、既定値である `text` が使用されます。

### 値

文字列で、レスポンスに含まれているデータの型を指定します。以下の値を取ることができます。

`""`

`responseType` が空の文字列の場合は `"text"` と同じで、既定の型です。

`"arraybuffer"`

`response` はバイナリーデータを含む JavaScript の `ArrayBuffer` です。

`"blob"`

`response` はバイナリーデータを含む `Blob` オブジェクトです。

`"document"`

`response` は HTML の `Document` または XML の `XMLDocument` で、受信したデータの MIME タイプに基づいて適切な方になります。 XMLHttpRequest における HTML の扱いで、 XHR を使用して HTML コンテンツを読み取ることについて詳しく確認することができます。

`"json"`

`response` は JSON として受信したデータの内容を解釈して生成された JavaScript オブジェクトです。

`"text"`

`response` は文字列に入ったテキストです。


**メモ:** `responseType` を特定の値に設定する場合は、サーバーが実際にその形式と互換性のあるレスポンスを送信していることを確認してください。サーバーが `responseType` に設定された値と互換性のないデータを返した場合、`response` の値は `null` になります。

### 例外

`InvalidAccessError` `DOMException`

`responseType` の値の変更が同期モードの `XMLHttpRequest` 上で試みられたものの、ワーカー (`Worker`) の中ではなかった場合。詳細については、下記の同期 XHR の制限を参照してください。

使用上の注意
------

### 同期 XHR の制限

`responseType` の値を同期 `XMLHttpRequest` で変更することは、リクエストがワーカー (`Worker`) に属している場合を除いてできません。この制限は、ブラウザーのメインスレッドをブロックしてユーザーの使い勝手を妨害する巨大なトランザクションが、同期操作で使用されないことを保証する対策の一環として設けられています。

XHR のリクエストは既定では非同期です。同期モードは、 `false` の値をオプションの `async` 引数に渡して `open()` を呼び出した場合のみ設定されます。

### ワーカーでの制限

`responseType` の値を `document` に指定しようとすると、ワーカー (`Worker`) の中では失敗します。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-responsetype-attribute |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* XMLHttpRequest の使用
* XMLHttpRequest 内の HTML
* レスポンスデータ: `response`, `responseText`, `responseXML`
XMLHttpRequest: progress イベント
=============================

**`progress`** イベントは、リクエストがもっとデータを受信した際に定期的に発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("progress", (event) => {});

onprogress = (event) => {};
```

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*下記のプロパティに加え、親インターフェイスである `Event` のプロパティを利用できます。*

`lengthComputable` 読取専用 

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用 

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### ライブデモ

#### HTML


```html
<div class="controls">
  <input
 class="xhr success"
 type="button"
 name="xhr"
 value="Click to start XHR (success)" />
  <input
 class="xhr error"
 type="button"
 name="xhr"
 value="Click to start XHR (error)" />
  <input
 class="xhr abort"
 type="button"
 name="xhr"
 value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
```


```
.event-log {
  width: 25rem;
  height: 4rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

input {
  width: 11rem;
  margin: 0.5rem;
}
```


#### JavaScript


```js
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR(
    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/\_wikihistory.json",
  );
});

xhrButtonError.addEventListener("click", () => {
  runXHR("http://i-dont-exist");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR(
    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/\_wikihistory.json",
  ).abort();
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-progress |
| XMLHttpRequest Standard # handler-xhr-onprogress |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント: `loadstart`, `load`, `loadend`, `error`, `abort`
* 進捗の監視
XMLHttpRequest: send() メソッド
===========================

`XMLHttpRequest` の **`send()`** メソッドは、リクエストをサーバーに送信します。

リクエストが非同期の場合（これが既定）、このメソッドはリクエストが送信されるとすぐに戻り、結果はイベントを用いて配信されます。リクエストが同期の場合、このメソッドはレスポンスが到着するまで戻りません。

`send()` はリクエストの本文を示す引数を一つ受け取ることができます。これは主に `PUT` のようなリクエストに使用されます。リクエストメソッドが `GET` または `HEAD` であれば、 `body` 引数は無視され、リクエストの本文は `null` に設定されます。

`Accept` ヘッダーを `setRequestHeader()` を使用して設定しなかった場合、 `Accept` ヘッダーは `"*/*"` 型 (任意の型) が送信されます。

構文
--


```js
send()
send(body)
```

### 引数

`body` 省略可

XHR のリクエストの中で送られる本文データです。次のものが使用できます。

* `Document`: 送信前にシリアライズされている場合。
* `XMLHttpRequestBodyInit`: Fetch の仕様書によれば、`Blob`、`ArrayBuffer`、`TypedArray`、`DataView`、`FormData`、`URLSearchParams`、文字列リテラル、オブジェクトが利用できます。
* `null`

body に値が設定されていない場合、既定値の `null` が使用されます。

バイナリーコンテンツの送信（例えばファイルのアップロード）の最適な方法は、`TypedArray`、`DataView`、`Blob` の何れかのオブジェクトと `send()` メソッドを組み合わせることです。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateError` `DOMException`

このリクエストに対してすでに `send()` が呼び出されているか、リクエストが完了している。

`NetworkError` `DOMException`

読み込むリソースの型が Blob であり、メソッドが `GET` ではない。

GET の例
------


```js
const xhr = new XMLHttpRequest();
xhr.open("GET", "/server", true);

xhr.onload = () => {
  // リクエストの終了。ここの処理を実行します。
};

xhr.send(null);
// xhr.send('string');
// xhr.send(new Blob());
// xhr.send(new Int8Array());
// xhr.send(document);
```

POST の例
-------


```js
const xhr = new XMLHttpRequest();
xhr.open("POST", "/server", true);

//リクエストに従って正しいヘッダー情報を送信してください
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = () => {
  // 状態が変化すると関数が呼び出されます。
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    // リクエストの終了。ここの処理を実行します。
  }
};
xhr.send("foo=bar&lorem=ipsum");
// xhr.send(new Int8Array());
// xhr.send(document);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-send()-method |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* XMLHttpRequest の使用
* XMLHttpRequest における HTML の扱い
XMLHttpRequest: open() メソッド
===========================

`XMLHttpRequest` の **`open()`** メソッドは、新しく作成されたリクエストを初期化したり、既存のリクエストを再初期化したりします。

**メモ:** すでに有効なリクエスト (すでに `open()` が呼び出されたもの) に対してこのメソッドを呼び出すと、 `abort()` を呼び出すのと等価になります。

構文
--


```js
open(method, url)
open(method, url, async)
open(method, url, async, user)
open(method, url, async, user, password)
```

### 引数

`method`

使用する HTTP リクエストメソッドです。 `"GET"`, `"POST"`, `"PUT"`, `"DELETE"` など。 HTTP(S) 以外の URL では無視されます。

`url`

文字列または文字列化のあるその他のオブジェクト、例えば `URL` オブジェクトで、リクエストの送信先となる URL を表します。

`async` 省略可

任意の論理値の引数で、既定値は `true`です。操作が非同期的に行われるかどうかを示します。値が `false` の場合、 `send()` メソッドはレスポンスを受信するまで戻りません。 `true` の場合は、トランザクション完了の通知はイベントリスナーを使用して配信されます。 `multipart` 属性が `true` である場合は true で*なければならず*、さもなくば例外が発生します。

**メモ:** メインスレッドで同期リクエストを行うと、ユーザーの使い勝手を簡単に阻害するので避けるべきです。実際、多くのブラウザーではメインスレッドにおける同期的な XHR の対応を全面的に非推奨としています。同期リクエストはワーカー (`Worker`) では許可されています。

`user` 省略可

任意で、認証プロセスで使用するユーザー名です。既定では、これは `null` 値です。

`password` 省略可

任意で、認証プロセスで使用するパスワードです。既定では、これは `null` 値です。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # the-open()-method |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* XMLHttpRequest の使用
* 関連する `XMLHttpRequest` のメソッド: `setRequestHeader()`, `send()`, `abort()`
XMLHttpRequest: channel プロパティ
=============================

XMLHttpRequest.channel は `nsIChannel` で、リクエストを送信するときにオブジェクトによって使用されます。 channel がまだ作られていない場合、これは `null` です。マルチパートリクエストのときは、これは最初の channel であり、マルチパートリクエストの異なるパートのことではありません。**アクセスするには、権限昇格が必要です。**
XMLHttpRequest: load イベント
=========================

`load` イベントは、 `XMLHttpRequest` のトランザクションが成功裏に完了したときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("load", (event) => {});

onload = (event) => {};
```

イベント型
-----

`ProgressEvent` です。 `Event` から継承しています。

Event

ProgressEventイベントプロパティ
---------

*下記のプロパティに加え、親インターフェイスである `Event` のプロパティを利用できます。*

`lengthComputable` 読取専用 

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

`loaded` 読取専用 

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、`total` をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例
-

### ライブデモ

#### HTML


```html
<div class="controls">
  <input
 class="xhr success"
 type="button"
 name="xhr"
 value="Click to start XHR (success)" />
  <input
 class="xhr error"
 type="button"
 name="xhr"
 value="Click to start XHR (error)" />
  <input
 class="xhr abort"
 type="button"
 name="xhr"
 value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
```


```
.event-log {
  width: 25rem;
  height: 4rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

input {
  width: 11rem;
  margin: 0.5rem;
}
```


#### JavaScript


```js
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR("image.jpg");
});

xhrButtonError.addEventListener("click", () => {
  runXHR("https://somewhere.org/i-dont-exist");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR("image.jpg").abort();
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-load |
| XMLHttpRequest Standard # handler-xhr-onload |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント: `loadstart`, `loadend`, `progress`, `error`, `abort`
* 進捗の監視
KeyboardLayoutMap: size プロパティ
=============================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`size`** は `KeyboardLayoutMap` インターフェイスの読み取り専用プロパティで、このマップ内の要素の数を返します。

値
-

数値です。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-get-map.prototype.size |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
KeyboardLayoutMap: forEach() メソッド
=================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`forEach()`** は `KeyboardLayoutMap` インターフェイスのメソッドで、指定された関数をマップの各要素に対して一度ずつ実行します。

構文
--


```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### 引数

`callbackFn`

各要素に対して実行する関数で、 3 つの引数を取ります。

`currentValue`

現在処理中の要素の値です。

`index` 省略可

現在処理中の要素のインデックスです。

`array` 省略可

`forEach()` が呼び出される KeyboardLayoutMap です。


`thisArg` 省略可

`callback` を実行する際に **`this`** （すなわち参照する `Object`）として使用する値です。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.foreach |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
KeyboardLayoutMap: keys プロパティ
=============================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**keys`** は `KeyboardLayoutMap` インターフェイスの読み取り専用プロパティで、配列の各インデックスのキーを格納した新しい配列イテレーターオブジェクトを返します。

値
-

イテレーターです。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.keys |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
KeyboardLayoutMap: get() メソッド
=============================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`get()`** は `KeyboardLayoutMap` インターフェイスのメソッドで、指定されたキーの要素を返します。

有効なキーの一覧は UI Events KeyboardEvent code Values 仕様にあります。

構文
--


```js
get(key)
```

### 引数

`key`

マップから返す項目のキーです。

### 返値

指定したキーの値です。

例
-

次の例は、英語の QWERTY キーボードの 'W' キーに対応する場所またはレイアウトに依存した文字列を取得する方法を示しています。


```js
const keyboard = navigator.keyboard;
keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  const upKey = keyboardLayoutMap.get("KeyW");
  window.alert(`Press ${upKey} to move up.`);
});
```

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.get |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
KeyboardLayoutMap: has() メソッド
=============================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`has()`** は `KeyboardLayoutMap` インターフェイスのメソッドで、オブジェクトに指定したキーを持つ要素があるかどうかを示す論理値を返します。

有効なキーの一覧は UI Events KeyboardEvent code Values 仕様にあります。

構文
--


```js
has(key)
```

### 引数

`key`

マップ内で検索する要素のキーです。

### 返値

指定したキーが得られたかどうかを示す論理値 (`Boolean`) です。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.has |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
KeyboardLayoutMap: values プロパティ
===============================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`values`** は `KeyboardLayoutMap` インターフェイスの読み取り専用プロパティで、このマップ内の各インデックスの値を持つ、新しいイテレーターオブジェクトを返します。

値
-

イテレーターです。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.values |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
KeyboardLayoutMap: entries プロパティ
================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`entries`** は `KeyboardLayoutMap` インターフェイスの読み取り専用プロパティで、 `for...in` ループによって指定されたのと同じ順序で、指定されたオブジェクト自身の列挙可能なプロパティ `[key, value]` ペアの配列を返します（for-in ループがプロトタイプチェーン内のプロパティも同様に列挙するのとは異なります）。

値
-

指定された `KeyboardLayoutMap` オブジェクト自身の列挙可能なプロパティ `[key, value]` のペアの配列。

仕様書
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.entries |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.