Vodič za PHP Ajax s primjerom

Sadržaj:

Anonim

Što je Ajax?

Puni je oblik AJAX- a asinkroni JavaScript i XML. To je tehnologija koja smanjuje interakciju između poslužitelja i klijenta. To čini ažuriranjem samo dijela web stranice, a ne cijele stranice. Asinkrone interakcije pokreće JavaScript. Svrha AJAX-a je razmjena malih količina podataka sa poslužiteljem bez osvježavanja stranice.

JavaScript je skriptni jezik na klijentskoj strani. Izvršavaju ga na klijentskoj strani web preglednici koji podržavaju JavaScript.JavaScript kôd radi samo u preglednicima koji imaju omogućen JavaScript.

XML je kratica za Extensible Markup Language. Koristi se za kodiranje poruka u ljudskom i strojno čitljivom formatu. To je poput HTML-a, ali omogućuje vam stvaranje vlastitih oznaka. Za više detalja o XML-u pogledajte članak o XML-u

Zašto koristiti AJAX?

  • Omogućuje razvoj bogatih interaktivnih web aplikacija poput baznih računara.
  • Provjera valjanosti može se izvršiti dok korisnik ispunjava obrazac bez da ga podnosi. To se može postići automatskim dovršavanjem. Riječi koje korisnik unese predane su poslužitelju na obradu. Poslužitelj odgovara ključnim riječima koje se podudaraju s onim š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 stranica koji učitavaju stvari poput
    • Tweetovi
    • Commens
    • Korisnici koji posjećuju stranicu itd.

Kako stvoriti PHP Ajax aplikaciju

Stvorit ćemo jednostavnu aplikaciju koja korisnicima omogućuje pretraživanje popularnih PHP MVC okvira.

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

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

Korak 1) Izrada indeksne stranice

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine


Type the first letter of the PHP MVC Framework








Matches:

OVDJE,

  • “Onkeyup =" showName (this.value) "" izvršava JavaScript funkciju showName svaki put kad se u okvir upiše ključ.

    Ova se značajka naziva automatsko dovršavanje

Korak 2) Stvaranje stranice okvira

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

Korak 3) Izrada JS skripte

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

OVDJE,

  • "If (str.length == 0)" provjerite duljinu niza. Ako je 0, ostatak skripte se ne izvršava.
  • "If (window.XMLHttpRequest) ..." Internet Explorer verzije 5 i 6 koriste ActiveXObject za implementaciju AJAX-a. Ostale verzije i preglednici, poput Chrome, FireFox, koriste XMLHttpRequest. Ovaj kôd osigurat će da naša aplikacija radi i u IE 5 i 6 i u drugim visokim verzijama IE i preglednicima.
  • “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 bogatih aplikacija za interakciju.

Sažetak

  • AJAX je kratica za Asinkroni JavaScript i XML
  • AJAX je tehnologija koja se koristi za stvaranje bogatih aplikacija za interakciju koje smanjuju interakciju 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, a preglednici Chrome, Firefox, Opera i Safari koriste XMLHttpRequest.