1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
|
---
title: XMLHttpRequest
slug: Web/API/XMLHttpRequest
tags:
- AJAX
- API
- Communication
- HTTP
- Interface
- Reference
- Web
- XHR
- XMLHttpRequest
translation_of: Web/API/XMLHttpRequest
---
<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div>
<p><span class="seoSummary"><code>XMLHttpRequest</code> (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。</span> <code>XMLHttpRequest</code> は {{Glossary("AJAX")}} プログラミングで頻繁に使用されます。</p>
<p>{{InheritanceDiagram(650, 150)}}</p>
<p><code>XMLHttpRequest</code> という名前ではあるものの、 XML だけでなくあらゆる種類のデータを受け取るために使用することができます。</p>
<p>通信においてサーバーからのイベントデータやメッセージデータの受信を含む必要があるのであれば、 <a href="/ja/docs/Web/API/Server-sent_events">Server-sent event</a> の {{domxref("EventSource")}} インターフェイスを使用することも検討してください。全二重の通信では、 <a href="/ja/docs/Web/API/WebSockets_API">WebSocket</a> の方が良いかもしれません。</p>
<h2 id="Constructor" name="Constructor">コンストラクター</h2>
<dl>
<dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
<dd>XMLHttpRequest を初期化するコンストラクターです。これは、他のメソッドを呼び出す前に呼び出さなければなりません。</dd>
</dl>
<h2 id="Properties" name="Properties">プロパティ</h2>
<p><em>このインターフェイスは、 {{domxref("XMLHttpRequestEventTarget")}} および {{domxref("EventTarget")}} のプロパティを継承します。</em></p>
<dl>
<dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
<dd>{{domxref("EventHandler")}} で、これは <code>readyState</code> 属性が変化する度に呼び出されます。</dd>
<dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
<dd>リクエストの状態を <code>unsigned short</code> で返します。</dd>
<dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
<dd>リクエストのエンティティ本文を含む {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript オブジェクト, {{domxref("DOMString")}} の何れかを、 {{domxref("XMLHttpRequest.responseType")}} の値に応じて返します。</dd>
<dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
<dd>リクエストに対するレスポンスがテキスト形式で入った {{domxref("DOMString")}} を返すか、リクエストが失敗した場合や、まだ送信されていない場合は <code>null</code> を返します。</dd>
<dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
<dd>レスポンス型を定義する、列挙型の値です。</dd>
<dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
<dd>レスポンスのシリアライズされた URL、または URL が null であれば空文字列を返します。</dd>
<dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
<dd>リクエストに対するレスポンスが入った {{domxref("Document")}} を返すか、またはリクエストが成功しなかった場合、まだ送信されていない場合、 XML または HTML として解釈できなかった場合は <code>null</code> を返します。</dd>
<dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
<dd>リクエストに対するレスポンスのステータスを <code>unsigned short</code> で返します。</dd>
<dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt>
<dd>HTTP サーバーから返ってきたレスポンス文字列が入った {{domxref("DOMString")}} を返します。 {{domxref("XMLHTTPRequest.status")}} とは異なり、("<code>200 OK</code>" のように) レスポンスメッセージの完全な文が含まれています。
<div class="note">
<p><strong>注:</strong> HTTP/2 仕様書 (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">レスポンス擬似ヘッダーフィールド</a>) によれば、 HTTP/2 では、 HTTP/1.1 のステータス行に含まれていたバージョンや原因の文を伝える方法が定義されていません。</p>
</div>
</dd>
<dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
<dd>リクエストを自動的に終了できるようになるまでの時間をミリ秒単位で表す、 <code>unsigned long</code> 型の値です。</dd>
<dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
<dd>リクエストがタイムアウトする都度呼び出される {{domxref("EventHandler")}}。{{gecko_minversion_inline("12.0")}}</dd>
<dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
<dd>アップロードプロセスを表す {{domxref("XMLHttpRequestUpload")}} です。</dd>
<dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
<dd>{{domxref("Boolean")}} で、サイト間の <code>Access-Control</code> リクエストでクッキーや認証ヘッダーなどの資格情報を使用するかどうかを示します。</dd>
</dl>
<h3 id="Non-standard_properties" name="Non-standard_properties">標準外のプロパティ</h3>
<dl>
<dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
<dd>{{Interface("nsIChannel")}} です。リクエストの実行の際にオブジェクトによって使われるチャンネルです。</dd>
<dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
<dd>boolean です。 true の場合、リクエストは cookie や認証ヘッダを伴わずに送信します。</dd>
<dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
<dd>boolean です。 true の場合、リクエストで同一オリジンポリシーは適用されません。</dd>
<dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
<dd>boolean です。オブジェクトがバックグラウンドサービスのリクエストであるかどうかを示します。</dd>
<dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
<dd>{{jsxref("ArrayBuffer")}} です。リクエストに対する、JavaScript typed array 形式でのレスポンスです。</dd>
<dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
<dd><strong>これは Gecko 独自の機能であり、 Firefox/Gecko 22 で削除されました。</strong>代わりに <a href="/ja/docs/Web/API/Server-sent_events">Server-Sent Event</a>、<a href="/ja/docs/Web/API/WebSockets_API">Web Socket</a>、または progress イベントの <code>responseText</code> を使用してください。</dd>
</dl>
<h3 id="Event_handlers" name="Event_handlers">イベントハンドラー</h3>
<p><code>onreadystatechange</code> は <code>XMLHttpRequest</code> のインスタンスのプロパティとしてすべてのブラウザーが対応しています。</p>
<p>それ以来、数多くの追加のイベントハンドラーが様々なブラウザーに実装されてきています (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, など)。 <a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a>を参照してください。</p>
<p>Firefox を含め、より新しいブラウザーでは、 <code>XMLHttpRequest</code> のイベントを <code>on*</code> プロパティをハンドラー関数に設定する方法に加えて、標準の {{domxref("EventTarget.addEventListener", "addEventListener()")}} API で待ち受けすることにも対応しています。</p>
<h2 id="Methods" name="Methods">メソッド</h2>
<dl>
<dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
<dd>リクエストがすでに送信されている場合、リクエストを中止します。</dd>
<dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
<dd>{{Glossary("CRLF")}} で区切られた文字列として、すべてのレスポンスヘッダを返します。レスポンスを何も受け取らなかった場合は <code>null</code> を返します。</dd>
<dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
<dd>指定したヘッダ文を含む文字列を返します。レスポンスを受信していない、またはレスポンス中に指定したヘッダが存在しない場合は <code>null</code> を返します。</dd>
<dt>{{domxref("XMLHttpRequest.open()")}}</dt>
<dd>リクエストを初期化します。このメソッドは JavaScript から使用するようにしてください。ネイティブコードからの初期化には、代わりに <a class="internal" href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> を使用するようにしてください。</dd>
<dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
<dd>サーバーから返ってくる MIME タイプを上書きします。</dd>
<dt>{{domxref("XMLHttpRequest.send()")}}</dt>
<dd>リクエストを送信します。</dd>
<dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
<dd>HTTP リクエストヘッダーの値を設定します。 <code>setRequestHeader()</code> は <a href="#open"><code>open()</code></a> の後、および <code>send()</code> の前に呼び出さなくてはいけません。</dd>
</dl>
<h3 id="Non-standard_methods" name="Non-standard_methods">標準外のメソッド</h3>
<dl>
<dt>{{domxref("XMLHttpRequest.init()")}}</dt>
<dd>C++ コードから使用するために、オブジェクトを初期化します。
<div class="warning"><strong>警告:</strong> JavaScript からこのメソッドを<em>呼び出してはいけません</em>。</div>
</dd>
<dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
<dd>リクエストを初期化します。このメソッドはネイティブコードから使用するためのものです。 JavaScript コードからの初期化には、代わりに <a class="internal" href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> を使用してください。 <code>open()</code> の項目を参照してください。</dd>
<dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
<dd>バイナリデータを送る、<code>send()</code> メソッドの亜種です。</dd>
</dl>
<h2 id="Events" name="Events">イベント</h2>
<dl>
<dt>{{domxref("XMLHttpRequest/abort_event", "abort")}}</dt>
<dd>例えばプログラムが {{domxref("XMLHttpRequest.abort()")}} を呼び出した時など、リクエストが中断されたときに発生します。<br>
{{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} プロパティを通して利用することもできます。</dd>
<dt>{{domxref("XMLHttpRequest/error_event", "error")}}</dt>
<dd>リクエストでエラーが発生したときに発生します。<br>
{{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} プロパティを通して利用することもできます。</dd>
<dt>{{domxref("XMLHttpRequest/load_event", "load")}}</dt>
<dd>{{domxref("XMLHttpRequest")}} のトランザクションが成功裏に完了したときに発生します。<br>
{{domxref("XMLHttpRequestEventTarget/onload", "onload")}} プロパティを通して利用することもできます。</dd>
<dt>{{domxref("XMLHttpRequest/loadend_event", "loadend")}}</dt>
<dd>リクエストが完了したときに、成功した場合 ({{domxref("XMLHttpRequest/load_event", "load")}} の後)、成功しなかった場合 ({{domxref("XMLHttpRequest/abort_event", "abort")}} または {{domxref("XMLHttpRequest/error_event", "error")}} の後) のどちらでも発生します。<br>
{{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} プロパティを通して利用することもできます。</dd>
<dt>{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}</dt>
<dd>リクエストがデータを読み込み始めたときに発生します。<br>
{{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} プロパティを通して利用することもできます。</dd>
<dt>{{domxref("XMLHttpRequest/progress_event", "progress")}}</dt>
<dd>リクエストがもっとデータを受信した際に定期的に発生します。<br>
{{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} プロパティを通して利用することもできます。</dd>
<dt>{{domxref("XMLHttpRequest/timeout_event", "timeout")}}</dt>
<dd>プリセット時間が過ぎたために進行が終了したときに発生します。<br>
{{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} プロパティを通して利用することもできます。</dd>
</dl>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('XMLHttpRequest')}}</td>
<td>{{Spec2('XMLHttpRequest')}}</td>
<td>Live standard 最新版</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<div>{{Compat("api.XMLHttpRequest")}}</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{domxref("XMLSerializer")}}: DOM ツリーの XML へのシリアライズ</li>
<li><code>XMLHttpRequest</code> に関連する MDN の記事
<ul>
<li><a href="/ja/docs/AJAX/Getting_Started">Ajax — 始めましょう</a></li>
<li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li>
<li><a href="/ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest における HTML の扱い</a></li>
<li><a href="/ja/docs/Web/API/Fetch_API" title="Fetch API">Fetch API</a></li>
</ul>
</li>
<li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li>
<li>Feature-Policy のディレクティブ {{httpheader("Feature-Policy/sync-xhr", "sync-xhr")}}</li>
</ul>
|
