Ostatnio często spotykałem się z terminem AJAX, dlatego też postanowiłem przybliżyć sobie ten temat i przystąpiłem do napisania prostego przykładu, który by wykorzystywał tą technologię. W tym tekście przedstawiam to co mi się udało siągnąć pewnego niedzielnego wieczoru.

uruchomienie przykładu [Ajax Test]

Odpowiedź w formacie tekstowym

Odpowiedź w formie tabeli - przetworzony xml

Wybranie linka uruchamia funkcję JavaScript, która korzystając z obiektu XMLHttpRequest pobiera z serwera plik /china1/ajax.xml i wyświetla jego zawartość w dwóch formatach.

Poniżej zawartość pliku /china1/ajax.xml

<?xml  version="1.0"  ?>
<root>
    <item><name  id="p1">produkt1</name><price>1.00</price></item>
    <item><name>produkt2</name><price>2.00</price></item>
    <item><name>produkt3</name><price>3.00</price></item>
    <item><name>produkt4</name><price>4.00</price></item>
    <item><name>produkt5</name><price>5.00</price></item>
</root> 

Powyższy przykład działa w oparciu o cztery funkcje:

sendRequest()
Obsługuje zdarzenie wybrania link'a

createRequestObject()
Funkcja tworząca objekt XMLHttpRequest

handleResponse()
Przetwarzanie odpowiedzi

createTable(xmlDoc)
Funkcja, która tworzy tabelkę z XML'a i została wydzielona dla przejrzystości przykładu.

Poniżej pełny kod przykładu dla jasności lekko skomentowany. Przetwarzania xml'a nie wyjaśniam, to odzielny temat - sam się przez niego z lekkim trudem przebijałem.

<script  type="text/javascript">

//
//  funkcja  tworzaca  obiekt  XMLHttpRequest  zaleznie  od  przegladarki 
function  createRequestObject()
{
    var  request;
    var  browser  =  navigator.appName;

    if  (browser  ==  "Microsoft  Internet  Explorer")
    {
        request  =  new  ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {
        request  =  new  XMLHttpRequest();
    }
    return  (request);
}

var  http  =  createRequestObject();
var  responseXML;

//  wyslanie  zadania  do  serwera
function  sendRequest()
{
    http.onreadystatechange  =  handleResponse;
    http.open("get",  "/china1/ajax.xml",  true);
    http.send(null);
}

//  funkcja  obslugujaca  odpowiedz
function  handleResponse()
{
    //  jezeli  odpowiedz  kompletna
    if  (http.readyState  ==  4)
    {
        //  tylko  jezeli  "OK"
        if  (http.status  ==  200)
        {
            //  tutaj  przetwarzanie  otrzymanej  odpowiedzi  ...

            //  wstawienie  odpowiedzi  tekstowej
            document.getElementById("answer").innerHTML  =  http.responseText;

            //  obsluga  odpowiedzi  xml
            var  xmlDoc  =  http.responseXML;
            createTable(xmlDoc);
        }
        else
        {
            alert("Problem  z  odbiorem  danych  XML:\n"  +  http.statusText);
        }
    }
}

//  tworzenie  tabeli  z  obiektu  xml
function  createTable(xmlDoc)
{
    var  items  =  xmlDoc.getElementsByTagName("item");
    var  item;

    var  out  =  "";

    out  +=  "<table  border=1>";

    for  (var  i  =  0;  i  <  items.length;  i++)
    {
        item  =  items[i];

        nameItem  =  item.getElementsByTagName("name").item(0);
        priceItem  =  item.getElementsByTagName("price").item(0);

        out  +=  "<tr><td>"  +  nameItem.childNodes[0].nodeValue;
        out  +=  "</td><td>"  +  priceItem.childNodes[0].nodeValue;
        out  +=  "</td></tr>";
    }

    out  +=  "</table>";
    document.getElementById("xmlanswer").innerHTML  =  out;
}

</script>

<a  href="javascript:sendRequest()">[Ajax  Test]</a>

<!--  bloki  html'owe  do  wyswietlenia  odpowiedzi  -->
<div  id="answer">
</div>

<div  id="xmlanswer">
</div>

<!--  koniec  -->