October 16
AJAX (Asynchronous JavaScript and XML) è stato reso popolare con Google Suggest nel 2005, quando Google ha introdotto un modo innovativo per la ricerca sul Web: digitare una parola nella casella di ricerca di Google e un elenco di suggerimenti viene creato. In questo esempio semplice ma potente è una delle molte implementazioni di AJAX sul web oggi. mappe schede Facebook, YouTube, Gmail e Google sono altri esempi di come AJAX può essere utilizzato per aggiornare parti di una pagina web senza ricaricare l'intera pagina.
1 Aprire il codice HTML preferito o un editor di testo. Blocco note sarà sufficiente.
2 Digitare gli elementi essenziali di un documento HTML:
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
3 Includere elementi da modificare con AJAX tra i tag <BODY>. Aggiungere un pulsante, ad esempio, per richiamare la funzione "loadXMLDoc ()" quando si fa clic. Aggiungere un tag div (con selettore id "changeDiv", per esempio) per definire quale testo per cambiare con AJAX.
<Body>
<Div id = "changedDiv"> <p> Cambia testo con AJAX </ p> <div>
<Button type = "button" onclick = "loadXMLDoc ()"> Fare clic per modificare il contenuto </ button>
</ Body>
4 Includere il "loadXMLDoc ()" la funzione all'interno di un tag <script> nella sezione <head> del documento HTML. La funzione consente di includere lo script AXAJ.
<Head>
<Script type = "text / javascript">
Funzione loadXMLDoc ()
{
.... (Lo script AJAX andrà qui)
}
</ Script>
</ Head>
5 Aggiungere lo script AJAX per la funzione "loadXMLDoc ()". Aggiungere l'oggetto XMLHttpRequest (supportato da grandi, i browser moderni), e oggetto ActiveX (necessario per le versioni di Internet Explorer 5 e 6) che permette di script per consentire i dati da sottoporre o caricati da un server. Per esempio,
if (window.XMLHttpRequest)
{// Per IE7 +, Firefox, Chrome, Opera, Safari
XMLHTTP = new XMLHttpRequest ();
}
altro
{// Per IE6, IE5
XMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP");
}
6 Invia una richiesta a un server utilizzando il metodo open (), aggiunto alla fine della funzione loadXMLDoc (). Il formato generico per il metodo aperto è questo:
aperto (metodo, URL, asincrona)
7 Sostituire il "metodo" generica nel metodo aperto (metodo, URL, asincrona) con GET o POST. GET dovrebbe essere utilizzato il più delle volte, come è più semplice e veloce di richieste POST. Tuttavia, si dovrebbe usare POST durante l'aggiornamento di un file o database sul server, l'invio di grandi quantità di dati o l'invio di input dell'utente al server (POST è più sicuro e robusto di GET e non ha limitazioni sulle dimensioni). Il metodo open () dovrebbe apparire come questo:
xmlhttp.open ( "GET", url, asincrona) o
xmlhttp.open ( "POST", url, asincrona)
8 Sostituire il "url" generica nel metodo aperto (metodo, URL, asincrona) con la posizione del file sul server. Se si sta sostituendo il testo "modificare il testo con AJAX" con "ajax_document.txt," si dovrebbe includere "ajax_document.txt" (qualsiasi file può essere utilizzato, tra cui .txt, .xml o ASP o .php per eseguire azioni su il server prima di inviare di nuovo una risposta). L'esempio dovrebbe apparire come questo:
xmlhttp.open ( "GET", "ajax_document.txt", asincrona)
9 Sostituire il "asincrona" generico "true" per richieste asincrone o "false" per le richieste sincrone. Si raccomanda di usare "vero", in quanto questo permetterà al JavaScript di eseguire anche se il server è occupato o lento senza provocare l'applicazione di fermarsi. Questo dimostra l'utilità di AJAX. Il metodo aperto dovrebbe apparire come questo:
xmlhttp.open ( "GET", "ajax_document.txt", "true")
10 Specificare la funzione da eseguire quando la risposta è pronto (si applica solo quando si utilizza asnyc = true). Questo dovrebbe essere aggiunto sopra il metodo xmlhttp.open ():
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById ( "exampleDiv") innerHTML = xmlhttp.responseText.;
}
}
La funzione verrà eseguita quando i cambiamenti di stato pronto da 0 a 4 (0 significa richiesta non è inizializzato, 1, la connessione al server è stabilito; 2, la richiesta è stata ricevuta, 3, elaborazione della richiesta, e 4, la richiesta finito e la risposta è pronta) . Stato sarà di 200 meno che la pagina non si trova (se status = 404).
11 Includere il metodo send () per inviare la richiesta via al server. Includere questo sotto il metodo open ().
xmlhttp.send ()
L'intero codice dovrebbe apparire come questo:
<Html>
<Head>
<Script type = "text / javascript">
Funzione loadXMLDoc ()
{
if (window.XMLHttpRequest)
{// Per IE7 +, Firefox, Chrome, Opera, Safari
XMLHTTP = new XMLHttpRequest ();
}
altro
{// Per IE6, IE5
XMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById ( "changedDiv") innerHTML = xmlhttp.responseText.;
}
}
xmlhttp.open ( "GET", "ajax_info.txt", true);
xmlhttp.send ();
}
</ Script>
</ Head>
<Body>
<Div id = "changedDiv"> <h2> cambiare questo testo con AJAX </ h2> </ div>
<Button type = "button" onclick = "loadXMLDoc ()"> Fare clic per modificare il contenuto </ button>
</ Body>
</ Html>