Sommario delle tecnologie Ajax e Comet

Ajax è una tecnologia, una tecnologia che consente di richiedere dati aggiuntivi al server senza scaricare la pagina, migliorando l'esperienza utente del sito web. Il cuore della tecnologia Ajax è l'oggetto XMLHttpRequest (XHR). Questo articolo parte dall'XHR, per comprendere le caratteristiche della tecnologia Ajax, e poi una breve comprensione e sintesi di tecnologie come il cross-domain e Comet.

Utilizzo di base di XMLHttpRequest

L'oggetto XHR ha due metodi comuni: open e send. Il metodo open viene utilizzato per avviare una richiesta HTTP, ma non invia veramente la richiesta HTTP. Il metodo open accetta 3 parametri, che rappresentano il metodo HTTP della richiesta, l'URL della richiesta e se la richiesta è asincrona. Il secondo metodo dell'oggetto XHR è send, utilizzato per inviare la richiesta avviata da open. Il metodo send accetta un parametro che rappresenta i dati del corpo della richiesta HTTP. Se si invia una richiesta GET, che non ha dati di corpo allegati, è sufficiente passare null. Se si invia una richiesta POST, è necessario passare i dati da POST. Ecco un esempio semplice: inviare una richiesta GET a /api/data in modo asincrono, ossia la richiesta non blocca l'esecuzione di altri codici JavaScript nella pagina.

var xhr = new XMLHttpRequest();
xhr.open("get", "/api/data", true)
xhr.send(null)

I dati di risposta ricevuti vengono automaticamente riempiti negli attributi dell'oggetto XHR, ci sono principalmente 4 attributi come segue:

* responseText: testo del corpo della risposta
* responseXML: se il tipo di contenuto della risposta è "text/xml" o "application/xml", questa proprietà conterrà il documento DOM XML dei dati di risposta
* status: codice di stato HTTP della risposta, di solito si può considerare HTTP stato 200 come un segno di successo
* statusText: spiegazione dello stato HTTP

L'oggetto XHR ha un attributo readyState che registra i 5 stati che l'oggetto potrebbe attraversare dalla creazione alla ricezione dei dati di risposta, i valori possibili di readyState sono i seguenti:

0: Non chiamato il metodo open() per inizializzare la richiesta

1: Chiamato il metodo open() ma non chiamato il metodo send()

2: Chiamato il metodo send() ma non ancora ricevuta la risposta

3: Ricevuti dati di risposta parziali, ci sono ancora dati non ricevuti

4: Ricevuti tutti i dati di risposta, ovvero la risposta è terminata e i dati sono completi

Quando il readyState cambia da un valore a un altro, viene generato l'evento readystatechange. Quando questo evento viene generato, è necessario controllare il valore di readyState nell'handler dell'evento per verificare se è uguale a 4. Quando il valore è 4, è possibile eseguire ulteriori elaborazioni sui dati di risposta. È necessario specificare l'handler dell'evento readystatechange prima di chiamare il metodo open() per garantire la compatibilità across browser. Di seguito è riportato un esempio semplice.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
 }
}
xhr.open("get", "/api/data", true)
xhr.send(null)

L'oggetto XHR fornisce il metodo setRequestHeader() per impostare informazioni di intestazione HTTP personalizzate per la richiesta, che accetta due parametri: il campo da impostare e il valore di tale campo. È necessario chiamare setRequestHeader() dopo aver chiamato il metodo open() per avviare una richiesta e prima di inviare la richiesta con send(). Dopo aver ricevuto la risposta, è possibile ottenere le informazioni di intestazione HTTP della risposta tramite il metodo getResponseHeader(), che accetta un parametro: il nome del campo da ottenere. Invece, tramite getAllResponseHeaders() è possibile ottenere una lunga stringa costituita da tutte le intestazioni di risposta. Di seguito è riportato un esempio semplice.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
  console.log(xhr.getResponseHeader('SomeKey'))
  console.log(xhr.getAllResponseHeaders())
 }
}
xhr.open("get", "/api/data", true)
xhr.setRequestHeader("SomeKey", "SomeValue")
xhr.send(null)

FormData

XMLHttpRequest 2 livello definisce il tipo FormData per serializzare il modulo, creare dati nel formato del modulo e facilitare il trasporto XHR. FormData fornisce il metodo append() per aggiungere direttamente dati, che accetta due parametri: chiave e valore. Il costruttore di FormData può essere chiamato senza parametri o direttamente con un elemento di modulo. Dopo aver trasmesso l'elemento di modulo, utilizza i dati di questo modulo per pre-inserire coppie chiave-valore nell'oggetto FormData. Di seguito è riportato un esempio semplice.

var form = document.getElementById('myForm');
var data = new FormData(form);
data.append('someKey', 'someValue');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('post', '/api/upload', true)
xhr.send(data)

Condivisione delle risorse cross-domain

L'implementazione di comunicazioni Ajax attraverso XHR incontra una limitazione, ovvero la politica di sicurezza cross-domain. La politica di sicurezza cross-domain limita 'stesso dominio, stesso port, stesso protocollo', quando XHR cerca di accedere a risorse al di fuori di questi limiti, viene sollevato un errore di sicurezza. CORS (Cross-Origin Resource Sharing), condivisione delle risorse cross-domain, l'idea è comunicare tra browser e server utilizzando intestazioni HTTP personalizzate per determinare il successo o il fallimento della richiesta o della risposta, e richiede che sia il browser che il server supportino per realizzare un accesso normale. Al momento, la maggior parte dei browser ha già supportato CORS, quindi la scrittura del codice è quasi uguale all'accesso alle risorse dello stesso dominio, solo che l'URL deve essere rappresentato come percorso assoluto. Pertanto, la chiave per implementare il cross-domain è ancora il server, e come implementarlo non sarà discusso in questo articolo. Ecco un esempio semplice di JavaScript front-end.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('get', 'http://www.otherserver.com/api/data', true)
xhr.send(null)

JSONP

JSONP (JSON con padding) è un metodo per implementare l'accesso ai risorse cross-domain utilizzando JSON. JSONP è composto da due parti: la funzione di callback e i dati JSON. Come è stato detto prima, le richieste XHR incontrano limitazioni di sicurezza cross-domain, ma il tag script dell'HTML non ha questa limitazione; possiamo riferimento file js in domini diversi attraverso il tag script. JSONP sfrutta questa lacuna, creando dinamicamente un elemento script, poi puntando il src a un URL di un altro dominio per caricare risorse di un altro dominio, e poi elaborando i dati caricati attraverso la funzione di callback. Ecco un esempio semplice.

function handler(res) {
 console.log(res)
}
var script = document.createElement('script')
script.src = 'http://www.otherserver.com/api/data/?callback=handler'
document.body.insertBefore(script, document.body.firstChild)

Il codice sopra specifica che il src dell'elemento script creato dinamicamente è /api/data sotto un altro dominio, e specifica la funzione di callback come handler. Dopo aver inserito il script nel DOM, carica i dati corrispondenti all'URL, poi decodifica i dati JSON ricevuti in un oggetto e chiama la funzione handler per elaborarli.

JSONP è un metodo semplice per implementare l'accesso a domini incrociati, ma esiste anche alcuni problemi di sicurezza, come richieste di URL di altri domini che ti rispondono con un pezzo di codice malizioso. Un altro problema di JSONP è che il tag script riferisce js, json poiché supportato da js può anche essere riferito, quindi quando si richiede un URL di altri domini, è necessario confermare che risponde in formato json, non XML.

Comet

Ajax è una tecnologia che richiede dati al server da una pagina web, mentre Comet è il contrario, è una tecnologia che invia dati dal server alla pagina web, adatta per applicazioni che richiedono alta realtività. Ci sono due modi per implementare Comet: il polling lungo e lo streaming. Prima di parlare del polling lungo, parliamo del polling breve, il cui ragionamento è molto semplice, ossia che il client utilizza un timer, che invia richieste Ajax al server ad intervalli di tempo molto piccoli. Il polling lungo funziona allo stesso modo, ossia il client invia continuamente richieste al server, ma a differenza del polling breve, il client non deve inviare richieste ogni intervallo di tempo, ma dopo aver inviato una richiesta al server, il connessione HTTP tra client e server rimane aperta fino a quando il server ha dati aggiornati, che vengono risposti attraverso questa connessione al client, dopodiché la connessione HTTP viene chiusa. Dopo la chiusura, il browser invia una nuova connessione per continuare il processo precedenti. rispetto al polling breve, il polling lungo invia meno volte le connessioni HTTP, ma anche se la connessione HTTP rimane aperta per molto tempo, occupa risorse del server.

Un secondo modo per implementare Comet è basato sullo streaming HTTP, il client inizializza una connessione HTTP con il server, mantenendo questa connessione aperta per tutto il tempo. Il client periodicamente utilizza questa connessione per ottenere dati e verificare aggiornamenti dal server.

SSE

SSE (Server-Send Events), eventi inviati dal server, è una API del browser per implementare l'interazione Comet, che supporta sia il polling che lo streaming HTTP. L'API SSE viene utilizzata per creare una connessione unidirezionale con il server, attraverso cui il server può inviare una quantità illimitata di dati al client. Il tipo MIME della risposta del server è text/event-stream. Di seguito è riportato un esempio semplice dell'API JavaScript per SSE.

var source = new EventSource("/api/events")
source.onmessage = function(event) {
 console.log(event.data)
}

Come mostrato nel codice sopra, per prenotare un flusso di eventi sul server e ottenere i dati inviati dal server, è necessario creare un oggetto EventSource, quindi gestire l'evento message quando viene attivato. I dati inviati dal server sono memorizzati in forma di stringa in event.data. L'oggetto EventSource mantiene una connessione attiva con il server, se la connessione viene interrotta, viene ristabilita automaticamente. Per interrompere veramente la connessione, è possibile chiamare il metodo close(). L'evento message di EventSource viene attivato quando si riceve un nuovo evento dal server, oltre all'evento message, ci sono altri due eventi: open e error, l'evento open viene attivato quando si stabilisce la connessione, mentre l'evento error viene attivato quando non è possibile stabilire la connessione.

Web Sockets

Web Sockets è un canale di comunicazione bidirezionale a doppio senso con il server. Web Sockets non utilizza il protocollo HTTP, mentre Ajax e Comet menzionati in precedenza utilizzano il protocollo HTTP. Per ragioni di spazio, questo articolo non discute Web Sockets.

Conclusione

Ajax realizza richieste di dati al server senza caricare la pagina, migliorando l'esperienza utente del sito web. L'implementazione di tecnologie Ajax XHR incontrerà limitazioni delle strategie di sicurezza a livello di dominio, per risolvere problemi di dominio attraverso CORS è necessario la collaborazione sia dei browser che dei server. JSONP è una "piccola tecnica" per implementare l'accesso a dominio, ma esistono anche alcuni problemi. Comet espande Ajax, permettendo al server di inviare dati in tempo reale al browser, ma dal punto di vista dell'implementazione, sia il polling che lo streaming HTTP sono iniziate le richieste di connessione dal browser al server. La comunicazione bidirezionale a doppio senso dei Web Sockets ha anche le sue caratteristiche, si può continuare a conoscere in futuro.

Questo è tutto il contenuto dell'articolo, spero che il contenuto di questo articolo possa aiutare un po' la tua apprendimento o lavoro, e spero anche di ricevere più supporto per il manuale URL!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il diritto d'autore spetta ai rispettivi proprietari, 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 violazione del copyright, è possibile inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.