搞定 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);
			}
		});
	});

搞定 jquery jsonp,古老的榕树,5-wow.com