关于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. TCP协议三次握手和四次挥手

    http://www.cnblogs.com/rootq/articles/1377355.html TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对 ...

  2. 51nod1088(最长回文子串)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1088 题意: 中文题目诶~ 思路: 这道题字符串长度限定为1 ...

  3. LeetCode之104. Maximum Depth of Binary Tree

    -------------------------------- 递归遍历即可 AC代码: /** * Definition for a binary tree node. * public clas ...

  4. NetApp 监控

    http://support.ipmonitor.com/mibs/network-appliance-mib/tree.aspx http://www.360doc.com/content/10/1 ...

  5. 【Java EE 学习 47】【Hibernate学习第四天】【sesion】【一级缓存】【懒加载】

    一.Session概述 1.Session 接口是 Hibernate 向应用程序提供的操纵对数据库的最主要的接口, 它提供了基本的保存, 更新, 删除和加载Java 对象的方法. 2.理解Sessi ...

  6. java多线程编程

    一.多线程的优缺点 多线程的优点: 1)资源利用率更好2)程序设计在某些情况下更简单3)程序响应更快 多线程的代价: 1)设计更复杂虽然有一些多线程应用程序比单线程的应用程序要简单,但其他的一般都更复 ...

  7. 简述抽象和封装，对你学习Java有一些作用

    作为一个Java 初学者,对Java的理解可能有些片面,甚至有些错误的理解,对于观看此处的您,希望您选择性观看!!! 天知道我为什么选择学习编程,我不爱编程,但是我既然学习了,还是会努力学习的,在此分 ...

  8. Android ADB命令大全

    通过ADB命令查看wifi密码.MAC地址.设备信息.操作文件.查看文件.日志信息.卸载.启动和安装APK等   ADB很强大,记住一些ADB命令有助于提高工作效率. 获取序列号: adb get-s ...

  9. Linux服务器init 5启动图形界面，报错Retrigger failed udev events的解决方法

    1.开启linux系统的桌面环境,使用startx未成功,报如下错误: 提示:Retrigger failed udev events [root@ /]# startx xauth: creatin ...

  10. Android源码目录结构详解（转载）

    转自:http://blog.csdn.net/xiangjai/article/details/9012387 在学习Android的过程中,学习写应用还好,一开始不用管太多代码,直接调用函数就可以 ...