JQUERY 实现AJAX跨域获取json数据实例

在项目中有时需要跨站点获取相关数据，使用ajax如何实现跨域获取json数据。

Jquery有封装好的实现方法，可以直接使用$.ajax()方法实现，只需要设置jsonp格式等相关变量即可；也可以使用$.getJSON()方法。

那么实现跨域获取数据，不得不说jsonp协议了，我们使用json是不能解决的，对于jsonp，我复制了百度百科的解释，粘在这里：

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script>
元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

网上也有很多相关的帖子介绍如何使用，但大多都是直接写好的例子，没有相关的说明，可能会使有些读者蒙掉，儿无法调通跨域的ajax请求，本文重在于根据一个例子一步一步的介绍如何使用，和一些注意的事项。

属性介绍（部分引用自http://jquery.bootcss.com/jQuery.ajax/ 的关于ajax属性的解释）：

async (默认:

true

)

类型: Boolean

默认设置下，所有请求均为异步请求（也就是说这是默认设置为

true

）。如果需要发送同步请求，请将此选项设置为

false

。跨域请求和

dataType: "jsonp"

请求不支持同步操作。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

dataType (默认:

Intelligent Guess (xml, json, script, or html)

)
类型: String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数：
其中我们使用跨域请求时，指定为jsonp类型即可。
"jsonp": 以
JSONP 的方式载入 JSON 数据块。会自动在所请求的URL最后添加 "?callback=?"。默认情况下不会通过在URL中附加查询字符串变量 "_=[TIMESTAMP]" 进行自动缓存结果，除非将

cache

参数设置为

true

。

jsonp
类型: String

在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。在jQuery 1.5，，设置

jsonp

选项为

false

，阻止了jQuery从加入"?callback"字符串的URL或试图使用"=?"转换。在这种情况下，你也应该明确设置

jsonpCallback

设置。例如,

{ jsonp: false, jsonpCallback: "callbackName" }

jsonpCallback
类型:
String, Function
为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。从jQuery 1.5开始，你也可以使用一个函数作为该参数设置，在这种情况下，该函数的返回值就是

jsonpCallback

的结果。

举例：

（1） 前台页面SCRIPT里面的JS代码：

$.ajax({
		 			type:"GET",
		 			async: true,
		 			url:"http://192.168.1.120:8888/getData.htm",
		 			dataType:"jsonp",
		 			success:function(data){
		 				alert(data.name+ " " +data.age);
		 			},
		 			error:function(){
		 				alert('error');
		 			}
		 		});

我们只设定了 dataType 属性为 jsonp，并没有设定 jsonp属性和 jsonpCallback属性(注意这里C必须大写，不然死你都不知道为

啥指定了该属性却不尽我们写的回调方法)。

(我的例子后台是java语言编写的，其他后台语言一样的写法)

这意味着后台在request中接收我们传过去的参数名为默认的名字，"callback"，并且他的值是Jquery随机生成的一个函数名字符

串变量，假设变量名为funString，当后台做好数据查询后，将结果转换成json格式的数据data时，只需要把funString和data以字

符串的形式拼接在一起即可，

如： String result = funString + "(" + data + ")";

在使用response.getWriter().print(result);返回就行了

下面是后台的方法代码（部分）：

// 接收参数
		String funString = request.getParameter("callback");
		// 封装一个简单的json数据的例子
		Map<String, Object> dataMap = new HashMap<String, Object>();
		dataMap.put("name", "xiaoming");
		dataMap.put("age", 23);
		dataMap.put("height", "180cm");
		
		net.sf.json.JSONObject jsonObject = net.sf.json.JSONObject.fromObject(dataMap);
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.print(funString+"("+jsonObject+")");
		out.flush();
		out.close();

然后，启动web程序，测试浏览器显示为：

这是我们只设定了dataType:"jsonp" 这一个属性时，后台我们获取的是"callback"字段的值作为返回的js方法的方法名字符串；

（2） 而当我们在设定了 jsonp 属性时，我们后台就不再使用"callback"来接收参数了，必须使用jsonp指定的值。

如： 当 jsonp = "jsonpFunCall" 时，后台 ：

// 接收参数
		//String funString = request.getParameter("callback");
		// 当js中 jsonp = "jsonpFunCall"; 时，我们要使用jsonpFunCall这个字段来获取参数值
		String funString = request.getParameter("jsonpFunCall");

其他就不变了，测试运行，结果依然正常获取到了相关json数据。

（3） 以上两个均是在未指定 jsonpCallback 属性值时的情况，当该属性为指定时，Jquery 会随机生成一个方法名传给后台，这

个随机生成的方法名固定和$.ajax()中的success 方法绑定的，所有我们就可以直接在success定义的function中接收json数据并

做一些操作！

当我们在设定了 jsonpCallback 属性时，如 jsonCallback : "MyCallbackFunction";

此时，我们需要自定义一个js方法，该方法的名字就是 MyCallbackFunction。当然这个方法你自己定义，随便叫什么都行，

但要注意里面只有一个参数， 就是我们要接收的json数据。

具体js代码如下：

<script type="text/javascript">
		 	
		 	$(document).ready(function(){
		 	
		 		$.ajax({
		 			type:"GET",
		 			async: true,
		 			url:"http://192.168.1.120:8888/getData.htm",
		 			dataType:"jsonp",
		 			jsonpCallback:"MyCallbackFunction",
		 			success:function(data){
		 				// 这里就不再编写我们接收json数据后的处理了，不然会重复调用
		 			},
		 			error:function(){
		 				alert('error');
		 			}
		 		});
		 		
		 	});
		 	
		 	function MyCallbackFunction(data){
		 		alert("MyCallbackFunction" + data.name+" " +data.age+" " + data.height + " " + data.date.year);
		 	}
		</script>

从代码里可知，当我们自定义了 回调方法时，原来success里的代码要去掉，因为Jquery会在执行完我们自定义的回调方法后自动

调用success方法。

好了，总共三点要注意的地方，至于使用哪一种写法，看你自己的决定了，简单点的就是只设定dataType属性即可。

复杂点的我们可以设定我们指定的参数接收名称和自己写的回调方法来实现，但不管怎么写，结果都一样，就是跨域获取json数据

来实现我们的开发需求。希望我写的这篇可以帮助一些不太明白和不大会使用的童鞋。