Quick Tip: Cross Domain AJAX Request with YQL and jQuery
Tutorial Details
- Technologies: YQL, jQuery, Regular Expressions
- Difficulty: Moderate
- Length: 8 Minute Video
For security reasons, we cannot make cross-domain AJAX requests with jQuery. For example, I can’t call the load() method, and pass in ‘cnn.com’. As we’d be loading in scripts and such, as well as our desired content, this would present a significant security risk. Nonetheless, there may be times when this is specifically what you require. Thanks to YQL, we can allow for this functionality rather easily!
The Script
// Accepts a url and a callback function to run.
function requestCrossDomain( site, callback ) {
// If no url was passed, exit.
if ( !site ) {
alert('No site was passed.');
return false;
}
// Take the provided url, and add it to a YQL query. Make sure you encode it!
var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=cbFunc';
// Request that YSQL string, and run a callback function.
// Pass a defined function to prevent cache-busting.
$.getJSON( yql, cbFunc );
function cbFunc(data) {
// If we have something to work with...
if ( data.results[0] ) {
// Strip out all script tags, for security reasons.
// BE VERY CAREFUL. This helps, but we should do more.
data = data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
// If the user passed a callback, and it
// is a function, call it, and send through the data var.
if ( typeof callback === 'function') {
callback(data);
}
}
// Else, Maybe we requested a site that doesn't exist, and nothing returned.
else throw new Error('Nothing returned from getJSON.');
}
}
Call the Function
requestCrossDomain('http://www.cnn.com', function(results) {
$('#container').html(results);
});
Stripping Out the Script Tags
I had to progress rather quickly in the video, so perhaps the regular expression that strips out the <script> tags require further detail.
.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
When we load our desired page, it’s also going to load scripts! You must be very careful when making cross domain request. It definitely helps to strip out the <script> tags, but you should do more in an actual project.
Let’s take the regular expression step by step.
<script[^>]*>
Find all open script tags; however, they could come in many forms: <script type=”text/javascript” src=”bla.js”></script> , or <script type=”text/javascript”>lots of code here…</script> . For this reason, we add a character class ( [^>]* ), which mean, “Find zero or more of anything that IS NOT a closing bracket. This will take care of the attributes and values.
[\s\S]*?
Next, we want to strip out all code, as well as any spacing. \s refers to a space. \S refers to anything that IS NOT a space. Once again, we add a * after the character class to designate that we want zero or more occurrences.
<\/script>
Finally, find the closing script tags.
Further Reading
This is only meant to provide a glimpse of how we can achieve this functionality. Only so much can be covered in a five minute video. Feel free to discuss in the comments, and you’re always encouraged to fork the source code to improve upon it!
- john
- http://priostudio.co.cc Sisir
- http://newarts.at Drazen Mokic
- Anto
- http://newarts.at Drazen Mokic
- http://newarts.at Drazen Mokic
- Jeremy
- http://newarts.at Drazen Mokic
- Jeremy
- http://newarts.at Drazen Mokic
- http://twitter.com/DanielMorosan Daniel
- http://www.geetpurwar.com Geet
- http://Yqlblog.net Jonathan
- http://johndturner.com John David Turner
- CK
- http://www.quizzpot.com Crysfel
- http://www.matthoneywill.net Matt
- http://www.jordanwalker.net Jordan Walker
- http://nooshu.com Matt
- Lou
- Joy
- Richard
- http://www.greenanysite.com/ Tal Ater
- http://www.yycevents.com Chad
- Khaled
- http://adrusi.com adrian
- alex
- http://andrewtrivette.com Andrew
- http://www.warpdesign.fr leo
- http://benjaminroesner.de benroe
- George
- http://faressoft.org faressoft
- Matt
- 8w_gremlin
- michael
- http://priostudio.co.cc Sisir
- http://www.twitter.com/harkinlarjar Darmie
- http://www.engiguide ajay
- http://abdullah.webdesignerart.com Abdullah
- joe
- Amit
- http://www.coderrific.com Mike
- Bahadir
- Bahadır
- Luke
- Yogish
- Gurmeet Singh
- http://www.facebook.com/chris.h.cheng Chris Cheng
- http://www.facebook.com/avitalbe Avital Ben Lulu
