我們都知道，AJAX的一大限制是不允許跨域請(qǐng)求。 不過通過使用JSONP來實(shí)現(xiàn)。JSONP是一種通過腳本標(biāo)記注入的方式，它是可以引用跨域URL的js腳本，不過需要提供一個(gè)回調(diào)函數(shù)（必須在您自己的頁面上），因此，你可以自己處理結(jié)果。 讓我們看看JSONP的是怎么在jQuery，MooTools的，Dojo Toolkit中實(shí)現(xiàn)的。
jQuery的JSONP
jQuery.getJSON方法：
Js代碼
jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{
q: "Arsenal"
},function(tweets) {
// Handle response here
console.info("Twitter returned: ",tweets);
});
或者 類似
Js代碼
$.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>");
});
}
});
回調(diào)方法的參數(shù) 通過getJSON 就可以獲取 到j(luò)son對(duì)象
MooTools JSONP
MooTools 需要Request.JSONP Class , 可以從這里下載MooTools More . 選擇Request.JSONP,
這樣 從另一個(gè)域獲取json就是小菜一碟了.
Js代碼
new Request.JSONP({
url: "http://search.twitter.com/search.json",
data: {
q: "Arsenal"
},//提交的參數(shù), 沒有參數(shù)可以不寫
callbackKey: 'jsoncallback',//自己定義回調(diào)函數(shù)的參數(shù)名稱
onComplete: function(tweets) {
// Log the result to console for inspection
console.info("Twitter returned: ",tweets);
}
}).send();
如果自己定義了回調(diào)函數(shù)的參數(shù)名稱. 跟jquery一樣.
服務(wù)器端你需要這樣去取得:
Js代碼
String callback = request.getParameter("jsoncallback");//取得回調(diào)方法名
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=UTF-8");
PrintWriter out;
try {
out = response.getWriter();
out.print(callback+"("+message+")");//這里是關(guān)鍵.主要就是這里
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
順便說一句: 個(gè)人比較喜歡mootools的語法結(jié)構(gòu),和框架設(shè)計(jì)思路. 再次贊美!
Dojo JSONP
JSONP 在Dojo Toolkit 中需要用上dojo.io.script (點(diǎn)擊可以查看示例)
Js代碼
// 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是一種非常有效的，可靠的，容易實(shí)現(xiàn)的遠(yuǎn)程數(shù)據(jù)獲取方式。JSONP的策略也使開發(fā)人員能夠避免繁瑣的服務(wù)器代理方式,很方便的獲取數(shù)據(jù)。 你可以自己寫一個(gè)試試
