在项目中有时需要跨站点获取相关数据,使用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
)
true
)。如果需要发送同步请求,请将此选项设置为
false
。跨域请求和
dataType: "jsonp"
请求不支持同步操作。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
Intelligent Guess (xml, json, script, or html)
)
cache
参数设置为
true
。
jsonp
选项为
false
,阻止了jQuery从加入"?callback"字符串的URL或试图使用"=?"转换。在这种情况下,你也应该明确设置
jsonpCallback
设置。例如,
{ jsonp: false, jsonpCallback: "callbackName" }
jsonpCallback
的结果。
$.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');
}
});
// 接收参数
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();
// 接收参数
//String funString = request.getParameter("callback");
// 当js中 jsonp = "jsonpFunCall"; 时,我们要使用jsonpFunCall这个字段来获取参数值
String funString = request.getParameter("jsonpFunCall");
<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>