Blog webdeveloperski Patryk yarpo Jar

AJAH – Ajax z HTML

Autor wiadomości Maj 5, 2011

Wysyłając żądanie do serwera za pomocą Ajaksa oczekujemy jakiejś odpowiedzi zwrotnej. Najprościej użyć czystego tekstu. Jeśli jednak mamy już używać czystego tekstu, dlaczego nie używać od razu fragmentu kodu HTML?

Technikę taką będę konsekwentnie nazywał AJAH (Asynchroniczny JavaScript i HTML). Choć jest to skrót wprowadzony przeze mnie - jak się okazało niepotrzebnie. Istniało wcześniej określenie "Asynchroniczny HTML i HTTP". Dziękuję użytkownikowi o nicku "ja" za celną uwagę w komentarzu :).

Na początek

Na potrzeby tego artykułu potrzebujesz:

  • serwera WWW (może być WAMP)
  • przeglądarki
  • 5 minut

Kod po stronie serwera

Po stronie serwera zastosujemy plik statyczny ('plik.html'):

<p>To jest odpowiedź w <b>HTML</b> z serwera</p>

Kod strony z AJAH

Kod strony pokazującej zastosowanie AJAH może wyglądać tak (wykorzystuję obiekt XMLHttpRequest):

<html>
<head>
    <title>Przykład AJAH</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
    function testAjax()
    {
        var oClient = new XMLHttpRequest();
        oClient.open('POST', 'plik.html');
        oClient.onreadystatechange = function()
        {
            if (4 === this.readyState && 200 === this.status)
            {
                document.getElementById('response').innerHTML = this.responseText;
            }
        }
        oClient.send(null);
    }
    </script>
</head>
<body>
    <button onclick="testAjax()">test</button>
    <div id="response"></div>
</body></html>

Ten prosty przykład pozwala na szybkie zastosowanie kawałka kodu zwróconego z serwera. Czasem takie rozwiązanie może się okazać bardzo dobrym, choć niesie ze sobą także niebezpieczeństwa - choćby przy zmianie layoutu trzeba będzie zmieniać także skrypty PHP.

Warto przeczytać:

Tagged as: , , , Dodaj komentarz
Komentarze (2) Trackbacks (0)
  1. U mnie w pracy się na to mówiło AHAH (Asynchronous HTML and HTTP).
    Widzę, że będę musiał temat troszkę podrążyć, bo może coś mi się pomyliło.

  2. Masz jak najbardziej rację 🙂

    Dlaczego tak mi się napisało… Hm, nie wiem 🙂
    Stałem się zatem autorem nowego terminu 😛


Leave a comment

 

Brak trackbacków.