Suggerimento rapido richiesta AJAX di dominio incrociato con YQL e jQuery

Per motivi di sicurezza, non possiamo effettuare richieste AJAX tra domini con jQuery. Ad esempio, non posso chiamare il metodo load () e passare in "cnn.com". Siccome verremmo caricando in script e simili, così come i nostri contenuti desiderati, ciò rappresenterebbe un significativo rischio per la sicurezza. Tuttavia, ci possono essere momenti in cui questo è specificamente ciò che si richiede. Grazie a YQL, possiamo consentire questa funzionalità piuttosto facilmente!


Iscriviti alla nostra pagina YouTube per guardare tutti i tutorial video!

Il copione

 // Accetta un URL e una funzione di callback da eseguire. function requestCrossDomain (site, callback) // Se non è stato passato nessun url, esci. se (! site) alert ('Nessun sito è stato passato.'); restituisce falso;  // Prendi l'url fornito e aggiungilo a una query YQL. Assicurati di averlo codificato! var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent ('seleziona * da html dove url = "' + sito + '"') + '& format = xml & callback = cbFunc '; // Richiedere una stringa YSQL ed eseguire una funzione di callback. // Passa una funzione definita per prevenire il busting della cache. $ .getJSON (yql, cbFunc); function cbFunc (data) // Se abbiamo qualcosa su cui lavorare ... if (data.results [0]) // Elimina tutti i tag script, per ragioni di sicurezza. // ESSERE MOLTO ATTENTI. Questo aiuta, ma dovremmo fare di più. data = data.results [0] .replace (/] *> [\ S \ S] *?<\/script>/ gi, "); // Se l'utente ha passato un callback, e // è una funzione, chiamala e invia attraverso i dati var. if (typeof callback === 'function') callback (data);  // Altrimenti, Forse abbiamo richiesto un sito che non esiste e non è stato restituito nulla altrimenti lanciare un nuovo errore ('Niente restituito da getJSON.');

Chiama la funzione

 requestCrossDomain ('http://www.cnn.com', function (results) $ ('# container'). html (risultati););

Strippando i tag script

Dovevo progredire piuttosto rapidamente nel video, quindi forse l'espressione regolare che strappa il , o . Per questo motivo, aggiungiamo una classe di caratteri ([^>] *), che significa "Trova zero o più di tutto ciò che NON È una parentesi di chiusura. Questo si prenderà cura degli attributi e dei valori.

 [\ S \ S] *?

Quindi, vogliamo rimuovere tutto il codice e ogni spaziatura. \S si riferisce a uno spazio. \S si riferisce a tutto ciò che NON è uno spazio. Ancora una volta, aggiungiamo a * dopo la classe di caratteri per designare che vogliamo zero o più occorrenze.

 <\/script>

Infine, trova i tag di script di chiusura.


Ulteriori letture

  • Un'API per il Web: Learning YQL

Questo vuole solo dare un'idea di come possiamo ottenere questa funzionalità. Solo così tanto può essere coperto in un video di cinque minuti. Sentiti libero di discutere nei commenti e sei sempre incoraggiato a inserire il codice sorgente per migliorarlo!