AJAX发送请求

Dopo aver creato l'oggetto XMLHttpRequest (si veda il capitolo precedente), dobbiamo inviare la richiesta al server.

Inviare la richiesta al server

Per inviare la richiesta al server, utilizziamo due metodi dell'oggetto XMLHttpRequest:

• open()

• send()

　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();

Il metodo open() accetta tre parametri:

• Il primo parametro è il metodo di richiesta HTTP - GET, POST

• Il secondo parametro è l'URL a cui invierai la richiesta

• Il terzo parametro opzionale imposta se la richiesta è asincrona (predefinito true)

Il metodo send() accetta un parametro opzionale:

• Per le richieste GET, non trasmettere alcun valore

• Per le richieste POST, trasmetterenome=valorPer

Richiesta HTTP: GET e POST?

InGETNei metodi, il browser aggiunge il contenuto del modulo ( coppie nome/valore) alla fine della URL.

GET viene utilizzato solitamente per moduli semplici che non prevedono la sicurezza. GET offre molti vantaggi per moduli semplici.

• La richiesta GET può essere archiviata nella cache

• La richiesta GET viene conservata nella cronologia del browser

• La richiesta GET può aggiungere segnalibri

• Non utilizzare mai la richiesta GET per gestire dati sensibili

• La richiesta GET ha un limite di lunghezza (solo 2048 caratteri)

InPOSTNei metodi, il contenuto non viene visualizzato nella URL.

Se i dati del modulo contengono informazioni sensibili o personali, utilizzare sempre POST.

• La richiesta POST non viene mai archiviata nella cache

• La richiesta POST non viene conservata nella cronologia del browser

• La richiesta POST non può aggiungere segnalibri

• Utilizzare sempre la richiesta POST per gestire dati sensibili

• La richiesta POST non ha limiti di lunghezza dei dati

Richiesta GET

Esempio seguente mostra come inviare una semplice richiesta Ajax GET utilizzando JavaScript:

httpRequest.open("GET", "ajax_get.php", true);
httpRequest.send();

Nel esempio sopra, potresti ottenere risultati dalla cache. Per evitare questo, aggiungi un numero casuale alla URL:

httpRequest.open("GET", "ajax_get.php?r=" + Math.random(), true);
httpRequest.send();

Se si desidera inviare informazioni utilizzando il metodo GET, aggiungere le informazioni alla URL:

httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);
httpRequest.send();

Richiesta POST

Esempio seguente mostra come inviare una semplice richiesta Ajax POST utilizzando JavaScript:

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.send();

Se si desidera inviare informazioni utilizzando il metodo POST, utilizzare la impostazione dell'intestazione HTTP, setRequestHeader() e specificare i dati da inviare nel metodo send():

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("fname=Seagull&lname=Anna");

该setRequestHeader()方法接受两个参数：

• 第一个参数指定标题名称

• 第二个参数指定标题值

URL-服务器上的文件

该方法的第二个参数（url）open()是服务器上文件的地址。

　　httpRequest.open("GET", "ajax_get.php", true);

AJAX可以发送和接收各种格式的信息，包括JSON，XML，HTML，PHP，ASP，文本等。

onreadystatechange属性

该XMLHttpRequest对象使您可以定义要执行的函数以处理响应。

响应函数onreadystatechange在XMLHttpRequest对象的属性中定义。

httpRequest.onreadystatechange = function() {
　　if (this.readyState === 4 && this.status === 200) {
　document.getElementById("output").innerHTML = this.responseText;
　　}
};

您将在本教程的后面部分了解有关onreadystatechange属性的更多信息。

同步请求

方法的第三个参数open()指定请求是异步还是同步。

要发送同步请求，请将open()方法中的第三个参数更改为false。

如果使用了同步请求，则无需指定响应函数：

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "ajax_intro.txt", false);
httpRequest.send();
document.getElementById("output").innerHTML = httpRequest.responseText;

不建议使用同步请求，因为：

• JavaScript将停止执行，直到服务器响应准备就绪

• 如果服务器忙碌或缓慢，则应用程序将挂起或停止

• 带来糟糕的用户体验