PHP Ajax bemutató példa

Tartalomjegyzék:

Anonim

Mi az Ajax?

Az AJAX teljes formája aszinkron JavaScript és XML. Ez egy olyan technológia, amely csökkenti a kiszolgáló és az ügyfél közötti interakciókat. Ezt úgy teszi, hogy a weboldal csak egy részét frissíti, nem pedig az egész oldalt. Az aszinkron interakciókat a JavaScript kezdeményezi. Az AJAX célja kis mennyiségű adat cseréje a szerverrel oldalfrissítés nélkül.

A JavaScript egy kliens oldali szkriptnyelv. A kliens oldalon a JavaScriptet támogató webböngészők hajtják végre. A JavaScript kód csak azokban a böngészőkben működik, amelyekben engedélyezve van a JavaScript.

Az XML az Extensible Markup Language rövidítése. Az üzeneteket emberi és géppel olvasható formátumban is kódolják. Olyan, mint a HTML, de lehetővé teszi az egyedi címkék létrehozását. Az XML-ről további részletek az XML-ről szóló cikkben találhatók

Miért érdemes használni az AJAX-ot?

  • Ez lehetővé teszi gazdag interaktív webalkalmazások fejlesztését, akárcsak az asztali alkalmazásokat.
  • Az érvényesítés akkor végezhető el, amikor a felhasználó kitölt egy űrlapot anélkül, hogy elküldené. Ez az automatikus kiegészítéssel érhető el. A felhasználó által beírt szavakat feldolgozás céljából elküldik a kiszolgálónak. A szerver olyan kulcsszavakkal válaszol, amelyek megfelelnek a felhasználó által megadott adatoknak.
  • Használható egy legördülő mező feltöltésére egy másik legördülő mező értékétől függően
  • Az adatok lekérhetők a szerverről, és az oldal csak egy bizonyos részét frissíthetik az egész oldal betöltése nélkül. Ez nagyon hasznos olyan weboldal-részeknél, amelyek olyan dolgokat töltenek be, mint például
    • Tweetek
    • Commens
    • A webhelyet felkereső felhasználók stb.

PHP Ajax alkalmazás létrehozása

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.

Alkalmazásunknak lesz egy szövegdoboza, amelyet a felhasználók beírnak a keretrendszer nevébe.

Ezután az mvc AJAX segítségével keresünk egyezést, majd megjelenítjük a keretrendszer teljes nevét közvetlenül a keresési űrlap alatt.

1. lépés: Az indexoldal létrehozása

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine

Type the first letter of the PHP MVC Framework

Matches:

ITT,

  • Az “onkeyup =" showName (this.value) "" minden alkalommal végrehajtja a showName JavaScript függvényt, amikor egy kulcs be van írva a szövegmezőbe.

    Ezt a funkciót automatikus befejezésnek hívják

2. lépés: A keretrendszer oldal létrehozása

keretrendszerek.php

 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: JS szkript létrehozása

auto_complete.js

function showName(str){if (str.length == 0){ //exit function if nothing has been typed in the textboxdocument.getElementById("txtName").innerHTML; //clear previous resultsreturn;}if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=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,

  • “If (str.length == 0)” ellenőrizze a karakterlánc hosszát. Ha ez 0, akkor a szkript többi része nem kerül végrehajtásra.
  • „If (window.XMLHttpRequest)…” Az Internet Explorer 5. és 6. verziói az ActiveXObject alkalmazást használják AJAX megvalósításhoz. Más verziók és böngészők, például a Chrome, a Firefox és az XMLHttpRequest. Ez a kód biztosítja, hogy alkalmazásunk az IE 5 és 6, valamint az IE és a böngészők más magas verzióiban is működjön.
  • Az „xmlhttp.onreadystatechange = function…” ellenőrzi, hogy az AJAX interakció befejeződött-e, és az állapota 200, majd frissíti a txtName tartományt a visszaadott eredményekkel.

4. lépés: A PHP Ajax alkalmazás tesztelése

Feltéve, hogy elmentette az index.php fájlt. A phututs / ajax fájlban keresse meg a következő URL-t: http: //localhost/phptuts/ajax/index.php

Írja be a C betűt a szövegmezőbe. A következő eredményeket kapja.

A fenti példa bemutatja az AJAX fogalmát és azt, hogy miként segíthet gazdag interakciós alkalmazások létrehozásában.

Összegzés

  • Az AJAX az aszinkron JavaScript és XML rövidítése
  • Az AJAX egy olyan technológia, amelyet olyan gazdag interakciós alkalmazások létrehozására használnak, amelyek csökkentik az ügyfél és a szerver közötti interakciókat a weboldal csak egyes részeinek frissítésével.
  • Az Internet Explorer 5. és 6. verziója az ActiveXObject programot használja az AJAX műveletek végrehajtására.
  • Az Internet Explorer 7-es és újabb verziói, valamint a Chrome, a Firefox, az Opera és a Safari böngészők használják az XMLHttpRequest alkalmazást.