"Egyszerű" példák: Kipróbálásukhoz nincs szükség semmiféle szerver-oldali technológiára, a szerver válaszát egy statikus szöveges állomány helyettesíti (normálisan szerver oldalon kéne a választ dinamikusan generálni), így a példának csupán annyiban van értelme, hogy az aszinkron kérés-küldés, illetve válasz-feldolgozás módját illusztrálja. - ajaxExample.htm - a gombra kattintva meghívodik az ajaxExample.js szkriptállományban megadott JavaScript függvény, mely aszinkron kérést küld (... szerver helyett) a message-data.htm statikus szöveges állománynak. A választ kezelő JavaScript függvény ennek tartalmát jeleníti meg. JSON formátumú válasz - ajaxExample_JSON.htm - itt a válasz a resp_JSON állományban megadott JSON kifejezés (amit normál esetben a szerver-oldalon kéne generálni). Hogy kliens oldalon megkapjuk a kifejezésnek megfelelő objektumot, azt ki lehet értékelni az "eval" JavaScript függvénnyel (ennek a megoldásnaka hátránya, hogy az eval függvény nem csak JSOn kifejezést, hanem bármilyen JavaScript kódot kiértékel, ami a biztonság rovására mehet...). Egy másik lehetőség JSOn kifejezés kiértékelésére specializált függvény használata (ilyen a mellékelt json2.js, Internetről szabadon letölthető szkriptállományban definiált JSON feldolgozó). -------------------------------------------------------------------------- Példa aszinkron GET, illetve POST kérés küldésére - szerver oldalon PHP kód. GET - AjaxSuggest.htm - a szövegmezőbe írva, a billentyű elengedésekor lesz elküldve (clienthint.js) a kérés, ami a szeverről lekéri azokat a tippeket (női keresztnevek), amelyek a már beírt karaktersorozattal kezdődnek (gethint.php). (A szerver a tippeket az egyszerűség kedvéért egy tömbből olvassa - igazság szerint inkább egy adatbázisból illene az adatokat vegye) POST (ugyanaz a példa) - AjaxSuggest_post.htm, clienthint_post.js, getHint_post.php (!) a kérés elküldése (send) előtt bizonyos header-információ beállításokra van szükség (ami gyakorlatilag azt jelzi, hogy az elküldött információ formátuma a submit-tal küldött adatok formátumához hasonló) --------------------------------------------------------------------------- Az AJAX technológia tetszőleges szerver-oldali technológiával kombinálható. A köv. két példa Servlet-tel kommunikál. A Java forráskód most - a változatosság kevéért- web-projektként (AjaxPl) van megadva (és nincs hozzá build-állomány). Megj.: ha valaki még nem találta volna meg, hogy az eclipse hová telepíti a web-projektként létrehozott web-alkalmazást... -> workspace/projects/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/webapps - ajaxTest.htm - szövegmezőbe íráskor (onkeyup eseményre) kérés megy a "showTime.do" URL-el megadott Servlethez, ami visszaküldi az aktuális időt. Az aktuális idő a szövegmező alatt lesz megjelenítve, és minden kérésfeldolgozás esetén frissül XML formátumú válasz feldolgozása (a kérésobjektum responseXML adattagját használja) - setuserxml.htm - egy legördülő listából lehet kiválasztani a Mézga család valamelyik tagját. Az onchange eseményre kérés küldődik (responsexml.js) az XMLResponse.do URL-vel megadott Servlethez, amely a küldött azonosítónak megfelelő személy adatait küldi vissza XML-ként. (Megj.: itt a kérést küldő JavaScript függvényben szerepel a konkrét URL..., ennél jobb -általánosabb- az a megoldás, amikor az URL paraméterként van megadva) Itt is le van egyszerűsítve a szerver oldali kód: adatbázis-hozzáférés helyett statikus adatok generálódnak.