前端JS跨域策略与httpClient的区别

方案：由于html的同源策略不能访问，利用javascript中src属性的开放策略解决



这种策略为jsonp：JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题




跨域思想：




1.利用javascript中的src属性




2.定义回调函数callback(data)




3.将返回值结果进行特殊格式的封装 callback (JSON数据)



html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP测试</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        alert("测试访问开始!!!!!")
        $.ajax({
            url:"http://manage.jt.com/web/testJSONP",
            type:"get",                //jsonp只能支持get请求
            dataType:"jsonp",       //dataType表示返回值类型
            jsonp: "callback",    //指定参数名称//默认为callback
            jsonpCallback: "hello",  //指定回调函数名称
            success:function (data){   //data经过jQuery封装返回就是json串
                alert(data.itemId);//数据读取名要相同
                alert(data.itemDesc);
                //转化为字符串使用
                //var obj = eval("("+data+")");
                //alert(obj.name);
            }
        });
    })
</script>
</head>
<body>
    <h1>JSON跨域请求测试</h1>
</body>
</html>

Controller层：
    @RequestMapping("/web/testJSONP")
    public JSONPObject jsonp(String callback){
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(1000L).setItemDesc("大头精");
        return new JSONPObject(callback,itemDesc);
    }









            

            
posted @ 
2019-12-17 12:05 
ZJfor 
阅读(501) 
评论(0) 
编辑 
收藏 
举报