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
|
---
title: XMLHttpRequest
slug: Web/API/XMLHttpRequest
translation_of: Web/API/XMLHttpRequest
---
<div>{{APIRef("XMLHttpRequest") }}</div>
<p><span class="seoSummary"><font>ใช้วัตถุ (XHR) เพื่อโต้ตอบกับเซิร์ฟเวอร์ คุณสามารถดึงข้อมูลจาก URL โดยไม่ต้องทำการฟื้นฟูเต็มหน้า เว็บเพจการปรับปรุงเพียงบางส่วนของหน้าโดยไม่กระทบกับสิ่งที่ผู้ใช้จะทำได้</font><code>XMLHttpRequest</code></span> <code>XMLHttpRequest</code><font> ใช้มากใน {{Glossary("AJAX") }} เขียนโปรแกรม</font></p>
<p>{{InheritanceDiagram (650, 150) }}</p>
<p><font>แม้จะชื่อ สามารถใช้ในการดึงข้อมูลทุกประเภทของข้อมูล XML ไม่เพียง</font><code>XMLHttpRequest</code></p>
<p>ถ้าจำเป็นต้องเกี่ยวข้องกับการได้รับข้อมูลเหตุการณ์หรือข้อความจากเซิร์ฟเวอร์สื่อสารของคุณ ลองใช้<a href="/en-US/docs/Web/API/Server-sent_events">กิจกรรมเซิร์ฟเวอร์ส่ง</a>ผ่านอินเทอร์เฟซ {{domxref("EventSource") }} สำหรับเพล็กซ์การสื่อสาร<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>อาจเป็นทางเลือกที่ดี</p>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
<dd>The constructor initializes an XMLHttpRequest. It must be called before any other method calls.</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p><em>This interface also inherits properties of {{domxref("XMLHttpRequestEventTarget")}} and of {{domxref("EventTarget")}}.</em></p>
<dl>
<dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
<dd><font>An {{domxref("EventHandler")}} that is called whenever the attribute changes.</font><code>readyState</code></dd>
<dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
<dd><font>Returns an , the state of the request.</font><code>unsigned short</code></dd>
<dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
<dd>Returns an {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript object, or a {{domxref("DOMString")}}, depending on the value of {{domxref("XMLHttpRequest.responseType")}}, that contains the response entity body.</dd>
<dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
<dd><font>Returns a {{domxref("DOMString")}} that contains the response to the request as text, or if the request was unsuccessful or has not yet been sent.</font><code>null</code></dd>
<dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
<dd>Is an enumerated value that defines the response type.</dd>
<dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
<dd>Returns the serialized URL of the response or the empty string if the URL is null.</dd>
<dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
<dd><font>Returns a {{domxref("Document")}} containing the response to the request, or if the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML. Not available in workers.</font><code>null</code></dd>
<dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
<dd><font>Returns an with the status of the response of the request.</font><code>unsigned short</code></dd>
<dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt>
<dd><font>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 ("", for example).</font><code>200 OK</code></dd>
</dl>
<div class="note">
<p><strong>Note:</strong> According to the HTTP/2 specification (<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">Response Pseudo-Header Fields</a>), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.</p>
</div>
<dl>
<dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
<dd><font>Is an representing the number of milliseconds a request can take before automatically being terminated.</font><code>unsigned long</code></dd>
<dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
<dd>Is an {{domxref("EventHandler")}} that is called whenever the request times out. {{gecko_minversion_inline("12.0")}}</dd>
<dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
<dd>Is an {{domxref("XMLHttpRequestUpload")}}, representing the upload process.</dd>
<dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
<dd><font>Is a {{domxref("Boolean")}} that indicates whether or not cross-site requests should be made using credentials such as cookies or authorization headers.</font><code>Access-Control</code></dd>
</dl>
<h3 id="Non-standard_properties">Non-standard properties</h3>
<dl>
<dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
<dd>Is a {{Interface("nsIChannel")}}. The channel used by the object when performing the request.</dd>
<dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
<dd>Is a boolean. If true, the request will be sent without cookie and authentication headers.</dd>
<dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
<dd>Is a boolean. If true, the same origin policy will not be enforced on the request.</dd>
<dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
<dd>Is a boolean. It indicates whether or not the object represents a background service request.</dd>
<dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
<dd>{{jsxref("ArrayBuffer")}}. The response to the request, as a JavaScript typed array.</dd>
<dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
<dd><font><strong>This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22.</strong> Please use <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, or from progress events instead.</font><code>responseText</code></dd>
</dl>
<h3 id="Event_handlers">Event handlers</h3>
<p><code>onreadystatechange</code><font> as a property of the instance is supported in all browsers.</font><code>XMLHttpRequest</code></p>
<p><font>Since then, a number of additional event handlers have been implemented in various browsers (, , , etc.). See <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</font><code>onload</code><code>onerror</code><code>onprogress</code></p>
<p><font>More recent browsers, including Firefox, also support listening to the events via standard {{domxref("EventTarget.addEventListener", "addEventListener()")}} APIs in addition to setting properties to a handler function.</font><code>XMLHttpRequest</code><code>on*</code></p>
<h2 id="Methods">Methods</h2>
<dl>
<dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
<dd>Aborts the request if it has already been sent.</dd>
<dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
<dd><font>Returns all the response headers, separated by {{Glossary("CRLF")}}, as a string, or if no response has been received.</font><code>null</code></dd>
<dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
<dd><font>Returns the string containing the text of the specified header, or if either the response has not yet been received or the header doesn't exist in the response.</font><code>null</code></dd>
<dt>{{domxref("XMLHttpRequest.open()")}}</dt>
<dd>Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> instead.</dd>
<dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
<dd>Overrides the MIME type returned by the server.</dd>
<dt>{{domxref("XMLHttpRequest.send()")}}</dt>
<dd>Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.</dd>
<dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
<dd><font>Sets the value of an HTTP request header. You must call after <a href="#open"><code>open()</code></a>, but before .</font><code>setRequestHeader()</code><code>send()</code></dd>
</dl>
<h3 id="Non-standard_methods">Non-standard methods</h3>
<dl>
<dt>{{domxref("XMLHttpRequest.init()")}}</dt>
<dd>Initializes the object for use from C++ code.</dd>
</dl>
<div class="warning"><strong>Warning:</strong> This method must <em>not</em> be called from JavaScript.</div>
<dl>
<dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
<dd><font>Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> instead. See the documentation for .</font><code>open()</code></dd>
<dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
<dd><font>A variant of the method that sends binary data.</font><code>send()</code></dd>
</dl>
<h2 id="Events">Events</h2>
<dl>
<dt>{{domxref("XMLHttpRequest/abort_event", "abort")}}</dt>
<dd>Fired when a request has been aborted, for example because the program called {{domxref("XMLHttpRequest.abort()")}}.<br>
Also available via the {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} property.</dd>
<dt>{{domxref("XMLHttpRequest/error_event", "error")}}</dt>
<dd>Fired when the request encountered an error.<br>
Also available via the {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} property.</dd>
<dt>{{domxref("XMLHttpRequest/load_event", "load")}}</dt>
<dd>Fired when an {{domxref("XMLHttpRequest")}} transaction completes successfully.<br>
Also available via the {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} property.</dd>
<dt>{{domxref("XMLHttpRequest/loadend_event", "loadend")}}</dt>
<dd>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")}}).<br>
Also available via the {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} property.</dd>
<dt>{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}</dt>
<dd>Fired when a request has started to load data.<br>
Also available via the {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} property.</dd>
<dt>{{domxref("XMLHttpRequest/progress_event", "progress")}}</dt>
<dd>Fired periodically when a request receives more data.<br>
Also available via the {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} property.</dd>
<dt>{{domxref("XMLHttpRequest/timeout_event", "timeout")}}</dt>
<dd>Fired when progress is terminated due to preset time expiring.<br>
Also available via the {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} property.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('XMLHttpRequest')}}</td>
<td>{{Spec2('XMLHttpRequest')}}</td>
<td>Live standard, latest version</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>{{Compat("api.XMLHttpRequest")}}</div>
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("XMLSerializer")}}: Serializing a DOM tree into XML</li>
<li><font>MDN tutorials covering :</font><code>XMLHttpRequest</code>
<ul>
<li><a href="/en-US/docs/AJAX/Getting_Started">Ajax — Getting Started</a></li>
<li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
<li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</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>
</ul>
|
