PHP Ajax bemutató példával

Mi az az Ajax?

AJAX teljes forma Aszinkron JavaForgatókönyv & XML. Ez egy olyan technológia, amely csökkenti a szerver és a kliens közötti interakciót. Ezt úgy teszi, hogy a weboldalnak csak egy részét frissíti, nem pedig a teljes oldalt. Az aszinkron interakciókat JavaScript.Az AJAX célja kis mennyiségű adat cseréje a szerverrel oldalfrissítés nélkül.

JavaForgatókönyv egy kliens oldali szkriptnyelv. A kliens oldalon a támogató webböngészők hajtják végre 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 rövidítése. Emberi és gépi olvasható formátumú üzenetek kódolására szolgál. Olyan, mint a HTML, de lehetővé teszi egyéni címkék létrehozását. Az XML-ről további részleteket a következő cikkben talál XML

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

Lehetővé teszi az asztali alkalmazásokhoz hasonlóan gazdag interaktív webalkalmazások fejlesztését.
Az érvényesítés úgy is végrehajtható, hogy a felhasználó elküldése nélkül kitölt egy űrlapot. Ez automatikus kiegészítéssel érhető el. A felhasználó által beírt szavak feldolgozásra elküldésre kerülnek a szervernek. A szerver a felhasználó által megadott kulcsszavakkal válaszol.
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 oldalnak csak egy bizonyos része frissíthető a teljes oldal betöltése nélkül. Ez nagyon hasznos olyan weboldalrészeknél, amelyek betöltik például
Tweets
Megjegyzések
Az oldalt látogató 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ásunkban lesz egy szövegdoboz, amelyet a felhasználók beírhatnak a keretrendszer neveibe.

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

<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 showName szkript függvény minden alkalommal, amikor egy kulcsot beírnak a szövegdobozba. Ezt a funkciót automatikus befejezé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,

„if (str.length == 0)” ellenőrizze a karakterlánc hosszát. Ha 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ója ActiveXObject-et használ az AJAX megvalósításához. Más verziók és böngészők, például Chrome, FireFox használja az XMLHttpRequest-et. 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 állapot 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 könyvtárban keresse meg a http://localhost/phptuts/ajax/index.php URL-t.

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

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

Összegzésként

Az AJAX az Asynchronous rövidítése JavaForgatókönyv és XML
Az AJAX egy olyan technológia, amelyet gazdag interakciós alkalmazások létrehozására használnak, amelyek csökkentik a kliens és a szerver közötti interakciót azáltal, hogy a weboldalnak csak egy részét frissítik.
Az Internet Explorer 5-ös és 6-os verziója ActiveXObject-et használ az AJAX-műveletek megvalósításához.
Internet Explorer 7-es és újabb verziók és Chrome böngészők, Firefox, Opera, a Safari pedig az XMLHttpRequest-et használja.

Talán tetszene: