Cos'è l'Ajax?
La forma completa di AJAX è JavaScript e XML asincrono. È una tecnologia che riduce le interazioni tra server e client. Lo fa aggiornando solo una parte di una pagina web piuttosto che l'intera pagina. Le interazioni asincrone vengono avviate da JavaScript. Lo scopo di AJAX è quello di scambiare piccole quantità di dati con il server senza aggiornare la pagina.
JavaScript è un linguaggio di scripting lato client. Viene eseguito sul lato client dai browser Web che supportano JavaScript. Il codice JavaScript funziona solo nei browser che hanno JavaScript abilitato.
XML è l'acronimo di Extensible Markup Language. Viene utilizzato per codificare i messaggi in formati leggibili sia dall'uomo che dalla macchina. È come l'HTML ma ti consente di creare i tuoi tag personalizzati. Per ulteriori dettagli su XML, vedere l'articolo su XML
Perché utilizzare AJAX?
- Consente lo sviluppo di ricche applicazioni web interattive proprio come le applicazioni desktop.
- La convalida può essere eseguita mentre l'utente compila un modulo senza inviarlo. Ciò può essere ottenuto utilizzando il completamento automatico. Le parole che l'utente digita vengono inviate al server per l'elaborazione. Il server risponde con parole chiave che corrispondono a ciò che l'utente ha inserito.
- Può essere utilizzato per popolare una casella a discesa a seconda del valore di un'altra casella a discesa
- I dati possono essere recuperati dal server e solo una certa parte di una pagina può essere aggiornata senza caricare l'intera pagina. Questo è molto utile per parti di pagine web che caricano cose come
- Tweets
- Commens
- Utenti che visitano il sito, ecc.
Come creare un'applicazione PHP Ajax
Creeremo una semplice applicazione che consentirà agli utenti di cercare i framework PHP MVC più diffusi.
La nostra applicazione avrà una casella di testo in cui gli utenti digiteranno i nomi del framework.
Utilizzeremo quindi mvc AJAX per cercare una corrispondenza, quindi visualizzeremo il nome completo del framework appena sotto il modulo di ricerca.
Passaggio 1) Creazione della pagina dell'indice
Index.php
PHP MVC Frameworks - Search Engine PHP MVC Frameworks - Search Engine
Type the first letter of the PHP MVC Framework
Matches:
QUI,
-
“Onkeyup =" showName (this.value) "” esegue la funzione JavaScript showName ogni volta che viene digitato un tasto nella casella di testo.
Questa funzione è chiamata completamento automatico
Passaggio 2) Creazione della pagina dei framework
frameworks.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;?>
Passaggio 3) Creazione dello script 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();}
QUI,
- "If (str.length == 0)" controlla la lunghezza della stringa. Se è 0, il resto dello script non viene eseguito.
- "If (window.XMLHttpRequest) ..." Le versioni 5 e 6 di Internet Explorer utilizzano ActiveXObject per l'implementazione AJAX. Altre versioni e browser come Chrome, FireFox utilizzano XMLHttpRequest. Questo codice garantirà che la nostra applicazione funzioni sia in IE 5 e 6 che in altre versioni avanzate di IE e browser.
- "Xmlhttp.onreadystatechange = function ..." controlla se l'interazione AJAX è completa e lo stato è 200, quindi aggiorna l'intervallo txtName con i risultati restituiti.
Passaggio 4) Testare la nostra applicazione PHP Ajax
Supponendo che tu abbia salvato il file index.php in phututs / ajax, vai all'URL http: //localhost/phptuts/ajax/index.php
Digita la lettera C nella casella di testo Otterrai i seguenti risultati.
L'esempio sopra mostra il concetto di AJAX e come può aiutarci a creare ricche applicazioni di interazione.
Sommario
- AJAX è l'acronimo di Asynchronous JavaScript e XML
- AJAX è una tecnologia utilizzata per creare ricche applicazioni di interazione che riducono le interazioni tra il client e il server aggiornando solo parti della pagina web.
- Internet Explorer versione 5 e 6 utilizza ActiveXObject per implementare le operazioni AJAX.
- Internet Explorer versione 7 e successive ei browser Chrome, Firefox, Opera e Safari utilizzano XMLHttpRequest.