PHP Ajax bemutató példával
Fiona Brown
⚡ Okos összefoglaló
A PHP-ben található Ajax lehetővé teszi a weboldalak számára, hogy kis mennyiségű adatot cseréljenek a szerverrel, és az oldal egy részét frissítsék teljes újratöltés nélkül. Ez a bemutató egy élő keretrendszer-keresést épít fel, amely bemutatja a klasszikus XMLHttpRequest megközelítést és a modern Fetch API alternatívát.
Mi az az Ajax?
AJAX az aszinkront jelenti JavaForgatókönyv & XML. Ez egy olyan technológia, amely csökkenti a szerver és a kliens közötti interakciókat. Ezt úgy éri el, hogy csak a weboldal egy részét frissíti, nem pedig az egész oldalt. Az aszinkron interakciókat a következő indítja el: JavaSzkript. Az AJAX célja kis mennyiségű adat cseréje a szerverrel oldalfrissítés nélkül.
JavaForgatókönyv egy kliensoldali szkriptnyelv. A kliens oldalon futtatják a webböngészők, amelyek támogatják JavaForgatókönyv. JavaA szkriptkód csak azokban a böngészőkben működik, amelyek rendelkeznek JavaScript engedélyezve.
XML az Extensible Markup Language (Extensible Markup Language) rövidítése. Emberi és gépi olvasmányú formátumban is üzenetek kódolására használják. Hasonló a HTML-hez, de lehetővé teszi saját egyéni címkék létrehozását. Az XML-ről további részletekért lásd a következő cikket: XML.
Miért érdemes AJAX-ot használni?
- Lehetővé teszi a fejlesztéstping gazdag, interaktív webes alkalmazások, akárcsak az asztali alkalmazások.
- Az ellenőrzés elvégezhető, miközben a felhasználó kitölt egy űrlapot anélkül, hogy elküldené azt. Ez az automatikus kiegészítéssel érhető el. A felhasználó által beírt szavakat a rendszer elküldi a szervernek feldolgozásra, és a szerver a felhasználó által beírt szavakkal megegyező kulcsszavakkal válaszol.
- Használható egy legördülő menü kitöltésére egy másik legördülő menü értékétől függően.
- Az adatok lekérhetők a szerverről, és csak az oldal egy bizonyos része frissíthető anélkül, hogy a teljes oldalt be kellene tölteni. Ez nagyon hasznos olyan weboldalrészek esetében, amelyek olyan dolgokat töltenek be, mint:
- Tweets
- Hozzászólások
- A webhelyet látogató felhasználók és hasonló élő adatok.
Hogyan készítsünk PHP Ajax alkalmazást
Létrehozunk egy egyszerű alkalmazást, amely lehetővé teszi a felhasználók számára a népszerű PHP MVC keretrendszerek keresését.
Az alkalmazásunkban lesz egy szövegmező, ahová a felhasználók beírhatják a keretrendszerek nevét.
Ezután AJAX-szal fogjuk keresni a találatokat, majd a keretrendszer teljes nevét megjelenítjük közvetlenül a keresési űrlap alatt.
1. lépés) Az indexoldal létrehozása
index.php
<html> <head> <title>PHP MVC Frameworks - Search Engine</title> <script type="text/javascript" src="auto_complete.js"></script> </head> <body> <h2>PHP MVC Frameworks - Search Engine</h2> <p><b>Type the first letter of the PHP MVC Framework</b></p> <form method="POST" action="index.php"> <p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p> </form> <p>Matches: <span id="txtName"></span></p> </body> </html>
ITT,
- Az “onkeyup=”showName(this.value)”” végrehajtja a JavaA szkript minden alkalommal kiadja a showName függvényt, amikor egy kulcsot beírunk a szövegmezőbe. Ezt a funkciót automatikus kiegészítésnek nevezik.
2. lépés) A keretrendszerek oldalának létrehozása
keretrendszerek.php
<?php $frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ; $name = $_GET["name"]; if (strlen($name) > 0) { $match = ""; for ($i = 0; $i < count($frameworks); $i++) { if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) { if ($match == "") { $match = $frameworks[$i]; } else { $match = $match . " , " . $frameworks[$i]; } } } } echo ($match == "") ? 'no match found' : $match; ?>
3. lépés) A JS-szkript létrehozása
auto_complete.js
function showName(str){ if (str.length == 0){ // exit function if nothing has been typed in the textbox document.getElementById("txtName").innerHTML=""; // clear previous results return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("txtName").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","frameworks.php?name="+str,true); xmlhttp.send(); }
ITT,
- Az „if (str.length == 0)” függvény ellenőrzi a karakterlánc hosszát. Ha az 0, akkor a szkript többi része nem kerül végrehajtásra.
- „if (window.XMLHttpRequest)…” Az Internet Explorer 5-ös és 6-os verziói az ActiveXObject objektumot használják az AJAX implementációhoz. Más verziók és böngészők, mint például a Chrome és a Firefox Használj XMLHttpRequest-et. Ez a kód biztosítja, hogy az alkalmazásunk mind az IE 5 és 6, mind a modern böngészőkben működjön.
- Az „xmlhttp.onreadystatechange=function…” függvény ellenőrzi, hogy az AJAX interakció befejeződött-e és az állapot 200-as-e, majd frissíti a txtName tartományt a visszaadott eredményekkel.
4. lépés) A PHP Ajax alkalmazás tesztelése
Feltételezve, hogy elmentetted az index.php fájlt a phptuts/ajax mappába, keresd meg a URL http://localhost/phptuts/ajax/index.php
Írd be a C betűt a szövegmezőbe. A következő eredményeket kapod.
A fenti példa bemutatja az AJAX koncepcióját, és azt, hogy hogyan segíthet nekünk gazdag, interaktív alkalmazások létrehozásában.
Modern AJAX a Fetch API-val
A fenti XMLHttpRequest objektum továbbra is működik, de az ActiveXObject ága a régi Internet Explorerben már nem szükséges. A modern böngészők biztosítják az ígéretalapú Fetch API-t, amely ugyanazt a kérést sokkal kevesebb kóddal hajtja végre.
function showName(str) { if (str.length === 0) { document.getElementById("txtName").innerHTML = ""; return; } fetch("frameworks.php?name=" + encodeURIComponent(str)) .then(response => response.text()) .then(text => { document.getElementById("txtName").innerHTML = text; }); }
Ez a verzió ugyanazt a feladatot látja el: elküldi a begépelt szöveget a frameworks.php-nek, és a választ a txtName tartományba helyezi. Az encodeURIComponent metódust is használja a bemenet biztonságos escape-elésére, és az ígéretlánca könnyen bővíthető hibakezeléssel egy catch blokk segítségével.
