Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar

Hasonló előadás


Az előadások a következő témára: "Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar"— Előadás másolata:

1 Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar

2 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

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

4 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… Kérés küldése

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

6 XMLHttpRequest objektum 1. 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.

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

8 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 :58:38 GMT Server: Apache/ (Unix) Keep-Alive: timeout=15, max=99 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/plain; charset=utf-8

9 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');

10 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

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

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

13 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

14 Köszönöm a figyelmet! Illés Zoltán Budapest, Pázmány Péter sétány 1/c


Letölteni ppt "Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar"

Hasonló előadás


Google Hirdetések