Jak działa Ajax
W tradycyjnym kodowaniu JavaScript, jeśli chcesz uzyskać jakiekolwiek informacje z bazy danych lub pliku na serwerze, lub wysłać informacje o użytkowniku na serwer, będziesz musiał utworzyć formularz HTML i dane GET lub POST na serwerze. Użytkownik będzie musiał kliknąć przycisk "Prześlij", aby wysłać / uzyskać informacje, poczekać na odpowiedź serwera, a następnie załaduje nową stronę z wynikami.
Ponieważ serwer zwraca nową stronę za każdym razem, gdy użytkownik przesyła dane, tradycyjne aplikacje internetowe mogą działać powoli i są mniej przyjazne dla użytkownika. Dzięki AJAX Twój JavaScript komunikuje się bezpośrednio z serwerem za pośrednictwem obiektu JavaScript XMLHttpRequest.
Za pomocą żądania HTTP strona internetowa może wysłać żądanie i otrzymać odpowiedź z serwera WWW bez ponownego ładowania strony. Użytkownik pozostanie na tej samej stronie, a on lub ona nie zauważy, że skrypty żądają stron lub wysyłają dane na serwer w tle.
Ten obraz jest uproszczonym wprowadzeniem dotyczącym działania Ajax:
Użytkownik wysyła żądanie, które wykonuje akcję, a odpowiedź akcji jest wyświetlana w warstwie, identyfikująca identyfikator, bez przeładowywania pełnej strony. Na przykład warstwa o tym identyfikatorze:
W kolejnych krokach zobaczymy, jak utworzyć XMLHttpRequest i otrzymać odpowiedź z serwera.
1. Utwórz XMLhttpRequest
Różne przeglądarki używają różnych metod, aby utworzyć obiekt XMLHttpRequest. Internet Explorer używa obiektu ActiveXObject, podczas gdy inne przeglądarki używają wbudowanego obiektu JavaScript o nazwie XMLHttpRequest.
Aby utworzyć ten obiekt i zająć się różnymi przeglądarkami, użyjemy instrukcji "wypróbuj i złap".
funkcja ajaxFunction ()
{
var xmlHttp;
próbować
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest ();
}
złapać (e)
{
// Internet Explorer
próbować
{
xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");
}
złapać (e)
{
próbować
{
xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
złapać (e)
{
alert ("Twoja przeglądarka nie obsługuje AJAX!");
return false;
}
}
}
2. Wysyłanie żądania do serwera
Aby wysłać żądanie do serwera, używamy metody open () i metody send ().
Metoda open () przyjmuje trzy argumenty. Pierwszy argument określa, której metody użyć podczas wysyłania żądania (GET lub POST). Drugi argument określa adres URL skryptu po stronie serwera. Trzeci argument określa, że żądanie powinno być obsługiwane asynchronicznie. Metoda send () wysyła żądanie do serwera.
xmlHttp.open ("GET", "time.asp", true);
xmlHttp.send (null);
3. Pisanie skryptu po stronie serwera
Element responseText będzie przechowywać dane zwrócone z serwera. Tutaj chcemy odesłać aktualny czas. Kod w "time.asp" wygląda następująco:
<%
response.expires = -1
response.write (czas)
%>
4. Spożywanie odpowiedzi
Teraz musimy skonsumować otrzymaną odpowiedź i wyświetlić ją użytkownikowi.
xmlHttp.onreadystatechange = function ()
{
if (xmlHttp.readyState == 4)
{
document.myForm.time.value = xmlHttp.responseText;
}
}
xmlHttp.open ("GET", "time.asp", true);
xmlHttp.send (null);
}
5. Uzupełnij kod
Teraz musimy zdecydować, kiedy należy wykonać funkcję AJAX. Pozwolimy, aby funkcja działała "za kulisami", gdy użytkownik wpisze coś w polu tekstowym nazwy użytkownika. Pełny kod wygląda następująco: