AJAX - El server elabora la risposta

L'oggetto XMLHttpRequest ti permette di definire le funzioni da eseguire per gestire la risposta.

La funzione di risposta onreadystatechange è definita negli attributi dell'oggetto XMLHttpRequest.

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

L'attributo onreadystatechangedefinisce la funzione da eseguire quando il readyState cambia.

L'attributo readyState保存na XMLHttpRequestl'oggetto stato.

L'attributo status保存na XMLHttpRequestl'oggetto stato del codice.

L'attributo statusText保存 il testo di stato dell'oggetto XMLHttpRequest.

attributi di risposta del server

La seguente tabella elenca gli attributi di risposta del server:

attributo responseText

L'attributo responseText restituisce la risposta del server come stringa JavaScript.

document.getElementById("output").innerHTML = httpRequest.responseText;

attributo responseXML

L'attributo responseXML restituisce la risposta del server come oggetto XMLDocument.

Puoi utilizzare le funzioni DOM JavaScript per esplorare l'oggetto XMLDocument.

Ecco un esempio di file di richiesta:ajax_test.xmle analizza la risposta:

xmlDoc = httpRequest.responseXML;
tag = xmlDoc.getElementsByTagName("author");
for (let i = 0; i < tag.length; i++) {
　　　　txt += tag[i].childNodes[0].nodeValue + "<br>";
}
httpRequest.open("GET", "ajax_test.xml", true);
httpRequest.send();

metodi di risposta del server

La seguente tabella elenca i metodi di risposta del server:

metodo getAllResponseHeaders()

Il metodo getAllResponseHeaders() restituisce tutte le informazioni di intestazione della risposta del server.

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

Il metodo getResponseHeader()

Il metodo getResponseHeader() restituisce informazioni specifiche di intestazione della risposta del server.

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
　　if (this.readyState === 4 && this.status === 200) {
　　　　　document.getElementById("output").innerHTML = this.getResponseHeader("Server");
　　}
};

Task AJAX multipli

Se ci sono più task AJAX nel sito, è necessario creare due funzioni:

• Una funzione per eseguire l'oggetto XMLHttpRequest

• Ogni task AJAX ha una funzione di callback

La chiamata della funzione deve includere l'URL e la funzione da chiamare quando la risposta è pronta.

fetchDoc("url-1", myFunc1);
fetchDoc("url-2", myFunc2);
fetchDoc("url-3", myFunc3);
funzione fetchDoc(url, callback) {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState === 4 && this.status === 200) {
　　　　　　　　callback(this);
　　　　}
　　};
　　httpRequest.open("GET", url, true);
　　httpRequest.send();
}
funzione myFunc1(httpRequest) {
　　//azione qui
}
funzione myFunc2(httpRequest) {
　　//azione qui
}
funzione myFunc3(httpRequest) {
　　//azione qui
}

回调函数是将作为参数传递给另一个函数的函数。