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.
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
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!
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>
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>
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");
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");
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();
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
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();
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");
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ű.
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();