Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar zoltan.illes@elte.hu
AJaX Asynchronous JavaScript and XML Mi a baj a HTTP-vel, CGI-vel? Nincs baj, de nem elég hatékony. Első igények 2000 körül. Jesse James Garrett: Ajax: A new approach to Web Application (2005) Első keretrendszeri támogatás: VS 2005 Ős technológia: Microsoft Remote Scripting A jelenlegi objektum IE5-től, Netscape 4-től él XMLHttpRequest mára általános
AJaX működése 1. 1. lépés: XMLHttpRequest objektum létrehozása kliens oldalon (JavaScript kód) 2. lépés: Az objektum felparaméterezése 1. Szerveroldali hívás és paraméterek beállítása. 2. Kliens oldali eredményt fogadó függvény létrehozása. 3. lépés: Szerveroldali script létrehozása 1. Szerver oldalon nincs más csak a HTTP szerver. 2. Tehát valójában ez a szerver kap egy GET vagy POST kérést egy állomány végrehajtására. 4. lépés: Hívás kezdeményezés 5. lépés: Az eredmény megérkezése után a fogadó függvény lefut.
AJaX működése 2. Nézzük a legegyszerűbb esetet, hívás: var http_request = false; function AJAX_hivas(url) { http_request = new XMLHttpRequest(); if (!http_request) { alert('hiba : Nem hozható létre az XMLHTTP példánya'); return false; } http_request.onreadystatechange = valasz_fuggveny; http_request.open('get', url, true); http_request.send(null); }.Innentől HTML a kód <span style="cursor: pointer; text-decoration: underline" onclick="ajax_hivas('alma.txt')"> Kérés küldése </span>
AJaX működése 3. A hívást váró függvény: function valasz_fuggveny() { if (http_request.readystate == 4) { if (http_request.status == 200) { alert(http_request.responsetext); } else { alert('hiba történt a kérés kiszolgálása során.'); } } } Irx.inf.elte.hu/~illes/ajax1.html (ajax11,12)
XMLHttpRequest objektum 1. http://www.w3.org/tr/xmlhttprequest/ onreadystatechange esemény attribútum Az esemény értéke egy függvény, ami végrehajtódik az esemény bekövetkeztekor. readystate, csak olvasható attribútum 0: Inicializálatlan 1: Az open hívás sikeres. 2: A send hívás rendben, még nem jön válasz. 3: A válasz jön a szerver oldaltól. Header info megjött, a törzs ezután jön. 4: A válasz rendben megjött.
XMLHttpRequest objektum 2. responsetext attribútum Ha a readystate 4, akkor a teljes válasz törzset kapjuk. responsexml attribútum Ha a válasz XML dokumentumként jön. status A HTTP válaszkódja: 200 OK, stb. statustext A HTTP válasz szövege.
XMLHttpRequest objektum 3. getallresponseheaders() metódus A válasz összes fejlécsorát adja, paramétere nincs. var client = new XMLHttpRequest(); client.open('get', 'teszt.txt', false); // szinkron hívás client.send(); document.writeln(client.getallresponseheaders()); //...a válasz valami hasonló Date: Sun, 24 Oct 2004 04:58:38 GMT Server: Apache/1.3.31 (Unix) Keep-Alive: timeout=15, max=99 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/plain; charset=utf-8
XMLHttpRequest objektum 4. getresponseheader(header név) Eredményül a paraméter fejlécsorát adja setrequestheader(név, érték) open(mód, uri, async, user,pw) Mód: GET, POST (RFC2616) Uri: kérés címe, Get esetén az adatokat itt kell megadni. Async: opcionális, ha nincs, igaz, aszinkron hívás User: felhasználói név, opcionális Pw: jelszó, opcionális send(string) Post hívás adatai, ekkor az alábbi fejléctípust kell beállítani. setrequestheader('content-type', 'application/x-www-formurlencoded');
AJaX GET kérés, paraméterrel Az open URL metódus módosul. A hívás címe után?, majd az adatok HTTP szerint url+=?alma=jonatan ; http_request.open( GET, url, true ); http_request.send(null); Példa: ajax2.html
Ajax Post kérés paraméterrel Normál open hívás, csak Get helyett POST az első paraméter. http_request.open('post', url, true); Header állítás: http_request.setrequestheader("content- Type","application/x-www-form-urlencoded"); Sorrend fontos, open után!!! Header állítás. Adat küldés http_request.send("alma=jonatan"); Több adat esetén & jellel fűzzük össze az adatot.
Ajax válasz: text var valasz=http_request.responsetext; A szöveg formátumát a fogadó JavaScript kódnak kell ismerni. Egyszerű válaszok esetén megfelelő. Összetett válasz esetén szöveg darabolással kell a részeket kiszedni.
Ajax válasz: XML var valasz=http_request.responsexml; Ugyanazt az eredményt adja mint a loadxmldoc( alma.xml ); a=valasz.getelemetsbytagname( title ); Eredmény: egy tömb, az összes címke objektum B=a[i].childNodes[0].nodeValue; //vagy data Példa: ajax_xml1.html, ajax_xml2.html
Köszönöm a figyelmet! Illés Zoltán Budapest, Pázmány Péter sétány 1/c Zoltan.Illes@elte.hu