diff options
Diffstat (limited to 'files/de/web/api/xmlhttprequest')
| -rw-r--r-- | files/de/web/api/xmlhttprequest/index.html | 710 | ||||
| -rw-r--r-- | files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html | 789 |
2 files changed, 1499 insertions, 0 deletions
diff --git a/files/de/web/api/xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..913acfb17a --- /dev/null +++ b/files/de/web/api/xmlhttprequest/index.html @@ -0,0 +1,710 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code>XMLHttpRequest</code> ist ein <a href="/JavaScript" title="JavaScript">JavaScript</a> Objekt, das von Microsoft entwickelt und von Mozilla, Apple, und Google übernommen wurde. Es wird derzeit <a href="http://www.w3.org/TR/XMLHttpRequest/" title="http://www.w3.org/TR/XMLHttpRequest/">im W3C standardisiert</a>. Es bietet einen einfachen Weg, Daten von einem URL zu erhalten. Trotz seines Namens kann man mit <code>XMLHttpRequest</code> jede Art von Daten laden, nicht nur XML, und es unterstützt auch andere Protokolle als <a href="/en-US/docs/HTTP" title="HTTP">HTTP</a> (inklusive <code>file</code> und <code>ftp</code>).</p> + +<p>Eine Instanz von <code>XMLHttpRequest</code> erzeugt man ganz einfach so:</p> + +<pre>var myRequest = new XMLHttpRequest(); +</pre> + +<p>Für Näheres zur Verwendung von <code>XMLHttpRequest</code>, siehe <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a>.</p> + +<h2 id="Übersicht_Methoden">Übersicht: Methoden</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code><a href="#XMLHttpRequest()" title="DOM/XMLHttpRequest#XMLHttpRequest()">XMLHttpRequest</a>(JSObject objParameters);</code></td> + </tr> + <tr> + <td><code>void <a href="#abort()" title="DOM/XMLHttpRequest#abort()">abort</a>();</code></td> + </tr> + <tr> + <td><code>DOMString <a href="#getAllResponseHeaders()" title="DOM/XMLHttpRequest#getAllResponseHeaders()">getAllResponseHeaders</a>();</code></td> + </tr> + <tr> + <td><code>DOMString? <a href="#getResponseHeader()" title="DOM/XMLHttpRequest#getResponseHeader()">getResponseHeader</a>(DOMString header);</code></td> + </tr> + <tr> + <td><code>void <a href="#open()" title="DOM/XMLHttpRequest#open()">open</a>(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);</code></td> + </tr> + <tr> + <td><code>void <a href="#overrideMimeType()" title="DOM/XMLHttpRequest#overrideMimeType()">overrideMimeType</a>(DOMString mime);</code></td> + </tr> + <tr> + <td><code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>();</code><br> + <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(ArrayBuffer data);</code><br> + <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(Blob data);</code><br> + <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(Document data);</code><br> + <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(DOMString? data);</code><br> + <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(FormData data);</code></td> + </tr> + <tr> + <td><code>void <a href="#setRequestHeader()" title="DOM/XMLHttpRequest#setRequestHeader()">setRequestHeader</a>(DOMString header, DOMString value);</code></td> + </tr> + <tr> + <th>Nicht-Standard Methoden</th> + </tr> + <tr> + <td><code>[noscript] void <a href="#init()" title="DOM/XMLHttpRequest#init()">init</a>(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);</code></td> + </tr> + <tr> + <td><code>[noscript] void <a href="#openRequest()" title="DOM/XMLHttpRequest#openRequest()">openRequest</a>(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password); </code></td> + </tr> + <tr> + <td><code>void <a href="#sendAsBinary()" title="DOM/XMLHttpRequest#sendAsBinary()">sendAsBinary</a>(in DOMString body);</code></td> + </tr> + </tbody> +</table> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Attribut</th> + <th>Typ</th> + <th>Beschreibung</th> + </tr> + <tr id="onreadystatechange"> + <td> + <p><code>onreadystatechange</code></p> + </td> + <td><code>Function?</code></td> + <td> + <p>Ein JavaScript function Objekt, das bei jedem Wechsel des <code>readyState</code> Attributs aufgerufen wird. Das Callback wird aus dem Thread der Benutzerschnittstelle aufgerufen.</p> + + <div class="warning"><strong>Warnung:</strong> Dies <em>sollte</em> nicht mit synchronen Anfragen und <em>darf</em> nicht aus nativem Code heraus verwendet werden.</div> + </td> + </tr> + <tr id="readyState"> + <td><code>readyState</code></td> + <td><code>unsigned short</code></td> + <td> + <p>Der Status der Anfrage:</p> + + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Wert</td> + <td class="header">Status</td> + <td class="header">Beschreibung</td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>UNSENT</code></td> + <td><code>open()</code>wurde noch nicht aufgerufen.</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>OPENED</code></td> + <td><code>send()</code>wurde noch nicht aufgerufen.</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>HEADERS_RECEIVED</code></td> + <td><code>send()</code> wurde aufgerufen, und Headers sowie Status sind verfügbar.</td> + </tr> + <tr> + <td><code>3</code></td> + <td><code>LOADING</code></td> + <td>Download ist im Gange; <code>responseText</code> enthält bereits unvollständige Daten.</td> + </tr> + <tr> + <td><code>4</code></td> + <td><code>DONE</code></td> + <td>Der Vorgang ist abgeschlossen.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr id="response"> + <td><code>response</code></td> + <td>variiert</td> + <td> + <p>Der Entitätskörper der Antwort (response entity body) gemäss <code><a href="#responseType">responseType</a></code>, als ein <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>, <a href="/en-US/docs/DOM/Blob" title="DOM/Blob"><code>Blob</code></a>, {{domxref("Document")}}, JavaScript Objekt (für "json"), oder string. Dies ist <code>null</code> falls die Anfrage nicht abgeschlossen ist oder erfolglos war.</p> + </td> + </tr> + <tr id="responseText"> + <td><code>responseText</code> {{ReadOnlyInline}}</td> + <td><code>DOMString</code></td> + <td>Die Antwort auf die Anfrage als Text, oder <code>null</code> falls die Anfrage nicht abgeschlossen ist oder erfolglos war.</td> + </tr> + <tr id="responseType"> + <td><code>responseType</code></td> + <td><code>XMLHttpRequestResponseType</code></td> + <td> + <p>Kann gesetzt werden, um den Datentyp der Antwort zu ändern.</p> + + <table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Wert</td> + <td class="header">Datentyp der <code>response</code> Eigenschaft</td> + </tr> + <tr> + <td><code>""</code> (leerer String)</td> + <td>String (Das ist der Default)</td> + </tr> + <tr> + <td><code>"arraybuffer"</code></td> + <td><a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td> + </tr> + <tr> + <td><code>"blob"</code></td> + <td>{{domxref("Blob")}}</td> + </tr> + <tr> + <td><code>"document"</code></td> + <td>{{domxref("Document")}}</td> + </tr> + <tr> + <td><code>"json"</code></td> + <td>JavaScript Objekt, geparsed aus einem JSON String, der vom Server zurückgegeben wird.</td> + </tr> + <tr> + <td><code>"text"</code></td> + <td>String</td> + </tr> + <tr> + <td><code>"moz-blob"</code></td> + <td>Wird von Firefox verwendet, um den Bezug partieller {{domxref("Blob")}} Daten von <code>progress</code> Events zu erlauben. Dadurch kann ein <code>progress</code> Event Handler bereits mit der Verarbeitung von Daten beginnen, während ihr Empfang noch läuft.</td> + </tr> + <tr> + <td><code>"moz-chunked-text"</code></td> + <td> + <p>Ähnlich wie <code>"text"</code>, aber streamt die Daten. Das bedeutet, dass der Wert in <code>response</code> nur während des <code>"progress"</code> Event verfügbar ist und jeweils nur die Daten enthält, die seit dem letzten <code>"progress"</code> Event eingetroffen sind.</p> + + <p>Wenn auf <code>response</code> während eines <code>"progress"</code> Events zugegriffen wird, enthält es einen String mit den Daten. Andernfalls gibt es <code>null</code> zurück.</p> + + <p>Dieser Modus funktioniert derzeit nur in Firefox.</p> + </td> + </tr> + <tr> + <td><code>"moz-chunked-arraybuffer"</code></td> + <td> + <p>Ähnlich wie <code>"arraybuffer"</code>, aber streamt die Daten. Das bedeutet, dass der Wert in <code>response</code> nur während des <code>"progress"</code> Event verfügbar ist und jeweils nur die Daten enthält, die seit dem letzten <code>"progress"</code> Event eingetroffen sind.</p> + + <p>Wenn auf <code>response</code> während eines <code>"progress"</code> Events zugegriffen wird, enthält es einen <code>ArrayBuffer</code> mit den Daten. Andernfalls gibt es <code>null</code> zurück.</p> + + <p>Dieser Modus funktioniert derzeit nur in Firefox.</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Anmerkung:</strong> Ab Gecko 11.0 sowie WebKit build 528 kann man in diesen Browsern das <code>responseType</code> Attribut nicht mehr für synchrone Anfragen benutzen. Der Versuch löst einen <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> Fehler aus. Diese Änderung wurde dem W3C zur Standardisierung vorgeschlagen.</div> + </td> + </tr> + <tr id="responseXML"> + <td><code>responseXML</code> {{ReadOnlyInline}}</td> + <td><code>Document?</code></td> + <td> + <p>Die Antwort auf die Anfrage als DOM <code><a href="/en-US/docs/DOM/document" title="DOM/Document">Document</a></code> Objekt, oder <code>null</code> falls die Anfrage erfolglos war, noch nicht gesendet wurde, oder nicht als XML oder HTML geparst werden kann. Die Antwort wird geparst, als wäre sie ein <code>text/xml</code> Stream. Wenn der <code>responseType</code> auf <code>"document"</code> gesetzt wurde und die Anfrage asynchron gemacht wurde, wird die Antwort geparst, als wäre sie ein <code>text/html</code> Stream.</p> + + <div class="note"><strong>Anmerkung:</strong> Falls der Server nicht den <code>text/xml</code> Inhaltstyp-Header auf die Antwort anwendet, kann man<code> overrideMimeType()</code> verwenden, um <code>XMLHttpRequest</code> zu zwingen, sie dennoch als XML zu parsen.</div> + </td> + </tr> + <tr id="status"> + <td><code>status</code> {{ReadOnlyInline}}</td> + <td><code>unsigned short</code></td> + <td>Der Status der Antwort auf die Anfrage. Das ist der HTTP Ergebnis-Code (<code>status</code> ist z.B. 200 für eine erfolgreiche Anfrage).</td> + </tr> + <tr id="statusText"> + <td><code>statusText</code> {{ReadOnlyInline}}</td> + <td><code>DOMString</code></td> + <td>Der Antwort-String, der vom HTTP Server zurückgesendet wurde. Im Gegensatz zu <code>status</code> beinhaltet dies den ganzen Text der Antwortnachricht (z.B. "<code>200 OK</code>").</td> + </tr> + <tr id="timeout"> + <td><code>timeout</code></td> + <td><code>unsigned long</code></td> + <td> + <p>Die Anzahl Millisekunden, die eine Anfrage dauern darf, bevor sie automatisch abgebrochen wird. Ein Wert von 0 (das ist die Voreinstellung) bedeutet, dass es kein timeout gibt.</p> + + <div class="note"><strong>Anmerkung:</strong> Für synchrone Anfragen mit einem besitzenden Fenster darf man kein timeout verwenden.</div> + </td> + </tr> + <tr id="upload"> + <td><code>upload</code></td> + <td><code>XMLHttpRequestUpload</code></td> + <td>Das Hochladen kann mitverfolgt werden, indem man einen Event Listener zu <code>upload</code> hinzufügt.</td> + </tr> + <tr id="withCredentials"> + <td><code>withCredentials</code></td> + <td><code>boolean</code></td> + <td> + <p>Zeigt an, ob Site-übergreifende <code>Access-Control</code> Anfragen mit Credentials wie Cookies oder Autorisierungs-Headers durchgeführt werden sollen oder nicht. Die Voreinstellung ist <code>false</code>.</p> + + <div class="note"><strong>Anmerkung:</strong> Anfragen an die ursprüngliche Site sind davon niemals betroffen.</div> + + <div class="note"><strong>Anmerkung:</strong> Ab Gecko 11.0 kann man das <code>withCredentials</code> Attribut nicht mehr für synchrone Anfragen verwenden. Der Versuch löst einen <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> Fehler aus.</div> + </td> + </tr> + </tbody> +</table> + +<h3 id="Nicht-Standard_Eigenschaften">Nicht-Standard Eigenschaften</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Attribut</th> + <th>Typ</th> + <th>Description</th> + </tr> + <tr id="channel"> + <td><code>channel</code> {{ReadOnlyInline}}</td> + <td>{{Interface("nsIChannel")}}</td> + <td>Der Kanal, der vom Objekt zur Durchführung der Anfrage verwendet wurde. Das ist <code>null</code> falls der Kanal noch nicht erzeugt worden ist. Im Falle von mehrteiligen Anfragen ist das der anfängliche Kanal, nicht derjenige der anderen Teile der mehrteiligen Anfrage.<br> + <strong>Zugriff nur mit erhöhten Rechten.</strong></td> + </tr> + <tr id="mozAnon"> + <td><code>mozAnon</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td> + <p>Falls <code>true</code> wird die Anfrage ohne Cookie und Authentisierungs-Headers gesendet.</p> + </td> + </tr> + <tr id="mozSystem"> + <td><code>mozSystem</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td> + <p>Falls <code>true</code> wird die Regel, die nur Anfragen zum gleichen Ursprung erlaubt, für diese Anfrage nicht durchgesetzt.</p> + </td> + </tr> + <tr id="mozBackgroundRequest"> + <td><code>mozBackgroundRequest</code></td> + <td><code>boolean</code></td> + <td> + <p>Zeigt an, ob das Objekt eine Service-Anfrage im Hintergrund darstellt. Falls <code>true</code> wird keine Lastgruppe mit der Anfrage verknüpft, und die Anzeige von Sicherheits-Dialogen wird verhindert. <strong>Zugriff nur mit erhöhten Rechten.</strong></p> + + <p>In Fällen, wo normalerweise ein Sicherheits-Dialog angezeigt würde (wie Autorisierungs- oder Zertifikatsfehler-Benachrichtigungen), schlägt die Anfrage stattdessen einfach fehl.</p> + + <div class="note"><strong>Anmerkung: </strong>Diese Eigenschaft muss vor dem Aufrufen von <code>open()</code> gesetzt werden..</div> + </td> + </tr> + <tr id="mozResponseArrayBuffer"> + <td><code>mozResponseArrayBuffer</code> {{obsolete_inline("6")}} {{ReadOnlyInline}}</td> + <td><a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td> + <td>Die Antwort auf die Anfrage, als typisiertes JavaScript Array. Dies ist <code>NULL</code> falls die Anfrage erfolglos war oder noch nicht gesendet wurde.</td> + </tr> + <tr id="multipart"> + <td><code>multipart</code> {{obsolete_inline("22")}}</td> + <td><code>boolean</code></td> + <td> + <p><strong>Dieses nur in Gecko verfügbare Feature wurde in Firefox/Gecko 22 entfernt.</strong> Bitte verwende stattdessen <a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a> oder <code>responseText</code> aus <code>progress </code>Events.</p> + + <p>Zeigt an, ob als Antwort ein Stream von möglicherweise mehreren XML Dokumenten erwartet wird. Wird dies auf <code>true</code> gesetzt, muss der Inhaltstyp des ersten Teils der Antwort <code>multipart/x-mixed-replace</code> sein, sonst tritt ein Fehler auf. Alle Anfragen müssen asynchron sein.</p> + + <p>Dies ermöglicht die Unterstützung von Server Push; für jedes XML Dokument, das in die Antwort auf diese Anfrage geschrieben wird, wird ein neues XML DOM Dokument erzeugt, und zwischen den Dokumenten wird der <code>onload</code> Handler aufgerufen.</p> + + <div class="note"><strong>Anmerkung:</strong> Wenn dies gesetzt ist, werden <code>onload</code> und andere Event Handler nicht zurückgesetzt, nachdem das erste XML Dokument geladen ist, und der <code>onload</code> Handler wird nach Erhalt jedes Teils der Antwort aufgerufen.</div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Konstruktor">Konstruktor</h2> + +<h3 id="XMLHttpRequest()" name="XMLHttpRequest()">XMLHttpRequest()</h3> + +<p>Der Konstruktor initiiert ein <code>XMLHttpRequest</code> Objekt. Er muss vor allen anderen Methoden aufgerufen werden.</p> + +<p>Gecko/Firefox 16 fügt einen nicht-standard Parameter zum Konstruktor hinzu, der den anonymen Modus einschalten kann (siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677" title="692677 – Relax same-origin XHR restrictions for privileged applications">Bug 692677</a>). Das <code>mozAnon</code> flag auf <code>true</code> zu setzen, hat einen ähnlichen Effekt wie der <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> Konstruktor, der in der XMLHttpRequest Spezifikation beschrieben ist, aber noch in keinem Browser implementiert wurde (Stand September 2012).</p> + +<pre>XMLHttpRequest ( + JSObject objParameters +);</pre> + +<h5 id="Parameter_(nicht-standard)">Parameter (nicht-standard)</h5> + +<dl> + <dt><code>objParameters</code></dt> + <dd>Es gibt zwei Flags, die gesetzt werden können: + <dl> + <dt><code>mozAnon</code></dt> + <dd>Boolean: Wenn dieses Flag auf <code>true</code> gesetzt ist, wird der Browser weder den Ursprung der Anfrage noch <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">Anmeldedaten</a> übermitteln, wenn er Daten anfordert. Das heisst vor allem auch, dass keine Cookies gesendet werden, sofern sie nicht ausdrücklich mit setRequestHeader hinzugefügt wurden.</dd> + <dt><code>mozSystem</code></dt> + <dd>Boolean: Dieses Flag auf <code>true</code> zu setzen, ermöglicht das Herstellen von Cross-Site Verbindungen, ohne dass der Server dem mittels CORS zustimmen muss. <em>Erfodert das Setzen von <code>mozAnon: true</code>. D.h. das kann nicht mit dem Senden von Cookies oder anderen Anmeldeinformationen kombiniert werden. Dies <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677#c68" title="Bug 692677 comment 68">funktioniert nur in privilegierten (reviewed) Apps</a>; es klappt nicht auf beliebigen Webseiten, die in Firefox geladen werden.</em></dd> + </dl> + </dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<h3 id="abort()" name="abort()">abort()</h3> + +<p>Bricht die Anfrage ab, falls sie bereits gesendet wurde.</p> + +<h3 id="getAllResponseHeaders()" name="getAllResponseHeaders()">getAllResponseHeaders()</h3> + +<pre>DOMString getAllResponseHeaders();</pre> + +<p>Liefert alle Antwort-Header als String, oder <code>null</code> falls keine Antwort empfangen wurde.<strong> </strong></p> + +<p><strong>Anmerkung:</strong> Für mehrteilige Anfragen gibt dies die Header des <em>aktuellen </em>Teils der Anfrage zurück, nicht die des ursprünglichen Kanals.</p> + +<h3 id="getResponseHeader()" name="getResponseHeader()">getResponseHeader()</h3> + +<pre>DOMString? getResponseHeader(DOMString <var>header</var>);</pre> + +<p>Liefert den String mit dem Text des angegebenen Headers, oder <code>null</code> falls die Antwort noch nicht empfangen wurde oder der Header in der Antwort nicht existiert.</p> + +<h3 id="open()" name="open()">open()</h3> + +<p>Initialisiert eine Anfrage. Diese Methode ist nur zur Verwendung in JavaScript Code; um eine Anfrage aus nativem Code zu initialisieren, ist stattdessen<code> </code><a href="/en-US/docs/nsIXMLHttpRequest#openRequest()" title="XMLHttpRequest#openRequest()"><code>openRequest()</code></a> zu benutzen.</p> + +<div class="note"><strong>Anmerkung:</strong> Der Aufruf dieser Methode für eine bereits aktive Anfrage (eine, für die <code>open()</code>oder <code>openRequest() </code>schon ausgeführt wurde) ist gleichwertig mit dem Aufruf von <code>abort()</code>.</div> + +<pre>void open( + DOMString <var>method</var>, + DOMString <var>url</var>, + optional boolean <var>async</var>, + optional DOMString <var>user</var>, + optional DOMString <var>password</var> +); +</pre> + +<h6 id="Parameter">Parameter</h6> + +<dl> + <dt><code>method</code></dt> + <dd>Die zu benutzende HTTP Methode, wie "GET", "POST", "PUT", "DELETE", etc. Wird für nicht-HTTP(S) URLs ignoriert.</dd> + <dt><code>url</code></dt> + <dd>Der URL, an den die Anfrage geschickt werden soll.</dd> + <dt><code>async</code></dt> + <dd>Ein optionaler boole'scher Parameter mit Defaultwert <code>true</code>, der angibt, ob die Operation asynchron ausgeführt werden soll. Wenn dieser Wert <code>false</code> ist, kehrt die <code>send()</code>Methode nicht zurück, bis die Antwort vollständig empfangen worden ist. Ist er <code>true</code>, kehrt sie sofort zurück, und die Benachrichtigung über die vollendete Transaktion erfolgt mittels Events. Dies <em>muss</em> <code>true</code> sein falls das <code>multipart</code> Attribut <code>true</code> ist, sonst wird ein Fehler ausgelöst.</dd> + <dt><code>user</code></dt> + <dd>Der optionale Benutzername zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.</dd> + <dt><code>password</code></dt> + <dd>Das optionale Passwort zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.</dd> +</dl> + +<h3 id="overrideMimeType()" name="overrideMimeType()">overrideMimeType()</h3> + +<p>Übergeht den vom Server zurückgegebenen MIME Typ. Dies kann beispielsweise benutzt werden, um zu erzwingen, dass ein Stream als text/xml behandelt und geparst wird, selbst wenn ihn der Server nicht als das meldet. Diese Methode muss vor <code>send()</code> aufgerufen werden.</p> + +<pre>void overrideMimeType(DOMString <var>mimetype</var>);</pre> + +<h3 id="send()" name="send()">send()</h3> + +<p>Sendet die Anfrage. Falls die Anfage asynchron ist (was der Default ist), kehrt diese Methode zurück, sobald die Anfrage gesendet ist. Ist die Anfrage synchron, kehrt diese Methode nicht zurück, bis die Antwort angekommen (oder ein Timeout aufgetreten) ist.</p> + +<div class="note"><strong>Anmerkung:</strong> Jegliche zu setzende Event Handler / Listener müssen vor dem Aufruf von <code>send()</code> gesetzt werden.</div> + +<pre>void send(); +void send(ArrayBuffer <var>data</var>); +void send(Blob <var>data</var>); +void send(Document <var>data</var>); +void send(DOMString? <var>data</var>); +void send(FormData <var>data</var>);</pre> + +<h6 id="Anmerkungen">Anmerkungen</h6> + +<p>Falls <em>data</em> ein <code>Document</code> ist, so wird dieses vor dem Senden serialisiert. Beim Senden eines <code>Document</code> senden Firefox Versionen vor Version 3 die Anfrage immer encodiert als UTF-8; <a href="/en-US/docs/Firefox_3" rel="internal" title="Firefox_3">Firefox 3</a> sendet das <code>Document</code> richtigerweise mit dem angegebenen <code>body.xmlEncoding</code>, oder UTF-8 falls keines angegeben wurde.</p> + +<p>Falls es ein <code>nsIInputStream</code> ist, muss er kompatibel sein mit der <code>setUploadStream()</code>Methode des <code>nsIUploadChannel</code>. In diesem Fall wird die Länge des Inhalts in einem Content-Length Header zur Anfrage hinzugefügt, dessen Wert mit der <code>available()</code>Methode des <code>nsIInputStream</code> ermittelt wird. Jegliche Header, die am Anfang des Streams enthalten sind, werden als Teil des Nachrichtenkörpers behandelt. Der MIME Typ des Streams sollte vor dem Aufruf von <code>send()</code> angegeben werden, indem der Content-Type Header mit der <a href="/en-US/docs/nsIXMLHttpRequest#setRequestHeader()" title="XMLHttpRequest#setRequestHeader()"><code>setRequestHeader()</code></a> Methode gesetzt wird.</p> + +<p>Der beste Weg, um binäre Inhalte zu senden (wie beim Hochladen einer Datei), ist die Verwendung von <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffern</a> oder <a href="/en-US/docs/DOM/Blob" title="DOM/Blob">Blobs</a> in Verbindung mit der <code>send()</code> Methode. Wenn jedoch <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="JavaScript/Reference/Global_Objects/JSON/stringify">stringifizierbare</a> Rohdaten gesendet werden sollen, ist die <a href="#sendAsBinary()" title="DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> Methode zu verwenden.</p> + +<h3 id="setRequestHeader()" name="setRequestHeader()">setRequestHeader()</h3> + +<p>Setzt den Wert eines HTTP Anfrage-Headers. Aufrufe von <code>setRequestHeader()</code> müssen nach <a href="#open"><code>open()</code></a>, aber vor <code>send()</code> erfolgen.</p> + +<pre>void setRequestHeader( + DOMString <var>header</var>, + DOMString <var>value</var> +); +</pre> + +<h6 id="Parameter_2">Parameter</h6> + +<dl> + <dt><code>header</code></dt> + <dd>Der Name des zu setzenden Headers.</dd> + <dt><code>value</code></dt> + <dd>Der Wert des zu setzenden Headers.</dd> +</dl> + +<h3 id="Nicht-Standard_Methoden">Nicht-Standard Methoden</h3> + +<h4 id="init()">init()</h4> + +<p>Initialisiert das Objekt für die Verwendung aus C++ Code.</p> + +<div class="warning"><strong>Warnung:</strong> Diese Methode darf <em>nicht</em> aus JavaScript heraus aufgerufen werden.</div> + +<pre>[noscript] void init( + in nsIPrincipal principal, + in nsIScriptContext scriptContext, + in nsPIDOMWindow ownerWindow +); +</pre> + +<h5 id="Parameter_3">Parameter</h5> + +<dl> + <dt><code>principal</code></dt> + <dd>Das Prinzipal, das für die Anfrage benutzt werden soll; darf nicht <code>null</code> sein.</dd> + <dt><code>scriptContext</code></dt> + <dd>Der Skript-Kontext, der für die Anfrage benutzt werden soll; darf nicht <code>null</code> sein.</dd> + <dt><code>ownerWindow</code></dt> + <dd>Das Fenster, das zu der Anfrage gehört; darf <code>null</code> sein.</dd> +</dl> + +<h4 id="openRequest()">openRequest()</h4> + +<p>Initialisiert eine Anfrage. Diese Methode ist zur Verwendung in nativem Code; um eine Anfrage in JavaScript Code zu initialisieren, ist stattdessen <a href="/en-US/docs/nsIXMLHttpRequest#open()" title="XMLHttpRequest#open()"><code>open()</code></a> zu verwenden. Siehe Dokumentation für <code>open()</code>.</p> + +<h3 id="sendAsBinary()">sendAsBinary()</h3> + +<p>Eine Variante der <code>send()</code> Methode, die binäre Daten schickt.</p> + +<pre>void sendAsBinary( + in DOMString body +); +</pre> + +<p>Diese Methode, zusammen mit der <a href="/en-US/docs/DOM/FileReader#readAsBinaryString()" title="DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString</code></a> Methode der <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a> API, ermöglichen <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">das Lesen und den <strong>Upload</strong> jeglicher Dateitypen</a> und das <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="JavaScript/Reference/Global_Objects/JSON/stringify">Stringifizieren</a> der Rohdaten.</p> + +<h5 id="Parameter_4">Parameter</h5> + +<dl> + <dt><code>body</code></dt> + <dd>Der Körper der Anfrage als DOMstring. Diese Daten werden durch Beschneiden (Entfernen des höherwertigen Bytes jedes Zeichens) in Einzel-Byte-Zeichen umgewandelt.</dd> +</dl> + +<h5 id="sendAsBinary()_polyfill"><code>sendAsBinary()</code> polyfill</h5> + +<p>Da <code>sendAsBinary()</code> ein experimentelles Feature ist, kommt hier <strong>ein Polyfill</strong> für Browser, die <code>sendAsBinary()</code> <em>nicht </em>unterstützen, dafür aber <a href="/en-US/docs/JavaScript/Typed_arrays" title="JavaScript/Typed_arrays">typisierte Arrays</a>.</p> + +<pre class="brush: js">/*\ +|*| +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +|*| +\*/ + +if (!XMLHttpRequest.prototype.sendAsBinary) { + XMLHttpRequest.prototype.sendAsBinary = function (sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* sende als ArrayBufferView...: */ + this.send(ui8Data); + /* ...oder als ArrayBuffer (altmodisch)...: this.send(ui8Data.buffer); */ + }; +}</pre> + +<div class="note"><strong>Anmerkung:</strong> Dieses Polyfill kann mit zwei Datentypen als Argument für <code>send()</code> gebaut werden: einem <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> (<code>ui8Data.buffer</code> – kommentierter Code) oder einer <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a> (<code>ui8Data</code>, das ist ein <a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="JavaScript/Typed_arrays/Uint8Array">typisiertes Array von 8-bit Ganzzahlen ohne Vorzeichen</a> – unkommentierter Code). Wenn man jedoch in Google Chrome versucht, einen <code>ArrayBuffer</code> zu senden, erscheint die folgende Warnmeldung: <code>ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.</code></div> + +<h2 id="Anmerkungen_2">Anmerkungen</h2> + +<ul> + <li class="note">Standardmässig begrenzt Firefox 3 die Anzahl gleichzeitiger <code>XMLHttpRequest</code> Verbindungen pro Server auf 6 (frühere Versionen begrenzen dies auf 2 pro Server). Manche interaktiven Websites können eine <code>XMLHttpRequest</code> Verbindung offen halten, so dass das Öffnen mehrerer Sitzungen auf solchen Sites dazu führen kann, dass der Browser auf eine Art und Weise hängen bleibt, dass das Fenster nicht mehr neu gezeichnet wird und Steuerelemente nicht mehr reagieren. Dieser Wert lässt sich ändern durch Editieren der Voreinstellung <code>network.http.max-persistent-connections-per-server</code> in <code><a class="linkification-ext" href="/about:config" title="Linkification: about:config">about:config</a></code>.</li> + <li class="note">Ab Gecko 7 werden Header, die durch {{manch("setRequestHeader")}} gesetzt wurden, mit der Anfrage mitgeschickt, wenn einer Umleitung gefolgt wird. Zuvor wurden diese Header nicht gesendet.</li> + <li class="note"><code>XMLHttpRequest</code> ist in Gecko implementiert mittels der {{interface("nsIXMLHttpRequest")}}, {{interface("nsIXMLHttpRequestEventTarget")}}, und {{interface("nsIJSXMLHttpRequest")}} Schnittstellen.</li> +</ul> + +<h4 class="note" id="Events">Events</h4> + +<p><code>onreadystatechange</code> als eine Eigenschaft der <code>XMLHttpRequest</code> Instanz wird von allen Browsern unterstützt.</p> + +<p>Seither wurden einige zusätzliche Event Handler in verschiedenen Browsern implementiert (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). Diese werden in Firefox unterstützt. Für Genaueres, siehe {{interface("nsIXMLHttpRequestEventTarget")}} und <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> + +<p>Neuere Browser, inklusive Firefox, unterstützen das 'Horchen' nach <code>XMLHttpRequest </code>Ereignissen mittels der Standard <code><a href="/en-US/docs/DOM/element.addEventListener" title="element.addEventListener">addEventListener</a></code> APIs zusätzlich zum Setzen von <code>on*</code> Eigenschaften auf eine Handler Funktion.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung (XHR1)</td> + <td>1</td> + <td>1.0</td> + <td>5 (via ActiveXObject)<br> + 7 (XMLHttpRequest)</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.2</td> + </tr> + <tr> + <td><code>send(ArrayBuffer)</code></td> + <td>9</td> + <td>9</td> + <td>{{compatUnknown}}</td> + <td>11.60</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>send(Blob)</code></td> + <td>7</td> + <td>3.6</td> + <td>{{compatUnknown}}</td> + <td>12</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>send(FormData)</code></td> + <td>6</td> + <td>4</td> + <td>{{compatUnknown}}</td> + <td>12</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>sendAsBinary(DOMString)</code></td> + <td>{{compatNo}} – benutze <a href="#sendAsBinary%28%29_polyfill" title="sendAsBinary() polyfill">polyfill</a></td> + <td>1.9</td> + <td>{{compatUnknown}}</td> + <td>{{compatUnknown}}</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>response</code></td> + <td>10</td> + <td>6</td> + <td>10</td> + <td>11.60</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>responseType</code> = 'arraybuffer'</td> + <td>10</td> + <td>6</td> + <td>10</td> + <td>11.60</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>responseType</code> = 'blob'</td> + <td>19</td> + <td>6</td> + <td>10</td> + <td>12</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>responseType</code> = 'document'</td> + <td>18</td> + <td>11</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>responseType</code> = 'json'</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Progress Events</td> + <td>7</td> + <td>3.5</td> + <td>10</td> + <td>12</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>withCredentials</code></td> + <td>3</td> + <td>3.5</td> + <td>10</td> + <td>12</td> + <td>4</td> + </tr> + <tr> + <td><code>timeout</code></td> + <td>{{CompatNo}}</td> + <td>12.0</td> + <td>8</td> + <td>{{compatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>responseType</code> = 'moz-blob'</td> + <td>{{CompatNo}}</td> + <td>12.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome für Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundsätzliche Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>0.16</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_Anmerkungen">Gecko Anmerkungen</h3> + +<p>Gecko 11.0 {{geckoRelease("11.0")}} entfernte die Unterstützung für die Verwendung der <code>responseType</code> und <code>withCredentials</code> Attribute bei der Durchführung synchroner Anfragen. Der Versuch löst einen <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> Fehler aus. Diese Änderung wurde dem W3C zur Standardisierung vorgeschlagen.</p> + +<p>Gecko 12.0 {{geckoRelease("12.0")}} und spätere unterstützen die Verwendung von <code>XMLHttpRequest</code> zum Lesen von <a href="/en-US/docs/data_URIs" title="data_URIs"><code>data:</code> URLs</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>MDN Artikel über XMLHttpRequest: + <ul> + <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">AJAX - Getting Started</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="XMLHttpRequest/FormData"><code>FormData</code></a></li> + </ul> + </li> + <li>XMLHttpRequest Referencen von W3C und Browserherstellern: + <ul> + <li><a href="http://www.w3.org/TR/XMLHttpRequest1/">W3C: XMLHttpRequest</a> (base features)</li> + <li><a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">W3C: XMLHttpRequest</a> (latest editor's draft with extensions to the base functionality, formerly XMLHttpRequest Level 2)</li> + <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> + <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li> + </ul> + </li> + <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> + <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks - New Tricks in XMLHttpRequest2</a></li> +</ul> diff --git a/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..f15901a388 --- /dev/null +++ b/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,789 @@ +--- +title: Using XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +<div><font><font>{{APIRef ("XMLHttpRequest")}}</font></font></div> + +<p><span class="seoSummary"><font><font>In diesem Handbuch wird erläutert, wie Sie mit {{domxref ("XMLHttpRequest")}} </font></font><a href="/en-US/docs/Web/HTTP"><font><font>HTTP-</font></font></a><font><font> Anforderungen </font><font>ausgeben </font><font>, um Daten zwischen der Website und einem Server auszutauschen</font></font></span><font><font> . </font><font>Beispiele für häufig vorkommende und unklarere Anwendungsfälle </font></font><code>XMLHttpRequest</code><font><font>sind enthalten.</font></font></p> + +<p><font><font>Um eine HTTP-Anfrage zu senden, erstellen Sie ein </font></font><code>XMLHttpRequest</code><font><font>Objekt, öffnen Sie eine URL und senden Sie die Anfrage. </font><font>Nach Abschluss der Transaktion enthält das Objekt nützliche Informationen wie den Antworttext und den </font></font><a href="/en-US/docs/Web/HTTP/Status"><font><font>HTTP-Status</font></font></a><font><font> des Ergebnisses.</font></font></p> + +<pre class="brush: js notranslate">function reqListener () { + console.log(this.responseText); +} + +var oReq = new XMLHttpRequest(); +oReq.addEventListener("load", reqListener); +oReq.open("GET", "http://www.example.org/example.txt"); +oReq.send();</pre> + +<h2 id="Arten_von_Anfragen"><font><font>Arten von Anfragen</font></font></h2> + +<div class="blockIndicator note"> +<p><font><font>Eine Anforderung über </font></font><code>XMLHttpRequest</code><font><font>kann die Daten auf zwei Arten asynchron oder synchron abrufen. </font><font>Die Art der Anforderung wird durch das optionale </font></font><code>async</code><font><font>Argument (das dritte Argument) bestimmt, das für die Methode {{domxref ("XMLHttpRequest.open ()")}} festgelegt wird. </font><font>Wenn dieses Argument angegeben ist </font></font><code>true</code><font><font>oder nicht, </font></font><code>XMLHttpRequest</code><font><font>wird das asynchron verarbeitet, andernfalls wird der Prozess synchron behandelt. </font><font>Eine ausführliche Diskussion und Demonstration dieser beiden Arten von Anforderungen finden Sie auf der Seite für </font></font><a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests"><font><font>synchrone und asynchrone Anforderungen</font></font></a><font><font> . </font><font>Verwenden Sie keine synchronen Anforderungen außerhalb von Web Workers.</font></font></p> +</div> + +<div class="note"><strong><font><font>Hinweis:</font></font></strong><font><font> Ab Gecko 30.0 {{geckoRelease ("30.0")}} sind synchrone Anforderungen im Hauptthread aufgrund der negativen Auswirkungen auf die Benutzererfahrung veraltet.</font></font></div> + +<div class="note"><strong><font><font>Hinweis:</font></font></strong><font><font> Die Konstruktorfunktion </font></font><code>XMLHttpRequest</code><font><font>ist nicht nur auf XML-Dokumente beschränkt. </font><font>Es beginnt mit </font></font><strong><font><font>"XML",</font></font></strong><font><font> da das Hauptformat, das ursprünglich für den asynchronen Datenaustausch verwendet wurde, bei der Erstellung XML war</font></font></div> + +<h2 id="Umgang_mit_Antworten"><font><font>Umgang mit Antworten</font></font></h2> + +<p><font><font>Es gibt verschiedene Arten von </font></font><a href="https://xhr.spec.whatwg.org/"><font><font>Antwortattributen,</font></font></a><font><font> die durch die Living Standard-Spezifikation für den Konstruktor {{domxref ("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest ()")}} definiert sind. </font><font>Diese teilen dem Kunden die </font></font><code>XMLHttpRequest</code><font><font>wichtigen Informationen über den Status der Antwort mit. </font><font>In den folgenden Abschnitten werden einige Fälle beschrieben, in denen der Umgang mit Nicht-Text-Antworttypen möglicherweise manipuliert und analysiert wird.</font></font></p> + +<h3 id="Analysieren_und_Bearbeiten_der_responseXML-Eigenschaft"><font><font>Analysieren und Bearbeiten der responseXML-Eigenschaft</font></font></h3> + +<p>If you use <code>XMLHttpRequest</code> to get the content of a remote XML document, the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property will be a DOM object containing a parsed XML document. This could prove difficult to manipulate and analyze. There are four primary ways of analyzing this XML document:</p> + +<ol> + <li>Using <a href="/en-US/docs/Web/XPath">XPath</a> to address (or point to) parts of it.</li> + <li>Manually <a href="/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a> to strings or objects.</li> + <li>Using {{domxref("XMLSerializer")}} to serialize <strong>DOM trees to strings or to files</strong>.</li> + <li>{{jsxref("RegExp")}} can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use <code>RegExp</code> to scan with regard to line breaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.</li> +</ol> + +<div class="note"> +<p><strong>Note:</strong> <code>XMLHttpRequest</code> can now interpret HTML for you using the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property. Read the article about <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> to learn how to do this.</p> +</div> + +<h3 id="Processing_a_responseText_property_containing_an_HTML_document">Processing a responseText property containing an HTML document</h3> + +<p>If you use <code>XMLHttpRequest</code> to get the content of a remote HTML webpage, the {{domxref("XMLHttpRequest.responseText", "responseText")}} property is a string containing the raw HTML. This could prove difficult to manipulate and analyze. There are three primary ways to analyze and parse this raw HTML string:</p> + +<ol> + <li>Use the <code>XMLHttpRequest.responseXML</code> property as covered in the article <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a>.</li> + <li>Inject the content into the body of a <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> via <code>fragment.body.innerHTML</code> and traverse the DOM of the fragment.</li> + <li>{{jsxref("RegExp")}} can be used if you always know the content of the HTML <code>responseText</code> beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.</li> +</ol> + +<h2 id="Handling_binary_data">Handling binary data</h2> + +<p>Although {{domxref("XMLHttpRequest")}} is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an <code>XMLHttpRequest</code> into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the <code>XMLHttpRequest</code> object and is a workable solution.</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +oReq.open("GET", url); +// retrieve data unprocessed as a binary string +oReq.overrideMimeType("text/plain; charset=x-user-defined"); +/* ... */ +</pre> + +<p>However, more modern techniques are available, since the {{domxref("XMLHttpRequest.responseType", "responseType")}} attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.</p> + +<p>For example, consider this snippet, which uses the <code>responseType</code> of "<code>arraybuffer</code>" to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.onload = function(e) { + var arraybuffer = oReq.response; // not responseText + /* ... */ +} +oReq.open("GET", url); +oReq.responseType = "arraybuffer"; +oReq.send();</pre> + +<p>For more examples check out the <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a> page</p> + +<h2 id="Monitoring_progress">Monitoring progress</h2> + +<p><code>XMLHttpRequest</code> provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.</p> + +<p>Support for DOM {{event("progress")}} event monitoring of <code>XMLHttpRequest</code> transfers follows the <a href="https://xhr.spec.whatwg.org/#interface-progressevent">specification for progress events</a>: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:</p> + +<dl> + <dt>{{event("progress")}}</dt> + <dd>The amount of data that has been retrieved has changed.</dd> + <dt>{{event("load")}}</dt> + <dd>The transfer is complete; all data is now in the <code>response</code></dd> +</dl> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.addEventListener("progress", updateProgress); +oReq.addEventListener("load", transferComplete); +oReq.addEventListener("error", transferFailed); +oReq.addEventListener("abort", transferCanceled); + +oReq.open(); + +// ... + +// progress on transfers from the server to the client (downloads) +function updateProgress (oEvent) { + if (oEvent.lengthComputable) { + var percentComplete = oEvent.loaded / oEvent.total * 100; + // ... + } else { + // Unable to compute progress information since the total size is unknown + } +} + +function transferComplete(evt) { + console.log("The transfer is complete."); +} + +function transferFailed(evt) { + console.log("An error occurred while transferring the file."); +} + +function transferCanceled(evt) { + console.log("The transfer has been canceled by the user."); +}</pre> + +<p>Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using <code>XMLHttpRequest</code>.</p> + +<div class="note"><strong>Note:</strong> You need to add the event listeners before calling <code>open()</code> on the request. Otherwise the <code>progress</code> events will not fire.</div> + +<p>The progress event handler, specified by the <code>updateProgress()</code> function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's <code>total</code> and <code>loaded</code> fields. However, if the <code>lengthComputable</code> field is false, the total length is not known and will be zero.</p> + +<p>Progress events exist for both download and upload transfers. The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.upload.addEventListener("progress", updateProgress); +oReq.upload.addEventListener("load", transferComplete); +oReq.upload.addEventListener("error", transferFailed); +oReq.upload.addEventListener("abort", transferCanceled); + +oReq.open(); +</pre> + +<div class="note"><strong>Note:</strong> Progress events are not available for the <code>file:</code> protocol.</div> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> As of {{Gecko("12.0")}}, if your progress event is called with a <code>responseType</code> of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.</p> +</div> + +<p>One can also detect all three load-ending conditions (<code>abort</code>, <code>load</code>, or <code>error</code>) using the <code>loadend</code> event:</p> + +<pre class="brush:js notranslate">req.addEventListener("loadend", loadEnd); + +function loadEnd(e) { + console.log("The transfer finished (although we don't know if it succeeded or not)."); +} +</pre> + +<p>Note there is no way to be certain, from the information received by the <code>loadend</code> event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.</p> + +<h2 id="Submitting_forms_and_uploading_files">Submitting forms and uploading files</h2> + +<p>Instances of <code>XMLHttpRequest</code> can be used to submit forms in two ways:</p> + +<ul> + <li>using only AJAX</li> + <li>using the {{domxref("XMLHttpRequest.FormData", "FormData")}} API</li> +</ul> + +<p>Using the <code>FormData</code> API is the simplest and fastest, but has the disadvantage that data collected can not be <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a>.<br> + Using only AJAX is more complex, but typically more flexible and powerful.</p> + +<h3 id="Using_nothing_but_XMLHttpRequest">Using nothing but <code>XMLHttpRequest</code></h3> + +<p>Submitting forms without the <code>FormData</code> API does not require other APIs for most use cases. The only case where you need an additional API is <strong>if you want to upload one or more files</strong>, where you use the {{domxref("FileReader")}} API.</p> + +<h4 id="A_brief_introduction_to_the_submit_methods">A brief introduction to the submit methods</h4> + +<p>An html {{ HTMLElement("form") }} can be sent in four ways:</p> + +<ul> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>application/x-www-form-urlencoded</code> (default);</li> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>text/plain</code>;</li> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>multipart/form-data</code>;</li> + <li>using the <code>GET</code> method (in this case the <code>enctype</code> attribute will be ignored).</li> +</ul> + +<p>Now, consider the submission of a form containing only two fields, named <code>foo</code> and <code>baz</code>. If you are using the <code>POST</code> method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:</p> + +<ul> + <li> + <p>Method: <code>POST</code>; Encoding type: <code>application/x-www-form-urlencoded</code> (default):</p> + + <pre class="brush:plain notranslate">Content-Type: application/x-www-form-urlencoded + +foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A</pre> + </li> + <li> + <p>Method: <code>POST</code>; Encoding type: <code>text/plain</code>:</p> + + <pre class="brush:plain notranslate">Content-Type: text/plain + +foo=bar +baz=The first line. +The second line.</pre> + </li> + <li> + <p>Method: <code>POST</code>; Encoding type: <code><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">multipart/form-data</a></code>:</p> + + <pre class="brush:plain notranslate">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 + +-----------------------------314911788813839 +Content-Disposition: form-data; name="foo" + +bar +-----------------------------314911788813839 +Content-Disposition: form-data; name="baz" + +The first line. +The second line. + +-----------------------------314911788813839--</pre> + </li> +</ul> + +<p>However, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p> + +<pre class="brush:plain notranslate">?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> + +<h4 id="A_little_vanilla_framework">A little vanilla framework</h4> + +<p>All these effects are done automatically by the web browser whenever you submit a {{HTMLElement("form")}}. If you want to perform the same effects using JavaScript you have to instruct the interpreter about <em>everything</em>. Therefore, how to send forms in <em>pure</em> AJAX is too complex to be explained here in detail. For this reason, here we place <strong>a complete (yet didactic) framework</strong>, able to use all four ways to <em>submit</em>, and to <strong>upload files</strong>:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html notranslate"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Sending forms with pure AJAX &ndash; MDN</title> +<script type="text/javascript"> + +"use strict"; + +/*\ +|*| +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +\*/ + +if (!XMLHttpRequest.prototype.sendAsBinary) { + XMLHttpRequest.prototype.sendAsBinary = function(sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* send as ArrayBufferView...: */ + this.send(ui8Data); + /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ + }; +} + +/*\ +|*| +|*| :: AJAX Form Submit Framework :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest +|*| +|*| This framework is released under the GNU Public License, version 3 or later. +|*| https://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| +|*| Syntax: +|*| +|*| AJAXSubmit(HTMLFormElement); +\*/ + +var AJAXSubmit = (function () { + + function ajaxSuccess () { + /* console.log("AJAXSubmit - Success!"); */ + console.log(this.responseText); + /* you can get the serialized data through the "submittedData" custom property: */ + /* console.log(JSON.stringify(this.submittedData)); */ + } + + function submitData (oData) { + /* the AJAX request... */ + var oAjaxReq = new XMLHttpRequest(); + oAjaxReq.submittedData = oData; + oAjaxReq.onload = ajaxSuccess; + if (oData.technique === 0) { + /* method is GET */ + oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, + oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); + oAjaxReq.send(null); + } else { + /* method is POST */ + oAjaxReq.open("post", oData.receiver, true); + if (oData.technique === 3) { + /* enctype is multipart/form-data */ + var sBoundary = "---------------------------" + Date.now().toString(16); + oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); + oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); + } else { + /* enctype is application/x-www-form-urlencoded or text/plain */ + oAjaxReq.setRequestHeader("Content-Type", oData.contentType); + oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); + } + } + } + + function processStatus (oData) { + if (oData.status > 0) { return; } + /* the form is now totally serialized! do something before sending it to the server... */ + /* doSomething(oData); */ + /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ + submitData (oData); + } + + function pushSegment (oFREvt) { + this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; + this.owner.status--; + processStatus(this.owner); + } + + function plainEscape (sText) { + /* How should I treat a text/plain form encoding? + What characters are not allowed? this is what I suppose...: */ + /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ + return sText.replace(/[\s\=\\]/g, "\\$&"); + } + + function SubmitRequest (oTarget) { + var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; + /* console.log("AJAXSubmit - Serializing form..."); */ + this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; + this.technique = bIsPost ? + this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; + this.receiver = oTarget.action; + this.status = 0; + this.segments = []; + var fFilter = this.technique === 2 ? plainEscape : escape; + for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { + oField = oTarget.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE" && oField.files.length > 0) { + if (this.technique === 3) { + /* enctype is multipart/form-data */ + for (nFile = 0; nFile < oField.files.length; nFile++) { + oFile = oField.files[nFile]; + oSegmReq = new FileReader(); + /* (custom properties:) */ + oSegmReq.segmentIdx = this.segments.length; + oSegmReq.owner = this; + /* (end of custom properties) */ + oSegmReq.onload = pushSegment; + this.segments.push("Content-Disposition: form-data; name=\"" + + oField.name + "\"; filename=\"" + oFile.name + + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); + this.status++; + oSegmReq.readAsBinaryString(oFile); + } + } else { + /* enctype is application/x-www-form-urlencoded or text/plain or + method is GET: files will not be sent! */ + for (nFile = 0; nFile < oField.files.length; + this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); + } + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */ + /* field type is not FILE or is FILE but is empty */ + this.segments.push( + this.technique === 3 ? /* enctype is multipart/form-data */ + "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" + : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ + fFilter(oField.name) + "=" + fFilter(oField.value) + ); + } + } + processStatus(this); + } + + return function (oFormElement) { + if (!oFormElement.action) { return; } + new SubmitRequest(oFormElement); + }; + +})(); + +</script> +</head> +<body> + +<h1>Sending forms with pure AJAX</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<form action="register.php" method="post" enctype="text/plain" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + Your name: <input type="text" name="user" /> + </p> + <p> + Your message:<br /> + <textarea name="message" cols="40" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> + <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> + <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> + <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> + <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +</body> +</html></pre> +</div> + +<p>To test this, create a page named <strong>register.php</strong> (which is the <code>action</code> attribute of these sample forms), and put the following <em>minimalistic</em> content:</p> + +<pre class="brush: php notranslate"><?php +/* register.php */ + +header("Content-type: text/plain"); + +/* +NOTE: You should never use `print_r()` in production scripts, or +otherwise output client-submitted data without sanitizing it first. +Failing to sanitize can lead to cross-site scripting vulnerabilities. +*/ + +echo ":: data received via GET ::\n\n"; +print_r($_GET); + +echo "\n\n:: Data received via POST ::\n\n"; +print_r($_POST); + +echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n"; +if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; } + +echo "\n\n:: Files received ::\n\n"; +print_r($_FILES); + +</pre> + +<p>The syntax to activate this script is simply:</p> + +<pre class="syntaxbox notranslate">AJAXSubmit(myForm);</pre> + +<div class="note"><strong>Note:</strong> This framework uses the {{domxref("FileReader")}} API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered <strong>an experimental technique</strong>. If you do not need to upload binary files, this framework works fine in most browsers.</div> + +<div class="note"><strong>Note:</strong> The best way to send binary content is via {{jsxref("ArrayBuffer", "ArrayBuffers")}} or {{domxref("Blob", "Blobs")}} in conjuncton with the {{domxref("XMLHttpRequest.send()", "send()")}} method and possibly the {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} method of the <code>FileReader</code> API. But, since the aim of this script is to work with a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the <code>FileReader</code> API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the <code>FormData</code> API.</div> + +<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary</code> method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div> + +<h3 id="Using_FormData_objects">Using FormData objects</h3> + +<p>The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primary use is in sending form data, but can also be used independently from a form in order to transmit user keyed data. The transmitted data is in the same format the form's <code>submit()</code> method uses to send data, if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an <code>XMLHttpRequest</code>. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using FormData Objects</a> page. For didactic purposes here is <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework">the previous example</a> transformed to use the <code>FormData</code> API</strong>. Note the brevity of the code:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html notranslate"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" charset="UTF-8" /> +<title>Sending forms with FormData &ndash; MDN</title> +<script> +"use strict"; + +function ajaxSuccess () { + console.log(this.responseText); +} + +function AJAXSubmit (oFormElement) { + if (!oFormElement.action) { return; } + var oReq = new XMLHttpRequest(); + oReq.onload = ajaxSuccess; + if (oFormElement.method.toLowerCase() === "post") { + oReq.open("post", oFormElement.action); + oReq.send(new FormData(oFormElement)); + } else { + var oField, sFieldType, nFile, sSearch = ""; + for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? + oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; + sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); + } + } + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.send(null); + } +} +</script> +</head> +<body> + +<h1>Sending forms with FormData</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<p>The text/plain encoding is not supported by the FormData API.</p> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> + <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> + <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> + <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> + <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> +</body> +</html></pre> +</div> + +<div class="note"><strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the {{domxref("FileReader")}} API also</strong>: files are automatically loaded and uploaded.</div> + +<h2 id="Get_last_modified_date">Get last modified date</h2> + +<pre class="brush: js notranslate">function getHeaderTime () { + console.log(this.getResponseHeader("Last-Modified")); /* A valid GMTString date or null */ +} + +var oReq = new XMLHttpRequest(); +oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html"); +oReq.onload = getHeaderTime; +oReq.send();</pre> + +<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3> + +<p>Let's create two functions:</p> + +<pre class="brush: js notranslate">function getHeaderTime () { + var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)); + var nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); + + if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + window.localStorage.setItem('lm_' + this.filepath, Date.now()); + isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); + } +} + +function ifHasChanged(sURL, fCallback) { + var oReq = new XMLHttpRequest(); + oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL); + oReq.callback = fCallback; + oReq.filepath = sURL; + oReq.onload = getHeaderTime; + oReq.send(); +}</pre> + +<p>And to test:</p> + +<pre class="brush: js notranslate">/* Let's test the file "yourpage.html"... */ + +ifHasChanged("yourpage.html", function (nModif, nVisit) { + console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); +});</pre> + +<p>If you want to know <strong><em>if</em> <em>the current page</em> has changed</strong>, please read the article about {{domxref("document.lastModified")}}.</p> + +<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2> + +<p>Modern browsers support cross-site requests by implementing the <a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> (CORS) standard. As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work. Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p> + +<h2 id="Bypassing_the_cache">Bypassing the cache</h2> + +<p>A cross-browser compatible approach to bypassing the cache is appending a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:</p> + +<pre class="brush:plain notranslate">http://foo.com/bar.html -> http://foo.com/bar.html?12345 +http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 +</pre> + +<p>As the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p> + +<p>You can automatically adjust URLs using the following code:</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime()); +oReq.send(null);</pre> + +<h2 id="Security">Security</h2> + +<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> to <code>allAccess</code> to give specific sites cross-site access. This is no longer supported.")}}</p> + +<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p> + +<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin</code> HTTP header in the response to the XMLHttpRequest.</p> + +<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3> + +<p>If you conclude with an XMLHttpRequest receiving <code>status=0</code> and <code>statusText=null</code>, this means the request was not allowed to be performed. It was <code><a href="https://xhr.spec.whatwg.org/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="https://www.w3.org/TR/2010/CR-XMLHttpRequest-20100803/#xmlhttprequest-origin"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently <code>open()</code>. This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in otherwords, <code>open()</code>) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{event("activate")}} event which is set once the terminated window has its {{event("unload")}} event triggered.</p> + +<h2 id="Workers">Workers</h2> + +<p>Setting <code>overrideMimeType</code> does not work from a {{domxref("Worker")}}. See {{bug(678057)}} for more details. Other browsers may handle this differently.</p> + +<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> + +<p class="hidden"><font><font>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. </font><font>Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> und senden Sie uns eine Pull-Anfrage.</font></font></p> + +<p><font><font>{{Compat ("api.XMLHttpRequest")}}</font></font></p> + +<h2 id="Siehe_auch"><font><font>Siehe auch</font></font></h2> + +<ol> + <li><a href="/en-US/docs/AJAX/Getting_Started"><font><font>MDN AJAX Einführung</font></font></a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest"><font><font>HTML in XMLHttpRequest</font></font></a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS"><font><font>HTTP-Zugriffskontrolle</font></font></a></li> + <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL"><font><font>So überprüfen Sie den Sicherheitsstatus einer XMLHTTPRequest über SSL</font></font></a></li> + <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html"><font><font>XMLHttpRequest - REST und die Rich User Experience</font></font></a></li> + <li><a href="https://msdn.microsoft.com/library/ms535874"><font><font>Microsoft-Dokumentation</font></font></a></li> + <li><a href="http://jibbering.com/2002/4/httprequest.html"><font><font>"Verwenden des XMLHttpRequest-Objekts" (jibbering.com)</font></font></a></li> + <li><a href="https://xhr.spec.whatwg.org/"><font><font>Das </font></font><code>XMLHttpRequest</code><font><font>Objekt: WHATWG-Spezifikation</font></font></a></li> +</ol> |