Illés Zoltán ELTE Informatikai Kar zoltan.illes@elte.hu Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar zoltan.illes@elte.hu

AJaX Mi a baj a HTTP-vel, CGI-vel? Első igények 2000 körül. 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. lépés: XMLHttpRequest objektum létrehozása kliens oldalon (JavaScript kód) lépés: Az objektum felparaméterezése Szerveroldali hívás és paraméterek beállítása. Kliens oldali eredményt fogadó függvény létrehozása. lépés: Szerveroldali script létrehozása Szerver oldalon nincs más csak a HTTP szerver. Tehát valójában ez a szerver kap egy GET vagy POST kérést egy állomány végrehajtására. lépés: Hívás kezdeményezés 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-form-urlencoded');

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

Budapest, Pázmány Péter sétány 1/c 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