As we all know, one of the big limitations of Ajax is that Cross-domain requests are not allowed. However, it is accomplished by using JSONP. Jsonp is a way of scripting markup injection, which is a JS script that can reference Cross-domain URLs, but it needs to provide a callback function (must be on your own page), so you can handle the results yourself. Let's see how JSONP is implemented in Jquery,mootools, Dojo Toolkit.
The Jsonp of jquery
Jquery.getjson Method:
JS Code
Copy Code code as follows:
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
Copy Code code as follows:
$.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>");
});
}
});
parameter of the callback method can get to the JSON object via Getjson
MooTools JSONP
MooTools need Request.jsonp Class, you can download MooTools more from here. Choose Request.jsonp,
It's a piece of cake to get JSON from another domain.
JS Code
Copy Code code as follows:
New Request.jsonp ({
URL: "Http://search.twitter.com/search.json",
Data: {
Q: "Arsenal"
},//submitted parameters, no parameters can not be written
Callbackkey: ' Jsoncallback ',//self-defining 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 yourself. Just like jquery.
Server side you need to get this:
JS Code
Copy Code code as follows:
String callback = Request.getparameter ("Jsoncallback");//Get 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+ ")); This is the key. It's mostly here.
Out.flush ();
Out.close ();
catch (IOException e) {
E.printstacktrace ();
}
By the way: individuals prefer the grammatical structure of mootools, and frame design ideas. Praise again!
Dojo JSONP
JSONP need to use Dojo.io.script in Dojo Toolkit (click to view sample)
JS Code
Copy Code code as follows:
Dojo.io.script is a external dependency, so it must to 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 effective, reliable, and easy to implement remote data acquisition method. JSONP's strategy also enables developers to avoid cumbersome server proxies and easy access to data. You can write a test yourself.
