O'Reilly

JSONP with jQuery, MooTools, and Dojo

By on  

JSONP MooTools jQuery

We all know that the big limitation of AJAX is that cross-domain requests aren't allowed.  We also know, however, that we skirt around that rule a bit by using JSONP.  JSONP is the process of SCRIPT tag injection, referencing a cross-domain URL and providing a callback function (on your page) that the provider will call so that you can handle the result.  Let's take a look at how JSONP is handled with jQuery, MooTools, and the Dojo Toolkit.  For our examples, we'll pull tweets from Twitter with the term "Arsenal" in them.

jQuery JSONP

jQuery uses the same method for JSONP as it does for regular JSON -- the jQuery.getJSON method:

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{
	q: "Arsenal"
},function(tweets) {
	// Handle response here
	console.info("Twitter returned: ",tweets);
});

As long as a callback parameter is provided to the getJSON method, jQuery will consider the request JSONP.

MooTools JSONP

MooTools requires the Request.JSONP Class available in MooTools More.  Armed with Request.JSONP, fetching JSON from another domain is a piece of cake:

new Request.JSONP({
	url: "http://search.twitter.com/search.json",
	data: {
		q: "Arsenal"
	},
	onComplete: function(tweets) {
		// Log the result to console for inspection
		console.info("Twitter returned: ",tweets);
	}
}).send();

Request.JSONP is a super compact class too!

Dojo JSONP

JSONP with the Dojo Toolkit requires the dojo.io.script resource and its get method:

// dojo.io.script is an external dependency, so it must be required
dojo.require("dojo.io.script");

// When the resource is ready
dojo.ready(function() {
	
	// Use the get method
	dojo.io.script.get({
		// The URL to get JSON from Twitter
		url: "http://search.twitter.com/search.json",
		// The callback paramater
		callbackParamName: "callback", // Twitter requires "callback"
		// The content to send
		content: {
			q: "Arsenal"
		},
		// The success callback
		load: function(tweetsJson) {  // Twitter sent us information!
			// Log the result to console for inspection
			console.info("Twitter returned: ",tweetsJson);
		}
	});
});

Retrieving JSON with Dojo is usually done with the dojo.xhrGet method, but JSONP request this special method.  The arguments for dojo.io.script.get are the same as dojo.xhrGet with the exception of the callback parameter.

JSONP is a hugely effective, reliable, and easy to implement.  JSONP strategies also allow developers to avoid cumbersome server-side proxy writing to retrieve data.  Each of the JavaScript libraries above have battle-tested methods for retrieving JSON data across domains -- it's up to you to implement them to suit your needs!

Track.js Error Reporting

Recent Features

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • 7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • Using Opacity to Show Focus with MooTools

    I'm a huge fan of using subtle effects like link nudging (jQuery, MooTools) to enhance the user experience and increase the perceived dynamism of my websites. Trust me -- a lot of little things are what take websites to the next level....

  • CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...

Discussion

  1. Cool! Thanks for sharing! :)

  2. In my plugd project I have a script.js plugin, which provides functionality similar to $.getJSON without requiring io.script (though doesn’t use the same Promises all other Dojo IO things use)

  3. For those interested, Pete’s plugd can be found at: https://github.com/phiggins42/plugd

  4. the only way i could make it work was this

    $.ajax({
      url: url,
      dataType: 'jsonp',
      data: parameters,
      mimeType:"application/json",
      complete:function(jqXHR, textStatus){
          console.log("Ajax completado. ");
      },
      success: function(data, textStatus, jqXHR){
          if(console !=undefined)
            {
                console.log(textStatus);
                console.info(jqXHR);
            }
            twitterCallback2(data);
      },
      error:function(jqXHR, textStatus, errorThrown){
          console.log("Error: "+textStatus+errorThrown);
      }
    });
    
  5. wooop. Thanks David you animal

  6. Vic

    now we still need a clever way to make POST requests using cross domain ajax calls, I think there are some initiatives around called jsonp tunnels

  7. Lolki

    Euh, what is Arsenal ?

    :) just kidding ! ;)

  8. Thomas

    It is worth noting that these examples only work as the jsonp files you are requesting are generated dynamically, that is why you need the callback=?.

    If you are trying to load in static json files, say from a CDN you will need to wrap you json data in something like this myFunction({ [ "data" : "value"] });

    Then in your js file you need your ajax call, and a function that has the same name as your wrapper in the json file.

     $.ajax({url: "http://otherdomain.com/json.json",dataType: "jsonp",cache: false,jsonp:'onJsonPLoad',jsonpcallbackString: "myFunction"}) ;
    
    // callback function
    myFunction(data)
    {
    // do stuff with the json data
    console.log(data)
    }
    

    Of course, if you have access to PHP on the server that is dishing up your JSON files you can have the jsonp file like this

    And David’s methods will work a treat.

    • Thomas

      Forgot to wrap the php bit

    • Thomas


      echo $_GET['callback'] .'({["data" : "value" ]})';

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...