兰溪网站建设学徒,asp网站开发工具神器,做个人网站怎么做,小说网站静态页面模板原文#xff1a;http://www.congmo.net/blog/2012/06/27/ajax-cross-domain/ 跨域问题 起 因是这样的#xff0c;为了复用#xff0c;减少重复开发#xff0c;单独开发了一个用户权限管理系统#xff0c;共其他系统获取认证与授权信息#xff0c;暂且称之为A系统#xf…原文http://www.congmo.net/blog/2012/06/27/ajax-cross-domain/ 跨域问题 起 因是这样的为了复用减少重复开发单独开发了一个用户权限管理系统共其他系统获取认证与授权信息暂且称之为A系统调用A系统以B为例。在B系统 中用ajax调用A系统系统的接口(数据格式为json)当时特别困惑在A系统中访问相应的url可正常回返json数据但是在B系统中使用 ajax请求同样的url则一点儿反应都没有好像什么都没有发生一样。这样反反复复改来改去好久都没能解决于是求救同事提醒可能是ajax跨域问 题于是就将这个问题当做跨域问题来解决了。 知跨域而不知如何解决 知道问题的确切原因剩下的就是找到解决问题的方法了。google了好久再次在同事的指点下知道jQuery的ajax有jsonp这样的属性可以用来解决跨域的问题。 找到一种解决方式 现在也知道了怎样来解决跨域问题余下的就是实现的细节了。实现的过程中错误还是避免不了的。由于不了解json和jsonp两种格式的区别也犯了错误google了好久才解决。 首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版 $(document).ready(function(){var urlhttp://localhost:8080/WorkGroupManagment/open/getGroupById?id1callback?;$.ajax({url:url,dataType:jsonp,processData: false, type:get,success:function(data){alert(data.name);},error:function(XMLHttpRequest, textStatus, errorThrown) {alert(XMLHttpRequest.status);alert(XMLHttpRequest.readyState);alert(textStatus);}});}); 这样写是完全没有问题的起先error的处理函数中仅仅是alert(“error”)为了进一步弄清楚是什么原因造成了错误故将处理函数变 为上面的实现方式。最后一行alert使用为parsererror。百思不得其解继续google最终还是在万能的stackoverflow找 到了答案链接在这里。原因是jsonp的格式与json格式有着细微的差别所以在server端的代码上稍稍有所不同。 比较一下json与jsonp格式的区别 json格式 {message:获取成功,state:1,result:{name:工作组1,id:1,description:11}
} jsonp格式 callback({message:获取成功,state:1,result:{name:工作组1,id:1,description:11}
}) 看出来区别了吧在url中callback传到后台的参数是神马callback就是神马jsonp比json外面有多了一层callback()。这样就知道怎么处理它了。于是修改后台代码。 后台java代码最终如下 RequestMapping(value /getGroupById)public String getGroupById(RequestParam(id) Long id,HttpServletRequest request, HttpServletResponse response)throws IOException {String callback request.getParameter(callback);ReturnObject result null;Group group null;try {group groupService.getGroupById(id);result new ReturnObject(group, 获取成功, Constants.RESULT_SUCCESS);} catch (BusinessException e) {e.printStackTrace();result new ReturnObject(group, 获取失败, Constants.RESULT_FAILED);}String json JsonConverter.bean2Json(result);response.setContentType(text/html);response.setCharacterEncoding(utf-8);PrintWriter out response.getWriter();out.print(callback ( json ));return null;} 注意这里需要先将查询结果转换我json格式然后用参数callback在json外面再套一层就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。 虽然这样解决了跨域问题还是回顾下造成parsererror的原因。原因在于盲目的把json格式的数据当做jsonp格式的数据让ajax处理造成了这个错误此时server端代码是这样的 RequestMapping(value /getGroupById)ResponseBodypublic ReturnObject getGroupById(RequestParam(id) Long id,HttpServletRequest request, HttpServletResponse response){String callback request.getParameter(callback);ReturnObject result null;Group group null;try {group groupService.getGroupById(id);result new ReturnObject(group, 获取成功, Constants.RESULT_SUCCESS);} catch (BusinessException e) {e.printStackTrace();result new ReturnObject(group, 获取失败, Constants.RESULT_FAILED);}return result;} 至此解决ajax跨域问题的第一种方式就告一段落。 追加一种解决方式 追求永无止境在google的过程中无意中发现了一个专门用来解决跨域问题的jQuery插件-jquery-jsonp。 有第一种方式的基础使用jsonp插件也就比较简单了server端代码无需任何改动。 来看一下如何使用jquery-jsonp插件解决跨域问题吧。 var urlhttp://localhost:8080/WorkGroupManagment/open/getGroupById?id1callback?;
$.jsonp({url: url,success: function(data) {$(#current-group).text(当前工作组:data.result.name);},error: function(d,msg) {alert(Could not find user msg);}
}); 至此两种解决跨域问题的方式就全部介绍完毕。
