Tutorial PHP Ajax cu exemplu
Fiona Brown
⚡ Rezumat inteligent
Ajax în PHP permite unei pagini web să schimbe cantități mici de date cu serverul și să actualizeze o parte a paginii fără o reîncărcare completă. Această demonstrație construiește un framework de căutare live, explicând abordarea clasică XMLHttpRequest și alternativa modernă Fetch API.
Ce este Ajax?
AJAX înseamnă Asincron JavaScenariu & XML. Este o tehnologie care reduce interacțiunile dintre server și client. Realizează acest lucru prin actualizarea doar a unei părți a unei pagini web, nu a întregii pagini. Interacțiunile asincrone sunt inițiate de JavaScript. Scopul AJAX este de a schimba cantități mici de date cu serverul fără o reîmprospătare a paginii.
JavaScenariu este un limbaj de scripting pe partea de client. Este executat pe partea de client de către browsere web care acceptă JavaScenariul. JavaCodul de script funcționează numai în browserele care au JavaScriptul activat.
XML este acronimul pentru Extensible Markup Language (Limbaj de marcare extensibil). Este utilizat pentru a codifica mesaje atât în formate lizibile de om, cât și de mașină. Este similar cu HTML, dar vă permite să creați propriile etichete personalizate. Pentru mai multe detalii despre XML, consultați articolul despre XML.
De ce să folosiți AJAX?
- Permite dezvoltareaping aplicații web bogate și interactive, la fel ca aplicațiile desktop.
- Validarea poate fi efectuată pe măsură ce utilizatorul completează un formular, fără a-l trimite. Acest lucru se poate realiza folosind completarea automată. Cuvintele pe care le tastează utilizatorul sunt trimise serverului pentru procesare, iar serverul răspunde cu cuvinte cheie care corespund cu ceea ce a introdus utilizatorul.
- Poate fi folosit pentru a popula o casetă derulantă în funcție de valoarea unei alte casete derulante.
- Datele pot fi preluate de pe server și doar o anumită parte a paginii poate fi actualizată fără a încărca întreaga pagină. Acest lucru este foarte util pentru părțile paginii web care încarcă lucruri precum:
- Tweets
- Comentarii
- Utilizatori care vizitează site-ul și date live similare.
Cum se creează o aplicație PHP Ajax
Vom crea o aplicație simplă care permite utilizatorilor să caute cadre populare PHP MVC.
Aplicația noastră va avea o casetă de text în care utilizatorii vor introduce numele framework-urilor.
Apoi vom folosi AJAX pentru a căuta o potrivire, apoi vom afișa numele complet al framework-ului chiar sub formularul de căutare.
Pasul 1) Crearea paginii de index
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>
AICI,
- „onkeyup="showName(this.value)”” execută JavaFuncția de script showName de fiecare dată când se tastează o tastă în caseta de text. Această caracteristică se numește completare automată.
Pasul 2) Crearea paginii de cadre
cadre.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; ?>
Pasul 3) Crearea scriptului JS
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(); }
AICI,
- „if (str.length == 0)” verifică lungimea șirului de caractere. Dacă este 0, atunci restul scriptului nu este executat.
- „dacă (window.XMLHttpRequest)…” Versiunile 5 și 6 de Internet Explorer utilizează ActiveXObject pentru implementarea AJAX. Alte versiuni și browsere precum Chrome și Firefox utilizați XMLHttpRequest. Acest cod asigură că aplicația noastră funcționează atât în IE 5 și 6, cât și în browserele moderne.
- „xmlhttp.onreadystatechange=function…” verifică dacă interacțiunea AJAX este completă și dacă statusul este 200, apoi actualizează intervalul txtName cu rezultatele returnate.
Pasul 4) Testarea aplicației noastre PHP Ajax
Presupunând că ați salvat fișierul index.php în phptuts/ajax, navigați la URL http://localhost/phptuts/ajax/index.php
Tastați litera C în caseta de text. Veți obține următoarele rezultate.
Exemplul de mai sus demonstrează conceptul AJAX și cum ne poate ajuta să creăm aplicații bogate și interactive.
AJAX modern cu API-ul Fetch
Obiectul XMLHttpRequest de mai sus încă funcționează, dar ramura sa ActiveXObject pentru vechiul Internet Explorer nu mai este necesară. Browserele moderne oferă API-ul Fetch bazat pe promisiuni, care face aceeași solicitare cu mult mai puțin cod.
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; }); }
Această versiune face aceeași treabă: trimite textul tastat către frameworks.php și plasează răspunsul în intervalul txtName. De asemenea, folosește encodeURIComponent pentru a evada în siguranță intrarea, iar lanțul său de promisiuni este ușor de extins cu gestionarea erorilor folosind un bloc catch.
