您好,登录后才能下订单哦!
前段时间在做产品开发的时候,需要与公司网站那边进行交互,我们所开发的产品上线后是放在一个域名下,公司网站那块是在另一个域名下,这样在页面中调用
网站那边的接口时就存在跨域的问题,当时为了不修改网站那边的接口,所以采用在服务端通过webservice方式进行调用网站接口,问题也很快解决了,当时我就在想
如果需要在js中直接访问的话,就涉及到到跨域的问题,那么怎么做才能解决这个问题呢,我上网找了一些资料,最后采用的是jsonp的方式来解决的。下面我来给大家分享下
用jsonp方式解决跨域问题。分为以下步骤:
1、引入jquery.js,使用$.ajax()来定义jsonp,如下:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> <% String path = request.getContextPath(); %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <script type="text/javascript" src="${path}/js/jquery-1.7.2.min.js"></script> <script type="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); } } ); }); }); function showAge(data){ alert(data.age); } </script> </head> <body> <a id="jsonp" href="">使用jsonp</a> </body> </html>
2、服务器端处理:
package com.mall.web.action; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.servlet.ModelAndView; import com.alibaba.fastjson.JSONObject; @Controller @RequestMapping("/demo/") public class DemoAction { private HttpServletRequest request; private HttpServletResponse response; @ModelAttribute public void setRequestAndResponse(HttpServletRequest request,HttpServletResponse response){ this.request = request; this.response = response; } @RequestMapping(value="jsonp",method=RequestMethod.GET) public void jsonp(){ try { response.setContentType("text/plain"); response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); PrintWriter out = response.getWriter(); JSONObject resultJSON = new JSONObject(); resultJSON.put("name", "wen"); resultJSON.put("age", "17"); String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数 System.out.println("-------------------->"+jsonpCallback); System.out.println("-------------------->"+resultJSON.toJSONString()); out.println(jsonpCallback+"("+resultJSON.toJSONString()+")");//返回jsonp格式数据 out.flush(); out.close(); } catch (IOException e) { 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的一些知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。