前端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); }

原文地址:https://www.cnblogs.com/yunianzeng/p/12053736.html