zoukankan      html  css  js  c++  java
  • 解决跨域的jsonp+Java实例

    https://blog.csdn.net/buler_sky/article/details/70241481

    页面的js代码

     function getData( ) {
            $.ajax({
                var d1=$("#d11").val();
                url : "test/demoPage1.do",
                type : "GET",
                async:false,
                beforeSend : function(request) {
                },
                data : {
                         dtp1:d1,
                 },
                dataType:'jsonp', 
                jsonp:'callback',      
                crossDomain:true,/*默认是false,记住要改为true,不然无法成功获取数据数据并跳转至success*/
                jsonpCallback:"callback",
                success:function(data){
                    alert("success");
                },
                error:function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
           });

    后台的处理(这里用的是struts2)

    @Action(value = "demoPage1", results = @Result(type = "json", params = {"root", "result" }))
    public String getPage1Data() {
        Map<String,String> map = new HashMap<String,String>();   
        map.put("result", "content");  
        JSONObject resultJSON = JSONObject.fromObject(map);
        HttpServletResponse response=ServletActionContext.getResponse();
        HttpServletRequest resquest=ServletActionContext.getRequest();
        response.setContentType("text/plain");  
        response.setHeader("Pragma", "No-cache");  
        response.setHeader("Cache-Control", "no-cache");  
        response.setHeader("Access-Control-Allow-Origin", "*");//添加跨域访问
        response.setDateHeader("Expires", 0);   
        //String callback= request.getParameter("callback");//如果你在请求后面添加了callback,可以用自己传入的参数,没有添加则默认为callback,这里我使用默认
    try {       
        PrintWriter out = response.getWriter();       
        out.println("callback"+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据 ,要用callback包装下
        out.flush();  
        out.close();  
        System.out.print("1");
    } catch (Exception e) {
    // TODO Auto-generated catch block
        e.printStackTrace();
        e.getMessage();
    }
    return null;
    }

    Jsonp原理

     Jsonp跨域是通过动态创建script标签来实现跨域的,script标签的src属性是没有跨域的限制的,jsonp请求相当于将我们的请求通过script标签的src发送出去,后台返回的数据是callback(名字可以是发送请求时自己命名)包装起来的,前端获取到数据后就会调用页面callback(该函数也是jquery动态生成的function),json的格式的数据直接入参,这就是为什么我们后台要返回的数据是callback包装起来的了。

    所以可以通过jsonp去向跨域的服务器请求数据呢。

  • 相关阅读:
    Vue系列:.sync 修饰符的作用及使用范例
    Vue系列:Websocket 使用配置
    Vue系列:Slot 插槽的使用范例
    Vue系列:滚动页面到指定位置实现
    Vue系列:为不同页面设置body背景颜色
    Element UI系列:Upload图片自定义上传
    Vue系列:wangEditor富文本编辑器简单例子
    Element UI系列:Select下拉框实现默认选择
    sublime text 3 15个常用插件介绍
    基于iis下 wcf接口发布
  • 原文地址:https://www.cnblogs.com/shizilunya/p/8718171.html
Copyright © 2011-2022 走看看