AJAX (Asynchronous JavaScript and XML) è stato reso popolare con Google Suggest nel 2005, quando Google ha introdotto un modo innovativo di cercare sul Web: digitare una parola nella casella di ricerca di Google e viene creato un elenco di suggerimenti. In questo esempio semplice ma potente è una delle molte implementazioni di AJAX sul web oggi. Facebook schede, Youtube, Gmail e Google maps sono altri esempi di utilizzo di AJAX per aggiornare le parti di una pagina web senza ricaricare l'intera pagina.
Istruzioni
Base AJAX
1
Aprire il vostro editor preferito HTML o testo. Blocco note sarà sufficiente.
2
Digitare gli elementi essenziali di un documento HTML:
< html >
< head >
< / head >
< corpo >
< / body >
< / html >
3
Includere elementi di essere cambiato con AJAX tra i tag < body >. Aggiungere un pulsante, ad esempio, per chiamare la funzione "loadXMLDoc()" quando cliccato. Aggiungere un tag div (con id selector "changeDiv," per esempio) per definire il testo da modificare con AJAX.
< corpo >
< div id = "changedDiv" >< testo cambia p > con AJAX </p >< div >
< pulsante di tipo = "button" onclick="loadXMLDoc()" > fare clic su modificare contenuto < / button >
< / body >
"loadXMLDoc()" funzione
4
Includono la funzione di "loadXMLDoc()" all'interno di un tag < script > nella sezione < head > del documento HTML. La funzione consente di includere script AXAJ.
< head >
< script type = "text/javascript" >
funzione loadXMLDoc()
{
.... (Script AJAX andrà qui)
}
< / script >
< / head >
5
Aggiungere script AJAX per la funzione di "loadXMLDoc()". Aggiungere l'oggetto XMLHttpRequest (supportato dai browser principali, moderno) e oggetto di ActiveX (necessario per Internet Explorer versioni 5 e 6) che permette agli script per consentire dei dati inviati oppure caricati da un server. Per esempio
Se (finestra. XMLHttpRequest)
{/ / per IE7 +, Firefox, Chrome, Opera, Safari
XMLHTTP = new XMLHttpRequest ();
}
altro
{/ / per IE6, IE5
XMLHTTP = new ActiveXObject;
}
6
Inviare una richiesta a un server utilizzando il metodo Open (), aggiunto alla fine della funzione loadXMLDoc(). Il formato generico per il metodo aperto è questo:
Open(Method,URL,Async)
7
Sostituire il generico "metodo" nel metodo open (metodo, url, async) con GET o POST. GET deve essere utilizzato il più delle volte, come è più semplice e più veloce di richieste POST. Tuttavia, è consigliabile utilizzare POST quando si aggiorna un file o un database sul server, l'invio di grandi quantità di dati o l'invio di input dell'utente al server (POST è più sicura e robusta GET e non ha limitazioni sulle dimensioni). Il metodo Open () ora dovrebbe assomigliare a questo:
XMLHTTP.Open("Get",URL,Async) o
XMLHTTP.Open("post",URL,Async)
8
Sostituire il generico "url" nel metodo open(method,url,async) con il percorso del file sul server. Se si sta sostituendo il testo "modificare testo con AJAX" con "ajax_document.txt", è necessario includere "ajax_document.txt" (qualsiasi file può essere utilizzato, tra cui txt, XML o ASP o php per eseguire azioni sul server prima di inviare indietro una risposta). Nell'esempio ora dovrebbe assomigliare a questo:
XMLHTTP.Open("Get","ajax_document.txt",Async)
9
Sostituire il generico "async" con "true" per le richieste asincrone o "false" per le richieste sincrone. Si consiglia di utilizzare "true" in modo che il codice JavaScript per eseguire anche se il server è occupato o lento senza causare l'applicazione interrompere. Questo diagramma illustra l'utilità di AJAX. Il metodo aperto ora dovrebbe assomigliare a questo:
XMLHTTP.Open ("GET","ajax_document.txt", "true")
10
Specificare la funzione da eseguire quando la risposta è pronta (si applica solo quando si utilizza Async = true). Questo dovrebbe essere aggiunto sopra il metodo di xmlhttp.open():
XMLHTTP.onreadystatechange=function()
{
Se (xmlhttp.readyState==4 & & xmlhttp.status==200)
{
document.getElementById("exampleDiv").innerHTML=xmlhttp.responseText;
}
}
La funzione eseguirà quando stato pronto cambia da 0 a 4 (0 significa richiesta non è inizializzato, 1, è stabilita la connessione al server; 2, la richiesta è stata ricevuta; 3, elaborazione richiesta; e 4, richiesta finito e risposta è pronto). Lo stato sarà 200, a meno che non si trova la pagina (quando lo stato = 404).
11
Includere il metodo Send () per mandare la richiesta al server. Includere questo sotto il metodo Open ().
XMLHTTP.Send()
Tutto il codice dovrebbe risultare come questo:
< html >
< head >
< script type = "text/javascript" >
funzione loadXMLDoc()
{
Se (finestra. XMLHttpRequest)
{/ / per IE7 +, Firefox, Chrome, Opera, Safari
XMLHTTP = new XMLHttpRequest ();
}
altro
{/ / per IE6, IE5
XMLHTTP = new ActiveXObject;
}
XMLHTTP.onreadystatechange=function()
{
Se (xmlhttp.readyState==4 & & xmlhttp.status==200)
{
document.getElementById("changedDiv").innerHTML=xmlhttp.responseText;
}
}
XMLHTTP.Open("Get","ajax_info.txt",true);
XMLHTTP.Send();
}
< / script >
< / head >
< corpo >
< div id = "changedDiv" >< h2 > modificare questo testo con AJAX < / h2 >< / div >
< pulsante di tipo = "button" onclick="loadXMLDoc()" > fare clic su modificare contenuto < / button >
< / body >
< / html >