Tutorial PHP Ajax con esempio

By: Fiona Marrone Fiona Marrone
Hours aggiornato

Cos'è l'Ajax?

AJAX la forma completa è asincrona JavaCopione & 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 sono avviate da JavaScript. Lo scopo di AJAX è quello di scambiare piccole quantità di dati con il server senza aggiornare la pagina.

JavaCopione è un linguaggio di scripting lato client. Viene eseguito sul 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. È usato per codificare messaggi in formati leggibili sia dall'uomo che dalla macchina. È come HTML ma ti consente di creare i tuoi tag personalizzati. Per maggiori dettagli su XML, vedi l'articolo su XML

Perché usare AJAX?

  • Consente di sviluppare 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 digitate dall'utente 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 in base al 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 le parti della pagina Web che caricano cose come
  • tweets
  • Commens
  • Utenti che visitano il sito ecc.

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 potranno digitare 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 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 JavaFunzione script 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

<?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;

?>

ARTICOLI CORRELATI

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,

  • "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 utilizzare 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

Test della nostra applicazione PHP Ajax

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

Test della nostra applicazione PHP Ajax

L'esempio sopra dimostra il concetto di AJAX e come può aiutarci a creare applicazioni ricche di interazione.

Sommario

  • AJAX è l'acronimo di Asynchronous JavaCopione e XML
  • AJAX è una tecnologia utilizzata per creare applicazioni ricche di interazione che riducono le interazioni tra il client e il server aggiornando solo parti della pagina web.
  • Internet Explorer versione 5 e 6 utilizzano ActiveXObject per implementare le operazioni AJAX.
  • Internet Explorer versione 7 e successive e browser Chrome, Firefox, Operae Safari utilizzano XMLHttpRequest.

Potrebbe piacerti: