前段时间在做产品开发的时候,需要与公司网站那边进行交互,我们所开发的产品上线后是放在一个域名下,公司网站那块是在另一个域名下,这样在页面中调用

网站那边的接口时就存在跨域的问题,当时为了不修改网站那边的接口,所以采用在服务端通过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;@ModelAttributepublicvoidsetRequestAndResponse(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的一些知识。