Krok 3 - "Do dzieła!" - Prosty przykład

Stwórzmy teraz proste zapytanie HTTP. JavaScript odpyta serwer o dokument HTML

test.html

, który zawiera tekst "Jestem testem.", a następnie wyświetlimy ten tekst przy użyciu funkcji

alert()

.

<script type="text/javascript" language="javascript"> var http_request = false; function makeRequest(url) { http_request = false; if (window.XMLHttcodequest) { // Mozilla, Safari,... http_request = new XMLHttcodequest(); 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>

W tym przykładzie:

  • użytkownik klika na odnośnik "Odpytaj" w przeglądarce;
  • to wywołuje funkcję

    makeRequest

    z parametrem - nazwą

    test.html

    pliku HTML w tym samym katalogu;
  • wysyłane jest zapytanie, a następnie (

    onreadystatechange

    ) wywołanie jest przenoszone do

    alertContents()

    ;

  • alertContents()

    sprawdza uzyskaną odpowiedź i wyświetla treść pliku

    test.html

    przy użyciu funkcji

    alert()

    .

Możesz przetestować ten przykład tutaj i zobaczyć testowy plik tutaj.

Uwaga: Jeżeli strona wywołana przez XMLHttcodequest nie jest poprawionym XML-em (np. kiedy jest plikiem tekstowym), linia

http_request.overrideMimeType('text/xml');

spowoduje pojawienie się błędów w konsoli JavaScript w Firefoksie 1.5 i późniejszych. Zostało to opisane na stronie: https://bugzilla.mozilla.org/show_bug.cgi?id=311724. Jest to zachowanie właściwe; ten artykuł zostanie niedługo poprawiony, aby dostosować się do tej zmiany.

Uwaga 2: 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

Content-Type: application/xml

, 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

Cache-Control: no-cache

, 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".

Uwaga 3: jeżeli zmienna

http_request

jest używana globalnie, konkurujące funkcje wywołujące

makeRequest()

mogą nadpisywać siebie nawzajem, tworząc problemy. Określenie zmiennej

http_request

lokalnie dla funkcji i przekazywanie jej do funkcji

alertContent()

pozwala uniknąć takiej sytuacji.

Uwaga 4: Aby zarejestrować funkcję zwrotną (callback function)

onreadystatechange

, nie możesz użyć argumentów. Dlatego też poniższy kod nie zadziała:

http_request.onreadystatechange = alertContents(http_request); // (nie działa)

Z tego względu, aby zarejestrować tę funkcję pomyślnie, należy albo przekazać argumenty pośrednio poprzez funkcję anonimową, albo użyć

http_request

jako zmiennej globalnej. Oto przykłady:

http_request.onreadystatechange = function() { alertContents(http_request); }; //1 (simultaneous request) http_request.onreadystatechange = alertContents; //2 (global variable)

Metoda pierwsza pozwala mieć wiele zapytań przetwarzanych jednocześnie, a metoda trzecia może być używana jeśli

http_request

jest zmienną globalną.

Uwaga 5: 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: https://bugzilla.mozilla.org/show_bug.cgi?id=238559).

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

 Chcesz wiedzieć więcej   Czytaj Dalej >>