PHP Ajax vodič s primjerom

Što je Ajax?

AJAX puni oblik je asinkroni JavaScript & XML. To je tehnologija koja smanjuje interakcije između poslužitelja i klijenta. To čini ažuriranjem samo dijela web stranice, a ne cijele stranice. Asinkrone interakcije inicira JavaSkripta. Svrha AJAX-a je razmjena malih količina podataka s poslužiteljem bez osvježavanja stranice.

JavaScript je skriptni jezik na strani klijenta. Na strani klijenta izvršavaju ga web preglednici koji podržavaju JavaSkripta.JavaKod skripte radi samo u preglednicima koji imaju JavaSkripta omogućena.

XML je akronim za Extensible Markup Language. Koristi se za kodiranje poruka u ljudskim i strojno čitljivim formatima. To je poput HTML-a, ali vam omogućuje stvaranje prilagođenih oznaka. Za više pojedinosti o XML-u pogledajte članak o XML

Zašto koristiti AJAX?

Omogućuje razvoj bogatih interaktivnih web-aplikacija poput aplikacija za stolna računala.
Validacija se može izvršiti dok korisnik ispunjava obrazac bez podnošenja. To se može postići korištenjem automatskog dovršavanja. Riječi koje korisnik upiše dostavljaju se poslužitelju na obradu. Poslužitelj odgovara ključnim riječima koje odgovaraju onome što je korisnik unio.
Može se koristiti za popunjavanje padajućeg okvira ovisno o vrijednosti drugog padajućeg okvira
Podaci se mogu dohvatiti s poslužitelja i ažurirati samo određeni dio stranice bez učitavanja cijele stranice. Ovo je vrlo korisno za dijelove web stranice koji učitavaju stvari poput
T
Komentari
Korisnici koji posjećuju stranicu itd.

Kako stvoriti PHP Ajax aplikaciju

Napravit ćemo jednostavnu aplikaciju koja korisnicima omogućuje pretragu popularnih PHP MVC okvira.

Naša aplikacija će imati tekstualni okvir u koji će korisnici upisivati nazive okvira.

Zatim ćemo koristiti mvc AJAX za traženje podudaranja, a zatim prikazati cijeli naziv okvira odmah ispod obrasca za pretraživanje.

Korak 1) Stvaranje indeksne stranice

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>

OVDJE,

“onkeyup=”showName(this.value)”” izvršava JavaFunkcija skripte showName svaki put kada se tipka upiše u tekstualni okvir. Ova se značajka naziva autodovršetak

Korak 2) Izrada okvirne stranice

okviri.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;

?>

Korak 3) Izrada JS skripte

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();

}

OVDJE,

“if (str.length == 0)” provjerite duljinu niza. Ako je 0, tada se ostatak skripte ne izvršava.
“if (window.XMLHttpRequest)…” Internet Explorer verzije 5 i 6 koriste ActiveXObject za AJAX implementaciju. Ostale verzije i preglednici kao što su Chrome, FireFox koristiti XMLHttpRequest. Ovaj kod će osigurati da naša aplikacija radi u IE 5 i 6 i drugim višim verzijama IE i preglednika.
“xmlhttp.onreadystatechange=function…” provjerava je li AJAX interakcija dovršena i status je 200, a zatim ažurira raspon txtName s vraćenim rezultatima.

Korak 4) Testiranje naše PHP Ajax aplikacije

Pod pretpostavkom da ste spremili datoteku index.php u phututs/ajax, potražite URL http://localhost/phptuts/ajax/index.php

Upišite slovo C u tekstni okvir. Dobit ćete sljedeće rezultate.

Gornji primjer pokazuje koncept AJAX-a i kako nam može pomoći u stvaranju aplikacija bogate interakcije.

rezime

AJAX je akronim za Asynchronous JavaScript i XML
AJAX je tehnologija koja se koristi za stvaranje aplikacija bogate interakcije koje smanjuju interakcije između klijenta i poslužitelja ažuriranjem samo dijelova web stranice.
Internet Explorer verzije 5 i 6 koriste ActiveXObject za implementaciju AJAX operacija.
Internet Explorer verzija 7 i novija i preglednici Chrome, Firefox, Opera, i Safari koriste XMLHttpRequest.

Možda ti se svidi: