小亨的探险游戏

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://henrygame.blogbus.com/logs/23846208.html

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的跨域操作就完成了。网上关于这方面的资料不多，而且都不详细。
上面是我用firebug跟踪HttpResponse,HttpRequest的参数的总结的。
可能有理解不当，或者有更好的方法，欢迎大家一起交流。