---
title: XMLHttpRequest
slug: Web/API/XMLHttpRequest
translation_of: Web/API/XMLHttpRequest
---
<div>{{APIRef("XMLHttpRequest")}}</div>

<div> </div>

<p>Az <span class="seoSummary"><code>XMLHttpRequest</code> <a href="https://developer.mozilla.org/hu/docs/Web/Reference/API">API</a> 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.</span>  Az <code>XMLHttpRequest</code> az <a href="/hu/docs/AJAX">Ajax</a> alapja.</p>

<p>{{InheritanceDiagram}}</p>

<h5 id="Történet">Történet</h5>

<p>Az <code>XMLHttpRequest</code> objektumot eredetileg a Microsoft alkotta meg, később átvette a Mozilla, az Apple, és a Google is. Mára általánosan elfogadott <a class="external" href="https://xhr.spec.whatwg.org/">szabvány lett a <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a> által. A neve ellenére, az <code>XMLHttpRequest</code> több adattípussal képes dolgozni, nem csupán az XML-el, és a <a href="/hu/docs/Web/HTTP">HTTP</a> mellett más protokollokat is támogat (beleértve a <code>file</code> és az <code>ftp</code> protokollt is).</p>

<h2 id="Konstruktor">Konstruktor</h2>

<dl>
 <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
 <dd>A konstruktor létrehoz egy üres XMLHttpRequest objektumot. Ez szükséges előfeltétele annak, hogy az objektum eljárásait meghívhassunk.
 <pre class="brush: js">  var xhr = new XMLHttpRequest();
 </pre>
 </dd>
</dl>

<h2 id="Tulajdonságok">Tulajdonságok</h2>

<p><em>Az <code>XMLHttpRequest</code> <a href="https://developer.mozilla.org/hu/docs/Web/Reference/API">API</a> az {{domxref("XMLHttpRequestEventTarget")}} és az {{domxref("EventTarget")}} tulajdonságait is örökli.</em></p>

<dl>
 <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
 <dd>Ez az {{domxref("EventHandler")}} (eseménykezelő) mindig meghívódik, amikor a <code>readyState</code> 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:
 <pre class="brush: js">  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");
    }
  };
 </pre>
 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):</dd>
 <dd>
 <pre class="brush: js">  xhr.onreadystatechange = function() {
    if (this.readyState == 4 &amp;&amp; this.status == 200) {
      alert(this.responseText);
    }
  };
 </pre>
 </dd>
 <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
 <dd>A kérelem állapotát jelző <code>előjel nélküli számmal</code> tér vissza, amely lehet:
 <ol start="0">
  <li>- ha a kérés nem inicializált</li>
  <li>- ha a kapcsolat létrejött a szerverrel</li>
  <li>- ha a kérés fogadva</li>
  <li>- ha a kérés feldolgozása folyamatban</li>
  <li>- ha a kérés kész, válasz kész</li>
 </ol>
 </dd>
 <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
 <dd>A válasz törzsét tartalmazza, melynek típusát a {{domxref("XMLHttpRequest.responseType")}} tulajdonság értéke határozza meg.</dd>
 <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
 <dd>Visszatérési értéke lehet {{domxref("DOMString")}} amely egyszerű szövegként tartalmazza a választ az elküldött kérelemre, vagy <code>null,</code>ha a kérelem sikertelen volt.</dd>
 <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
 <dd>A válasz típusát határozza meg, amely lehet:
 <ul>
  <li>üres sztring (alapértelmezett)</li>
  <li>{{domxref("ArrayBuffer")}} objektum</li>
  <li>{{domxref("Blob")}} objektum</li>
  <li>{{domxref("Document")}}</li>
  <li>JavaScript objektum (JSON)</li>
  <li>{{domxref("DOMString")}}</li>
 </ul>
 </dd>
 <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
 <dd>Visszatérési értéke a válasz szerializált URL-je, vagy üres sztring, ha az URL értéke null.</dd>
 <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
 <dd>Egy {{domxref("Document")}}-el tér vissza, amely tartalmazza a kérelemre kapott választ XML formátumban, vagy <code>null</code>-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.</dd>
 <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
 <dd>A szerver által a kérelemre küldött válasz HTTP státusz-kódját adja vissza, <code>előjel nélküli, háromjegyű szám</code> 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 <a href="https://www.rackhost.hu/tudasbazis/informatikai-alapok/http-hibakodok/">itt</a>).</dd>
 <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt>
 <dd>A szerver által küldött válasz státusz-kódjához tartozó szöveggel (response message) tér vissza (pl. "<code>200 OK</code>", siker esetén, bővebben lásd fent).</dd>
</dl>

<div class="note">
<p><strong>Megjegyzés:</strong> a HTTP/2 specifikáció alapján (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>) HTTP/2 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.</p>
</div>

<dl>
 <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
 <dd>Egy <code>előjel nélküli egész szám</code>, amely megadja a várakozási időt (ezredmásodpercben) a kapcsolat automatikus lezárásig.</dd>
 <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
 <dd>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")}}
 <pre class="brush: js">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 */
 </pre>
 </dd>
 <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
 <dd>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 <code>upload</code> tulajdonság ezt adja vissza.</dd>
 <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
 <dd>Logikai érték ({{domxref("Boolean")}}), that indicates whether or not cross-site <code>Access-Control</code> requests should be made using credentials such as cookies or authorization headers.</dd>
</dl>

<h3 id="Nem_szabványos_tulajdonságok">Nem szabványos tulajdonságok</h3>

<dl>
 <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
 <dd>Is a {{Interface("nsIChannel")}}. The channel used by the object when performing the request.</dd>
 <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
 <dd>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.</dd>
 <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
 <dd>Logikai érték ({{domxref("Boolean")}}). If true, the same origin policy will not be enforced on the request.</dd>
 <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
 <dd>Logikai érték ({{domxref("Boolean")}}). It indicates whether or not the object represents a background service request.</dd>
 <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
 <dd>Egy <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a> </code> objektum. A válasz a kérelemre egy JavaScript-stílusú tömb lesz.</dd>
 <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
 <dd><strong>This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22.</strong> Please use <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, or <code>responseText</code> from progress events instead.</dd>
</dl>

<h3 id="Eseménykezelők">Eseménykezelők</h3>

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

<p>A különböző böngészők által támogatott eseménykezelők száma egyre nagyobb (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, stb.). Ezeket a Firefox is mind támogatja. További információk az <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequestEventTarget" title="">nsIXMLHttpRequestEventTarget</a></code> objektumról és az <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest</a> használatáról.</p>

<p>Az újabb böngészők (mint a Firefox is), támogatják az <code>XMLHttpRequest</code> események szabványos <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> általi figyelését. Az <a href="https://developer.mozilla.org/hu/docs/Web/Reference/API">API</a> ezen felül bekapcsolt (<code>on*</code>) értékre állítja a tulajdonságokat a kezelő függvényben.</p>

<h2 id="Metódusok">Metódusok</h2>

<dl>
 <dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
 <dd>Megszakítja az aktuális kérelmet.</dd>
 <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
 <dd>A válasz összes fejlécét adja vissza egyszerű szövegként, <code>\r\n</code> (<a href="https://developer.mozilla.org/en-US/docs/Glossary/CRLF">CRLF</a>) sorvég karakterekkel elválasztva. Ha nem érkezett válasz a kérelemre, <code>null</code> értékkel tér vissza.</dd>
 <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
 <dd>A paraméterül kapott fejléc szöveges értékével tér vissza siker esetén, vagy <code>null</code>-al, ha nem érkezett válasz a kérelemre vagy a kért fejléc nem található a válaszban.
 <pre class="brush: js">  xhr.getResponseHeader("Content-Type");
  </pre>
 </dd>
 <dt>{{domxref("XMLHttpRequest.open()")}}</dt>
 <dd>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 <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> eljárás ajánlott helyette.
 <pre class="brush: js">  xhr.open("POST","feldolgoz.php", true);
  </pre>
 </dd>
 <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
 <dd>Felülbírálja a kiszolgáló által visszaadott MIME típust.</dd>
 <dt>{{domxref("XMLHttpRequest.send()")}}</dt>
 <dd>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.</dd>
 <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
 <dd>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 <code>setRequestHeader()</code> eljárást az <a href="#open"><code>open()</code></a> után, de a <code>send()</code> előtt kell meghívni.
 <pre class="brush: js">  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  </pre>
 </dd>
</dl>

<h3 id="Nem_szabványos_metódusok">Nem szabványos metódusok</h3>

<dl>
 <dt>{{domxref("XMLHttpRequest.init()")}}</dt>
 <dd>C++ kódból történő használatra inicializálja az objektumot.</dd>
</dl>

<div class="warning"><strong>Figyelmeztetés:</strong> Ezt a metódust <em>nem</em> szabad JavaScript-ből meghívni.</div>

<dl>
 <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
 <dd>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 <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> helyett. További részletek az <code>open()</code> leírásában.</dd>
 <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
 <dd>A <code>send()</code> egy változata, ami bináris adatokat küld.</dd>
</dl>

<h2 id="Specifikációk">Specifikációk</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specifikáció</th>
   <th scope="col">Állapot</th>
   <th scope="col">Megjegyzés</th>
  </tr>
  <tr>
   <td>{{SpecName('XMLHttpRequest')}}</td>
   <td>{{Spec2('XMLHttpRequest')}}</td>
   <td>Hatályos szabvány, aktuális változat</td>
  </tr>
 </tbody>
</table>

<h2 id="Böngésző_támogatottság">Böngésző támogatottság</h2>



<div>{{Compat("api.XMLHttpRequest")}}</div>

<h2 id="Hivatkozások">Hivatkozások</h2>

<ul>
 <li>MDN útmutatók az XMLHttpRequest-hez (angol):
  <ul>
   <li><a href="/en-US/docs/AJAX/Getting_Started">Ajax — fogjunk hozzá</a></li>
   <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Az XMLHttpRequest használata</a></li>
   <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML az XMLHttpRequest-ben</a></li>
   <li><a href="/en-US/docs/Web/API/FormData"><code>FormData</code></a></li>
  </ul>
 </li>
 <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — Új trükkök az XMLHttpRequest2-ben</a></li>
 <li><a href="https://www.w3schools.com/xml/ajax_xmlhttprequest_create.asp">The XMLHttpRequest Object</a></li>
 <li><a href="https://www.xul.fr/en-xml-ajax.html#request-step-by-step">Kérelem létrehozása lépésről lépésre</a></li>
 <li><code>Chrome scope availability</code> — hozzáférés az XMLHttpRequest-hez JSM modulokból, amelyek nem rendelkeznek DOM-hozzáféréssel (angol)
  <ul>
   <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
   <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">nsIXMLHttpRequest</a></li>
  </ul>
 </li>
 <li>Magyar nyelvű útmutatók, cikkek:
  <ul>
   <li><a href="https://hu.wikipedia.org/wiki/XMLHttpRequest">Wikipédia-szócikk</a></li>
   <li><a href="http://szit.hu/doku.php?id=oktatas:web:javascript:javascript_ajax">SzitWiki</a></li>
   <li><a href="http://bbkmoodle.bbksoft.hu/henger/kliens_server_web/ecceobs.eu/tananyag/wf2/lecke19_lap1.html#hiv6">Az XMLHttpRequest objektum</a></li>
   <li><a href="http://www.dotnetszeged.hu/mic/?p=1652">Webes alapok kutatása #4 (AJAX + JSON)</a></li>
  </ul>
 </li>
</ul>