Nwlapcug.com


Come creare un sito web Ajax

Come creare un sito web Ajax


AJAX può essere utilizzato per recuperare informazioni da un server senza ricaricare l'intera pagina Web. Ajax (o AJAX) può essere molto utile se si desidera caricare una piccola quantità di informazioni ma mantenere la maggior parte della pagina lo stesso. Ajax, o Asynchronous JavaScript and XML, ciò avviene mediante lo scambio di piccole quantità di dati con il server dietro le quinte, secondo W3Schools. L'oggetto XMLHttpRequest è utilizzato per scambiare dati in modo asincrono con un server, mentre JavaScript è usato per visualizzare le informazioni.

Istruzioni

Guida introduttiva

1

Aprire un editor di HTML o di testo. Se non si dispone di un editor HTML, è possibile che un semplice editor di testo come blocco note o TextEdit sarà adeguato.

2

Includere gli elementi essenziali di un documento HTML: "html", "testa" e "corpo" tag. Documenti HTML sono costituiti da tag o parole chiave circondati da parentesi angolari. Ad esempio, un tag di apertura "html" è simile al seguente: < html >. Tag a chiusura includere una barra prima della parola chiave. Quanto segue è la struttura di una pagina Web di base con alcuni elementi aggiuntivi (< p > Crea i paragrafi, < a > Crea collegamenti e < img > include immagini):

< html >

< head >

< title > My Web Page < / title >

< / head >

< corpo >

< h1 > My prima voce < / h1 >

Scrittura del testo in questa sezione per creare un paragrafo. </p > < p >

< a href = "This" > http://www.example.com "> questo è un link a una pagina di esempio nel web. < /a >

< img width = "250" height = "200" alt = "my dog" / >

< / body >

< / html >

3

Includono gli elementi che si desidera modificare con Ajax. Questo e tutti gli elementi strutturali di una pagina Web, andrà tra i tag "body".

Ad esempio, aggiungere un pulsante per modificare un testo sulla tua pagina. Definire il testo da modificare inserendo un tag "div" intorno al testo con un selettore id (in questo caso id = "changeText").

< corpo >

< div id = "changedDiv" >< p > questo testo sarà cambiato con AJAX </p >< div >

< pulsante di tipo = "button" onclick="loadXMLDoc()" > fare clic su modificare contenuto < / button >

< / body >

Script AJAX e il metodo Open)

4

Digitare la funzione che conterrà il vostro script AJAX nella sezione "head" del documento HTML. Includere questa funzione, la funzione di "loadXMLDoc()", in un tag script"JavaScript". Per esempio:

< head >

< script type = "text/javascript" >

funzione loadXMLDoc()

{

.... (Script AJAX andrà qui)

}

< / script >

< / head >

5

Aggiungere script AJAX per la funzione. Includere l'oggetto XMLHttpRequest e l'oggetto ActiveX. Questi permetteranno dati inviati oppure caricati da un server. Includere il seguente tra le parentesi graffe della funzione "loadXMLDoc()":

Se (finestra. XMLHttpRequest)

{/ / per IE7 +, Firefox, Chrome, Opera, Safari

XMLHTTP = new XMLHttpRequest ();

}

altro

{/ / per IE6, IE5

XMLHTTP = new ActiveXObject;

}

6

Aggiungere il metodo generico "Open ()" alla fine della funzione. Questo invierà una richiesta al server. Di seguito è riportato il formato generico:

Open(Method,URL,Async)

7

Sostituire la parola "metodo" in "open (metodo, url, async)" con "GET" o "POST". Utilizzare "GET" a meno che non sta aggiornando un file o un database sul server, l'invio di grandi quantità di dati o l'invio di input dell'utente al server, nel qual caso si dovrebbe usare "POST." "GET" è più veloce di "POST", ma "POST" è più robusto. Il tuo "open(method,url,async)" dovrebbe apparire come questo:

XMLHTTP.Open("Get",URL,Async) o

XMLHTTP.Open("post",URL,Async)

8

Sostituire la parola "url" nel generico "open(method,url,async)" con il file sul vostro server che si desidera caricare quando si fa clic sul pulsante. Ad esempio, sostituire il testo nel nostro esempio con un documento di testo chiamato "helloWorld.txt:"

XMLHTTP.Open("Get","HelloWorld.txt",Async)

9

Sostituire la parola "async" con "true" per consentire le richieste asincrone. In questo modo JavaScript per eseguire anche quando il server è occupato o lento senza interruzione dell'applicazione. Ecco il metodo Open (finale):

XMLHTTP.Open ("GET","helloWorld.txt", "true")

Lo stato pronto e metodo Send)

10

Aggiungere il codice seguente sopra "xmlhttp.open ("GET","helloWorld.txt","true")" per specificare la funzione da eseguire quando si è pronti:

XMLHTTP.onreadystatechange=function()

{

Se (xmlhttp.readyState==4 & & xmlhttp.status==200)

{

document.getElementById("exampleDiv").innerHTML = responseText;

}

}

Quando i cambiamenti di stato pronto da 0 a 4, la funzione eseguirà (0: richiesta non è inizializzato; 1: viene stabilita la connessione al server; 2: richiesta è stata ricevuta; 3: elaborazione richiesta; 4: finito di richiesta e risposta è pronto). Lo stato è 200 quando la pagina viene trovata (stato = = 404 significa pagina non trovata).

11

Includono il metodo di "Send ()" sotto "xmlhttp.open ("GET","helloWorld.txt","true")" a spedire la richiesta al server. Questo è il metodo di "Send ()":

XMLHTTP.Send()

12

Rivedere l'intero codice, che dovrebbe essere simile al seguente:

< 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 = 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 >