Tutorial PHP Ajax con esempio

Cos'è l'Ajax?

AJAX sta per Asincrono JavaCopione e XML. È una tecnologia che riduce le interazioni tra server e client. Lo fa aggiornando solo una parte di una pagina web anziché 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 ricaricare la pagina.

JavaCopione è un linguaggio di scripting lato client. Viene eseguito lato client dai browser web che supportano JavaScript. JavaIl codice script 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 dagli esseri umani che dalle macchine. È simile all'HTML ma consente di creare tag personalizzati. Per maggiori dettagli su XML, consultare l'articolo su XML.

Perché usare AJAX?

• Consente lo sviluppoping Applicazioni web ricche e interattive, proprio come le applicazioni desktop.
• La validazione può essere eseguita mentre l'utente compila un modulo, senza inviarlo. Ciò può essere realizzato tramite il completamento automatico. Le parole digitate dall'utente vengono inviate al server per l'elaborazione e il server risponde con parole chiave corrispondenti a quanto inserito dall'utente.
• Può essere utilizzato per popolare un menu a tendina in base al valore di un altro menu a tendina.
• È possibile recuperare i dati dal server e aggiornare solo una parte specifica di una pagina senza caricare l'intera pagina. Questo è molto utile per le parti di pagine web che caricano elementi come:
  • tweets
  • Commenti
  • Utenti che visitano il sito e dati simili in tempo reale.

Come creare un'applicazione PHP Ajax

Creeremo una semplice applicazione che consenta 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 dei framework.

Utilizzeremo quindi AJAX per cercare una corrispondenza e visualizzeremo il nome completo del framework appena sotto il modulo di ricerca.

Passaggio 1) Creazione della pagina indice

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>

QUI,

• "onkeyup="showName(this.value)"" esegue il file JavaLa funzione script showName viene visualizzata ogni volta che viene premuto un tasto nella casella di testo. Questa funzione è chiamata completamento automatico.

Passaggio 2) Creazione della pagina dei framework

frameworks.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;

?>

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

}

QUI,

• L'istruzione "if (str.length == 0)" verifica 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 e Firefox Utilizziamo XMLHttpRequest. Questo codice garantisce che la nostra applicazione funzioni sia in Internet Explorer 5 e 6 che nei browser moderni.
• “xmlhttp.onreadystatechange=function…” verifica se l’interazione AJAX è completa e lo stato è 200, quindi aggiorna lo span txtName con i risultati restituiti.

Passaggio 4) Testare la nostra applicazione PHP Ajax

Supponendo che tu abbia salvato il file index.php in phptuts/ajax, vai al URL http://localhost/phptuts/ajax/index.php

Digita la lettera C nella casella di testo. Otterrai i seguenti risultati.

L'esempio sopra riportato illustra il concetto di AJAX e come può aiutarci a creare applicazioni ricche e interattive.

AJAX moderno con l'API Fetch

L'oggetto XMLHttpRequest menzionato sopra funziona ancora, ma la sua versione ActiveXObject per le vecchie versioni di Internet Explorer non è più necessaria. I browser moderni offrono l'API Fetch basata sulle promise, che effettua la stessa richiesta con molto meno codice.

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

Questa versione svolge la stessa funzione: invia il testo digitato a frameworks.php e inserisce la risposta nello span txtName. Utilizza inoltre encodeURIComponent per codificare in modo sicuro l'input e la sua catena di promise è facilmente estendibile con la gestione degli errori tramite un blocco catch.

DOMANDE FREQUENTI