PHP Ajax vodič s primjerom
Fiona Brown
⚡ Pametni sažetak
Ajax u PHP-u omogućuje web stranici razmjenu malih količina podataka s poslužiteljem i ažuriranje dijela stranice bez potpunog ponovnog učitavanja. Ovaj vodič izrađuje pretraživanje uživo okvira, objašnjavajući klasični XMLHttpRequest pristup i modernu alternativu Fetch API-ju.
Što je Ajax?
AJAX označava 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 pokreće JavaSkripta. Svrha AJAX-a je razmjena malih količina podataka s poslužiteljem bez osvježavanja stranice.
JavaScript je skriptni jezik na strani klijenta. Izvršava se na strani klijenta pomoću web preglednika koji podržavaju JavaSkripta. JavaKod skripte radi samo u preglednicima koji imaju JavaSkripta omogućena.
XML je kratica za Extensible Markup Language (proširivi jezik za označavanje). Koristi se za kodiranje poruka u formatima čitljivim ljudima i strojevima. Sličan je HTML-u, ali vam omogućuje stvaranje vlastitih prilagođenih oznaka. Za više detalja o XML-u pogledajte članak o XML.
Zašto koristiti AJAX?
- Omogućuje razvojping bogate, interaktivne web aplikacije baš kao i desktop aplikacije.
- Validacija se može izvršiti dok korisnik ispunjava obrazac bez slanja. To se može postići automatskim dovršavanjem. Riječi koje korisnik upiše šalju se poslužitelju na obradu, a poslužitelj odgovara ključnim riječima koje odgovaraju onome što je korisnik unio.
- Može se koristiti za popunjavanje padajućeg izbornika ovisno o vrijednosti drugog padajućeg izbornika.
- Podaci se mogu preuzeti 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 i slični podaci uživo.
Kako napraviti 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 korisnici upisuju nazive okvira.
Zatim ćemo koristiti AJAX za pretraživanje podudaranja, a zatim prikazati puni 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 prikazuje ime svaki put kada se u tekstualno polje upiše tipka. Ova se značajka naziva automatsko dovršavanje.
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)“ provjerava duljinu niza. Ako je 0, ostatak skripte se ne izvršava.
- „ako (window.XMLHttpRequest)…“ Internet Explorer verzije 5 i 6 koriste ActiveXObject za AJAX implementaciju. Druge verzije i preglednici poput Chromea i Firefox koristite XMLHttpRequest. Ovaj kod osigurava da naša aplikacija radi i u IE 5 i 6 te u modernim preglednicima.
- „xmlhttp.onreadystatechange=function…“ provjerava je li AJAX interakcija dovršena i je li status 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 phptuts/ajax, idite do URL http://localhost/phptuts/ajax/index.php
Upišite slovo C u tekstualni okvir. Dobit ćete sljedeće rezultate.
Gornji primjer pokazuje koncept AJAX-a i kako nam on može pomoći u stvaranju bogatih, interaktivnih aplikacija.
Moderni AJAX s Fetch API-jem
Gornji objekt XMLHttpRequest i dalje radi, ali njegova grana ActiveXObject za stari Internet Explorer više nije potrebna. Moderni preglednici pružaju Fetch API temeljen na obećanjima, koji isti zahtjev izvršava s puno manje koda.
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; }); }
Ova verzija radi isti posao: šalje upisani tekst u frameworks.php i stavlja odgovor u raspon txtName. Također koristi encodeURIComponent za sigurno izbjegavanje ulaza, a njegov lanac obećanja lako se proširuje rukovanjem pogreškama pomoću catch bloka.
