JavaScript - Ajax, XML i Ajax

Kod:

Ewentualne Objaśnienia:

Przykład ten pochodzi z książki "JavaScript - Podręcznik tworzenia interaktywnych stron Internetowych" autorstwa Dave'a Thau.
Jest to skrypt, który 'pracuje' na danych zawartych w 3 plikach XML, każdy z nich zawiera dla danego języka tłumaczenie angielskiego słowa. Te pliki XMLowe możecie sobie obejrzeć "
- german.xml
- italian.xml
- portuguese.xml

Nie będę tutaj omawiał tego czym jest XML, jego struktury itd. Jeśli nie wiele o tym wiesz poczytaj : http://pl.wikipedia.org/wiki/XML czy na przykład http://webmaster.helion.pl/kurshtml/xml/xml.htm .

Zobaczmy na przykład :
    - po wpisaniu słowa  i naciśnięciu Enter czy też kliknięciu na przycisk uruchamiana jest funkcja getTranslations - tu nie ma co tłumaczyć, funkcja ta wywołuje z kolei funkcję getTranslationFromFile :
        - jej parametry to nazwa pliku, z którego należy pobrać tłumaczenie oraz wpisane słowo
        - znanym już mechanizmem tworzymy obiekt request itd - wszystko to już było w poprzednich przykładach.
        - kiedy zapytanie zostanie zakończone powodzeniem ( readyState == 4 ) korzystamy z responseXML, a nie z responseText jak w 1 przykładzie ( 52ajax_podstawy.html )
        - do odpowiedniego bloku SPAN wpisywany jest wynik działania funkcji findTranslation :
            - jej parametry to uzyskany z zapytania ajaxowego obiekt XML oraz szukane słowo (wpisane w formularzu)
            - w pętli pobierane są kolejne wartości każdego elementu "english" przez zapis : this_english_element.firstChild.nodeValue - firstChild - czyli pierwszy el. potomny elementu english, czyli węzeł tekstowy, no i wiadomo nodeValue czyli wartość tekstowa - czyli dane słowo angielskie. Jeśli to angielskie słowo jest właśnie tym słowem, dla którego szukamy tłumaczenia należy do zmiennej the_translation wpisać tłumaczenie - czyli dla danego elementu word zawartość węzła tekstowego, będącego elementem potomnym elementu 'translation' . Dlatego też używamy zapisu : this_english_element.nextSibling.firstChild.nodeValue - nextSibling, aby wybrać dla naszego elementu english kolejny element będący potomnym tego samego macierzystego węzła (czyli elementu word), czyli element translation .

Wszystko to może się wydawać skomplikowane dla kogoś kto nie za bardzo rozumie strukturę XML. Jednak ten kurs nie polega na tym, aby to tłumaczyć. Jeśli masz problem z tym przykładem (a jest on naprawdę prosty!) poczytaj troszkę o XML .

Warto tutaj wspomnieć, że przykład ten testowany na lokalnym komputerze w przeglądarce IE nie będzie działał (chyba, że macie zainstalowany jakiś serwer na kompie i przez to odpalacie) ponieważ IE potraktuje pliki XML jako zwykłe pliki tekstowe. Oczywiście sądzę, że każdy z Was ma postawiony jakiś serwer (wamp, krasnal), ale dodam że aby zaradzić opisanej sytuacji należy zamiast kodu :

xml_response = request.responseXML; napisać kod :

xml_response = new ActiveXObject("Microsoft.XMLDOM");
xml_response.loadXML(request.responseText);

To powinno pomóc, ale tak jak mówiłem jeśli uczysz się JavaScript to zapewne myślisz o  byciu WebMajstrem więc wstyd jeśli jeszcze nie masz postawionego serwera na swoim komputerze ! :-p