同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

示例：

项目1:

==================================http://127.0.0.1:8001项目的index

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<h3>pro1的首页</h3>

<button class="b2">send a request</button>

<script>

     $(".b2").click(function () {

         $.ajax({

             url:"http://127.0.0.1:8002/ajax_send/",    // 浏览器的同源策略的原因，AJax无法发送跨域请求

             success:function (data) {

                 alert(data)

             }

         })

     });

==================================http://127.0.0.1:8001项目的views

from django.shortcuts import render,HttpResponse

def index(request):

    return render(request,"index.html")

def ajax_send(request):

    return HttpResponse("项目1的数据")

项目2

==================================http://127.0.0.1:8002项目的index

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<h3>pro2的首页</h3>

<button class="b2">send a request</button>

<script>

     $(".b2").click(function () {

         $.ajax({

             url:"/ajax_send/",

             success:function (data) {

                 alert(data)

             }

         })

     })

</script>

</body>

</html>

==================================http://127.0.0.1:8002项目的views

from django.shortcuts import render,HttpResponse

def index(request):

    return render(request,"index.html")

def ajax_send(request):

    return HttpResponse("项目2的数据")

当点击项目1的按钮时，发送了请求，但是会发现报错如下：

已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:8002/SendAjax/ 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）

但是注意，项目2中的访问已经发生了，说明是浏览器对非同源请求返回的结果做了拦截

Jsonp

jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略

我们发现通过script标签可以实现跨域请求

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

借助script标签，实现跨域请求，示例：

# =============================http://127.0.0.1:8001/index

<button class="b2">send a request</button>

<script>

    function foo(data){

        alert(data)

    }

</script>

<script src="http://127.0.0.1:8002/SendAjax/?callback=foo"></script>

# =============================http://127.0.0.1:8002/

def ajax_send(request):

    func=request.GET.get("callback")

    print("func",func)

    print("项目2........")

    res={"name":"alex"}

    import json

    return HttpResponse("%s('%s')"%(func,json.dumps(res)))

这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。

一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了

function foo(s) {

       console.log(s);

       JSON.parse(s)

    }

    function kua_yu(url) {

             // 生成   script标签

            var $ele_script=$("<script>");

            $ele_script.attr("src",url);

            $ele_script.attr("class","kuayu");

            // 添加到body中

            $("body").append($ele_script);   // 发送请求

            $(".kuayu").remove()

    }

    $(".b2").click(function () {

         kua_yu( "http://127.0.0.1:8002/ajax_send/?callback=foo")

    });

此处kua_yu函数用来生成script标签，并在生成后再将他删除，防止页面上存在很多无意义的标签，他接收一个url，用来确定请求的路径

当点击按钮后就会调用kua_yu函数，并通过跨域请求返回的数据来调用foo函数，完成数据处理

jQuery对JSONP的实现

getJSON

jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法

8001的html改为：

//========================基于jquery的API实现跨域请求===================================

$(".b2").click(function () {

    $.getJSON("http://127.0.0.1:8002/ajax_send/?callback=?",function (data) {

            console.log(data);

        })

});

jQuery的getJSON在处理callback=?时会生成一个随机的函数名，当数据返回时，会直接调用后面的匿名函数function，里面的data就是我们需要的数据

8002的views不改动。

结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。

此外，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现

$.ajax

8001的html改为：

$(".b2").click(function () {

   $.ajax({

       url:'http://127.0.0.1:8002/ajax_send/',

       dataType:"jsonp",

       jsonp: 'callback',

       jsonpCallback:"SayHi"

   });

});

function SayHi(arg){

                alert(arg);

            }

8002的views不改动。

当然，最简单的形式还是通过回调函数来处理：

<script>

    function f(){

            $.ajax({

               url:"http://127.0.0.1:8002/ajax_send/",

               dataType:"jsonp",            //必须有，告诉server，这次访问要的是一个jsonp的结果。

               jsonp: 'callbacks',          //jQuery帮助随机生成的：callbacks="wner"

               success:function(data){

                   alert("hi "+data)

              }

         });

       }

</script>

jsonp: 'callbacks'就是定义一个存放回调函数的键，jsonpCallback是前端定义好的回调函数方法名'SayHi'，server端接受callback键对应值后就可以在其中填充数据打包返回了;

jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。　　

注意 JSONP一定是GET请求

应用

<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />

<div id="container"></div>

    <script type="text/javascript">

        function AjaxRequest() {

            $.ajax({

                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',

                type: 'GET',

                dataType: 'jsonp',

                jsonp: 'callback',

                jsonpCallback: 'list',

                success: function (data) {

                    $.each(data.data,function(i){

                        var item = data.data[i];

                        var str = "<p>"+ item.week +"</p>";

                        $('#container').append(str);

                        $.each(item.list,function(j){

                            var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";

                            $('#container').append(temp);

                        });

                        $('#container').append("<hr/>");

                    })

                }

            });

        }

</script>

Ajax跨域请求同源策略与Jsonp的更多相关文章

09. ajax跨域问题,同源策略
有三个标签允许跨域加载资源 <img src=“”/> <link href=“”/> <script src=“”> 可以做防盗链图片功能前端使用jsonp ...
[CORS：跨域资源共享] 同源策略与JSONP
Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...
ajax跨域请求解决方案 CORS和JSONP
什么是跨域: 只要协议.域名.端口有任何一个不同,都会被当成不同的域.而由于浏览器的同源策略(同源策略:域名.协议.端口均相同),浏览器之间要隔离不同域的内容,禁止互相操作,不能执行其他网站的js.所 ...
Django之跨域请求同源策略
同源策略: 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 而如果我们要跳过这个策略,也就是说非要跨域请求,那么就需要通过 ...
跨域访问 - 跨域请求同源策略概念对跨域请求的影响及几种解决跨域请求的方法如 jsonp
为什么会设置同源策略 > 适用于浏览器的一种资源访问策略 > 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览 ...
jsonp其实很简单【ajax跨域请求】
js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...
Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法
同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源 ...
JSONP实现Ajax跨域请求
前言由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）
1. 学习计划第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建需要创建一个sso服务工程,可 ...

随机推荐

第二百五十九节，Tornado框架-模板语言的三种方式
Tornado框架-模板语言的三种方式模板语言就是可以在html页面,接收逻辑处理的self.render()方法传输的变量,将数据渲染到对应的地方一.接收值渲染 {{...}}接收self.re ...
javascript -- 事件捕获，事件冒泡
使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会 ...
php -- 设计模式之单例模式
实现单例的条件:三私一公三私:私有化构造方法:不让外部创建对象私有化克隆方法:不让外部克隆对象私有静态属性:保存已经产生的对象一公:公共静态方法:在类内部创建对象实例: <?php / ...
【cf489】D. Unbearable Controversy of Being（暴力）
http://codeforces.com/contest/489/problem/D 很显然,我们只需要找对于每个点能到达的深度为3的点的路径的数量,那么对于一个深度为3的点,如果有a种方式到达,那 ...
对mysql锁机制的学习
1.对于mysql学习,经常翻看一些博客,论坛,好像或多或少有mysq锁机制的学习与总结,所以今天有必要对mysql锁机制的一些个人的总结,以便以后深入的学习. 2.学习这件事,从来都是“深入浅出” ...
XDocument简单入门
[+] 1.什么是XML? 2.XDocument和XmlDocument的区别? 3.XDocument 4.XmlDocument 5.LINQ to XML 6.XML序列化与反序列化因为 ...
Spring_day02--Spring的aop操作
Spring的aop操作 1 在spring里面进行aop操作,使用aspectj实现 (1)aspectj不是spring一部分,和spring一起使用进行aop操作 (2)Spring2.0以后新 ...
编程之美 set 17 拈游戏分析 (2)
题目有 N 块石头河两个玩家 A 和 B. A 先将石头分成若干堆, 然后按照 BABABA... 的顺序轮流取石块, 能将剩下的石头依次取光的玩家获胜. 每次取石头时, 每个玩家只能取一堆的 m( ...
编程之美 set 3 最大公约数问题
解法 1. f(x,y) = f(y, y%x) (y>0) 辗转相除法 2. 取模运算较为耗时, 将取模变成相减. 但对极端数据效果很差, 比如 gcd(1000,1) 3. 分析公约数的特点 ...
应急分析异常通信的小思路和自己写的小工具（查询CNAME和A记录）
一.背景: 在很多时候,应急会发现.卧槽,异常连接,只有一个域名或者IP. 怎么办?上防火墙看记录,查域名对应的记录累成狗,自己把之前的代码改了改,写了个小工具,一条命令查询DNS相关记录,也可以指定 ...

Ajax跨域请求 同源策略与Jsonp