From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/hu/web/api/xmlhttprequest/index.html | 235 ++++++ .../xmlhttprequest_hasznalata/index.html | 791 +++++++++++++++++++++ 2 files changed, 1026 insertions(+) create mode 100644 files/hu/web/api/xmlhttprequest/index.html create mode 100644 files/hu/web/api/xmlhttprequest/xmlhttprequest_hasznalata/index.html (limited to 'files/hu/web/api/xmlhttprequest') diff --git a/files/hu/web/api/xmlhttprequest/index.html b/files/hu/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..6caf14a9ae --- /dev/null +++ b/files/hu/web/api/xmlhttprequest/index.html @@ -0,0 +1,235 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +
{{APIRef("XMLHttpRequest")}}
+ +
 
+ +

Az XMLHttpRequest API a szerverrel való direkt kommunikációra használható, a teljes oldal újratöltése nélkül. Ez lehetővé teszi a weboldalak bizonyos adatainak frissítését, a nélkül, hogy a felhasználónak meg kéne szakítania azt, amit éppen csinál.  Az XMLHttpRequest az Ajax alapja.

+ +

{{InheritanceDiagram}}

+ +
Történet
+ +

Az XMLHttpRequest objektumot eredetileg a Microsoft alkotta meg, később átvette a Mozilla, az Apple, és a Google is. Mára általánosan elfogadott szabvány lett a WHATWG által. A neve ellenére, az XMLHttpRequest több adattípussal képes dolgozni, nem csupán az XML-el, és a HTTP mellett más protokollokat is támogat (beleértve a file és az ftp protokollt is).

+ +

Konstruktor

+ +
+
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
+
A konstruktor létrehoz egy üres XMLHttpRequest objektumot. Ez szükséges előfeltétele annak, hogy az objektum eljárásait meghívhassunk. + 
  var xhr = new XMLHttpRequest();
+
+
+
+ +

Tulajdonságok

+ +

Az XMLHttpRequest API az {{domxref("XMLHttpRequestEventTarget")}} és az {{domxref("EventTarget")}} tulajdonságait is örökli.

+ +
+
{{domxref("XMLHttpRequest.onreadystatechange")}}
+
Ez az {{domxref("EventHandler")}} (eseménykezelő) mindig meghívódik, amikor a readyState tulajdonság értéke megváltozik, így – szükség szerint – minden állapothoz külön esemény vagy eljárás rendelhető. Az alábbi példában minden állapotváltozásról tájékoztatjuk a felhasználót: + 
  xhr.onreadystatechange = function () {
+    switch(xhr.readyState) {
+      case 0: alert("A kérelem nem inicializált");
+      break;
+      case 1: alert("A kapcsolat létrejött");
+      break;
+      case 2: alert("A kérelem fogadva");
+      break;
+      case 3: alert("A kérelem feldolgozása folyamatban");
+      break;
+      default: alert("A kérelem feldolgozva, válasz kész");
+    }
+  };
+
+ A gyakorlatban erre azonban ritkán van szükség. Praktikusabb, ha csak a feldolgozott kérelemre érkező válaszra reagálunk (az alábbi példában kiírjuk a válasz szövegét):
+
+ 
  xhr.onreadystatechange = function() {
+    if (this.readyState == 4 && this.status == 200) {
+      alert(this.responseText);
+    }
+  };
+
+
+
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+
A kérelem állapotát jelző előjel nélküli számmal tér vissza, amely lehet: +
    +
  1. - ha a kérés nem inicializált
    2. +
  2. - ha a kapcsolat létrejött a szerverrel
    3. +
  3. - ha a kérés fogadva
    4. +
  4. - ha a kérés feldolgozása folyamatban
    5. +
  5. - ha a kérés kész, válasz kész
    6. +
+
+
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
+
A válasz törzsét tartalmazza, melynek típusát a {{domxref("XMLHttpRequest.responseType")}} tulajdonság értéke határozza meg.
+
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+
Visszatérési értéke lehet {{domxref("DOMString")}} amely egyszerű szövegként tartalmazza a választ az elküldött kérelemre, vagy null,ha a kérelem sikertelen volt.
+
{{domxref("XMLHttpRequest.responseType")}}
+
A válasz típusát határozza meg, amely lehet: +
    +
  • üres sztring (alapértelmezett)
    • +
  • {{domxref("ArrayBuffer")}} objektum
    • +
  • {{domxref("Blob")}} objektum
    • +
  • {{domxref("Document")}}
    • +
  • JavaScript objektum (JSON)
    • +
  • {{domxref("DOMString")}}
    • +
+
+
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+
Visszatérési értéke a válasz szerializált URL-je, vagy üres sztring, ha az URL értéke null.
+
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+
Egy {{domxref("Document")}}-el tér vissza, amely tartalmazza a kérelemre kapott választ XML formátumban, vagy null-t, ha a kérés sikertelen, nem lehetett elküldeni, illetve a válasz nem jeleníthető meg XML formátumban. Not available in workers.
+
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+
A szerver által a kérelemre küldött válasz HTTP státusz-kódját adja vissza, előjel nélküli, háromjegyű szám formátumban (pl. 200, ha a kérelem elfogadva, 404, ha a kért erőforrás nem található a szerveren - bővebben a HTTP státusz kódokról itt).
+
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+
A szerver által küldött válasz státusz-kódjához tartozó szöveggel (response message) tér vissza (pl. "200 OK", siker esetén, bővebben lásd fent).
+
+ +
+

Megjegyzés: a HTTP/2 specifikáció alapján (8.1.2.4 Response Pseudo-Header Fields) HTTP/2 válaszokat egy :status pseudo-header mező határozza meg, amely tartalmazza a HTTP státusz kód mezőt is. A HTTP/2 nem határozza meg, hogy a verzió és más kifejezések hogy jelenjenek meg a válasz HTTP/1.1 állapot-sorában.

+
+ +
+
{{domxref("XMLHttpRequest.timeout")}}
+
Egy előjel nélküli egész szám, amely megadja a várakozási időt (ezredmásodpercben) a kapcsolat automatikus lezárásig.
+
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+
Ez egy {{domxref("EventHandler")}} (eseménykezelő), amely a {{domxref("XMLHttpRequest.timeout")}} tulajdonságban megadott idő túllépése esetén mindig meghívódik. {{gecko_minversion_inline("12.0")}} + 
xhr.timeout = 4000; //Időtúllépés beállítása 4 másodpercre
+xhr.ontimeout = function () { alert("Időtúllépés!!!"); }
+/* Időtúllépés esetén az eseménykezelő egy névtelen
+ függvényt hív meg, amely egy felugró ablakban tájékoztatja
+ a felhasználót az időtúllépésről */
+
+
+
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+
Minden XMLHttpRequest objektumhoz rendelkezik egy {{domxref("XMLHttpRequestUpload")}} objektummal, amely adatátviteli információk összegyűjtésére használható, amikor az adatok átkerülnek a kiszolgálóra. Az upload tulajdonság ezt adja vissza.
+
{{domxref("XMLHttpRequest.withCredentials")}}
+
Logikai érték ({{domxref("Boolean")}}), that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies or authorization headers.
+
+ +

Nem szabványos tulajdonságok

+ +
+
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
+
Is a {{Interface("nsIChannel")}}. The channel used by the object when performing the request.
+
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
+
Logikai érték ({{domxref("Boolean")}}). Ha értéke igaz (true), akkor a kérelem sütik és azonosító fejlécek nélkül lesz elküldve.
+
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
+
Logikai érték ({{domxref("Boolean")}}). If true, the same origin policy will not be enforced on the request.
+
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
+
Logikai érték ({{domxref("Boolean")}}). It indicates whether or not the object represents a background service request.
+
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
+
Egy ArrayBuffer  objektum. A válasz a kérelemre egy JavaScript-stílusú tömb lesz.
+
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
+
This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22. Please use Server-Sent Events, Web Sockets, or responseText from progress events instead.
+
+ +

Eseménykezelők

+ +

Az onreadystatechange az XMLHttpRequest objektum olyan tulajdonsága, amely mindig meghívódik, amikor a readyState tulajdonság értéke megváltozik. Ezt az eseménykezelőt az összes böngésző támogatja.

+ +

A különböző böngészők által támogatott eseménykezelők száma egyre nagyobb (onload, onerror, onprogress, stb.). Ezeket a Firefox is mind támogatja. További információk az nsIXMLHttpRequestEventTarget objektumról és az XMLHttpRequest használatáról.

+ +

Az újabb böngészők (mint a Firefox is), támogatják az XMLHttpRequest események szabványos addEventListener általi figyelését. Az API ezen felül bekapcsolt (on*) értékre állítja a tulajdonságokat a kezelő függvényben.

+ +

Metódusok

+ +
+
{{domxref("XMLHttpRequest.abort()")}}
+
Megszakítja az aktuális kérelmet.
+
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
+
A válasz összes fejlécét adja vissza egyszerű szövegként, \r\n (CRLF) sorvég karakterekkel elválasztva. Ha nem érkezett válasz a kérelemre, null értékkel tér vissza.
+
{{domxref("XMLHttpRequest.getResponseHeader()")}}
+
A paraméterül kapott fejléc szöveges értékével tér vissza siker esetén, vagy null-al, ha nem érkezett válasz a kérelemre vagy a kért fejléc nem található a válaszban. + 
  xhr.getResponseHeader("Content-Type");
+
+
+
{{domxref("XMLHttpRequest.open()")}}
+
Inicializálja az elküldendő kérelmet. Beállítja a kérelem továbbítására használt metódust (ez lehet post vagy get), a cél URL-t (a kérelmet fogadó/feldolgozó távoli állomány elérési útját) és az aszinkron kapcsolót (true = aszinkron[alapértelmezett], false = szinkron). Opcionálisan megadható paraméterek: felhasználónév és jelszó. Ezt az eljárást JavaScript kódból lehet meghívni, natív kódból az openRequest() eljárás ajánlott helyette. + 
  xhr.open("POST","feldolgoz.php", true);
+
+
+
{{domxref("XMLHttpRequest.overrideMimeType()")}}
+
Felülbírálja a kiszolgáló által visszaadott MIME típust.
+
{{domxref("XMLHttpRequest.send()")}}
+
Kérelem elküldése. Ha a kérelem aszinkron (ez az alapértelmezett), az eljárás visszatér, amint a kérelem el lett küldve.
+
{{domxref("XMLHttpRequest.setRequestHeader()")}}
+
A post metódussal elküldött HTTP kérelem fejlécét állítja be. Két bemeneti paramétert vár: a fejléc nevét és értékét. A setRequestHeader() eljárást az open() után, de a send() előtt kell meghívni. + 
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+
+
+
+ +

Nem szabványos metódusok

+ +
+
{{domxref("XMLHttpRequest.init()")}}
+
C++ kódból történő használatra inicializálja az objektumot.
+
+ +
Figyelmeztetés: Ezt a metódust nem szabad JavaScript-ből meghívni.
+ +
+
{{domxref("XMLHttpRequest.openRequest()")}}
+
Inicializálja a kérelmet. Ezt az eljárást natív kódból lehet használni a kérelem inicializálására, az open() helyett. További részletek az open() leírásában.
+
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
+
A send() egy változata, ami bináris adatokat küld.
+
+ +

Specifikációk

+ + + + + + + + + + + + + + +
SpecifikációÁllapotMegjegyzés
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Hatályos szabvány, aktuális változat
+ +

Böngésző támogatottság

+ + + +
{{Compat("api.XMLHttpRequest")}}
+ +

Hivatkozások

+ + diff --git a/files/hu/web/api/xmlhttprequest/xmlhttprequest_hasznalata/index.html b/files/hu/web/api/xmlhttprequest/xmlhttprequest_hasznalata/index.html new file mode 100644 index 0000000000..14559667cc --- /dev/null +++ b/files/hu/web/api/xmlhttprequest/xmlhttprequest_hasznalata/index.html @@ -0,0 +1,791 @@ +--- +title: Az XMLHttpRequest használata +slug: Web/API/XMLHttpRequest/XMLHttpRequest_hasznalata +tags: + - AJAX + - HTTP + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +
{{APIRef("XMLHttpRequest")}}
+ +

Ebben az útmutatóban azt fogjuk körüljárni, hogy miként használhatjuk az {{domxref("XMLHttpRequest")}} objektumot HTTP kérelmek küldésére, annak érdekében, hogy adatokat cserélhessünk a webhely és a szerver között.

+ +

Egy új HTTP kérelem elküldéséhez először hozzunk létre egy új XMLHttpRequest objektumot, nyissuk meg az URL-t, majd küldjük el a kérelmet. Az adatátvitel befejezése után, objektumunk hasznos információkkal szolgálhat, mint a válasz törzs vagy az eredmény HTTP státusz kódja.

+ +
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();
+ +

Kérelem típusok

+ +

A request made via XMLHttpRequest can fetch the data in one of two ways, asynchronously or synchronously. The type of request is dictated by the optional async argument (the third argument) that is set on the {{domxref("XMLHttpRequest.open()")}} method. If this argument is true or not specified, the XMLHttpRequest is processed asynchronously, otherwise the process is handled synchronously. A detailed discussion and demonstrations of these two types of requests can be found on the synchronous and asynchronous requests page. Do not use synchronous requests outside Web Workers.

+ +
Note: Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
+ +
Note: The constructor function XMLHttpRequest isn't limited to only XML documents. It starts with "XML" because when it was created the main format that was originally used for Asynchronous Data Exchange were XML
+ +

Válasz kezelés

+ +

There are several types of response attributes defined by the living standard specification for the {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} constructor. These tell the client making the XMLHttpRequest important information about the status of the response. Some cases where dealing with non-text response types may involve some manipulation and analysis are outlined in the following sections.

+ +

Analyzing and manipulating the responseXML property

+ +

If you use XMLHttpRequest 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:

+ +
    +
  1. Using XPath to address (or point to) parts of it.
    2. +
  2. Manually Parsing and serializing XML to strings or objects.
    3. +
  3. Using {{domxref("XMLSerializer")}} to serialize DOM trees to strings or to files.
    4. +
  4. {{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 RegExp 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.
    5. +
+ +
+

Note: XMLHttpRequest can now interpret HTML for you using the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property. Read the article about HTML in XMLHttpRequest to learn how to do this.

+
+ +

Processing a responseText property containing an HTML document

+ +

If you use XMLHttpRequest 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:

+ +
    +
  1. Use the XMLHttpRequest.responseXML property as covered in the article HTML in XMLHttpRequest.
    2. +
  2. Inject the content into the body of a document fragment via fragment.body.innerHTML and traverse the DOM of the fragment.
    3. +
  3. {{jsxref("RegExp")}} can be used if you always know the content of the HTML responseText 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.
    4. +
+ +

Bináris adatok kezelése

+ +

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 XMLHttpRequest into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the XMLHttpRequest object and is a workable solution.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url);
+// retrieve data unprocessed as a binary string
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

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.

+ +

For example, consider this snippet, which uses the responseType of "arraybuffer" to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // not responseText
+  /* ... */
+}
+oReq.open("GET", url);
+oReq.responseType = "arraybuffer";
+oReq.send();
+ +

For more examples check out the Sending and Receiving Binary Data page

+ +

Folyamatok nyomonkövetése

+ +

XMLHttpRequest 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.

+ +

Support for DOM {{event("progress")}} event monitoring of XMLHttpRequest transfers follows the specification for progress events: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:

+ +
+
{{event("progress")}}
+
The amount of data that has been retrieved has changed.
+
{{event("load")}}
+
The transfer is complete; all data is now in the response
+
+ +
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.");
+}
+ +

Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using XMLHttpRequest.

+ +
Note: You need to add the event listeners before calling open() on the request. Otherwise the progress events will not fire.
+ +

The progress event handler, specified by the updateProgress() 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 total and loaded fields. However, if the lengthComputable field is false, the total length is not known and will be zero.

+ +

Progress events exist for both download and upload transfers. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

+ +
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();
+
+ +
Note: Progress events are not available for the file: protocol.
+ +
+

Note: 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.

+
+ +
+

Note: As of {{Gecko("12.0")}}, if your progress event is called with a responseType of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.

+
+ +

One can also detect all three load-ending conditions (abort, load, or error) using the loadend event:

+ +
req.addEventListener("loadend", loadEnd);
+
+function loadEnd(e) {
+  console.log("The transfer finished (although we don't know if it succeeded or not).");
+}
+
+ +

Note there is no way to be certain, from the information received by the loadend 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.

+ +

Űrlapok küldése és állományok feltöltése

+ +

Instances of XMLHttpRequest can be used to submit forms in two ways:

+ + + +

Using the FormData API is the simplest and fastest, but has the disadvantage that data collected can not be stringified.
+ Using only AJAX is more complex, but typically more flexible and powerful.

+ +

Using nothing but XMLHttpRequest

+ +

Submitting forms without the FormData API does not require other APIs for most use cases. The only case where you need an additional API is if you want to upload one or more files, where you use the {{domxref("FileReader")}} API.

+ +

A brief introduction to the submit methods

+ +

An html {{ HTMLElement("form") }} can be sent in four ways:

+ + + +

Now, consider the submission of a form containing only two fields, named foo and baz. If you are using the POST method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:

+ + + +

However, if you are using the GET method, a string like the following will be simply added to the URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

A little vanilla framework

+ +

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 everything. Therefore, how to send forms in pure AJAX is too complex to be explained here in detail. For this reason, here we place a complete (yet didactic) framework, able to use all four ways to submit, and to upload files:

+ +
+
<!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>
+
+ +

To test this, create a page named register.php (which is the action attribute of these sample forms), and put the following minimalistic content:

+ +
<?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);
+
+
+ +

The syntax to activate this script is simply:

+ +
AJAXSubmit(myForm);
+ +
Note: 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 an experimental technique. If you do not need to upload binary files, this framework works fine in most browsers.
+ +
Note: 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 FileReader API. But, since the aim of this script is to work with a stringifiable raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the FileReader 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 FormData API.
+ +
Note: The non-standard sendAsBinary method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard send(Blob data) method can be used instead.
+ +

Using FormData objects

+ +

The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. 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 submit() 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 XMLHttpRequest. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the Using FormData Objects page. For didactic purposes here is a translation of the previous example transformed to use the FormData API. Note the brevity of the code:

+ +
+
<!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>
+
+ +
Note: As we said, {{domxref("FormData")}} objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the {{domxref("FileReader")}} API also: files are automatically loaded and uploaded.
+ +

Utolsó módosítás dátuma

+ +
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();
+ +

Do something when last modified date changes

+ +

Let's create two functions:

+ +
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();
+}
+ +

And to test:

+ +
/* 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() + "!");
+});
+ +

If you want to know if the current page has changed, please read the article about {{domxref("document.lastModified")}}.

+ +

Webhelyközi XMLHttpRequest

+ +

Modern browsers support cross-site requests by implementing the Cross-Origin Resource Sharing (CORS) standard. As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work. Otherwise, an INVALID_ACCESS_ERR exception is thrown.

+ +

Gyorsítótár megkerülése

+ +

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:

+ +
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
+
+ +

As the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

+ +

You can automatically adjust URLs using the following code:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime());
+oReq.send(null);
+ +

Biztonság

+ +

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access. This is no longer supported.")}}

+ +

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+ +

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

+ +

XMLHttpRequests being stopped

+ +

If you conclude with an XMLHttpRequest receiving status=0 and statusText=null, this means the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently open(). 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, open()) 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.

+ +

Dolgozók

+ +

Setting overrideMimeType does not work from a {{domxref("Worker")}}.  See {{bug(678057)}} for more details.  Other browsers may handle this differently.

+ +

Specifikációk

+ + + + + + + + + + + + + + + + +
SpecifikációÁllapotMegjegyzés
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Élő szabvány, legfrisebb verzió
+ +

Böngésző támogatás

+ + + +

{{Compat("api.XMLHttpRequest")}}

+ +

Kapcsolódó írások

+ +
    +
  1. MDN AJAX introduction
    2. +
  2. HTML in XMLHttpRequest
    3. +
  3. HTTP access control
    4. +
  4. How to check the security state of an XMLHTTPRequest over SSL
    5. +
  5. XMLHttpRequest - REST and the Rich User Experience
    6. +
  6. Microsoft documentation
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest object: WHATWG specification
    9. +
-- cgit v1.2.3-54-g00ecf