English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Concetti di cross-domain JS riassunti:
Prima che il termine "cross-domain" compaia frequentemente, l'abbiamo già utilizzato frequentemente. Ad esempio, l'img src di A sito punta a un indirizzo di immagine di B sito, senza dubbio, questo può essere visualizzato normalmente (a parte la tecnologia di protezione dai link di backup); allo stesso modo, è possibile far puntare l'attributo src del tag script a risorse script di altri siti (in alcuni casi persino incoraggiare a farlo, in modo da sfruttare l'advantage di carico di altri siti, ridurre la quantità di condivisione congiunta del proprio server). Tuttavia, se si utilizza js per richiedere attivamente dati da altri siti, come il modo Ajax, si incontrerà il problema del cross-domain, che è ciò che chiamiamo comunemente cross-domain. Per motivi di sicurezza, l'accesso cross-domain è proibito di default da parte di tutti i browser. Questo coinvolge il concetto di strategia di origine: la strategia di origine blocca che uno script caricato da un dominio acceda o manipoli le proprietà del documento di un altro dominio. Questo significa che il dominio dell'URL richiesto deve essere lo stesso del dominio della pagina web corrente. Questo significa che il browser isola il contenuto proveniente da sorgenti diverse, per prevenire le loro operazioni.
Il problema di sicurezza specifico del cross-domain non è stato approfondito, ognuno può completare la sua immaginazione.
Tuttavia, in molti casi, specialmente oggi con lo sviluppo continuo di Internet, dobbiamo richiedere interfacce frontend da partner o fornitori di dati diversi, prima che il modo di accesso cross-domain venga standardizzato (la domanda di accesso cross-domain client sembra aver attirato l'attenzione del w3c, si dice che lo standard WebSocket di html5 supporti lo scambio di dati cross-domain, dovrebbe anche essere una soluzione di scambio di dati cross-domain opzionale in futuro), quale metodo può superare i suoi limiti? Ci sono molte risposte (sebbene tutte siano fastidiose), la più comune è quella chiamata JSONP cross-domain.
Principio di JSONP
Il principio fondamentale di JSONP è: aggiungere dinamicamente un tag <script>, mentre l'attributo src del tag script non ha limiti di cross-domain. In questo senso, questo modo di cross-domain non ha nulla a che vedere con il protocollo XmlHttpRequest di Ajax.
JSONP significa JSON con Padding. A causa dei limiti della strategia di origine, XmlHttpRequest permette solo di richiedere risorse della sorgente corrente (dominio, protocollo, porta). Se si desidera effettuare una richiesta di cross-domain, possiamo utilizzare il tag script dell'html per effettuare una richiesta di cross-domain e restituire il codice script da eseguire nella risposta. Questo modo di comunicazione di cross-domain è chiamato JSONP.
Ecco un esempio semplice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Jsonp</title>
<script type="text/javascript">
function jsonpCallback(result)
{
alert(result.msg);
}
</script>
<script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html>
Descrizione del principio e del processo: prima di tutto, viene registrato un callback sul client, quindi il nome del callback viene trasmesso al server (qui il client e il server concordano che il valore della query stringa con la chiave jsonp). A questo punto, il server genera i dati json. Poi, in modo conforme alla sintassi di javascript, viene generata una funzione, il nome della funzione è il parametro trasmesso jsonp. Infine, i dati json vengono messi direttamente come argomento nella funzione, così viene generato un documento di sintassi js, restituito al client. Il browser del client analizza il tag script e esegue il documento javascript restituito, eseguendo così la funzione callback predefinita.
Da questa breve descrizione si può dedurre: oltre a restituire frammenti di codice js nella forma di funzione, il server può naturalmente restituire tutti i frammenti eseguibili js che soddisfano lo standard.
I difetti di JSONP sono: supporta solo richieste GET e non altre tipologie di richieste HTTP come POST; supporta solo richieste HTTP incrociate in questo scenario, non può risolvere il problema di come le pagine di due domini diversi possono chiamare JavaScript tra di loro. (Ancora da continuare)
Jsonp di jQuery
Come precedentemente descritto, jsonp non è una richiesta ajax, ma jQuery fornisce un modo di effettuare richieste incrociate che è conforme a jQuery.ajax:
$.ajax({
url: 'http://crossdomain.com/jsonServerResponse',
type: 'GET',
dataType: 'jsonp',
jsonp: "callback",
jsonpCallback: 'functionName',
success: function (data, textStatus, jqXHR) { }
//……
});
Come mostrato sopra, impostare dataType a jsonp indica che questa è una richiesta cross-domain, jsonp è la chiave di query di nome della funzione predefinita del server, mentre jsonpCallback è il nome della funzione js; se jsonpCallback non è impostato, jQuery genererà automaticamente un nome di funzione casuale (carica una funzione globale nel oggetto window, esegue la funzione quando il codice viene inserito e poi viene rimossa), si può inferire che la funzione generata automaticamente chiamerà la funzione success menzionata sopra. (Quando si assegna manualmente jsonpCallback, non si sa se la funzione success verrà chiamata o se jQuery cercherà la funzione predefinita, e se non la trova, emette un errore? Il blogger è pigro, lo proverò più tardi.) Naturalmente, jQuery ci fornisce una versione semplificata, $.getJSON, che non verrà trattata qui.
Occorre notare che il parametro jqXHR nella funzione success, in una richiesta AJAX, è un oggetto jqXHR autentico, ma può anche essere considerato come un oggetto XMLHTTPRequest (ereditato o encapsulato), ma in una richiesta JSONP non è così, quasi non ci fornisce le informazioni più utili come quelle di XMLHTTPRequest: manca l'informazione di stato della richiesta di XMLHTTPRequest, quindi non può innescare la maggior parte delle funzioni di callback, come error, complete ecc. (jQuery 1.9.0), ma può essere indotto dalla funzione di callback success che dovrebbe essere scatenata dall'evento load del tag script, il che è completamente diverso dal meccanismo di stato su cui si basa l'AJAX. Dopo il test, ilzepto derivato da jQuery (v1.1.3), quando si verifica un errore nella richiesta JSONP, come il ritorno dell'errore 401 nella testa del documento js caricato, la funzione error viene eseguita, ma il parametro jqXHR della funzione non è un tipo jqXHR autentico, né può ottenere le informazioni di testa della risposta. In questo caso, ci viene solo comunicato che qualcosa è andato storto, ma non si conoscono le informazioni specifiche dell'errore. In scenari simili in cui la testa della risposta porta informazioni utili, il blogger non consiglia l'uso di JSONP, si può dire che un presupposto dell'uso di JSONP è: oltre alle eccezioni di rete e altre eccezioni non di business, tutte le eccezioni di business (in termini generali, tutte le eccezioni generate dal server durante il periodo di ricezione della richiesta e della risposta) devono essere restituite direttamente alla client in forma di risultato della richiesta, per facilitare l'analisi dei callback del client.
Grazie per la lettura, spero di essere stato utile, grazie per il supporto al nostro sito!
Dichiarazione: Il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non possiede il diritto di proprietà, non è stato elaborato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una 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 eliminerà immediatamente i contenuti sospetti di violazione del copyright.