Cross-domain AJAX calls
In these days all web2.0 apps make use of AJAX to save bandwidth, user time or to display data without refreshing the page. When you make an AJAX request the response could be plain text, Html or JSON, but if you want to make a cross-domain AJAX call you can’t because the browser security model dictates that XMLHttpRequest must have the same domain in order to communicate. This is where you need to use JSONP, this technique will make the AJAX call and after will inject the response in a script tag and will pass the data to a specified function.
Some JavaScript Libraries help you dealing with JSONP and in this article I will show you how to make cross-domain AJAX calls with MooTools and jQuery.
MooTools
If you want to make JSONP requests you need the plugin Request.JSONP from MooTools More.
var myRequest = new Request.JSONP({ url: 'http://twitter.com/statuses/user_timeline/twitter.json', onComplete: function(data) { //do something with data } }).send(); |
MooTools will automatically add callback parameter with function which will handle the response, but if the server requires another parameter for callback you can add the callBackKey option. If you need to pass data to request you need to add the values in data option.
var myRequest = new Request.JSONP({ url: 'http://domain.com/getData', callBackKey: 'callback', data: { someData: 'someValue' }, onComplete: function(data) { //do something with data } }).send(); |
jQuery
If you worked before with $.ajax there are no big difference between a request for HTML/JSON and JSONP calls, you need just to change dataType to jsonp and to specify the callback parameter in jsonp option.
$.ajax({ url: 'http://twitter.com/statuses/user_timeline/twitter.json&callback=?', dataType: 'jsonp', jsonp: 'callback', success: function(data){ //do something with data } }); |
You can read more about JSONP here.
Tags: ajax javascript jQuery jsonp mootools
Posted in: Javascrip/AJAX
September 23, 2009
| 
Andrei Igna | 
7 Comments
7 Responses
June 9, 2010 1
Nice article, nice blog, I have
bookmarked your blog, it is worthy doing this. Thank you.
June 15, 2010 2
Nice post…Thank you for sharing some good things!!
June 16, 2010 3
It’s a nice blog,I like it
July 29, 2010 4
Enjoyed reading
the report – most informative thanks
July 30, 2010 5
good share, great article, very usefull for us…thanks!
July 31, 2010 6
Good article Thank you so much
December 6, 2010 7
Keep up the great work!I like blog.ropardo.ro !