diff options
Diffstat (limited to 'files/pl/web/guide/ajax/getting_started/index.html')
| -rw-r--r-- | files/pl/web/guide/ajax/getting_started/index.html | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/files/pl/web/guide/ajax/getting_started/index.html b/files/pl/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..59fe3cee8a --- /dev/null +++ b/files/pl/web/guide/ajax/getting_started/index.html @@ -0,0 +1,222 @@ +--- +title: Na początek +slug: Web/Guide/AJAX/Getting_Started +tags: + - AJAX + - Wszystkie_kategorie +translation_of: Web/Guide/AJAX/Getting_Started +original_slug: Web/Guide/AJAX/Na_początek +--- +<p> +</p><p>Ten artykuł pozwoli Ci poznać podstawy technologii AJAX oraz poda dwa proste, gotowe do użycia przykłady. +</p> +<h3 id="Czym_jest_AJAX.3F" name="Czym_jest_AJAX.3F"> Czym jest AJAX? </h3> +<p>AJAX (<i>Asynchronous JavaScript and XML</i>) jest niedawno ukutą nazwą na dwie potężne cechy przeglądarek WWW, które, choć dostępne od lat, były pomijane przez wielu autorów stron, aż do niedawna, gdy na rynku ukazały się takie aplikacje, jak Gmail, Google Suggest i Google Maps. +</p><p>Dzięki tym cechom możesz: +</p> +<ul><li> wysyłać zapytania do serwera bez przeładowywania strony, +</li><li> parsować i pracować z dokumentami XML. +</li></ul> +<p>Termin AJAX jest akronimem. <strong>A</strong> pochodzi od <em>"asynchroniczny"</em>, co znaczy, że możesz wysyłać zapytania HTTP do serwera i robić inne rzeczy w trakcie oczekiwania na odpowiedź. <strong>JA</strong> pochodzi od <em>"JavaScript"</em>, a <strong>X</strong> pochodzi od <em>"XML"</em>. +</p> +<h3 id="Krok_1_.E2.80.93_powiedz_.22Poprosz.C4.99.21.22.2C_czyli_jak_wykona.C4.87_zapytanie_HTTP" name="Krok_1_.E2.80.93_powiedz_.22Poprosz.C4.99.21.22.2C_czyli_jak_wykona.C4.87_zapytanie_HTTP"> Krok 1 – powiedz "Poproszę!", czyli jak wykonać zapytanie HTTP </h3> +<p>W celu stworzenia zapytania HTTP przy użyciu JavaScriptu, potrzebujesz instancji klasy, która posiada żądaną funkcjonalność. Taka klasa została po raz pierwszy wprowadzona w Internet Explorerze, jako obiekt ActiveX, pod nazwą <code>XMLHTTP</code>. Później Mozilla, Safari i inne przeglądarki również dodały taki obiekt, implementując klasę <code>XMLHttpRequest</code>, która obsługuje metody i właściwości oryginalnego obiektu ActiveX. +</p><p>W rezultacie, w celu stworzenia międzyprzeglądarkowej instancji (obiektu) potrzebnej nam klasy, należy wpisać: +</p> +<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, Opera ... + http_request = new XMLHttpRequest(); +} else if (window.ActiveXObject) { // IE + http_request = new ActiveXObject("Microsoft.XMLHTTP"); +} +</pre> +<p>(Na potrzeby przykładu powyższy fragment jest lekko uproszczoną wersją kodu używanego do stworzenia instancji XMLHTTP. Bardziej "życiowy" przykład można znaleźć w punkcie 3. tego artykułu). +</p><p>Niektóre wersje przeglądarek opartych na technologii Mozilli nie zadziałają poprawnie, jeżeli odpowiedź z serwera nie będzie opisana XML-owym nagłówkiem <code>mime-type</code>. Aby rozwiązać ten problem, można użyć dodatkowej metody do nadpisania nagłówka wysyłanego przez serwer, jeśli nie jest to <code>text/xml</code>. +</p> +<pre>http_request = new XMLHttpRequest(); +http_request.overrideMimeType('text/xml'); +</pre> +<p>Następnie należy się zdecydować, co chcesz zrobić po otrzymaniu od serwera odpowiedzi na Twoje zapytanie. Na tym etapie wystarczy powiedzieć obiektowi zapytania HTTP, która funkcja JavaScript będzie opracowywała wynik. Można to uzyskać poprzez ustawienie właściwości <code>onreadystatechange</code> obiektu funkcji JavaScript, której będziesz używał, na przykład: +</p><p><code>http_request.onreadystatechange = nameOfTheFunction;</code> +</p><p>Zwróć uwagę, że nie ma żadnych nawiasów za nazwą funkcji i nie są przekazywane żadne parametry, ponieważ chcemy przypisać referencję do tej funkcji, a nie wywołać ją. Można także, zamiast podawać nazwę funkcji, użyć techniki JavaScript do definiowania funkcji w locie (zwanej "funkcją anonimową") i określić akcje, które przetworzą wynik natychmiast, jak na przykład: +</p> +<pre>http_request.onreadystatechange = function(){ + // instrukcje +}; +</pre> +<p>Następnie, kiedy już zostało zadeklarowane, co będzie się działo zaraz po odebraniu odpowiedzi, należy wykonać zapytanie. W tym celu należy wywołać metody <code>open()</code> i <code>send()</code> klasy zapytania HTTP, tak jak na poniższym przykładzie: +</p> +<pre>http_request.open('GET', 'http://www.example.org/some.file', true); +http_request.send(null); +</pre> +<ul><li> Pierwszy parametr metody <code>open()</code> określa metodę zapytania HTTP - GET, POST, HEAD lub dowolną inną metodę, której chcesz użyć i którą obsługuje serwer. Dla zachowania zgodności ze standardem nazwę metody wpisuj dużymi literami. W przeciwnym razie niektóre przeglądarki (np. Firefox) mogą nie przetworzyć zapytania. Aby dowiedzieć się więcej na temat możliwych metod zapytań HTTP, zajrzyj do <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">dokumentacji W3C</a>. +</li></ul> +<ul><li> Drugi parametr określa URL strony, która ma zostać odpytana. W celu zwiększenia bezpieczeństwa, nie jest możliwe odpytywanie stron znajdujących się w domenach zewnętrznych (tzw. 3rd-party domains). Upewnij się, że wpisujesz dokładną nazwę domeny, na wszystkich swoich stronach, w przeciwnym razie po wywołaniu metody <code>open()</code> dostaniesz odpowiedź z błędem "brak dostępu" (permission denied). Częstym błędem jest otwieranie strony jako domena.tld, ale wywoływanie stron z www.domena.tld. +</li></ul> +<ul><li> Trzeci parametr decyduje, czy zapytanie ma być asynchroniczne. Jeżeli tak, wykonywanie funkcji JavaScript będzie kontynuowane podczas oczekiwania na odpowiedź z serwera. I to jest właśnie A w nazwie AJAX. +</li></ul> +<p>Parametr metody <code>send()</code> może być dowolną daną, którą chcesz wysłać do serwera w przypadku użycia metody <code>POST</code>. Dane powinny być umieszczone w formie używanej przez ciągi zapytań, czyli: +</p><p><code>name=value&anothername=othervalue&so=on</code> +</p><p>Należy pamiętać o zakodowaniu każdej wysyłanej wartości funkcją <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/encodeURIComponent">encodeURIComponent</a></code>. Na przykład jeśli w środku, jakiegoś przesyłanego łańcucha znajdzie się znak & to "obetnie" nasz łańcuch. Opis tej funkcji w dokumentcji zawiera bardziej szczegółowe informacje. +</p><p>Zwróć uwagę na to, że jeśli chcesz wysłać dane metodą <code>POST</code>, musisz zmienić typ MIME swojego zapytania, używając składni: +</p> +<pre>http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +</pre> +<p>W przeciwnym wypadku, serwer odrzuci dane wysłane metodą POST. +</p> +<h3 id="Krok_2_.E2.80.93_.22Voil.C3.A0.21.22.2C_czyli_obs.C5.82uga_odpowiedzi_serwera" name="Krok_2_.E2.80.93_.22Voil.C3.A0.21.22.2C_czyli_obs.C5.82uga_odpowiedzi_serwera"> Krok 2 – "Voilà!", czyli obsługa odpowiedzi serwera </h3> +<p>Pamiętasz, że w trakcie wysyłania zapytania została podana nazwa funkcji JavaScript, która została przygotowana do obsługi odpowiedzi? +</p><p><code>http_request.onreadystatechange = nazwaFunkcji;</code> +</p><p>Zobaczmy, co ta funkcja powinna zrobić. Najpierw musi ona sprawdzić stan zapytania. Jeżeli status ma wartość 4, oznacza to, że udało się pobrać pełną odpowiedź z serwera i można kontynuować jej przetwarzanie. +</p> +<pre>if (http_request.readyState == 4) { + // wszystko jest OK, odpowiedź została odebrana +} else { + // ciągle nie gotowe +} +</pre> +<p>Możliwe są następujące wartości <code>readyState</code>: +</p> +<ul><li> 0 (niezainicjowane) +</li><li> 1 (w trakcie pobierania) +</li><li> 2 (pobrano) +</li><li> 3 (interaktywne) +</li><li> 4 (gotowe) +</li></ul> +<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">Źródło</a>) +</p><p>Następnie należy sprawdzić kod odpowiedzi serwera HTTP. Wszystkie możliwe kody są opisane na <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">stronie W3C</a>. W tym przypadku interesuje nas tylko odpowiedź <code>200 OK</code>. +</p> +<pre>if (http_request.status == 200) { + // świetnie!! +} else { + // wystąpił jakiś problem z zapytaniem, + // na przykład odpowiedzią mogło być 404 (Nie odnaleziono) + // lub 500 (Wewnętrzny błąd serwera) +} +</pre> +<p>Teraz, kiedy został już sprawdzony stan zapytania i kod statusu odpowiedzi, możesz zrobić co zechcesz z danymi otrzymanymi z serwera. Masz dwie możliwości dostania się do danych: +</p> +<ul><li> <code>http_request.responseText</code> – zwróci odpowiedź serwera jako ciąg znakowy +</li><li> <code>http_request.responseXML</code> – zwróci odpowiedź jako obiekt <code>XMLDocument</code>, z którym można pracować przy użyciu funkcji DOM JavaScriptu. +</li></ul> +<h3 id="Krok_3_.E2.80.93_.22Do_dzie.C5.82a.21.22_-_Prosty_przyk.C5.82ad" name="Krok_3_.E2.80.93_.22Do_dzie.C5.82a.21.22_-_Prosty_przyk.C5.82ad"> Krok 3 – "Do dzieła!" - Prosty przykład </h3> +<p>Stwórzmy teraz proste zapytanie HTTP. JavaScript odpyta serwer o dokument HTML <code>test.html</code>, który zawiera tekst "Jestem testem.", a następnie wyświetlimy ten tekst przy użyciu funkcji <code>alert()</code>. +</p> +<pre><script type="text/javascript" language="javascript"> + + var http_request = false; + + function makeRequest(url) { + + http_request = false; + + if (window.XMLHttpRequest) { // Mozilla, Safari,... + http_request = new XMLHttpRequest(); + if (http_request.overrideMimeType) { + http_request.overrideMimeType('text/xml'); + // Przeczytaj o tym wierszu poniżej + } + } else if (window.ActiveXObject) { // IE + try { + http_request = new ActiveXObject("Msxml2.XMLHTTP"); + } catch (e) { + try { + http_request = new ActiveXObject("Microsoft.XMLHTTP"); + } catch (e) {} + } + } + + if (!http_request) { + alert('Poddaję się :( Nie mogę stworzyć instancji obiektu XMLHTTP'); + return false; + } + http_request.onreadystatechange = function() { alertContents(http_request); }; + http_request.open('GET', url, true); + http_request.send(null); + + } + + function alertContents(http_request) { + + if (http_request.readyState == 4) { + if (http_request.status == 200) { + alert(http_request.responseText); + } else { + alert('Wystąpił problem z zapytaniem.'); + } + } + + } +</script> +<span + style="cursor: pointer; text-decoration: underline" + onclick="makeRequest('test.html')"> + Odpytaj +</span> +</pre> +<p>W tym przykładzie: +</p> +<ul><li> użytkownik klika na odnośnik "Odpytaj" w przeglądarce; +</li><li> to wywołuje funkcję <code>makeRequest</code> z parametrem - nazwą <code>test.html</code> pliku HTML w tym samym katalogu; +</li><li> wysyłane jest zapytanie, a następnie (<code>onreadystatechange</code>) wywołanie jest przenoszone do <code>alertContents()</code>; +</li><li> <code>alertContents()</code> sprawdza uzyskaną odpowiedź i wyświetla treść pliku <code>test.html</code> przy użyciu funkcji <code>alert()</code>. +</li></ul> +<p>Możesz przetestować ten przykład <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">tutaj</a> i zobaczyć testowy plik <a class="external" href="http://www.w3clubs.com/mozdev/test.html">tutaj</a>. +</p><p><b>Uwaga</b>: Jeżeli strona wywołana przez XMLHttpRequest nie jest poprawionym XML-em (np. kiedy jest plikiem tekstowym), linia <code> http_request.overrideMimeType('text/xml');</code> spowoduje pojawienie się błędów w konsoli JavaScript w Firefoksie 1.5 i późniejszych. Zostało to opisane na stronie: <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=311724</a>. Jest to zachowanie właściwe; ten artykuł zostanie niedługo poprawiony, aby dostosować się do tej zmiany. +</p><p><b>Uwaga 2</b>: jeżeli wysyłasz zapytanie do skryptu, który ma zwrócić XML, zamiast do statycznego pliku XML, musisz ustawić nagłówki odpowiedzi, jeśli chcesz, aby zadziałało to także w Internet Explorerze. Jeżeli nie ustawisz nagłówka <code>Content-Type: application/xml</code>, IE zwróci błąd JavaScript "Object Expected" po wierszu, w którym próbujesz dostać się do XML-owego elementu. Jeżeli nie ustawisz nagłówka <code>Cache-Control: no-cache</code>, przeglądarka doda odpowiedź do pamięci podręcznej i nigdy nie wyśle żądania ponownie, sprawiając, że praca nad skryptem może być "kłopotliwa". +</p><p><b>Uwaga 3</b>: jeżeli zmienna <code>http_request</code> jest używana globalnie, konkurujące funkcje wywołujące <code>makeRequest()</code> mogą nadpisywać siebie nawzajem, tworząc problemy. Określenie zmiennej <code>http_request</code> lokalnie dla funkcji i przekazywanie jej do funkcji <code>alertContent()</code> pozwala uniknąć takiej sytuacji. +</p><p><b>Uwaga 4</b>: Aby zarejestrować funkcję zwrotną (callback function) <code>onreadystatechange</code>, nie możesz użyć argumentów. Dlatego też poniższy kod nie zadziała: +</p> +<pre>http_request.onreadystatechange = alertContents(http_request); // (nie działa) +</pre> +<p>Z tego względu, aby zarejestrować tę funkcję pomyślnie, należy albo przekazać argumenty pośrednio poprzez funkcję anonimową, albo użyć <code>http_request</code> jako zmiennej globalnej. Oto przykłady: +</p> +<pre>http_request.onreadystatechange = function() { alertContents(http_request); }; //1 (simultaneous request) +http_request.onreadystatechange = alertContents; //2 (global variable) +</pre> +<p>Metoda pierwsza pozwala mieć wiele zapytań przetwarzanych jednocześnie, a metoda trzecia może być używana jeśli <code>http_request</code> jest zmienną globalną. +</p><p><b>Uwaga 5</b>: W przypadku błędu połączenia (na przykład kiedy serwer WWW został wyłączony), zostanie wyrzucony wyjątek w metodzie onreadystatechange podczas próby odczytania zmiennej .status. Z tego względu dobrze jest opakować wyrażenie if...then w try...catch. (Zobacz: <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=238559" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=238559</a>). +</p> +<pre>function alertContents(http_request) { + + try { + if (http_request.readyState == 4) { + if (http_request.status == 200) { + alert(http_request.responseText); + } else { + alert('Wystąpił problem z tym żądaniem.'); + } + } + } + catch( e ) { + alert('Złapany wyjątek: ' + e.description); + } + + } +</pre> +<h3 id="Krok_4_.E2.80.93_.22Z_archiwum_X.22_czyli_praca_z_odpowiedzi.C4.85_XML" name="Krok_4_.E2.80.93_.22Z_archiwum_X.22_czyli_praca_z_odpowiedzi.C4.85_XML"> Krok 4 – "Z archiwum X" czyli praca z odpowiedzią XML </h3> +<p>W poprzednim przykładzie, po otrzymaniu odpowiedzi z serwera, użyliśmy właściwości <code>responseText</code> obiektu zapytania i zawierała ona treść pliku <tt>test.html</tt>. Teraz spróbujmy użyć właściwości <code>responseXML</code>. +</p><p>Przede wszystkim stwórzmy prawidłowy dokument XML, o który odpytamy potem serwer. Taki dokument (<tt>test.xml</tt>) może wyglądać tak: +</p> +<pre><?xml version="1.0" ?> +<root> + Jestem testem. +</root> +</pre> +<p>W skrypcie musimy tylko zmienić linię zapytania na: +</p> +<pre>... +onclick="makeRequest('test.xml')"> +... +</pre> +<p>Potem w <code>alertContents()</code> musimy zmienić linię <code>alert(http_request.responseText);</code> na: +</p> +<pre>var xmldoc = http_request.responseXML; +var root_node = xmldoc.getElementsByTagName('root').item(0); +alert(root_node.firstChild.data); +</pre> +<p>W ten sposób pobraliśmy obiekt <code>XMLDocument</code>, zwrócony przez <code>responseXML</code> i skorzystaliśmy z metod DOM, aby dostać się do danych zawartych w dokumencie XML. Możesz zajrzeć do dokumentu XML <code>test.xml</code> <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">tutaj</a> oraz do zaktualizowanego skryptu <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">tutaj</a>. +</p><p>Aby dowiedzieć się więcej o metodach DOM, zajrzyj do dokumentów <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a>. +</p> +<div class="noinclude"> +</div> +{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }} |