Asynchronous JavaScript and XML (AJAX) esisteva molto prima è diventato una parola d'ordine ufficiale. Jesse James Garret, che ha coniato la parola \"AJAX\" nel 1995, notato, \"It's davvero diverse tecnologie, ogni fiorente nella sua propria destra. \" vedete AJAX in azione quando vedete Google suggerire risultati durante la digitazione nella casella di ricerca. Quando gli elementi carrello magicamente appaiono nel browser quando si fa clic su un pulsante, AJAX sta recuperando dati dietro le quinte. Al suo interno, AJAX funziona grazie ad un oggetto chiamato XMLHttpRequest. Integrare questo oggetto JavaScript per aggiungere funzionalità AJAX a pagine web.

Istruzioni

1

Creare un nuovo documento HTML e aggiungere il seguente blocco di codice:

< div id = \ "testDiv\" >< testo originale h2 > < / h2 >< / div >
< tipo del bottone = \ "button" onclick = \ "test () \" > Click per testare cambiare il testo < / button >

2

Aggiungere una funzione JavaScript vuota alla sezione script del codice HTML come mostrato di seguito:

funzione test () {

}

3

Aggiungere questo codice alla funzione:

Se (finestra. XMLHttpRequest)
testObject = new XMLHttpRequest)
VAI
}

else {
testObject= new ActiveXObject(\"Microsoft.XMLHTTP\")

VAI
}
Commento #1

Questo blocco di codice crea un oggetto XMLHttpRequest. Internet Explorer ha il suo modo di creare tale oggetto come mostrato nella \"else\" clausola.

4

Aggiungi questo codice dopo il commento #1:

testObject.onreadystatechange = updateTextBox(testObject)
VAI
Commento #2

Come comunica con il server, il browser controllerà lo stato della richiesta AJAX. Quando \"ready state\ dell'oggetto"modifiche, il browser chiamerà la funzione denominata \"updateTextBox\". Passerà anche l'oggetto AJAX, \"testObject\", alla funzione.

5

Aggiungere il seguente blocco di codice commento #2:

XMLHTTP.Open (\"GET\", \"serverInfo.txt\", true)
VAI

xmlhttp.send()

VAI

}

Questo consente di recuperare il testo dal file di testo denominato \"serverInfo.txt\" e memorizzarlo nell'oggetto AJAX.

6

Aggiungere questa funzione nella sezione script del codice HTML:

Function updateTextBox(testObject) () {

if (testObject.readyState == 4 && testObject.status == 200) {
var myText = document.getElementById(\"myTextBox\")

VAI

myText.innerHTML = testObject.responseText

VAI

}

else alert(\"Problem occurred\")

VAI
}

Questo codice verrà recuperare il testo dall'oggetto AJAX e aggiungerlo alla casella di testo. La funzione controlla il valore dell'oggetto stato pronto. Se tale valore non è quattro o 200, avvisa l'utente che si è verificato un problema e l'operazione AJAX non riuscita.

7

Creare un file di testo denominato \"serverInfo.txt\" e aggiungere \"text da server \" al file.

8

Posizionare i file sul server web e testare l'applicazione. Quando si sceglie il pulsante, una funzione JavaScript sostituirà la prova dell'elemento di intestazione con il testo che viene recuperato dal server web.

Consigli & Avvertenze

• Controllare sempre i valori di uno stato di pronta dopo aver inviato una richiesta AJAX. Se si verificano problemi, è necessario informare l'utente.