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

`abort` イベントは、例えばプログラムが `XMLHttpRequest.abort()` を呼び出した時など、リクエストが中断されたときに発行されます。

構文
--

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


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

onabort = (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("my-picture.jpg");
});

xhrButtonError.addEventListener("click", () => {
  runXHR("https://example.com/some-path");
});

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


#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-abort |
| XMLHttpRequest Standard # handler-xhr-onabort |

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

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

関連情報
----

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

**XMLHttpRequest.readyState** プロパティは XMLHttpRequest (XHR) クライアントの状態を返します。XHR クライアントは次の状態のいずれかをとります。

| 値 | 状態 | 説明 |
| --- | --- | --- |
| `0` | `UNSENT` | クライアントは作成済み。 `open()` はまだ呼ばれていない。 |
| `1` | `OPENED` | `open()` が呼び出し済み。 |
| `2` | `HEADERS_RECEIVED` | `send()` が呼び出し済みで、ヘッダーとステータスが利用可能。 |
| `3` | `LOADING` | ダウンロード中。`responseText` には部分データが入っている。 |
| `4` | `DONE` | 操作が完了した。 |

UNSENT

XMLHttpRequest クライアントは作成済みだが、まだ open() メソッドは呼ばれていない。

OPENED

open() メソッドは実行済み。この状態の間は、リクエストヘッダーを setRequestHeader() メソッドを使ってセットでき、send() メソッドを呼び出すと取得を開始できる。

HEADERS\_RECEIVED

send() が呼び出され、（もしあれば）すべてのリダイレクトをたどり、 レスポンスヘッダーを受信しました。

LOADING

レスポンス本文を受信中。 `responseType` が "text" または空文字列の場合、 `responseText` は読み込み中の部分的なテキストになる。

DONE

取得操作が完了している。これはデータ転送が成功または失敗で完了したことを意味している。

例
-


```js
const xhr = new XMLHttpRequest();
console.log("UNSENT", xhr.readyState); // readyState は 0 になる

xhr.open("GET", "/api", true);
console.log("OPENED", xhr.readyState); // readyState は 1 になる

xhr.onprogress = () => {
  console.log("LOADING", xhr.readyState); // readyState は 3 になる
};

xhr.onload = () => {
  console.log("DONE", xhr.readyState); // readyState は 4 になる
};

xhr.send(null);
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # states |

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

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

`XMLHttpRequest` の **`response`** プロパティは、そのリクエストの本体の内容を、 `ArrayBuffer`、`Blob`、`Document`、JavaScript の `Object`、文字列など、リクエストの `responseType` プロパティの値に応じた形で返します。

値
-

`responseType` の値に基づく適切なオブジェクト。 `open()` を呼び出してリクエストを初期化した後や、 `send()` を呼び出してリクエストをサーバーに送信する前に、 `responseType` の値を設定することで、特定の形式でデータを提供するようにリクエストができます。

リクエストが未完了または失敗する場合、値は `null` です。ただし、 `"text"` や空の文字列 (`""`) を使用してテキストデータを読み込む場合は除きます。リクエストがまだ `LOADING` `readyState` (3) にある間、レスポンスはこれまでのレスポンスを含むことがあります。

例
-

この例で紹介している `load()` 関数は、サーバーからページを読み込み処理するものです。これは、 `XMLHttpRequest` オブジェクトを作成し、 `readystatechange` イベントのリスナーを生成して、その中で `readyState` イベントが `DONE` (4) に変わると `response` が取得し、 `load()` に渡されたコールバック関数に渡しています。

 コンテンツは生のテキストデータとして扱われます（ここでは、既定の
 `responseType` を上書きするものがないため）。


```js
const url = "somePage.html"; //A local page

function load(url, callback) {
  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
      callback(xhr.response);
    }
  };

  xhr.open("GET", url, true);
  xhr.send("");
}
```

仕様書
---

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

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

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

関連情報
----

* XMLHttpRequest の使用
* テキストと HTML/XML データの取得: `XMLHttpRequest.responseText` および `XMLHttpRequest.responseXML`
XMLHttpRequest: mozBackgroundRequest プロパティ
==========================================

**メモ:** このメソッドは、ウェブコンテンツからは使用できません。アクセスするには管理者特権が必要です。

**`XMLHttpRequest.mozBackgroundRequest`** は論理値で、オブジェクトがバックグラウンドサービスリクエストを表すかどうかを示します。 `true` の場合、リクエストに関連付けられているロードグループはなく、セキュリティダイアログはユーザーに表示されません。

通常、セキュリティダイアログ（認証や不正な証明書通知など）が表示される場合、この要求は失敗します。

**メモ:** このプロパティは、 `open()` を呼び出す前に設定する必要があります。
XMLHttpRequest: withCredentials プロパティ
=====================================

**`XMLHttpRequest.withCredentials`** プロパティは論理値で、サイト間の `Access-Control` リクエストが Cookie、認証ヘッダー、 TLS クライアント証明書などの資格情報を使用して行うべきかどうかを示します。 `withCredentials` を設定しても、同じオリジンへのリクエストには影響しません。

さらに、このフラグは、レスポンスにおいて Cookie を無視すること示すためにも使われます。既定値は `false` です。異なるドメインからの `XMLHttpRequest` のレスポンスは、リクエストを行う前に `withCredentials` を `true` に設定しない限り、自身のドメインの Cookie 値を設定することができません。 `withCredentials` を true に設定することで得られるサードパーティの Cookie は、依然として same-origin ポリシーを尊重するので、リクエストスクリプトが document.cookie やレスポンスヘッダーからアクセスすることはできません。

**メモ:** これは同じオリジンへのリクエストには影響しません。

**メモ:** 異なるドメインからの `XMLHttpRequest` レスポンスは、リクエストを行う前に `withCredentials` を `true` に設定しない限り、 `Access-Control-` ヘッダーの値にかかわらず、自ドメインの Cookie 値を設定*できません*。

値
-

論理値です。

例
-


```js
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/", true);
xhr.withCredentials = true;
xhr.send(null);
```

仕様書
---

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

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

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

`XMLHttpRequest` の **`setRequestHeader()`** メソッドは、HTTP リクエストヘッダーの値を設定します。 `setRequestHeader()` は、 `open()` の呼び出しの後、 `send()` の呼び出しの前に呼び出さなければなりません。同じヘッダーについてこのメソッドを複数回呼び出された場合は、複数の値が単一のリクエストヘッダーにマージされます。

最初に `setRequestHeader()` を呼び出した後、呼び出す度に、指定されたテキストは既存のヘッダーの内容の末尾に追加されます。

この関数を使用して `Accept` ヘッダーが設定されなかった場合、 `send()` が呼び出されると、 `Accept` ヘッダーは `*/*` の値で送信されます。

セキュリティ上の理由から、ユーザーエージェントによって値が制御される禁止ヘッダー名がいくつかあります。フロントエンドの JavaScript コードからこれらのヘッダーの値を設定しようとすると、警告やエラーなしに無視されます。

さらに、 HTTP の `Authorization` ヘッダーをリクエストに追加することができますが、そのリクエストがオリジン間でリダイレクトされたときには削除されます。

**メモ:** カスタムフィールドについては、ドメインをまたがってリクエストを行うと、 "**not allowed by Access-Control-Allow-Headers in preflight response**" の例外に遭遇することがあります。
 この場合、サーバー側でレスポンスヘッダーに `Access-Control-Allow-Headers` を設定する必要があります。


構文
--


```js
setRequestHeader(header, value)
```

### 引数

`header`

値を設定するヘッダーの名前。

`value`

そのヘッダーの本体として設定する値。

### 返値

なし (`undefined`)。

仕様書
---

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

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

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

関連情報
----

* XMLHttpRequest の使用
* XMLHttpRequest での HTML
XMLHttpRequest: getResponseHeader() メソッド
========================================

`XMLHttpRequest` の **`getResponseHeader()`** メソッドは、特定のヘッダー値のテキストを含んだ文字列を返します。

同じ名前で複数のレスポンスヘッダーがあった場合、値はカンマと空白で区切って値を接続した単一の文字列として返されます。 `getResponseHeader()` メソッドは値を UTF バイト列として返します。

**メモ:** ヘッダー名の検索は、大文字小文字の区別がありません。

ヘッダーすべての生の文字列を取得する必要がある場合は、生のヘッダー文字列全体を返す `getAllResponseHeaders()` メソッドを使用してください。

構文
--


```js
getResponseHeader(headerName)
```

### 引数

`headerName`

文字列で、テキスト値を取得したいヘッダーの名前を示します。

### 返値

ヘッダーのテキスト値を表す文字列、または、レスポンスがまだ受信されていないか、そのヘッダーがレスポンスに存在しなければ `null` です。

例
-

この例では、リクエストが生成されて送信され、そして `readystatechange` ハンドラーを設定してヘッダーが純真で来たことを示す `readyState` を監視します。その時が来たら、 `Content-Type` ヘッダーの値を読み取ります。 `Content-Type` が求められる値でない場合、 `XMLHttpRequest` は `abort()` を呼び出してキャンセルします。


```js
const client = new XMLHttpRequest();
client.open("GET", "unicorns-are-awesome.txt", true);
client.send();

client.onreadystatechange = () => {
  if (client.readyState === client.HEADERS\_RECEIVED) {
    const contentType = client.getResponseHeader("Content-Type");
    if (contentType !== my_expected_type) {
      client.abort();
    }
  }
};
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-xmlhttprequest-getresponseheader |

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

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

関連情報
----

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

**`XMLHttpRequest.timeout`** は `unsigned long` 型で、リクエストが自動的に終了するまでの時間をミリ秒で示します。既定値は 0 で、タイムアウトが無いことを示します。 timeout は文書環境で利用される同期 XMLHttpRequest や `InvalidAccessError` の例外を投げるものに使用することはできません。タイムアウトとなった場合、 timeout イベントが発行されます。

**メモ:** ウィンドウを持つ同期リクエストでは、タイムアウトを使用することはできません。

タイムアウトは非同期リクエストで使用してください。

例
-


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

xhr.timeout = 2000; // ミリ秒単位の時間

xhr.onload = () => {
  // リクエスト完了。ここで処理を行います。
};

xhr.ontimeout = (e) => {
  // XMLHttpRequest がタイムアウト。ここで何かを行います。
};

xhr.send(null);
```

仕様書
---

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

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

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

**`XMLHttpRequest.responseXML`** は読み取り専用のプロパティで、リクエストによって受け取った HTML または XML を含む `Document`、またはリクエストが成功しなかった場合、まだ送信されていない場合、データが XML または HTML として解釈できない場合は `null` を返します。

**メモ:** `responseXML` という名前はこのプロパティの歴史の遺物です。これは HTML および XML の両方で動作します。

ふつう、レスポンスは "`text/xml`" として解釈されます。 `responseType` が "`document`" に設定され、リクエストが非同期に行われた場合、レスポンスは代わりに "`text/html`" として解釈されます。他の型のデータでは、 `data:` の URL の場合と同様、 `responseXML` は `null` になります。

サーバーが `Content-Type` を "`text/xml`" とも "`application/xml`" とも指定しなかった場合、 `XMLHttpRequest.overrideMimeType()` を使用して強制的に XML として解釈させることができます。

このプロパティはワーカーでは使用できません。

### 値

`XMLHttpRequest` を用いて受け取った XML または HTML を解釈した `Document`、またはデータを受け取っていなかったり、データが XML/HTML でな買ったりした場合は `null`

### 例外

`InvalidStateError` `DOMException`

`responseType` が "`document`" でも空文字列でもない。

例
-


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

// responseType を指定する場合は、空文字列または "document" でなければならない
xhr.responseType = "document";

// レスポンスを XML として解釈するよう強制する
xhr.overrideMimeType("text/xml");

xhr.onload = () => {
  if (xhr.readyState === xhr.DONE && xhr.status === 200) {
    console.log(xhr.response, xhr.responseXML);
  }
};

xhr.send();
```

仕様書
---

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

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

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

関連情報
----

* `XMLHttpRequest`
* `XMLHttpRequest.response`
* `XMLHttpRequest.responseType`
* XML の解釈とシリアライズ
* XML を解釈して DOM ツリーに格納: `DOMParser`
* DOM ツリーを XML にシリアライズ: `XMLSerializer` (特に `serializeToString()` メソッド)
XMLHttpRequest: loadstart イベント
==============================

**`loadstart`** イベントは、リクエストがデータを読み込み始めたときに発行されます。

構文
--

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


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

onloadstart = (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-loadstart |
| XMLHttpRequest Standard # handler-xhr-onloadstart |

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

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

関連情報
----

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

**`XMLHttpRequest.statusText`** は読み取り専用のプロパティで、文字列で HTTP サーバーから返されるステータスメッセージを示します。 `XMLHTTPRequest.status` が数値のステータスコードを示すのとは異なり、このプロパティはレスポンスステータスの*テキスト*を、 "OK" や "Not Found" のように示します。リクエストの `readyState` が `UNSENT` または `OPENED` の状態であった場合、 `statusText` の値は空文字列になります。

サーバーが明示的にステータスのテキストを指定しなかった場合、 `statusText` は既定値 "OK" と見なされます。

**メモ:** HTTP/2 コネクションのレスポンスでは、常に空文字列になります。これは HTTP/2 がステータステキストに対応していないからです。

値
-

文字列です。

例
-


```js
const xhr = new XMLHttpRequest();
console.log("0 UNSENT", xhr.statusText);

xhr.open("GET", "/server", true);
console.log("1 OPENED", xhr.statusText);

xhr.onprogress = () => {
  console.log("3 LOADING", xhr.statusText);
};

xhr.onload = () => {
  console.log("4 DONE", xhr.statusText);
};

xhr.send(null);

/\*\*
 \* 以下のように出力されます。
 \*
 \* 0 UNSENT
 \* 1 OPENED
 \* 3 LOADING OK
 \* 4 DONE OK
 \*/
```

仕様書
---

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

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

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

関連情報
----

* HTTP ステータスの一覧
* HTTP
* WHATWG Fetch Living Standard
XMLHttpRequest: XMLHttpRequest() コンストラクター
=========================================

**`XMLHttpRequest()`** コンストラクターは新しい `XMLHttpRequest` を生成します。

構文
--


```js
new XMLHttpRequest()
```

### 引数

なし。

### 返値

新しい `XMLHttpRequest` オブジェクト。このオブジェクトは `send()` を呼び出してサーバーにリクエストを送る前に、少なくとも `open()` を呼び出して初期化をしなければなりません。

標準外の Firefox の構文
----------------

Firefox 16 ではコンストラクターに標準外の引数を追加して、匿名モードを有効にできるようにしました（Firefox バグ 692677 を参照）。 `mozAnon` フラグを `true` に設定することで、効率的に旧バージョンの XMLHttpRequest 仕様書で記述されていた `AnonXMLHttpRequest()` コンストラクターに似せることができます。


```js
const request = new XMLHttpRequest(paramsDictionary);
```

### 引数（標準外）

`objParameters`

設定できるフラグが2つあります。

`mozAnon`

論理型: このフラグを `true` に設定すると、ブラウザーがリソースを読み込むときにオリジンとユーザー資格情報を示しません。重要なことは、つまり明示的に setRequestHeader を使用して追加しない限り、クッキーが送信されないということです。


仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-xmlhttprequest |

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

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

関連情報
----

* XMLHttpRequest の使用
* XMLHttpRequest における HTML の扱い
XMLHttpRequest: mozAnon プロパティ
=============================

**`XMLHttpRequest.mozAnon`** は論理値です。 true の場合、リクエストは Cookie や認証ヘッダーなしで送信されます。
XMLHttpRequest: overrideMimeType() メソッド
=======================================

`XMLHttpRequest` の **`overrideMimeType()`** メソッドは、リクエストで転送されるデータを解釈するときに、 サーバーが提供されたもの以外の MIME タイプを代わりに使用するように指定します。

これは例えば、サーバーがの報告に関わらず、ストリームを `"text/xml"` として扱い、解釈するよう強制するために使われるかもしれません。このメソッドは `send()` を呼ぶ前に呼び出す必要があります。

構文
--


```js
overrideMimeType(mimeType)
```

### 引数

`mimeType`

文字列で、サーバーが指定した MIME タイプの代わりに使用する MIME タイプを指定します。サーバーがタイプを指定しなかった場合、 `XMLHttpRequest` は `"text/xml"` と仮定されます。

### 返値

なし (`undefined`)。

例
-

この例では、 MIME タイプとして `"text/plain"` を指定し、受信するデータに対してサーバーが指定するタイプを上書きしています。

**メモ:** サーバーが `Content-Type` ヘッダを提供ていない場合、 `XMLHttpRequest` は MIME タイプが `"text/xml"` であると見なします。もし、内容が妥当な XML でなければ、"XML Parsing Error: not well-formed" というエラーが発生します。これを避けるには、 `overrideMimeType()` を呼び出して別のタイプを指定してください。


```js
// 受信したデータをプレーンテキストとして解釈

req = new XMLHttpRequest();
req.overrideMimeType("text/plain");
req.addEventListener("load", callback, false);
req.open("get", url);
req.send();
```

仕様書
---

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

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

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

関連情報
----

* XMLHttpRequest の使用
* `XMLHttpRequest.responseType`
XMLHttpRequest: responseURL プロパティ
=================================

**`XMLHttpRequest.responseURL`** プロパティは読み取り専用で、レスポンスのシリアライズされた URL を返します。 URL が `null` の場合は、空文字を返します。 URL に存在する URL フラグメントはすべて取り除かれます。 `responseURL` の値は、任意のリダイレクト後に得られる最後の URL になります。

例
-


```js
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/test", true);
xhr.onload = () => {
  console.log(xhr.responseURL); // http://example.com/test
};
xhr.send(null);
```

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XMLHttpRequest: loadend イベント
============================

**`loadend`** イベントは、リクエストが完了したときに、成功した場合（`load` の後）、成功しなかった場合（`abort` または `error` の後）のどちらでも発行されます。

構文
--

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


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

onloadend = (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-loadend |
| XMLHttpRequest Standard # handler-xhr-onloadend |

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

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

関連情報
----

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

**`XMLHttpRequest.status`** プロパティは読み取り専用で、 `XMLHttpRequest` のレスポンスにおける数値の HTTP ステータスコードを返します。

リクエストが完了する前は、 `status` の値は 0 になります。 `XMLHttpRequest` がエラーになった場合も、ブラウザーはステータスとして 0 を返します。

値
-

数値です。

例
-


```js
const xhr = new XMLHttpRequest();
console.log("UNSENT: ", xhr.status);

xhr.open("GET", "/server");
console.log("OPENED: ", xhr.status);

xhr.onprogress = () => {
  console.log("LOADING: ", xhr.status);
};

xhr.onload = () => {
  console.log("DONE: ", xhr.status);
};

xhr.send();

/\*\*
 \* 出力結果は以下の通り。
 \*
 \* UNSENT: 0
 \* OPENED: 0
 \* LOADING: 200
 \* DONE: 200
 \*/
```

仕様書
---

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

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

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

関連情報
----

* HTTP ステータスの一覧
* HTTP