Kurs jQuery #7 – AJAX

Tak jak w przypadku DOM i zdarzeń możliwe, że wiesz już czy jest AJAX a jeśli nie to w kwestii przypomnienia pozwolę sobie zacytować samego siebie.

AJAX uogólniając jest to technika pozwalająca na dostęp do serwera ze strony internetowej. Co ważne możemy robić to asynchronicznie. Oznacza to, że proces pobierania danych z serwera następuje tak jakby w tle działania aplikacji nie wpływając w żaden sposób na dalsze wykonanie skryptu.

Obsługa AJAX jest na pewno dużo przyjemniejsza i łatwiejsza dzięki użyciu jQuery. Możemy uzyskiwać super efekty jeszcze prościej. Na początku możemy zacząć od bardzo prostej w użyciu metody load(). Odpowiada ona za asynchroniczne załadowanie treści jakiegoś pliku i wstawienie jej bezpośrednio do wskazanego przez nas elementu.

Jeśli chcesz możesz załadować tylko określoną zawartość takiego pliku posługując się selektorami.

Możesz również dołączyć odpowiednią funkcję która zostania wykonana po obsłużeniu zapytania.

Pierwszy argument to tekst jaki był w pliku a jaki otrzymaliśmy i który został później odpowiednio obrobiony i wstawiony do określonego przez nas elementu. Jeśli chodzi o drugi parametr to jest to opis połaczenia: “success”, “notmodified”, “error”, “timeout”, lub “parsererror”. Trzeci parametr to natomiast obiekt XMLHttpRequestktóry również został szerzej omówiony tutaj.

Metodą nawiązywanie połączenia do konwencji której jesteśmy bardziej przyzwyczajeni jest get() lub post(). Te dwie metody działają prawie tak samo, jedyną różnicą jest to, że jedna tak jak nazwa wskazuje wysyła zapytanie typu GET, druga natomiast typu POST i można przesłać przez nią jakieś dane na serwer.

Pierwszym parametrem funkcji get() jest ścieżka do pliku do którego kierujemy zapytanie. Drugim natomiast funkcja która jest wywołana po obsłużeniu zapytania. Pierwszy argument to dane które daje nam strona do której poszło zapytanie, drugi to  status tego zapytania.

Funkcja post() wygląda bardzo podobnie:

Różnica polega na tym, że jako drugi argument mamy podany obiekt w którym przekazujemy dane do pliku a dopiero jako trzeci mamy funkcję zwrotną. Cała reszta jest dokładnie taka sama.

Bardziej modyfikowalną funkcją w której możemy jeszcze poustawiać kilka rzeczy odnośnie zapytania które wysyłamy jest po prostu ajax()Tam jedynym argumentem który przekazujemy jest obiekt który zawiera ustawienia zapytania. Od wersji 3.0 w jQuery zniknęły stamtąd właściwości do których przekazywało się funkcje anonimowe takie jak success, errorcomplete. Zamiast tego używamy done()fail()always().