"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ásnak a 

  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ó)

 

-  AjaxSuggest_jquery.htm - ugyanaz a példa jQuery használatával

   (ugyanazzal a gethint_post.php-val kommunikál)

   a jquery.js állomány ingyen letölthető az alábbi weboldalról:

   http://docs.jquery.com/Downloading_jQuery#Download_jQuery

 ---------------------------------------------------------------------------  

  

 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).

 (A példák kipróbálásához a projekt importálása után bizonyára módosításokra lesz 

 szükség a Build Path-ban)

 Megj.: ha valaki még nem találta volna meg, hogy az eclipse hová telepíti alapértelmezett módon a

 web-projektként létrehozott web-alkalmazást... (át lehet állítni, hogy a Tomcat webapps katalógusába tegye)

 -> 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.

  

  ----------------------------------------------------------------------------------

  

  AJAX + jQuery

  

  (a fentebb említett példán kívül további két "egyszerű" -azaz szerver oldali 

  programot nem igénylő- példa áll rendelkezésre:)

  

-  egyszeru_csere.htm - a jQuery.ajax() függvény hívását szemlélteti. Gombnyomásra

   AJAX texhnológia segítségével le lesz cserélve a div elem tartalma

   az ajax_szoveg.txt állomány tartalmával.

   

-  egyszeru_JSON_pl.htm - a jQuery.getJSON() függvényt használja arra, hogy ha az egérrel 

   rámegyünk a Micimackós képre, megjelenjenek a kép jibboldalán Micimackó adatai, melyejek

   JSON kifejezés formájában kapunk meg (szerveroldali program híján a resp_JSON állományból)