Come fare AJAX con PHP e HTML

April 13

Come fare AJAX con PHP e HTML


funzioni AJAX permettono pagine Web per aggiornare i contenuti HTML senza che l'utente debba aggiornare la pagina o individuare una pagina diversa. Il codice HTML di una pagina può chiamare una funzione JavaScript, che a sua volta può chiamare uno script PHP. Lo script PHP può recuperare i dati aggiuntivi, a volte da un database e formattata in XML markup, tornando questo alla funzione JavaScript. Il codice JavaScript può quindi scrivere questi nuovi dati in formato HTML, rendendo le nuove informazioni appaiono come l'utente interagisce con la pagina Web.

istruzione

1 Creare un nuovo documento HTML. Digitare il seguente codice in un file vuoto nel vostro editor di testo e dare al file l'estensione ".html" quando si salva:

<Html>
<Head>
<Script type = "text / javascript">
funzione processData () {
//aquisire nuovi dati
}
</ Script>
</ Head>
<Body>
<Div id = "update"> Alcuni contenuti </ div>
<Input type = valore "pulsante" = "premere me" onclick = "processData ()" />
</ Body>
</ Html>

Quando l'utente fa clic sul pulsante visualizzato in questa pagina, il browser chiamare la funzione JavaScript nella sezione head della pagina.

2 Creare un oggetto XMLHttpRequest. Aggiungere il seguente codice all'interno della funzione JavaScript:

var XMLHTTP;
if (window.XMLHttpRequest) {XMLHTTP = new XMLHttpRequest (); }
else {XMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP"); }

In questo modo la pagina Web di gestire diversi browser.

3 Invia la tua richiesta di dati a uno script PHP. Aggiungere il seguente codice all'interno della funzione JavaScript, lasciando spazio per il codice prima che:

xmlHTTP.open ( "GET", "get_data.php", true);
xmlhttp.send ();

Questo indica al browser di richiedere ulteriori informazioni dal script PHP specificato.

4 Crea il tuo script PHP. Aprire un nuovo file in un editor di testo e salvarlo come "get_data.php" per abbinare il parametro al metodo di invio è stato utilizzato nel codice JavaScript. Digitare il seguente codice di esempio:

<? Php
echo "I nuovi dati";
?>

Questo è un semplice esempio per la dimostrazione, ma è possibile aggiungere qualsiasi elaborazione PHP è necessario, tra cui le query di database. È inoltre possibile creare il testo di risposta in markup XML se questo si adatta al vostro sito.

5 Gestire la risposta dal vostro script PHP. Nella funzione JavaScript, prima della riga in cui si apre l'oggetto XMLHttpRequest, aggiungere il seguente codice:

xmlHTTP.onreadystatechange = function () {
if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
// Gestisce i dati di risposta
}}

Quando JavaScript riceve una risposta dallo script PHP, questo codice verrà eseguito. Il codice verifica che la risposta è valida. All'interno di questa istruzione condizionale, è possibile aggiungere codice per scrivere i nuovi dati nella vostra pagina HTML.

6 Aggiornare il contenuto della pagina. Nella dichiarazione condizionale risposta JavaScript, aggiungere il seguente codice:

document.getElementById ( "update") innerHTML = xmlHTTP.responseText.;

Questo codice identifica l'elemento div nella pagina e quindi scrive il testo di risposta dal codice PHP in esso.

7 Salvare i file e caricare sul server. Passare alla pagina e fare clic sul pulsante per verificare che la funzione funziona. Si dovrebbe vedere il contenuto del cambiamento elemento div.

Consigli e avvertenze

  • È possibile passare i dati dalla funzione JavaScript allo script PHP così come ricevere i dati.
  • script AJAX talvolta incontrano problemi con il caching del browser. Per ovviare a questo, è possibile aggiungere una variabile di numeri casuali per il codice JavaScript alla fine della stringa URL script PHP.