关于jsonp跨域问题，在这个方面也是了解一点点，先记录下来，主要作为以后查看，之前下载并安装过wampserver，了解到了jsonp和json的区别，现在谈谈跨域这个问题：

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制

浏览器的同源策略

古代的楚河汉界明确规定了楚汉两军的活动界限，理应遵守，否则必天下大乱，而事实上天下曾大乱后又统一。这里我们不用管这些“分久必合，合久必分”的问题，关键是看到这里规定的“界限”。

Web世界之所以能如此美好地呈现在我们面前，多亏了浏览器的功劳，不过浏览器不是一个花瓶——只负责呈现，它还制定了一些安全策略，这些安全策略有效地保障了用户计算机的本地安全与Web安全。

计算机的本地与Web是不同的层面，Web世界（通常称为Internet域）运行在浏览器上，而被限制了直接进行本地数据（通常称为本地域）的读写。

同源策略是众多安全策略的一个，是Web层面上的策略，非常重要，如果少了同源策略，就等于楚汉两军没了楚河汉界，这样天下就大乱了。

同源策略规定：不同域的客户端脚本在没明确授权的情况下，不能读写对方的资源。

下面分析同源策略下的这个规定，其中有几个关键词：不同域、客户端脚本、授权、读写、资源。

1．不同域或同域

同域要求两个站点同协议、同域名、同端口，比如：下列所列站点与http://www.foo.com是否同域的情况。

https://www.foo.com不同域，协议不同，https与http是不同的协议

http://xeyeteam.foo.com不同域，域名不同，xeyeteam子域与www子域不同

http://foo.com不同域，域名不同，顶级域与www子域不是一个概念

http://www.foo.com:8080不同域，端口不同，8080与默认的80端口不同

http://www.foo.com/a/同域，满足同协议、同域名、同端口，只是这里多了一个目录而已

跨域请求的含义特别注意两点：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的

第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

2．客户端脚本

客户端脚本主要指JavaScript（各个浏览器原生态支持的脚本语言）、ActionScript（Flash的脚本语言），以及JavaScript与ActionScript都遵循的ECMAScript脚本标准。Flash提供通信接口，使得这两个脚本语言可以很方便地互相通信。客户端的攻击几乎都是基于这两个脚本语言进行的，当然JavaScript是最广泛的。

 

3．授权

一般情况下，看到这个词，我们往往会想到服务端对客户端访问的授权。客户端也存在授权现象，比如：HTML5新标准中提到关于AJAX跨域访问的情况，默认情况下是不允许跨域访问的，只有目标站点（假如是http://www.foo.com）明确返回HTTP响应头：

Access-Control-Allow-Origin: http://www.evil.com

那么www.evil.com站点上的客户端脚本就有权通过AJAX技术对www.foo.com上的数据进行读写操作。这方面的攻防细节很有趣，相关内容在后面会详细介绍。

4．读写权限

Web上的资源有很多，有的只有读权限，有的同时拥有读和写的权限。比如：HTTP请求头里的Referer（表示请求来源）只可读，而document.cookie则具备读写权限。这样的区分也是为了安全上的考虑。

5．资源

资源是一个很广泛的概念，只要是数据，都可以认为是资源。同源策略里的资源是指Web客户端的资源。一般来说，资源包括：HTTP消息头、整个DOM树、浏览器存储

（如：Cookies、Flash Cookies、localStorage等）。客户端安全威胁都是围绕这些资源进行的。

注：DOM全称为Document Object Model，即文档对象模型，就是浏览器将HTML/XML这样的文档抽象成一个树形结构，树上的每个节点都代表HTML/XML中的标签、

标签属性或标签内容等。这样抽象出来就大大方便了JavaScript进行读/写操作。Web客户端的攻击几乎都离不开DOM操作。

到此，已经将同源策略的规定分析清楚，如果Web世界没有同源策略，当你登录Gmail邮箱并打开另一个站点时，这个站点上的JavaScript就可以跨域读取你的Gmail邮箱数据，

这样整个Web世界就无隐私可言了。这就是同源策略的重要性，它限制了这些行为。当然，在同一个域内，客户端脚本可以任意读写同源内的资源，前提是这个资源本身是可读可写的。

1.　　例子1：假设有两个端口（http://www.tutu.com:8080和http://www.tutu.com:8081）
在F:\wamp\www\index1下面有个jsonp.html，代码如下：
<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script>

        var localHandler = function(data){

        alert('我是本地函数，可以被跨域的jsonp-remote.js文件调用，远程js带来的数据是：' + data.result);

    };

    </script>

    <script type="text/javascript" src="http://www.tutu.com:8081/jsonp-remote.js"></script>

</head>

<body>

</body>

</html>

　　在F:\wamp\www\index2下面有个jsonp-remote.js，代码如下：

/* alert('我是远程文件'); */

localHandler({"result":"我是远程js带来的数据aaaabbb"});
2.　　例子2：在F:\wamp\www\index1下面有个jsonp1.html，代码如下：
<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript" src="jquery.js"></script>

</head>

<body>

 <script type="text/javascript">

     jQuery(document).ready(function(){

        $.ajax({

             type: "get",

             async: false,

             url: "http://www.tutu.com:8081/jsonp1-flightResult.aspx",

             dataType: "jsonp",

             //jsonp: "callbackkkk",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)    ?????    

             //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了？？

             //上面这句话怎么解释？

             //加上  jsonp:"callbackkkk" 这句话，为：?callbackkkk=flightHandler，相当于参数

             //没有的话：默认?callback=flightHandler

             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

             //由于服务器不知道客户端的回调是什么，不可能hard code成jsonpcallback，

             //所以就带一个QueryString让客户端告诉服务端，回调方法是什么，

             //当然，QueryString的key要遵从服务端的约定，这里是callbackkkk或者默认的”callback“。

             success: function(json){

                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets+'张。');

             },

             error: function(){

                 alert('fail');

             }

         });

         //

         //

     });

     </script>

</body>

</html>

在F:\wamp\www\index2下面有个jsonp1-flightResult.aspx，代码如下：

flightHandler({

    "code": "CA1998",

    "price": ,

    "tickets":

});

3.　　例子3：在F:\wamp\www\index1下面有个jsonp2.html，代码如下：（例子三有问题，放在这提醒自己）

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

     jQuery(document).ready(function(){

        $.ajax({

             type: "get",

             async: false,

             url: "http://www.tutu.com:8081/jsonp2-flightResult.html?code=CA1998",

             dataType: "jsonp",

             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

             success: function(json){

                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');

             },

             error: function(){

                 alert('fail');

             }

         });

     });

     </script>

</head>

<body>

</body>

</html>

在F:\wamp\www\index2下面有个jsonp1-flightResult.aspx，代码如下

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript">

        var flightHandler = {

            "code": "CA1998",

            "price": 1780,

            "tickets": 5

        }

    </script>

</head>

<body>

</body>

</html>
怎样将Javascript对象转化成json，发送？可以使用jquery.json插件，这里没有使用，所以例三是不完整的

4.　　例子4：在F:\wamp\www\index1下面有个jsonp-a.html，代码如下：
<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript" src="jquery.js"></script>

</head>

<body>

<script>

$(document).ready(function(){

    $("#web").click(function(){

        $.ajax({

            type : "get",

            async:false,

            url : "http://www.tutu.com:8081/jsonp-b.php",

            dataType : "jsonp",

            data:{key:6},

            //?jsonpcallback=jQuery1830070291701721...

            jsonp: "jsonpcallback",//服务端用于接收callback调用的function名的参数                        

            //首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字jsoncallback

            //(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，

            //要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，

            //服务器生成 json 数据才能被客户端正确接收。

            //然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

            //最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

            //客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据,作为参数，

            //传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.（动态执行回调函数）

            //jsonpCallback:"flightHandler"//没有这句

            success : function(json){

                //alert(json);

                alert(json[0].name+'777');

                var newstr='';

                $.each(json,function(i,v){

                    newstr = newstr +' '+ v.id + "     " + v.name;

                });

                $("#result").append(newstr);

            },

            error:function(){

                alert('fail');

            }

        });

    })

})

</script>

<button id="web">ajax跨域</button>

<div id="result" style="font-size:30px;color:red"></div>

</body>

</html>

在F:\wamp\www\index2下面有个jsonp-b.php，代码如下

<?php

if( isset($_GET['jsonpcallback']) ){

    //php里面的$_GET 变量用于收集来自 method="get" 的表单中的值。

    //输出jsonp格式的数据

    $a=$_GET['key']+1;

    echo $_GET['jsonpcallback']."([{id:".$a.",name:'data001'},{id:2,name:'data002'}])";

    exit();

} 
以上是参考资料后自己的部分实践

我的jsonp跨域问题的更多相关文章

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 借助node实战JSONP跨域

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...

  3. jsonp跨域+ashx（示例）

    前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...

  4. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  5. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

  6. jsonP跨域调用

    -------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...

  7. JSONP跨域的原理解析( 一种脚本注入行为)

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...

  8. jsonp跨域问题

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式). 同源策略限制 ...

  9. JSONP跨域的原理解析

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...

随机推荐

  1. October 15th 2016 Week 42nd Saturday

    Word to World. There are only two kinds of people who are really fascinating, people who know absolu ...

  2. PHP基础之POST与GET

    post 与 get区别 *.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示.*.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的限制,只能传递大约1 ...

  3. JS回调函数全解析教程

    转自:http://blog.csdn.net/lulei9876/article/details/8494337 自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速g ...

  4. OpenStack 云计算基础知识

    OpenStack Docs: Currenthttp://docs.openstack.org/ OpenStack云计算快速入门教程 - OpenStack及其构成简介_服务器应用_Linux公社 ...

  5. 3.Java异常进阶

    3.JAVA异常进阶 1.Run函数中抛出的异常 1.run函数不会抛出异常 2.run函数的异常会交给UncaughtExceptionhandler处理 3.默认的UncaughtExceptio ...

  6. 浅谈C语言中结构体的初始化

    转自:http://www.jb51.net/article/37246.htm <代码大全>建议在变量定义的时候进行初始化,但是很多人,特别是新人对结构体或者结构体数组定义是一般不会初始 ...

  7. 宿主机ping不通虚拟机cenos7

    参考网址1:http://zhidao.baidu.com/link?url=2v3NXGyzPT-XTYwon8PesZLnMg02Ako6nDub3vJiJt4miSmkOA-04xLUqfu9s ...

  8. 解决SVN更新代码是出现previous operation has not finished; run cleanup if it was interrupted这个错误

    解决方法:清空svn的队列 1.下载sqlite3.exe 2.找到你项目的.svn文件,查看是否存在wc.db   (查看.svn文件需要打开显示隐藏文件夹) 3.将sqlite3.exe放到.sv ...

  9. idapython在样本分析中的使用-字符解密

    最近接手的一个样本,样本中使用了大量的xor加密,由于本身样本不全,无法运行(好吧我最稀饭的动态调试没了,样本很有意思,以后有时间做票大的分析),这个时候就只好拜托idapython大法了(当然用id ...

  10. one_person年轻的程序员

    回顾大学三年,通过良师的教导和自身的刻苦学习,我已初步掌握如何运用计算机编程,也养成了认真对待学习和工作的好习惯! 在思想品德上,本人有良好道德修养,并有坚定的政治方向.我热爱祖国,热爱人民,遵纪守法 ...