Latest web development tutorials

AJAX - inviando una richiesta al server

oggetto XMLHttpRequest per scambiare dati con il server.


Invia una richiesta al server

Per inviare una richiesta al server, usiamo open oggetto XMLHttpRequest () e send () metodo:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

modo descrizione
aperto(metodo, URL, asincrona)

Tipo specifica richiesta, URL e l'elaborazione se asincrona di richieste.

  • Metodo:il tipo di richiesta; GET o POST
  • URL:la posizione del file sul server
  • asincrona: true (asincrona)o false (sincrono)
inviare(stringa)

Invia una richiesta al server.

  • stringa:solo per le richieste POST


GET o POST?

Rispetto al POST, GET più semplice e veloce, e in molti casi può essere utilizzato.

Tuttavia, nei seguenti casi, si prega di utilizzare la richiesta POST:

  • Impossibile utilizzare i file della cache (file o aggiornare il database sul server)
  • Invia grandi quantità di dati (POST non limita la quantità di dati) al server
  • Quando si invia l'input dell'utente contiene caratteri sconosciuti, POST è più stabile e più affidabile di GET

GET richiesta

Una semplice richiesta GET:

Esempi

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

Prova »

Nell'esempio di cui sopra, è possibile ottenere i risultati memorizzati nella cache.

Per evitare questo, aggiungere un ID univoco all'URL:

Esempi

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

Prova »

Se si desidera inviare le informazioni attraverso il metodo GET, aggiungere le informazioni all'URL:

Esempi

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

Prova »


richiesta POST

Una semplice richiesta POST:

Esempi

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

Prova »

Se è necessario che i dati come un modulo POST HTML, usano setRequestHeader () per aggiungere intestazioni HTTP. Poi specificare che si desidera inviare i dati nel metodo send ():

Esempi

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

Prova »

方法 描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值


url - file sul server

argomentoURLopen () il metodo è l'indirizzo del file server:

xmlhttp.open("GET","ajax_test.html",true);

Il file può essere di qualsiasi tipo di file, ad esempio file di script del server, come asp e php (prima di restituire una risposta, per eseguire operazioni sul server) .txt e .xml o.


Asincrono - Vero o falso?

AJAX significa Asynchronous JavaScript and XML (Asynchronous JavaScript and XML).

Se si desidera utilizzare l'oggetto XMLHttpRequest AJAX, quindi, il parametro asincrona cui open () metodo deve essere impostata su true:

xmlhttp.open("GET","ajax_test.html",true);

Per gli sviluppatori web, inviare una richiesta asincrona è un enorme passo avanti. Nel server per eseguire molte attività sono molto in termini di tempo. Prima di AJAX si verificano, che può causare l'applicazione per appendere o fermare.

Attraverso AJAX, JavaScript senza attendere la risposta del server, ma:

  • Altri script eseguiti durante l'attesa per la risposta data dal server
  • Quando la risposta è pronto a rispondere ad elaborare

Async = true

Quando si utilizza async = true, si prega di disposizioni in risposta ad eventi in onreadystatechange disponibilità a svolgere una funzione:

Esempi

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Prova »

Si impara di più sul contenuto onreadystatechange in un capitolo successivo.


Async = false

Per utilizzare il async = false, impostare il metodo open () nel terzo parametro su false:

xmlhttp.open("GET","test1.txt",false);

Si consiglia di non utilizzare async = false, ma per qualche piccola richiesta, è anche possibile.

Ricordate, attenderà JavaScript fino a quando la risposta del server è pronto a procedere. Se il server è occupato o lento, o interrompere l'applicazione si blocca.

Nota: Quando si utilizza il async = false, per favore non scrivere onreadystatechange funzione - inserire il codice nel send () ritorna alla dichiarazione:

Esempi

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Prova »