As we all know, a big limitation of AJAX is that it doesn’t allow cross-domain requests. But by using JSONP. JSONP is a way of injecting by script tag, which is a js script that can reference cross-domain urls, but needs to provide a callback function (it must be on your own page), so you can handle the result yourself. Let’s see how JSONP is implemented in jQuery, MooTools, and the Dojo Toolkit.

JQuery json JQuery getJSON method:

Js code

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

Or similar

Js code

$.ajax({
                type:"get",
                data:"random="+Math.random(),
                url:url,
                dataType:"jsonp",
                jsonp:"callback",
                success:function(data){
                      $.each(data, function(key, val) {
                        $("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>");
                      });
                }
            });

The parameters of the callback method are retrieved from the json object by getJSON

MooTools json MooTools requires requeste.jsonp Class, which you can download from here. Select the Request. The json, Getting json from another domain is a piece of cake.

Js code

new Request.JSONP({
    url: "http://search.twitter.com/search.json",
    data: {
        q: "Arsenal"
    },//Submitted parameters, no parameters can not write
        callbackKey: 'jsoncallback',//Define the parameter name of the callback function
        onComplete: function(tweets) {
        // Log the result to console for inspection
        console.info("Twitter returned: ",tweets);
    }
}).send();

If you define the parameter name of the callback function, just like jquery.

On the server side you need to get:

Js code

String callback = request.getParameter("jsoncallback");//Gets the callback method name
        response.setHeader("Cache-Control", "no-cache");
        response.setContentType("text/json;charset=UTF-8");
        PrintWriter out;
        try {
            out = response.getWriter();
            out.print(callback+"("+message+")");//Here's the key. Here's the main thing
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

By the way, I prefer the syntax structure and framework design ideas of mootools.

Dojo json JSONP requires the use of dojo.io.script in the Dojo Toolkit (click to see an example)

  Js code

// 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);
        }
    });
});

JSONP is a very efficient, reliable, and easy to implement remote data acquisition. JSONP’s strategy also enables developers to avoid cumbersome server proxy methods and easily access data. You can write one yourself