jsonp跨域访问服务
前段时间在做产品开发的时候,需要与公司网站那边进行交互,我们所开发的产品上线后是放在一个域名下,公司网站那块是在另一个域名下,这样在页面中调用 网站那边的接口时就存在跨域的问题,当时为了不修改网站那边的接口,所以采用在服务端通过webservice方式进行调用网站接口,问题也很快解决了,当时我就在想 如果需要在js中直接访问的话,就涉及到到跨域的问题,那么怎么做才能解决这个问题呢,我上网找了一些资料,最后采用的是jsonp的方式来解决的。下面我来给大家分享下 用jsonp方式解决跨域问题。分为以下步骤: 1、引入jquery.js,使用$.ajax()来定义jsonp,如下: <%@pagelanguage="java"contentType="text/html;charset=utf-8"pageEncoding="utf-8"%> <% Stringpath=request.getContextPath(); %> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <scripttype="text/javascript"src="${path}/js/jquery-1.7.2.min.js"></script> <scripttype="text/javascript"> $(function(){ $("#jsonp").click(function(){ $.ajax({ url:"/demo/jsonp.action",type:"GET",async:false,dataType:"jsonp",jsonp:"jsonpCallback",jsonpCallback:"showAge",success:function(data){ //alert(data.name); } } ); }); }); functionshowAge(data){ alert(data.age); } </script> </head> <body> <aid="jsonp"href="">使用jsonp</a> </body> </html> 2、服务器端处理: packagecom.mall.web.action; importjava.io.IOException; importjava.io.PrintWriter; importjava.util.HashMap; importjava.util.Map; importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; importorg.springframework.stereotype.Controller; importorg.springframework.web.bind.annotation.ModelAttribute; importorg.springframework.web.bind.annotation.RequestMapping; importorg.springframework.web.bind.annotation.RequestMethod; importorg.springframework.web.servlet.ModelAndView; importcom.alibaba.fastjson.JSONObject; @Controller @RequestMapping("/demo/") publicclassDemoAction{ privateHttpServletRequestrequest; privateHttpServletResponseresponse; @ModelAttribute publicvoidsetRequestAndResponse(HttpServletRequestrequest,HttpServletResponseresponse){ this.request=request; this.response=response; } @RequestMapping(value="jsonp",method=RequestMethod.GET) publicvoidjsonp(){ try{ response.setContentType("text/plain"); response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cache"); response.setDateHeader("Expires",0); PrintWriterout=response.getWriter(); JSONObjectresultJSON=newJSONObject(); resultJSON.put("name","wen"); resultJSON.put("age","17"); StringjsonpCallback=request.getParameter("jsonpCallback");//客户端请求参数 System.out.println("-------------------->"+jsonpCallback); System.out.println("-------------------->"+resultJSON.toJSONString()); out.println(jsonpCallback+"("+resultJSON.toJSONString()+")");//返回jsonp格式数据 out.flush(); out.close(); }catch(IOExceptione){ e.printStackTrace(); } } } 该访问的url地址为:/demo/jsonp.action?jsonpCallback=“showAge” 在上述事例中,需要注意以下几点: 1、jsonp中只能使用get请求,ajax请求中dataType为jsonp 2、jsonp定义的url地址中的参数名默认为callback 3、jsonpCallback定义的时jsonp定义的参数对应的值,也是服务器需要回调的函数,若jsonpCallback为定义值,默认回调success函数 4、服务器接受请求后,需要返回符合参数传递过来的回调函数如: out.println(jsonpCallback+"("+resultJSON.toJSONString()+")");//返回jsonp格式数据 以上就是jsonp的访问过程,这里需要大家好好理解。因为使用jsonp跨域访问,需要客户端和服务端定义一个规则,即回调函数的规则,所以 在开发的过程中需要客户端和服务端的开发人员共同定义一个规则。 其实我们还可以通过$.get()和$.getJson()方式来跨域访问,这里就不跟大家细说了,如果感兴趣的朋友,可以自己去了解下,今天就给大家分享到这, 我们下期再见,接下来会为大家分享android的一些知识。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |