L'oggetto XMLHttpRequest è utilizzato per lo scambio di dati con un server.
Invia una richiesta a un server
Per inviare una richiesta a un server, si usa il open() e send() metodi dell'oggetto XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();| metodo | Descrizione |
|---|---|
| open(method, url, async) | Specifica il tipo di richiesta method : il tipo di richiesta: GET o POST url : il server (file) posizione async : true (asincrona) o false (sincrono) |
| send() | Invia la richiesta al server (utilizzato per GET ) |
| send(string) | Invia la richiesta al server (usato per POST ) |
GET o POST ?
GET è più semplice e veloce di POST , e può essere utilizzato in molti casi.
Tuttavia, usare sempre POST richieste quando:
- Un file memorizzato nella cache non è un'opzione (aggiornare un file o database sul server).
- Invio di una grande quantità di dati al server ( POST non ha limiti di dimensione).
- L'invio di input da parte dell'utente (che può contenere caratteri sconosciuti), POST è più robusto e sicuro di GET .
GET richieste
Una semplice GET richiesta:
Nell'esempio di cui sopra, si può ottenere un risultato in cache. Per evitare questo, aggiungere un unico ID to the URL: ID to the URL:
Se si desidera inviare le informazioni con il GET metodo, aggiungere le informazioni all'URL:
Esempio
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send(); Prova tu stesso " POST richieste
Una semplice POST richiesta:
Per POST dati come un modulo HTML, aggiungere un HTTP header con setRequestHeader() . Specificare i dati che si desidera inviare in send() metodo:
Esempio
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); Prova tu stesso " | metodo | Descrizione |
|---|---|
| setRequestHeader(header, value) | Aggiunge intestazioni HTTP per la richiesta header : specifica il nome dell'intestazione value : specifica il valore di intestazione |
L'URL - Un file su un server
L' url parametro del open() il metodo, è un indirizzo di un file su un server:
xhttp.open("GET", "ajax_test.asp", true);Il file può essere qualsiasi tipo di file, come txt e xml, o file di script del server come asp e php (che può eseguire azioni sul server prima di inviare la risposta indietro).
Asincrono - True o False ?
AJAX sta per Asynchronous JavaScript e XML, e per l'oggetto XMLHttpRequest a comportarsi come AJAX, la async parametro del open() il metodo deve essere impostata su true:
xhttp.open("GET", "ajax_test.asp", true);L'invio di richieste asincrone è un enorme miglioramento per gli sviluppatori web. Molte delle attività eseguite sul server sono molto in termini di tempo. Prima di AJAX, questa operazione potrebbe causare l'applicazione per appendere o fermare.
Con AJAX, JavaScript non deve aspettare la risposta del server, ma invece ci riesce:
- eseguire altri script in attesa di risposta del server
- gestire la risposta quando la risposta pronta
Async=true
Quando si utilizza class = "notranslate" asincrona = true, specificare una funzione da eseguire quando la risposta è pronta in caso onreadystatechange:
Esempio
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send(); Prova tu stesso " Potrete saperne di più su onreadystatechange in un capitolo successivo.
Async=false
Per utilizzare async=false , modificare il terzo parametro in open() metodo su false:
xhttp.open("GET", "ajax_info.txt", false);Utilizzando async=false non è consigliato, ma per un paio di piccole richieste questo può essere ok.
Ricorda che il codice JavaScript non continuerà ad eseguire, fino a quando la risposta del server è pronto. Se il server è occupato o lento, l'applicazione si blocca o si ferma.
Nota: Quando si utilizza async=false , non scrivere una funzione onreadystatechange - basta inserire il codice dopo il send() dichiarazione:
Esempio
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; Prova tu stesso "