path: root/files/pl/web/api/xmlhttprequest/index.html

---
title: XMLHttpRequest
slug: Web/API/XMLHttpRequest
tags:
  - AJAX
  - Wszystkie_kategorie
  - XMLHttpRequest
translation_of: Web/API/XMLHttpRequest
original_slug: XMLHttpRequest
---
<p>
</p><p>Obiekt <code>XMLHttpRequest</code> jest obiektem <a href="pl/JavaScript">JavaScript</a> zaprojektowanym przez firmę Microsoft i zaadaptowanym w programach Mozilla. Służy do pobierania danych przy użyciu protokołu HTTP. Wbrew nazwie może być stosowany do obsługi dokumentów w wielu formatach, nie tylko XML, ale także <a href="pl/JSON">JSON</a>. </p><p>Artykuł ten zawiera między innymi informacje specyficzne dla silnika <a href="pl/Gecko">Gecko</a> lub kodu uprzywilejowanego, takiego jak kod rozszerzeń programu Firefox.
</p><p>W silniku Gecko w obiekcie zaimplementowano interfejsy <code><a href="pl/NsIJSXMLHttpRequest">nsIJSXMLHttpRequest</a></code> i <code><a href="pl/NsIXMLHttpRequest">nsIXMLHttpRequest</a></code>. W najnowszych wersjach Gecko dokonano pewnych modyfikacji tego obiektu — patrz artykuł <a href="pl/Zmiany_w_obiekcie_XMLHttpRequest_w_Gecko_1.8">Zmiany w obiekcie XMLHttpRequest w Gecko 1.8</a>.
</p>
<h3 id="Podstawy" name="Podstawy"> Podstawy </h3>
<p>Korzystanie z obiektu <code>XMLHttpRequest</code> jest bardzo proste. Należy utworzyć instancję obiektu, otworzyć adres URL, po czym wysłać żądanie. Zwrócony przez serwer kod stanu HTTP, jak również pobrany dokument są następnie dostępne jako własności obiektu żądania.
</p><p>{{ Note("W wersjach Firefoksa starszych niż 3 żądania są zawsze wysyłane przy użyciu kodowania UTF-8. W programie <a href='\"pl/Firefox_3\"'>Firefox 3</a> dokument jest wysyłany poprawnie przy użyciu kodowania określonego we własności <code>data.inputEncoding</code> (gdzie <code>data</code> to obiekt przekazany do metody <code>send()</code>; obiekt ten nie może być wartością <code>null</code>). Jeżeli nie określono żadnego kodowania, używane jest kodowanie UTF-8.") }}
</p>
<h4 id="Przyk.C5.82ad" name="Przyk.C5.82ad"> Przykład </h4>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false);
req.send(null);
if(req.status == 200)
  dump(req.responseText);
</pre>
<div class="note"><b>Uwaga:</b> W tym przykładzie dane pobierane są w sposób synchroniczny — wykonanie powyższego kodu JavaScript spowoduje zablokowanie interfejsu użytkownika do momentu zakończenia pobierania. Nie należy wykorzystywać podanego kodu w praktyce.</div>
<div class="note"><b>Uwaga:</b> W żądaniach synchronicznych nie należy korzystać z funkcji <code>onreadystatechange</code> — w przeciwnym przypadku w wersjach Firefoksa starszych niż wersja 3 zostanie ona wywołana. Program <a href="pl/Firefox_3">Firefox 3</a> jest zablokowany do momentu ukończenia procesu obsługi żądania (tak jak w powyższym przykładzie). Program Firefox 2 działa w ten sam sposób, jeżeli tylko funkcja <code>onreadystatechange</code> nie zostanie zaimplementowana.</div>
<h4 id="Przyk.C5.82ad_dla_protoko.C5.82u_innego_ni.C5.BC_HTTP" name="Przyk.C5.82ad_dla_protoko.C5.82u_innego_ni.C5.BC_HTTP"> Przykład dla protokołu innego niż HTTP </h4>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'file:///home/user/file.json', false);
req.send(null);
if(req.status == 0)
  dump(req.responseText);
</pre>
<div class="note"><b>Uwaga:</b> protokoły <code><a class=" external" rel="freelink">file:///</a></code> i <code><a class=" link-ftp" href="ftp://" rel="freelink">ftp://</a></code> nie zwracają kodu stanu HTTP, stąd w ich przypadku własność <code>status</code> zwraca wartość zero, a własność <code>statusText</code> zawiera pusty ciąg znaków. Aby uzyskać więcej informacji, patrz {{ Bug(331610) }}.</div>
<h3 id="Zastosowanie_asynchroniczne" name="Zastosowanie_asynchroniczne"> Zastosowanie asynchroniczne </h3>
<p>W przypadku korzystania z obiektów <code>XMLHttpRequest</code> w rozszerzeniu Firefoksa pobierane dane powinny być ładowane asynchronicznie. Po całkowitym pobraniu danych przekazywane jest wywołanie zwrotne (ang. <i>callback</i>), co pozwala na normalną pracę przeglądarki podczas przetwarzania żądania.
</p>
<h4 id="Przyk.C5.82ad_2" name="Przyk.C5.82ad_2"> Przykład </h4>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true); /* Argument trzeci, wartość true, określa, że żądanie ma być asynchroniczne */
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      dump(req.responseText);
     else
      dump("Błąd podczas ładowania strony\n");
  }
};
req.send(null);
</pre>
<h4 id="Monitorowanie_post.C4.99pu" name="Monitorowanie_post.C4.99pu"> Monitorowanie postępu </h4>
<p>Obiekt <code>XMLHttpRequest</code> umożliwia monitorowanie wielu zdarzeń, które mogą wystąpić podczas przetwarzania żądania — służą do tego okresowe powiadomienia o postępie przetwarzania, komunikaty o błędach itp.
</p><p>Jeżeli na przykład w czasie pobierania dokumentu do użytkownika mają być wysyłane informacje o postępie przetwarzania, można skorzystać z poniższego kodu:
</p>
<pre>function onProgress(e) {
  var percentComplete = (e.position / e.totalSize)*100;
  ...
}

function onError(e) {
  alert("Podczas pobierania dokumentu wystąpił błąd " + e.target.status + ".");
}

function onLoad(e) {
  // ...
}
// ...
var req = new XMLHttpRequest();
req.onprogress = onProgress;
req.open("GET", url, true);
req.onload = onLoad;
req.onerror = onError;
req.send(null);
</pre>
<p>Atrybuty zdarzenia <code>onprogress</code>, <code>position</code> i <code>totalSize</code>, wskazują odpowiednio liczbę pobranych dotychczas bajtów i całkowitą liczbę bajtów, które mają zostać pobrane.
</p><p>Dla wszystkich zdarzeń atrybut <code>target</code> wskazuje powiązany obiekt <code>XMLHttpRequest</code>.
</p>
<div class="note"><b>Uwaga:</b> przy korzystaniu z funkcji obsługi zdarzeń w dokumentach XML reprezentowanych przez obiekt <code>XMLDocument</code> program <a href="pl/Firefox_3">Firefox 3</a> sprawdza, czy wartości własności <code>target</code>, <code>currentTarget</code> i <code>this</code> obiektu zdarzenia wskazują na właściwe obiekty. Aby uzyskać szczegółowe informacje, patrz {{ Bug(198595) }}.</div>
<h3 id="Inne_w.C5.82asno.C5.9Bci_i_metody" name="Inne_w.C5.82asno.C5.9Bci_i_metody"> Inne własności i metody </h3>
<p>Oprócz własności i metod omówionych powyżej obiekty <code>XMLHttpRequest</code> obsługują również inne przydatne własności i metody.
</p>
<h4 id="responseXML" name="responseXML">responseXML</h4>
<p>Jeżeli ładowany jest dokument <a href="pl/XML">XML</a>, własność <code>responseXML</code> zawiera treść pobranego dokumentu w postaci obiektu <code>XmlDocument</code>, do którego można uzyskać za pomocą metod DOM. Jeżeli serwer wysyła poprawnie sformatowany dokument XML, ale nie jest okreśony nagłówek XML Content-Type, za pomocą metody <code><a href="pl/XMLHttpRequest#overrideMimeType.28.29">overrideMimeType()</a></code> można wymusić przetwarzanie dokumentu jako kodu XML. Jeżeli dokument XML wysyłany z serwera nie jest sformatowany poprawnie, własność <code>responseXML</code> zwraca wartość null, niezależnie od wymuszonego typu danych.
</p>
<h4 id="overrideMimeType.28.29" name="overrideMimeType.28.29">overrideMimeType()</h4>
<p>Za pomocą tej metody można wymusić sposób obsługi dokumentu, wskazując określony typ danych. Metoda ta przydaje się w sytuacji, gdy do przetwarzania otrzymanych danych ma być użyta własność <code>responseXML</code>, serwer wysyła dane w formacie <a href="pl/XML">XML</a>, ale nie jest wysyłany poprawny nagłówek Content-Type. </p>
<div class="note"><b>Uwaga:</b> metodę tę należy wywołać przed użyciem metody <code>send()</code>.</div>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.overrideMimeType('text/xml');
req.send(null);
</pre>
<h4 id="setRequestHeader.28.29" name="setRequestHeader.28.29">setRequestHeader()</h4>
<p>Za pomocą tej metody można ustawić dowolny nagłówek HTTP żądania przed wysłaniem go.
</p>
<div class="note"><b>Uwaga:</b> Przed wywołaniem tej metody należy użyć metody <code>open()</code>.</div>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.setRequestHeader("X-Foo", "Bar");
req.send(null);
</pre>
<h4 id="getResponseHeader.28.29" name="getResponseHeader.28.29">getResponseHeader()</h4>
<p>Za pomocą tej metody można pobrać nagłówek HTTP ustawiony w odpowiedzi przesłanej przez serwer.
</p>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false);
req.send(null);
dump("Content-Type: " + req.getResponseHeader("Content-Type") + "\n");
</pre>
<h4 id="abort.28.29" name="abort.28.29">abort()</h4>
<p>Metoda ta służy do anulowania żądania, które jest właśnie wykonywane.
</p>
<pre>var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false);
req.send(null);
req.abort();
</pre>
<h4 id="mozBackgroundRequest" name="mozBackgroundRequest">mozBackgroundRequest</h4>
<p>{{ Fx_minversion_inline(3) }} Za pomocą tej własności można wyłączyć okna dialogowe uwierzytelniania i niewłaściwego certyfikatu, które mogą pojawiać się przy wysyłaniu żądania. Żądanie, dla którego ustawiono tę własność, nie będzie ponadto anulowane nawet w przypadku zamknięcia okna, z którego zostało wysłane. Własność ta działa wyłącznie w kodzie chrome.
</p>
<pre>var req = new XMLHttpRequest();
req.mozBackgroundRequest = true;
req.open('GET', 'http://www.mozilla.org/', true);
req.send(null);
</pre>
<h3 id="Zastosowanie_w_komponentach_XPCOM" name="Zastosowanie_w_komponentach_XPCOM"> Zastosowanie w komponentach XPCOM </h3>
<div class="note"><b>Uwaga:</b> W przypadku korzystania z obiektów XMLHttpRequest w komponentach JavaScript XPCOM wymagane są pewne zmiany.</div>
<p>W komponentach JavaScript XPCOM niemożliwe jest utworzenie obiektów XMLHttpRequest za pomocą konstruktora <code>XMLHttpRequest()</code> — nie jest on zdefiniowany wewnątrz komponentów i jego wywołanie powoduje wystąpienie błędu. W celu utworzenia i użycia obiektu należy skorzystać z innej składni.
</p><p>Zamiast kodu:
</p>
<pre>var req = new XMLHttpRequest();
req.onprogress = onProgress;
req.onload = onLoad;
req.onerror = onError;
req.open("GET", url, true);
req.send(null);
</pre>
<p>należy użyć:
</p>
<pre>var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
req.onprogress = onProgress;
req.onload = onLoad;
req.onerror = onError;
req.open("GET", url, true);
req.send(null);
</pre>
<p>W kodzie w języku C++ można za pomocą metody QueryInterface przesłać komponent do interfejsu <code>nsIEventTarget</code>, aby ustawić procedury obsługi zdarzeń; bezpośrednie korzystanie z kanału jest jednak lepszą techniką.
</p>
<h3 id="Ograniczona_liczba_jednoczesnych_po.C5.82.C4.85cze.C5.84_nawi.C4.85zywanych_przez_obiekty_XMLHttpRequest" name="Ograniczona_liczba_jednoczesnych_po.C5.82.C4.85cze.C5.84_nawi.C4.85zywanych_przez_obiekty_XMLHttpRequest"> Ograniczona liczba jednoczesnych połączeń nawiązywanych przez obiekty XMLHttpRequest </h3>
<p>Maksymalna liczba połączeń, określona w preferencji <code>network.http.max-persistent-connections-per-server</code> (dostępnej w oknie <code>about:config</code>), jest domyślnie ograniczona do 2. Niektóre interaktywne strony internetowe, na których używane są obiekty XMLHttpRequest, mogą podtrzymywać otwarte połączenie. Otwarcie dwóch lub trzech takich stron w osobnych kartach lub oknach może spowodować awarię przeglądarki, w wyniku której zawartość okien nie będzie odświeżana, a sama aplikacja przestanie odpowiadać.
</p>
<h3 id="Zawarto.C5.9B.C4.87_binarna" name="Zawarto.C5.9B.C4.87_binarna"> Zawartość binarna </h3>
<p>Chociaż wysyłanie i odbieranie danych tekstowych jest najbardziej popularnym zastosowaniem obiektu <code>XMLHttpRequest</code>, za jego pomocą można także przesyłać zawartość binarną.
</p>
<h4 id="Pobieranie_zawarto.C5.9Bci_binarnej" name="Pobieranie_zawarto.C5.9Bci_binarnej">Pobieranie zawartości binarnej</h4>
<pre>// Synchroniczne pobieranie PLIKÓW BINARNYCH za pomocą obiektu XMLHttpRequest
function load_binary_resource(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url, false);
  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType('text/plain; charset=x-user-defined');
  req.send(null);
  if (req.status != 200) return '';
  return req.responseText;
}

var filestream = load_binary_resource(url);
// x to offset (tzn. pozycja) bajtu w zwróconym strumieniu pliku binarnego.
// Wartość x powinna mieścić się w zakresie od 0 do filestream.length-1.
var abyte = filestream.charCodeAt(x) &amp; 0xff; // usunięcie najbardziej znaczącego (górnego) bajtu (f7)
</pre>
<p>Szczegółowe wyjaśnienia można znaleźć w <a class="external" href="http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html">artykule dotyczącym pobierania zawartości binarnej za pomocą obiektu XMLHttpRequest</a>. Patrz także <a href="pl/Fragmenty_kodu/Pobieranie_plik%c3%b3w">Pobieranie plików</a>.
</p>
<h4 id="Wysy.C5.82anie_zawarto.C5.9Bci_binarnej" name="Wysy.C5.82anie_zawarto.C5.9Bci_binarnej">Wysyłanie zawartości binarnej</h4>
<p>W poniższym przykładzie zawartość binarna jest wysyłana asynchronicznie za pomocą metody POST. Zmienna <code>aBody</code> reprezentuje wysyłane dane.</p>
<pre class="eval"> var req = new XMLHttpRequest();
 req.open("POST", url, true);
 // ustawienie odpowiednich nagłówków i typu MIME
 req.setRequestHeader("Content-Length", 741);
 req.sendAsBinary(aBody);
</pre>
<p>Zawartość binarną można także wysłać, przekazując instancję interfejsu <a href="/pl/NsIFileInputStream" title="pl/NsIFileInputStream">nsIFileInputStream</a> do metody <code>req.send()</code>. W takim przypadku nie jest konieczne ustawienie nagłówka <code>Content-Length</code>:</p>
<pre>// Tworzenie strumienia z pliku.
var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                       .createInstance(Components.interfaces.nsIFileInputStream);
stream.init(file, 0x04 | 0x08, 0644, 0x04); // file to instancja interfejsu nsIFile

// Próba określenia typu MIME pliku
var mimeType = "text/plain";
try {
  var mimeService = Components.classes["@mozilla.org/mime;1"].getService(Components.interfaces.nsIMIMEService);
  mimeType = mimeService.getTypeFromFile(file); // file to instancja interfejsu nsIFile
}
catch(e) { /* W tym przypadku zastosuj po prostu typ text/plain */ }

// Wysłanie
var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
req.open('PUT', url, false); /* synchronicznie! */
req.setRequestHeader('Content-Type', mimeType);
req.send(stream);
</pre><h3 id="Pomijanie_pami.C4.99ci_podr.C4.99cznej" name="Pomijanie_pami.C4.99ci_podr.C4.99cznej">Pomijanie pamięci podręcznej</h3>
<p>Obiekt <code>XMLHttpRequest</code> próbuje z reguły pobrać zawartość z lokalnej pamięci podręcznej. Aby pominąć tę próbę, należy skorzystać z poniższego kodu:
</p>
<pre class="eval"> var req = new XMLHttpRequest();
 <b>req.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;</b>
 req.open('GET', url, false);
 req.send(null);
</pre>
<p>Istnieje także alternatywny sposób pomijania pamięci podręcznej, opisany <a class="external" href="http://mozdev.org/pipermail/project_owners/2006-August/008353.html">tutaj</a>:
</p>
<pre class="eval"> var req = new XMLHttpRequest();
 req.open("GET", url += (url.match(/\?/) == null ? "?" : "&amp;") + (new Date()).getTime(), false);
 req.send(null);
</pre>
<p>Do adresu URL dodawany jest parametr zawierający znacznik czasu (odpowiednio wstawiane są znaki ? i &amp;). Na przykład adres <a class=" external" href="http://foo.com/bar.html" rel="freelink">http://foo.com/bar.html</a> jest przekształcany na <a class=" external" href="http://foo.com/bar.html?12345" rel="freelink">http://foo.com/bar.html?12345</a>, a <a class=" external" href="http://foo.com/bar.html?foobar=baz" rel="freelink">http://foo.com/bar.html?foobar=baz</a> zostaje zamieniany na <a class=" external" href="http://foo.com/bar.html?foobar=baz&amp;12345" rel="freelink">http://foo.com/bar.html?foobar=baz&amp;12345</a>. Lokalna pamięć podręczna jest indeksowana przy użyciu adresów URL; tymczasem, ponieważ każdy adres URL w obiekcie XMLHttpRequest jest niepowtarzalny, pamięć podręczna jest zawsze pomijana.
</p>
<h3 id="Pobieranie_kodu_JSON_i_JavaScript_w_rozszerzeniach" name="Pobieranie_kodu_JSON_i_JavaScript_w_rozszerzeniach">Pobieranie kodu JSON i JavaScript w rozszerzeniach</h3>
<p>W rozszerzeniach do przetwarzania pobieranego z sieci kodu JSON lub JavaScript nie należy używać metody <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/eval"><code>eval()</code></a>. Szczegółowe informacje można znaleźć w artykule <a href="pl/Pobieranie_kodu_JSON_i_JavaScript_w_rozszerzeniach">Pobieranie kodu JSON i JavaScript w rozszerzeniach</a>.
</p>
<h3 id="Odno.C5.9Bniki" name="Odno.C5.9Bniki"> Odnośniki </h3>
<ol><li> <a href="pl/AJAX/Na_pocz%c4%85tek">AJAX: wprowadzenie</a>
</li><li> <a class="external" href="http://www.peej.co.uk/articles/rich-user-experience.html">Obiekt XMLHttpRequest - architektura REST i zaawansowane interfejsy użytkownika</a> (artykuł w j. ang.)
</li><li> <a class="external" href="http://www.xulplanet.com/references/objref/XMLHttpRequest.html">Dokumentacja XULPlanet</a> (artykuł w j. ang.)
</li><li> <a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Dokumentacja firmy Microsoft</a> (artykuł w j. ang.)
</li><li> <a class="external" href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Materiały dla programistów Apple</a> (artykuł w j. ang.)
</li><li> <a class="external" href="http://jibbering.com/2002/4/httprequest.html">Korzystanie z obiektu XMLHttpRequest (jibbering.com)</a> (artykuł w j. ang.)
</li><li> <a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">Obiekt XMLHttpRequest: robocza wersja specyfikacji W3C</a> (artykuł w j. ang.)
</li></ol>
<div class="noinclude">
</div>
{{ languages( { "en": "en/XMLHttpRequest", "es": "es/XMLHttpRequest", "fr": "fr/XMLHttpRequest", "it": "it/XMLHttpRequest", "ja": "ja/XMLHttpRequest", "ko": "ko/XMLHttpRequest", "zh-cn": "cn/XMLHttpRequest" } ) }}