关于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:wampwwwindex1下面有个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:wampwwwindex2下面有个jsonp-remote.js，代码如下：
/* alert('我是远程文件'); */ localHandler({"result":"我是远程js带来的数据aaaabbb"});
- 2. 例子2：在F:wampwwwindex1下面有个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:wampwwwindex2下面有个jsonp1-flightResult.aspx，代码如下：
flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 });
3. 例子3：在F:wampwwwindex1下面有个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:wampwwwindex2下面有个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:wampwwwindex1下面有个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:wampwwwindex2下面有个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(); }
以上是参考资料后自己的部分实践