Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
Asynchronous Javascript And XML
AJAX technológia AJAX: Asynchronous Javascript And XML Technológia a weblap egyes változó részeinek cseréjére az egész lap újratöltése nélkül.
2
XMLHttpRequest objektum
AJAX technológia Működése: Böngésző Esemény XMLHttpRequest objektum HTTPRequest küldése Szerver HTTPRequest Feldolgozása Válasz létrehozása és visszaküldése INTERNET Böngésző A választ javascript fogadja Lap aktualizálása INTERNET
3
AJAX technológia Az alapelvül szolgáló szabványok:
XMLHttpRequest objektum: aszinkron adatcsere a szerverrel Javascript/DOM: az információ kijelzése CSS: stílusok alkalmazása XML: az átvitt adatok gyakori formátuma Az AJAX-alkalmazások böngésző- és platformfüggetlenek!
4
AJAX technológia A legegyszerűbb alkalmazás egy <div> szekcióból és egy gombból áll: <!DOCTYPE html> <html> <body> <div id="myDiv"><h2>Ez fog változni</h2></div> <button type="button" onclick="loadXMLDoc()">Csere</button> </body> </html>
5
AJAX technológia Írjuk a scriptet a dokumentum <head> részébe, ez tartalmazza a loadXMLDoc() függvényt: <head> <script> function loadXMLDoc() { .... ide jön az AJAX script ... } </script> </head>
6
AJAX technológia A kulcs az XMLHttpRequest objektum. Ezt minden modern böngésző támogatja (az IE5 és IE6 ActiveXObject-et használ). Az objektum létrehozása: var változónév=new XMLHttpRequest(); IE5 és IE6 esetén: var változónév=new ActiveXObject("Microsoft.XMLHTTP");
7
A régi böngészők kiszűrésére a következő megoldás javasolható:
AJAX technológia A régi böngészők kiszűrésére a következő megoldás javasolható: var xmlhttp; if (window.XMLHttpRequest) {// kód az IE7+, Firefox, Chrome, Opera, Safari böngészőkhöz: xmlhttp=new XMLHttpRequest(); } else {// kód az IE6, IE5 böngészőkhöz: xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
8
AJAX technológia Az adat elküldése a szervernek két lépcsőben történik: az XMLHttpRequest objektum open() és send() metódusaival: open(metódus,URL,async): GET vagy POST metódus, a hívott fájl, aszinkron vagy nem. send(sztring): elküldi a kérést. A sztring csak POST metódusnál használható. xmlhttp.open("GET","keres.php",true); xmlhttp.send();
9
AJAX technológia GET metódus: Gyorsabb és egyszerűbb
Kevésbé biztonságos Méretkorlát az adatoknál Gyorsítótárazható Bizalmas adatok esetén ellenjavallt
10
GET kérés összeállítása:
AJAX technológia GET kérés összeállítása: xmlhttp.open("GET","keres.php?surname=Henry&name=Ford",true); xmlhttp.send();
11
POST kérés összeállítása:
AJAX technológia POST kérés összeállítása: xmlhttp.open("POST","keres.php”,true); xmlhttp.setRequestHeader(”content-type”,”application/x-www-form-urlencoded”); xmlhttp.send(”surname=Henry&name=Ford");
12
AJAX technológia Az aszinkron átvitel előnye:
A Javascript nem lénytelen várni, míg a szerver visszaküldi a választ, addig csinálhat valami mást. A válasszal akkor kell törődni, ha megérkezett. Az XMLHttpRequest objektum akkor AJAX-objektum, ha az open() metódus async paramétere true értékű.
13
AJAX technológia Aszinkron átvitel esetén a választ az objektum egy függvényével dolgozhatjuk fel: xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } xmlhttp.open("GET","keres.php",true); xmlhttp.send();
Hasonló előadás
