AJAX w PHP
AJAX Buzzword == AJAX == Asynchronous JavaScript and XML == Remote Scripting Zamiana żądań synchronicznych kierowanych do serwera na żądania asynchroniczne Użycie JavaScript’ów do tworzenia/zmiany interfejsu użytkownika Zmieniany jest interesujący fragment a nie cała strona
Tradycyjna aplikacja web
Aplikacja web oparta o AJAX
Interakcja z AJAX’em
Interakcja z AJAXem Klient (użytkownik) generuje zdarzenie Utworzenie i konfiguracja obiektu XMLHttpRequest (w przeglądarce). Obiekt XMLHttpRequest tworzy (generuje) żądanie Żądanie jest przetwarzane przez skrypt PHP po stronie serwera Skrypt zwraca dokument XML (!!) zawierający rezultat Obiekt XMLHttpRequest wywołuje funkcję wskazaną przez użytkownika i przetwarza rezultat
JavaScript i AJAX (1) Klient (użytkownik) generuje zdarzenie Funkcja JavaScript jest wywoływana jako rezultat zdarzenia użytkownika. W przykładzie funkcja validate() jest wywoływana na naciśnięcie klawisz (onkeyup event) w formularzu <input type="text" size="20" name="id" id="userid" onkeyup="validate();" > Element formularza będzie wywoływał funkcję validate() za każdym razem, gdy użytkownik przyciśnie klawisz.
JavaScript i AJAX (2)(1) Utworzenie obiektu XMLHttpRequest Funkcja JavaScirpt – validate() tworzy nowy obiekt XMLHttpRequest i woła funkcję open() obiektu XMLHttpRequest.open(String method, String URL, boolean asynchronous) Funkcja open() wymaga 3 argumentów Metody HTTP (GET lub POST) URL komponentu po stronie serwera (np.. Strona JSP lub serwlet), z którym obiekt ma wymieniać informacje Wartość boolowska wskazujący czy wołanie ma być asynchroniczne Jeśli funkcja wskazuje na asynchronizm należy określić funkcję wołania zwrotnego (callback) req.onreadystatechange = callback;
JavaScript i AJAX (2)(2) var req; function validate() { var idField = document.getElementById("userid"); var url = "validate?id=" + escape(idField.value); if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP");} req.open("GET", url, true); req.onreadystatechange = callback; req.send(null); }
JavaScript i AJAX (3) XMLHttpRequest tworzy żądanie Tworzenie żądania jest w momencie wywołania metody send(). Jeśli brak parametru metody lub jest równy null generowane jest żądanie GET; Ewentualne paramtery GET przekazywane są w URL. Należy pamiętać o długości URL i kodowaniu paramterów (polskie znaki) – funkcja escape() W przypadku użycia metody POST należy ustawić właściwy nagłówek Content-Type i w funkcji send przekazać paramtery żądania req.setRequestHeader("Content-Type", "application/x-www-form- urlencoded"); req.send("id=" + escape(idTextField.value))
JavaScript i AJAX (4) Obsługa żądania Jak każde inne żądanie Należy pamiętać o ustawieniu zawartości jako dokumentu XML Skrypt napisany w języku PHP nie różni się niczym od standardowego skryptu (poza zwracanym typem)
JavaScript i AJAX (5) Wywołanie funkcji zwrotnej Po odbiorze odpowiedzi wywoływana jest funkcja zwrotna req.onreadystatechange = callback; Obiekt XMLHttpRequest ma pole readyState informujące czy zawartość uległa zmianie W funkcji zwotnej należy dopisać obsługę uaktualnienia strony HTML function callback() { if (req.readyState == 4) { if (req.status == 200) { } }}
JavaScript i AJAX (6) Uaktualnienie strony Strona w przeglądarce jest przechowywana w postaci DOM. JavaScript daje API do pracy z DOM. Odpowiedź od serwera można pozyskać za pomocą obiektu responseXML obiektu XMLHttpRequest Sama wartość elementu XML można odczytać metodą responseText <message> valid </message> var message = req.responseXML.getElementsByTagName("message")[0]; setMessage(message.childNodes[0].nodeValue);
JavaScript i AJAX (7) <script type="text/javascript"> function setMessage(message) { mdiv = document.getElementById("userIdMessage"); if (message == "invalid") { mdiv.innerHTML = "<div style='color:red'>Invalid User Id</ div>"; } else { mdiv.innerHTML = "<div style='color:green'>Valid User Id</ div>"; }} </script> <body> <div id="userIdMessage"></div></body>
Dołączanie elementów do DOM <script type="text/javascript"> function setMessage(message) { var userMessageElement = document.getElementById("userIdMessage"); var messageText; if (message == "invalid") { userMessageElement.style.color = "red"; messageText = "Invalid User Id"; }
Dołączanie elementów do DOM else { userMessageElement.style.color = "green"; messageText = "Valid User Id"; } var messageBody = document.createTextNode(messageText); if (userMessageElement.childNodes[0]) { userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]); } else { userMessageElement.appendChild(messageBody); }} </script> <body> <div id="userIdMessage"></div></body>
Zalety Dużo lepszy interfejs użytkownika – brak efektu przeładowania strony Aplikacja webowa funkcjonuje podobnie jak aplikacja desktopowa Za zarządzenie stanem odpowiedzialny jest klient Brak kosztów związanych z aktualizacją software’u po stronie klienta (wbudowane w przeglądarkę Serwis jest “cool” (cool factor)
Minusy (1) Wymaga nowych przeglądarek Od IE 6, Firefox 1.0.x, Mozilla Czyli ok. 90% użytkowników Trudne debugowanie Konieczna znajomość technologii: XML,XPath,XSLT,JavaScript, CSS, DHTML,DOM... Niedojrzałość bibliotek i frameworków
Minusy (2) Brak kompatybilności przeglądarek: GET ograniczony do 2048 znaków w IE Współrzędne okna IE są inne niż w Firefox Brak pamięci dla IE Znikajace węzły w DOM przy XSLT w IE !!! Zapamiętywanie GET/POST przez Iframe w zachowywaniu historii odwiedzin
AJAX w PHP if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Żądanie AJAX } else { // Nie AJAX --- define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');