AJAX w pigułce. Podstawy AJAX.

AJAX

Poziom średnio-zaawansowany

Witam w kolejnym artykule, w którym podstawowo omówimy to, co niegdyś mocno odmieniło świat JavaScriptu.

Podstawy AJAX

AJAX (Asynchronous JavaScript and XML, asynchroniczny JavaScript i XML) – jest to technologia tworzenia aplikacji internetowych, w której interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, czyli w sposób asynchroniczny.

Na technologię AJAX składa się kilka elementów:

– XMLHttpRequest – obiekt umożliwiający asynchroniczne przesyłanie danych przez sieć. W trakcie pobierania danych użytkownik może wykonywać inne czynności, można także pobierać dane jednocześnie z wielu źródeł.

– JavaScript – czyli dobrze nam znany język; choć w założeniu może to być inny język client-side obsługujący DOM, np. VBScript.

– XML – język znaczników, poprzez który miałyby być opisane odbierane informacje. Oprócz XML stosuje się też inne formaty, np. JSON, choć nośnikiem danych może być także zwykły tekst lub fragmenty kodu HTML. W przypadku JSON istnieje nawet określenie AJAJ.

Praktyczny AJAX

Poniżej zaprezentowaliśmy podstawowy przykład użycia AJAX. Wręcz klasyczny, w czystym JS tzn. bez użycia framework’ów.

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

httpRequest = new XMLHttpRequest();
httpRequest.overrideMimeType('text/xml');

// określamy funkcję pobierającą:
httpRequest.onreadystatechange = nazwa;

// lub
httpRequest.onreadystatechange = function() {
    // definicja
    alert('Test');
};

Metoda open:

// true – żądanie jest asynchroniczne
httpRequest.open('GET', 'http://www.example.org/some.file', true);

Przykłady użycia metody open():

r.open('GET', 'witryna.jsp', true);
r.open('GET', 'plik.jpg', true);
r.open('GET', 'http://www.example.net/get.php?id=123', true);

Wysłanie danych metodą send():

httpRequest.send(null);

Metoda send() ma jeden parametr: dane dołączane do zapytania. Parametr ten należy wykorzystać w przypadku metody POST. Jeśli stosowaną metodą jest GET, wówczas metodę send() wywołujemy podając null.

Jeśli chcemy wysłać dane metodą POST, powinniśmy zmienić MIME żądania:

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Przechwycenie reakcji. Wywołanie zwrotne (tudzież callback)

Tutaj właśnie może zostać uruchomiona magia czyli operowanie na dokumencie i wykonywanie zmian (bez przeładowania strony).

Przykład – callback:

if (httpRequest.readyState == 4) {
    // wszystko ok, przyjęto
    alert('Ok');
} else {
    // jeszcze nie gotowe
    alert('Proszę poczekać');
}

Sprawdzamy stan porównując wartość.

Lista wartości readyState:
0 – (uninitialized)
1 – (loading)
2 – (loaded)
3 – (interactive)
4 – (complete)

if (httpRequest.status == 200) {
    // ok
} else {
    // problem np. Error 404, Error 500
}

Użycie XML

Ten przykład pokazuje jak przetworzyć prostą strukturę XML, który służy jako nośnik informacji.

<?xml version="1.0" ?>
<root>
  Testowy
</root>

// ... inicjalizacja AJAX - pokazana wyżej
makeRequest('test.xml');
// ...

var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

Obiekt XMLHTTPRequest

Zobaczmy co skrywa obiekt XMLHTTPRequest.

Metody:

abort() – anuluje aktualne żądanie

getAllResponseHeaders() – zwraca kompletny zestaw nagłówków HTTP jako string

getResponseHeader( headerName ) – zwraca wartość konkretnego nagłówka HTTP

open( metoda, URL ) – określa metodę, URL i inne opcjonalne argumenty żądania

open( metoda, URL, async ) – async to wartość logiczna do określenia trybu (synchroniczny / asynchroniczny)

open( metoda, URL, async, userName )

open( metoda, URL, async, userName, password ) – argument metoda może mieć wartość „GET”, „POST”, „HEAD”, „PUT”, „DELETE” lub inne metody HTTP wypisane w specyfikacji W3C

Argument URL może być zarówno relatywnym lub bezwzględnym adresem.


Argument „async” określa czy żądanie powinno być przetwarzane asynchronicznie lub nie – dla 1 („true”) skrypt będzie dalej przetwarzany po wykonaniu metody send(), a dla 0 („false”) skrypt będzie przetwarzany dopiero po otrzymaniu odpowiedzi.

send( zawartość ) – wysyła żądanie

setRequestHeader( nazwaNagłówka, zawartośćNagłówka ) – dodaje parę nagłówek / zawartość do żądań HTTP

 
Właściwości obiektu XMLHTTPRequest:

onreadystatechange – określa referencje do funkcji wykonywanej przy każdej zmianie readyState

readyState – zawiera stan obiektu jak następuje:
0 = zapytania niezainicjowane
1 = cel otwarty
2 = zapytanie wysłane
3 = odbieranie odpowiedzi
4 = żądanie zakończone

responseText – zawiera odpowiedź (łańcuch znaków)

responseXML – zawiera odpowiedź jako XML; ta własność zwraca obiekt dokumentu XML, który może być parsowany używając klas i interfejsów W3C DOM

status – zawiera kod odpowiedzi HTTP jako numer (np. 404, 200 itd)

statusText – zawiera status jako ciąg znaków (np. „Not Found” lub „OK”).

Przykład – przetworzenie XML:

<?xml version="1.0" encoding=" utf-8"?>
<bookList xmlns="http://site1.com" xmlns:pub="http://site2.com">
  <book isbn="011111111">
    <title>Programowanie w Ajax</title>
    <author>Jan Kowalski, Stefan Nowak</author>
    <pub:name>Wydawnictwo Coder</pub:name>
  </book>
  <book isbn="022222222">
    <title>JS Coding for Geeks</title>
    <author>Fred Al Fred</author>
    <pub:name>Wrox</pub:name>
  </book>
</bookList>

Odwołanie do danych – przykład użycia XPath:

var sNameSpace = "xmlns:na='http://site1.com' xmlns:pub='http://site2.com'";
oXmlDom.setProperty("SelectionNamespaces", sNameSpace);

var oRoot = oXmlDom.documentElement;
var sXPath = "na:book/pub:name";
var cPublishers = oRoot.selectNodes(sXPath);

if (cPublishers.length < 0) {
    alert(cPublishers.length + " <pub:name/> elements found with " 
            + sXPath);
}

Podsumowanie

AJAX to dość rozległy temat. Dziś jest wszechobecny, jednak pamiętam te czasy, gdy dopiero stawał się popularny, i jakie wrażenie potrafiły robić pierwsze dzieła na nim bazujące.

Wkrótce opiszemy framework’i JavaScriptu, które wspierają również programowanie bazujące na AJAX. I robią to świetnie, gdyż programista bardzo łatwo może zakodować efekt końcowy, bez wdawania się w szczegóły XMLHTTPRequest, tak jak my dzisiaj, omawiając podstawy AJAX.

Moimi ulubionymi rozwiązaniami wspomagającymi użycie AJAX’a są te, oferowane przez jQuery.

Gorąco zachęcam do śledzenia kolejnych wpisów.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+2Share on LinkedIn2Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.