大家好，又见面了，我是全栈君。
ajax跨域请求，在工作中遇到使用ajax发起请求获取数据，但是请求的数据不在同一个域下，这样子就要使用到ajax的跨域请求了！
我使用的框架 SpringMVC，我在PC端的项目里面写一个接口方法，但是在wap项目中也要用改接口！下面贴出示例代码：
（1）：前台请求代码
①：正常请求（不跨越）
$.ajax({
url:'${pageContext.request.contextPath}/dufy/test',
type:'get',
data:{data:data},
dataType:'json',
success:function(data){
//do something...
},
error: function(data){
//do something...
}
})也可以使用 .getJSON()， .getJSON的详情请点击 这里查看
②： 跨域请求
$(function(){
$.ajax({
type:'get',
url : '${pageContext.request.contextPath}/dufy/test',
data:{data:data},
dataType : 'jsonp',
jsonpCallback: 'callback',
success : function() {
//do something...
},
error : function(data) {
//do something...
}
});
})
function callback(data){
var jsonobj = eval('(' + data + ')');
if(jsonobj.orderCount!=""){
//do something...
}
}（2）：后台代码
@RequestMapping(value="/dufy/test",method=RequestMethod.GET)
@ResponseBody
public void test(HttpServletRequest request,HttpServletResponse response){
response.setHeader("P3P", "CP=CAO PSA OUR");
response.addHeader("Access-Control-Allow-Origin", "*");
String data = request.getParameter("data");
//1：业务逻辑
JSONObject returnMap = new JSONObject();
if(StringUtil.isEmpty(data)){
returnMap.put("state", "error");
}else{
returnMap.put("state", "success");
}
//2:输入json数据到前台页面
PrintWriter pWriter = null;
try {
pWriter = response.getWriter();
String type = request.getParameter("type");
if("pc".equals(type)){
pWriter.write(returnMap.toJSONString());
}else if("wap".equals(type)){
pWriter.write("callback('" + returnMap.toJSONString() + "')");
}
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}finally{
if(pWriter!=null){
pWriter.flush();
pWriter.close();
}
}
}在使用过程注意：后台代码中的 callback要与前期台调用 jsonpCallback: ‘callback’, 对应！
但是实际过程中又遇到新的问题，这个callback不能直接后台硬编码写死！要不前台如果有两个以上的请求在js中写两个function callback() 就会有错误！函数名称相同了，那么怎么解决这个问题呢？
优化一下后台的代码：
...
//优化代码:添加后台获取callback
String callback = request.getParameter("callback");
...
//优化代码
pWriter.write(""+callback+"('" + returnMap.toJSONString() + "')");
//之前前代码
pWriter.write("callback('" + returnMap.toJSONString() + "')");这样子就实现了动态化！
使用过程中如果有问题，欢迎一起讨论！
参考资料：
1：jquery中ajax处理跨域的三大方式
2：JQuery的Ajax跨域请求的解决方案
3：疯狂的JSONP
4：关于JSON与JSONP简单总结
5：window.name实现的跨域数据传输
6：JavaScript跨域总结与解决办法
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/121234.html原文链接：https://javaforall.net
