Spiegazione dettagliata di XMLHttpRequest (2) Proprietà di risposta, dati binari, monitoraggio della progressione di upload e download

Analizzare e operare con l'attributo responseXML　

Se utilizzi XMLHttpRequest per ottenere il contenuto di un documento XML remoto, l'attributo responseXML sarà un oggetto DOM derivato dall'analisi del documento XML, il che lo rende difficile da operare e analizzare. Ci sono cinque metodi principali per analizzare documenti XML:
　1. Utilizzare XPath per localizzare una parte specifica del documento.
　2. Utilizzare JXON per trasformare XML in un albero oggetti JavaScript.
　3. Analizzare e serializzare manualmente XML in stringhe o oggetti.
　4. Utilizzare XMLSerializer per serializzare l'albero DOM in una stringa o in un file.
　5. Se conosci già il contenuto del documento XML, puoi utilizzare RegExp. Se durante la scansione con RegExp incontri problemi con i caratteri di newline, potresti voler eliminare tutti i caratteri di newline. Tuttavia, questo metodo è considerato un "ultimo ricorso", poiché anche la minima variazione nel codice XML potrebbe far fallire questo metodo.　

Analizzare e operare con l'attributo responseText che contiene un documento HTML　

Attenzione: Secondo la specifica W3C XMLHttpRequest, è possibile analizzare l'HTML attraverso l'attributo XMLHttpRequest.responseXML. Per ulteriori dettagli, si prega di leggere HTML in XMLHttpRequest .
　Se si utilizza XMLHttpRequest per ottenere una pagina HTML remota, tutti i tag HTML saranno conservati come stringhe nell'attributo responseText, il che rende difficile operare e analizzare questi tag. Ci sono principalmente tre modi per analizzare questi tag HTML:
　1. Usa l'attributo XMLHttpRequest.responseXML.
　2. Inietta il contenuto attraverso fragment.body.innerHTML in un documento frammento e percorri il frammento DOM.
　3. Se conosci già il contenuto del documento HTML, puoi usare RegExp. Se durante la scansione con RegExp ti influenzano i caratteri di newline, potresti voler eliminare tutti i caratteri di newline. Tuttavia, questo metodo è "un'ultima soluzione", perché se il codice HTML subisce anche solo lievi modifiche, questo metodo potrebbe fallire.　

Gestione dei dati binari　

Nonostante XMLHttpRequest venga generalmente utilizzato per inviare e ricevere dati di testo, può anche inviare e ricevere contenuti binari. Ci sono molti metodi testati che costringono XMLHttpRequest a inviare dati binari. Utilizzare il metodo .overrideMimeType() di XMLHttpRequest è una soluzione, anche se non è un metodo standard.

 var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
// recupera i dati non elaborati come stringa binaria
oReq.overrideMimeType("text/plain; charset=x-user-defined");
/* ... */ 

Nel livello 2 della specifica XMLHttpRequest, è stata aggiunta l'attributo responseType, rendendo più facile inviare e ricevere dati binari.

 var oReq = new XMLHttpRequest();
oReq.onload = function(e) {
 var arraybuffer = xhr.response; // not responseText
 /* ... */
}
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.send(); 

Usa array di tipo JavaScript per accettare dati binari　

Puoi modificare il tipo di dati di una risposta restituita dal server impostando l'attributo responseType di un oggetto XMLHttpRequest. I valori di attributo disponibili sono una stringa vuota (predefinito), "arraybuffer", "blob", "document", e "text". Il valore dell'attributo response dipende dal valore dell'attributo responseType, potrebbe essere un ArrayBuffer, Blob, Document, stringa o NULL (se la richiesta non è stata completata o fallita)
　L'esempio legge un file di immagine binario e crea un array di interi a 8 bit unsigned a partire dai byte nativi del file binario.

 var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
 var arrayBuffer = oReq.response; // Attenzione: non oReq.responseText
 if (arrayBuffer) {
  var byteArray = new Uint8Array(arrayBuffer);
  for (var i = 0; i < byteArray.byteLength; i++) {
   // Operare su ogni byte dell'array
  }
 }
};
oReq.send(null); 

Oltre al metodo sopra descritto, è possibile utilizzare l'API BlobBuilder per aggiungere direttamente dati arraybuffer a un oggetto Blob, poiché l'API è ancora in fase di prova, è necessario aggiungere un prefisso specifico:

 var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder || window.BlobBuilder;
var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
 var blobBuilder = new BlobBuilder();
 blobBuilder.append(oReq.response);
 var blob = blobBuilder.getBlob("image/png");
 // ...
};
oReq.send(); 

Accettare dati binari nei browser più vecchi
　Il metodo load_binary_resource() qui sotto può caricare dati binari da un URL specificato e restituire i dati al chiamante.

 function load_binary_resource(url) {
 var req = new XMLHttpRequest();
 req.open('GET', url, false);
 // Opzione charset binario per XHR da Marcus Granado 2006 [http://mgran.blogspot.com]
 req.overrideMimeType('text/plain; charset=x-user-defined');
 req.send(null);
 if (req.status != 200) return '';
 return req.responseText;
} 

L'operazione più straordinaria si trova alla riga cinque, dove viene sovrascritto il tipo MIME predefinito, costringendo il browser a trattare la risposta come file di testo puro, utilizzando un set di caratteri utente definito. Questo informa il browser di non analizzare i dati, ma di restituire direttamente i byte non elaborati.

 var filestream = load_binary_resource(url);
var abyte = filestream.charCodeAt(x) & 0xff; // Elimina il byte di alto livello (f7) 

Nell'esempio precedente, si ottiene il byte in posizione x dei dati binari ricevuti. La gamma di offset validi è 0 a filestream.length-1.
　Per ulteriori dettagli, consulta 'Scarica file utilizzando XMLHttpRequest' e visualizza i file scaricati.

　Invio di dati binari

　Il metodo send dell'oggetto XMLHttpRequest è stato migliorato, puoi inviare dati binari semplicemente passando un oggetto ArrayBuffer, Blob o File.
　Esempio di creazione di un file di testo e invio del file al server utilizzando il metodo POST. Puoi anche utilizzare altri tipi di dati binari oltre al file di testo.

 var oReq = new XMLHttpRequest();
oReq.open("POST", url, true);
oReq.onload = function (oEvent) {
 // Dopo aver completato l'upload.
};
var bb = new BlobBuilder(); // richiede un prefisso appropriato: window.MozBlobBuilder o window.WebKitBlobBuilder
bb.append('abc123');
oReq.send(bb.getBlob('text/plain')); 

Inviare array di tipo come dati binari
　Puoi inviare array di tipo JavaScript come dati binari.

 var myArray = new ArrayBuffer(512);
var longInt8View = new Uint8Array(myArray);
for (var i=0; i< longInt8View.length; i++) {
 longInt8View[i] = i % 255;
}
var xhr = new XMLHttpRequest;
xhr.open("POST", url, false);
xhr.send(myArray); 

Nell'esempio precedente è stato creato un array di interi a 8 bit di 512 byte e inviato, ovviamente, puoi inviare dati binari arbitrari

　Monitoraggio del progresso
　Il monitoraggio degli eventi progress di DOM per le trasmissioni XMLHttpRequest segue le specifiche degli eventi di progresso Web API: questi eventi implementano l'interfaccia ProgressEvent.

 var req = new XMLHttpRequest();
// ascoltatore di upload
req.addEventListener("progress", updateProgress, false);
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);
req.open(...);
...
// progresso durante il trasferimento dal server al client (download)
function updateProgress(evt) {
 if (evt.lengthComputable) {
  var percentComplete = evt.loaded / evt.total;
  ...
 }
  // Impossibile calcolare le informazioni di progresso poiché la dimensione totale è sconosciuta
 }
} 

Attenzione: devi aggiungere l'ascoltatore degli eventi prima di chiamare open(). Altrimenti l'evento progress non verrà attivato.
　Nell'esempio precedente, l'evento progress è stato specificato per essere gestito dalla funzione updateProgress() e riceve il numero totale di byte total e il numero di byte già trasmessi loaded, total è la lunghezza complessiva dei dati trasmessi dal header "Content-Length" (byte). Tuttavia, se il valore dell'attributo lengthComputable è false, il numero totale di byte è sconosciuto e il valore di total è 0, se è noto il lunghezza, l'attributo lengthComputable è true
　L'evento progress esiste sia per il download che per l'upload. Gli eventi relativi al download vengono scatenati sull'oggetto XMLHttpRequest, come nell'esempio sopra. Gli eventi relativi all'upload vengono scatenati sull'oggetto XMLHttpRequest.upload, come segue:

 var req = new XMLHttpRequest();
//Ascoltatore di scaricamento
req.upload.addEventListener("progress", updateProgress);
req.upload.addEventListener("load", transferComplete);
req.upload.addEventListener("error", transferFailed);
req.upload.addEventListener("abort", transferCanceled);
req.open(); 

Attenzione: l'evento progress non è valido quando si utilizza il protocollo file:
　L'evento loadend può rilevare tutte e tre le condizioni di fine del caricamento (abort, load, error):
　req.addEventListener("loadend", loadEnd, false);
　Occorre notare che non esiste un metodo per sapere esattamente quale condizione ha causato la terminazione dell'operazione ricevuta dall'evento loadend; tuttavia, è possibile utilizzare questo evento per gestire la fine di tutte le trasmissioni.　

L'oggetto XMLHttpRequest scatena eventi di tipo diverso a seconda delle fasi della richiesta, quindi non è necessario controllare l'attributo readyState.
　Quando si chiama send(), viene attivato un singolo evento loadstart. Durante il caricamento della risposta del server, l'oggetto XMLHttpRequest scatena un evento progress, solitamente ogni 50 millisecondi circa, quindi è possibile utilizzare questi eventi per fornire feedback all'utente sul progresso della richiesta.
　Se la richiesta viene completata rapidamente, potrebbe non generare mai l'evento progress. Quando l'evento è completato, viene generato l'evento load.
　Ci sono tre casi in cui una richiesta HTTP non può essere completata, corrispondenti a tre eventi. Se la richiesta scade, viene generato l'evento timeout. Se la richiesta viene interrotta, viene generato l'evento abort. Errori di rete come troppi redirect impediscono al completamento della richiesta, ma in questi casi viene generato l'evento error.
　Per qualsiasi richiesta specifica, il browser genererà solo uno degli eventi load, abort, timeout o error, oltre all'evento progress.

 if('onprogress' in (new XMLHttpRequest())){ // Verifica se il browser supporta l'evento progress
  var request = new XMLHttpRequest();
  request.onprogress = function (e) {
    if(e.lengthComputable){
      progress.innerHTML = Math.round(100 * e.loaded / e.total) + '%';
    }
  }
}

Questo è tutto il contenuto dell'articolo, spero che sia utile per la tua apprendimento, e ti prego di sostenere e gridare le lezioni.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta agli autori originali, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di copyright, invia un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.