Ce este Ajax?
Formularul complet AJAX este JavaScript și XML asincron. Este o tehnologie care reduce interacțiunile dintre server și client. Face acest lucru actualizând doar o parte a unei pagini web, mai degrabă decât întreaga pagină. Interacțiunile asincrone sunt inițiate de JavaScript. Scopul AJAX este de a schimba cantități mici de date cu serverul fără reîmprospătarea paginii.
JavaScript este un limbaj de script pentru partea clientului. Acesta este executat pe partea de client de către browserele web care acceptă JavaScript. Codul JavaScript funcționează numai în browserele care au JavaScript activat.
XML este acronimul pentru Extensible Markup Language. Este folosit pentru a codifica mesaje atât în format citit de oameni, cât și de mașină. Este ca HTML, dar vă permite să creați etichete personalizate. Pentru mai multe detalii despre XML, consultați articolul despre XML
De ce să folosiți AJAX?
- Permite dezvoltarea de aplicații web interactive bogate la fel ca aplicațiile desktop.
- Validarea poate fi efectuată în timp ce utilizatorul completează un formular fără a-l trimite. Acest lucru poate fi realizat folosind completarea automată. Cuvintele introduse de utilizator sunt trimise la server pentru procesare. Serverul răspunde cu cuvinte cheie care se potrivesc cu ceea ce a introdus utilizatorul.
- Poate fi folosit pentru a completa 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 unei pagini actualizate fără a încărca întreaga pagină. Acest lucru este foarte util pentru părțile de pagini web care încarcă lucruri precum
- Tweeturi
- Commens
- Utilizatorii care vizitează site-ul etc.
Cum se creează o aplicație PHP Ajax
Vom crea o aplicație simplă care permite utilizatorilor să caute cadrele PHP MVC populare.
Aplicația noastră va avea o casetă text pe care utilizatorii o vor introduce în numele cadrului.
Apoi vom folosi mvc AJAX pentru a căuta o potrivire, apoi vom afișa numele complet al cadrului chiar sub formularul de căutare.
Pasul 1) Crearea paginii index
Index.php
PHP MVC Frameworks - Search Engine PHP MVC Frameworks - Search Engine
Type the first letter of the PHP MVC Framework
Matches:
AICI,
-
„Onkeyup =" showName (this.value) "” execută funcția JavaScript showName de fiecare dată când o tastă este tastată în caseta de text.
Această caracteristică se numește completare automată
Pasul 2) Crearea paginii de cadre
cadre.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;?>
Pasul 3) Crearea scriptului JS
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();}
AICI,
- „If (str.length == 0)” verificați lungimea șirului. Dacă este 0, atunci restul scriptului nu este executat.
- „If (window.XMLHttpRequest) ...” Internet Explorer versiunile 5 și 6 utilizează ActiveXObject pentru implementarea AJAX. Alte versiuni și browsere precum Chrome, FireFox folosesc XMLHttpRequest. Acest cod va asigura că aplicația noastră funcționează atât în IE 5 și 6, cât și în alte versiuni superioare de IE și browsere.
- „Xmlhttp.onreadystatechange = function ...” verifică dacă interacțiunea AJAX este completă și starea 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 phututs / ajax, navigați la adresa 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 modul în care ne poate ajuta să creăm aplicații de interacțiune bogate.
rezumat
- AJAX este acronimul pentru JavaScript asincron și XML
- AJAX este o tehnologie utilizată pentru a crea aplicații de interacțiune bogate care reduc interacțiunile dintre client și server prin actualizarea doar a unor părți ale paginii web.
- Internet Explorer versiunile 5 și 6 utilizează ActiveXObject pentru a implementa operațiuni AJAX.
- Internet Explorer versiunea 7 și versiunile ulterioare și browserele Chrome, Firefox, Opera și Safari folosesc XMLHttpRequest.