jsonp实现跨域调用

jsonp服务端需要返回的格式:
callback([{"id":448,"name":"ddd_xx"}])
其实就是加个数据的方法调用封装。
注意,对于jsonp在return 对象需要为null,否则返回的数据后面会多个{....},需要返回的数据可以直接PrintWrite输出。
服务端代码示例:
    @SuppressWarnings("unchecked")
    @JSON(serialize=false)
 public String albumList() throws IOException, JSONException {
        HttpServletRequest request = this.getRequest();
        String userId = request.getParameter("userId");
        String callback = request.getParameter("callback");
        if(callback == null) callback = "callback";        
        if (userId == null || "".equals(userId)) {
            return null;
        } 
        try {
            HashMap<String, Object> param = new HashMap<String, Object>();
            param.put("flag", KernelConstants.STATUS_NORMAL);
            param.put("createId", userId); 
            param.put("orderByFlag", "0");
            Response response = videoAlbumService.list(param);  
            List list,result = null;
            VideoAlbum videoAlbum = null;
            Map map = null;
            if ( response.getReturnObject() != null ) {
             list = (List<VideoAlbum>) response.getReturnObject();
             result = new ArrayList();
             for(int i = 0; i<list.size(); i++){
              videoAlbum = (VideoAlbum) list.get(i);
              map = new HashMap();
              map.put("name", videoAlbum.getName());
              map.put("id", videoAlbum.getId());
              result.add(map);
             } 
                JSONArray jsonObj = JSONArray.fromObject(result); 
                callback = callback + "(" + jsonObj + ")";  
                super.renderText(callback);
            } 
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
 
接下来就是客户端调用,有两种方法:
 <script type="text/javascript" src="js/jquery/jquery.js"></script>
<script>
// 一种是ajax
 $.ajax( {
  url : category,
  type : 'GET',
  dataType : 'jsonp',
  success : function(data) {
   var xmlDom=new ActiveXObject("Microsoft.XMLDOM") 
    xmlDom.loadXML(data) ;   
   var item_xml = xmlDom.getElementsByTagName("item");
   for(var i=0; i<item_xml.length;i++){
    jsAddItemToSelect(document.getElementById("sort"),item_xml .firstChild.data,item_xml .getAttribute("Id"));
   }
  }
 });
//一种是简单的封装getJSON
 $.getJSON( url ,"callback=?",function(data){
  var result = data;
  for(var i=0;i<result.length;i++){
   jsAddItemToSelect(document.getElementById("issue"),result .name,result .id);
  } 
 });
 
</script>
这样就实现了跨域调用
这个其实就是在服务端做了一个代理,对于我们没有权限修改的域调用数据,也可以参考此方法,把数据读回来,再传给客户端。
这种方法常用在分布式、异构环境中交换数据使用。但对于不可控制的域调用,需要注意风险,毕竟是脚本注入

你可能感兴趣的:(jsonp)