AJAH – Ajax z HTML
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ć:
Czerwiec 5th, 2011 - 16:50
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.
Czerwiec 5th, 2011 - 17:08
Masz jak najbardziej rację
Dlaczego tak mi się napisało… Hm, nie wiem
Stałem się zatem autorem nowego terminu