前段时间在做产品开发的时候，需要与公司网站那边进行交互，我们所开发的产品上线后是放在一个域名下，公司网站那块是在另一个域名下，这样在页面中调用
网站那边的接口时就存在跨域的问题，当时为了不修改网站那边的接口，所以采用在服务端通过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的一些知识。