JQuery跨域调用Rest服务接口

23 篇文章 1 订阅
12 篇文章 0 订阅

项目需要在前台页面中,通过JQuery跨域调用Rest服务接口。

后台代码:

public class HeadAction extends BaseAction{   
  
    private HttpServletRequest request;   
    private HttpServletResponse response;   
    public void findSecondCat(){   
        ActionContext ctx = ActionContext.getContext();   
        request = (HttpServletRequest) ctx.get(ServletActionContext.HTTP_REQUEST);   
        response = (HttpServletResponse)ctx.get(ServletActionContext.HTTP_RESPONSE);    
        //response.setHeader("Cache-Control", "no-cache");   
        response.setContentType("text/json;charset=utf-8");   
        String catType = request.getParameter("catType");   
        List<CategoryNode> node = CategoryCache.getAllCategoryNodes(1, Integer.parseInt(catType));//调用缓存查询分类   
        try {   
            PrintWriter  out = response.getWriter();   
            JSONArray ja = new JSONArray();   
            for(CategoryNode c: node){//返回json格式   
                JSONObject j = new JSONObject();   
                j.put("id", c.ID);   
                j.put("name", c.Name);   
                ja.add(j);   
            }   
               
              String cb = request.getParameter("callback");//若果是ajax请求会带这个参数 你可以firfox的firbug跟踪一下就看到了     
              if(cb != null){//如果是跨域   
                  StringBuffer sb = new StringBuffer(cb);   
                  sb.append("(");   
                  sb.append(ja.toString());   
                  sb.append(")");   
                  out.write(sb.toString());   
                    out.close();   
              }else{//不跨域的情况   
                  out.write(ja.toString());   
                    out.close();   
              }   
        } catch (IOException e) {   
            e.printStackTrace();   
        }   
           
    }   
}  


JQuery调用代码:

$.ajax( {   
                type : 'get',   
                url : '<%=com.utils.PubConstant.wwwDomain %>/index/findSecondCat.action',   
                data : {   
                    catType : 1   
                },   
                dataType : 'jsonp',//跨域必须用jsonp   
                error : function() {   
                },   
                success : function(data) {   
                            innerOption = "<option value=''>全部分类</option>";   
                            for(var i=0;i<data.length;i++){   
                                 innerOption += '<option value="'+data[i].id+'">'+data[i].name+'</option>';   
                             };   
                            $('#secondCatIdId').html(innerOption);   
                            $("#lang, #secondCatIdId").jListbox();   
                }   
            });  


 

总结下JSONP原理:

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。

然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值