jquery jsonp（跨域问题）

以前听过跨域要用到jsonp，今天早上突然有需求要用到jsonp，

这几天比较烦躁，在网上看例子，都是说的一堆一堆的的，但是前台后台的代码却没有，很是郁闷，

下午花点时间研究了下jsonp，搞清楚了是怎么回事。


【推荐文章】

这个文章比我说的好，推荐看看：

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html


【不跨域ajax】

后台，

简单的传了一个json对象，其中msg属性的值为test：

public void test(){ 
    renderJson(new QJson("test")); 
} 

前台，
获取传过来的对象的msg属性：

$(function(){ 
    $.ajax({ 
        url : 'http://localhost/com/test', 
        data : {}, 
        type : 'get', 
        async : false, 
        dataType : 'json', 
        success : function(json){ 
            alert(json.msg); 
        } 
    }); 
}); 

页面，



【开始跨域】

将localhost换为具体的ip，由于地址请求的是localhost，而ajax中是具体ip，所以就跨域了：


【jsonp】

后台：

public void test(){ 
    String callback = getPara("callback");// 获取页面的回调函数名称 
    String json = JsonKit.toJson("ssss");// 将对象转为json字符串 
    String res = callback + "(" + json + ")";// 其实就是调用客户端的callback函数，括号内为要传的对象 
     
    renderJson(res); 
} 

前台：

$(function(){ 
    $.ajax({ 
        url : 'http://192.168.0.116/com/test', 
        data : {},// 这里可以传一些参数 
        type : 'get',// 一定使用get 
        async : false,// 关掉异步 
        dataType : 'jsonp',// jsonp类型 
        success : function(json){// json就是后台传过来的对象 
            alert(json.msg); 
        } 
    }); 
}); 

界面：


【定制化jquery jsonp】

其实使用上面的方法完全可以满足需求，下面是一些定制：

后台：

public void test(){ 
    String callback = getPara("mycallback");// 通过回调函数参数名获取回调函数名称，例如mycallback=test，最终获取的是test 
    String json = JsonKit.toJson("ssss");// 将对象转为json字符串 
    String res = callback + "(" + json + ")";// 其实就是：   test({json}) 
     
    renderJson(res); 
} 

前台：

$(function(){ 
    $.ajax({ 
        url : 'http://192.168.0.116/com/test', 
        data : {},// 这里可以传一些参数 
        type : 'get',// 一定使用get 
        async : false,// 关掉异步 
        dataType : 'jsonp',// jsonp类型 
        jsonp : 'mycallback',// 回调函数  参数 名称  例如 callback=test,mycallback=test其中的callback和mycallback，默认为callback 
        jsonpCallback: 'test',// 这个test需要和后台传过来的方法对应上，比如后台传test({json})，那这里就是test 
        success : function(json){// json就是后台传过来的对象 
            alert(json); 
        } 
    }); 
}); 

界面：



【说明】

1.jsonp和jsonpCallback

jsonp：回调函数名称的参数名

jsonpCallback：回调函数名称

例如：url?jsonp=jsonpCallback

url?callback=test

2.jsonpCallback

页面不需要再写对应的方法了，jquery会封装到success中


【end】

最终好用的，简单的代码：

后台：

public void test(){ 
    String callback = getPara("callback"); 
    String json = JsonKit.toJson("ssss"); 
    String res = callback + "(" + json + ")"; 
     
    renderJson(res); 
} 

前台：

$(function(){ 
    $.ajax({ 
        url : 'http://192.168.0.116/com/test', 
        data : {}, 
        type : 'get', 
        async : false, 
        dataType : 'jsonp', 
        success : function(json){ 
            alert(json); 
        } 
    }); 
});