注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

阿飘的博客

十里平湖霜满天 寸寸青丝愁华年

 
 
 

日志

 
 

ajax跨域操作的jquery  

2010-02-02 09:27:08|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
ajax应用的越来越广泛。以前我一直使用jquery的.post,和.get来做
ajax操作,但是.post和.get是不支持跨域操作的,例如:
在a.com通过他们调用b.com,会返回uri denied。今天要实现一个feature
要ajax跨域操作,就研究了一下。

jquery从1.2开始,.getJSON就支持跨域操作了。这个是官方给出的例子。
http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});

});

这里的jsoncallback是一个jsonp的callback。不指定就是用?,jquery会自动
把?替代。这个大家可能还不太理解,一会就明白了。

我用django做web开发的framework。那么提供json数据的view func应该如何写呢?

def api(request, id):
try:
info = Info.objects.get(id=id)

data = {
'name':info.name,
'gendar':info.gendar,
}
except:
status = {}

callback = request.GET['callback']

return HttpResponse('%s(%s)' % (callback,
simplejson.dumps(status)))

这里的callback就是一个jsonp的func名字,通常是jsonp1214803701549这样的串。
HttpResponse的返回值一定是jsonp1214803701549({'name':xxx, 'gendar':xxxx})。
因为这样才能回调到你的客户端的function。这个浪费了我不少时间。

html客户端代码就更简单。

$.getJSON("http://xxx.com?callback=?",
function(data){
alert(data.name);
}

});

到此,ajax的跨域操作就完成了。


这种技术有一个名字叫做“jsonp”。
它的原理是,动态地添加一个<script>标签,因为script标签的src属性是没有跨域的限制的。
  评论这张
 
阅读(929)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017