JavaScript | Ajax a PHP - czyli wykonywanie operacji w tle

Czym jest Ajax? Często się o nim słyszy, ale jakoś go nie widać? To prawda, dlatego że Ajax działa asynchronicznie, wykonuje się w tle. Dla użytkownika nie ma to żadnego znaczenia, jedyną różnicą jest brak przeładowania na stronie. 

Ok. Ale dlaczego warto używać Ajax? Opiszę to na własnym przykładzie. Buduję stronę internetową i użytkownik ma możliwość blokowania swoich wpisów, ale żeby to zrobić musi wejść w edycję wpisu i tam zablokować wpis. Do tego potrzebne jest przejście na osobną podstronę i potem powrót na poprzednią stronę. Wszystko można skrócić do jednego kliknięcia. Na przykład klikamy w checkbox i w tle wykonuje się zapis do bazy danych nowych wartości. Ajax można wykorzystać do walidacji formularzy, wczytywania nowych treści, zarządzania treściami na stronie, interakcji z użytkownikiem.

Ajax jest funkcją z jQuery. Pełny opis funkcji dostępny w dokumentacji pod adresem http://api.jquery.com/jquery.ajax/. Podstawową składnię prezentuję poniżej.

$.ajax({    type: "POST",    url: "ajax_page.php",    dataType: "json"    data: {wartosc1: "", wartosc2: ""},}).done(function(json) {});

Należy ustawić typ jaki ma się wywołać, najczęściej będzie to POST (w przypadku formularzy). Podajemy koniecznie adres url na jaki zostają przesłane dane. Adres url jest plikiem php lub funkcją w kontrolerze (w przypadku MVC). Ustawiamy typ danych oraz ustawiamy wartości dla zmiennych, które zostaną przesłane. Następnie jak wszystkie wymagania spełnimy, wywoływany zostaje plik/funkcja i wykonuje się w sposób niewidoczny dla uzytkownika. Na sam koniec zwracamy wynik z adresu url do Ajax. W funkcji "done" możemy sprawdzić status oraz wynik. Dowiemy się więc czy wystąpiły błędy oraz otrzymamy zmienne z php. Przesyłanie zmiennych między Ajax i PHP oraz w drugą stronę jest możliwe dzięki JSON.

Wszystko ładnie się układa, ale co w przypadku gdy chcemy sprawdzić jakąś wartość pośrednią podczas wykonywania Ajax? Pomocą służy zakładka "Network (Sieć)" w przeglądarce. Każda przeglądarka udostępnia funkcje umożliwiające sprawdzenie wywołań Ajax. Mamy wtedy podgląd zmiennych przesyłanych, adresów url, typu wywołania, wyniku oraz statusu.

Stosowanie Ajax wymusza od programistów przygotowania oddzielnych funkcji odpowiedzialnych za obsługę danych oraz przekazanie wyniku przez JSON. Jednak po napisaniu kilku funkcji opartych o Ajax okaże się, że nie jest to tak trudne jak się wydawało na początku.

Rozwinięciem dla Ajax może być AngularJS, który jest całym frameworkiem dla JavaScript, ale o tym już w innym artykule.

Kontakt