幽灵资源网 Design By www.bzswh.com
我们都知道,AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果。 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的。
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>");
});
}
});
回调方法的参数 通过getJSON 就可以获取 到json对象
MooTools JSONP
MooTools 需要Request.JSONP Class , 可以从这里下载MooTools More . 选择Request.JSONP,
这样 从另一个域获取json就是小菜一碟了.
Js代码
复制代码 代码如下:
new Request.JSONP({
url: "http://search.twitter.com/search.json",
data: {
q: "Arsenal"
},//提交的参数, 没有参数可以不写
callbackKey: 'jsoncallback',//自己定义回调函数的参数名称
onComplete: function(tweets) {
// Log the result to console for inspection
console.info("Twitter returned: ",tweets);
}
}).send();
如果自己定义了回调函数的参数名称. 跟jquery一样.
服务器端你需要这样去取得:
Js代码
复制代码 代码如下:
String callback = request.getParameter("jsoncallback");//取得回调方法名
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=UTF-8");
PrintWriter out;
try {
out = response.getWriter();
out.print(callback+"("+message+")");//这里是关键.主要就是这里
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
顺便说一句: 个人比较喜欢mootools的语法结构,和框架设计思路. 再次赞美!
Dojo JSONP
JSONP 在Dojo Toolkit 中需要用上dojo.io.script (点击可以查看示例)
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是一种非常有效的,可靠的,容易实现的远程数据获取方式。JSONP的策略也使开发人员能够避免繁琐的服务器代理方式,很方便的获取数据。 你可以自己写一个试试
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>");
});
}
});
回调方法的参数 通过getJSON 就可以获取 到json对象
MooTools JSONP
MooTools 需要Request.JSONP Class , 可以从这里下载MooTools More . 选择Request.JSONP,
这样 从另一个域获取json就是小菜一碟了.
Js代码
复制代码 代码如下:
new Request.JSONP({
url: "http://search.twitter.com/search.json",
data: {
q: "Arsenal"
},//提交的参数, 没有参数可以不写
callbackKey: 'jsoncallback',//自己定义回调函数的参数名称
onComplete: function(tweets) {
// Log the result to console for inspection
console.info("Twitter returned: ",tweets);
}
}).send();
如果自己定义了回调函数的参数名称. 跟jquery一样.
服务器端你需要这样去取得:
Js代码
复制代码 代码如下:
String callback = request.getParameter("jsoncallback");//取得回调方法名
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=UTF-8");
PrintWriter out;
try {
out = response.getWriter();
out.print(callback+"("+message+")");//这里是关键.主要就是这里
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
顺便说一句: 个人比较喜欢mootools的语法结构,和框架设计思路. 再次赞美!
Dojo JSONP
JSONP 在Dojo Toolkit 中需要用上dojo.io.script (点击可以查看示例)
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是一种非常有效的,可靠的,容易实现的远程数据获取方式。JSONP的策略也使开发人员能够避免繁琐的服务器代理方式,很方便的获取数据。 你可以自己写一个试试
标签:
AJAX,json
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。