一、同源策略
点击buttontest后,弹出两个Hello World,当中在请求另外一个域资源的时候。由于同源策略而不能读取。
而借助于JQuery则可轻松实现:
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最主要的安全功能,假设缺少了同源策略,则浏览器的正常功能可能都会受到影响。能够说Web是构建在同源策略基础之的。浏览器仅仅是针对同源策略的一种实现。
同源策略,它是由Netscape提出的一个著名的安全策略。如今全部支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议。port同样。当一个浏览器的两个tab页中分别打开来
百度和谷歌的页面当浏览器的百度tab页运行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,仅仅有和百度同源的脚本才会被运行。
为了好理解,举个样例:
在localhost:8082和localhost:24253有TEST.js,当中TEST.js内容是alert("Hello World");
localhost:8082的測试代码为:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script src="/common/js/lib-base.js"></script> <script> function test(){ $.get("http://localhost:24253/TEST.js", function (data) { console.log(data) }); $.get("/common/js/TEST.js", function (data) { console.log(data) }); $.get("http://localhost:8082/common/js/TEST.js", function (data) { console.log(data) }); } </script> </head> <body> <div><input type="button" value="test" onclick="test()"/></div> </body> </html>
点击buttontest后,弹出两个Hello World,当中在请求另外一个域资源的时候。由于同源策略而不能读取。
可是在页面中增加<script src="http://localhost:24253/TEST.js></script>就能够绕过同源策略。由于这样是本地server訪问远程server的信息。
2、理解JSONP跨域
JSONP正是为了解决同源策略的问题。它的基本原理就是借助script标签src属性的跨域能力,通过src返回的“回调函数名+json数据”。 然后在前台的回调函数中运行该方法。
我们先来看一个JSONP演示样例:
在localhost:8082上构建一个json格式数据。然后在localhost:24253上測试:
locahost:8082的链接和结果例如以下:
在localhost:24253上调用代码例如以下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="jquery-1.7.2.min.js"></script> <script> function CreateScript(src) { $("<script><//script>").attr("src", src).appendTo("body"); } function getData() { CreateScript("http://localhost:8082/eap/testJSONP"); } </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" value="get value from localhost:8082" onclick="getData()" /> </div> </form> </body> </html>
运行后,出现例如以下错误,由于传回的json数据会当js运行。
3、JSONP演示样例(原生构造与JQuery)
如今我们在localhost:8082另构造一个“回调函数+json类型”的方法http://localhost:8082/eap/testJSONP_1?
callback=jsonpcallback
而在localhost:24253通过这样的方式就可以调用成功,代码例如以下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="jquery-1.7.2.min.js"></script> <script src="json2.js"></script> <script> function CreateScript(src) { $("<script><//script>").attr("src", src).appendTo("body"); } function getData() { CreateScript("http://localhost:8082/eap/testJSONP_1?callback=jsonpcallback"); } function jsonpcallback(data) { alert(JSON.stringify(data)); } </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" value="get value from localhost:8082" onclick="getData()" /> </div> </form> </body> </html>
结果例如以下:
而借助于JQuery则可轻松实现:
function getData() { $.ajax({ url: 'http://localhost:8082/eap/testJSONP_1', dataType: "jsonp", jsonp: "callback", success: function (data) { alert(JSON.stringify(data)); } }) }
版权声明:本文博主原创文章,博客,未经同意不得转载。