Jsonp的学习笔记
最近学习了jsonp，在这里总结一下
1、什么是同源策略？跨域？
首先，jsonp是为了解决跨域而产生的一种手段。跨域是因为浏览器都满足与一种同源策略。
何谓同源:
URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
同源策略:
浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性
从一个域上加载的脚本不允许访问另外一个域的文档属性。
2、解决跨域问题的方法
(1)、Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；
(2)、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；
(3)、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；
(4)、这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。
(5)、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。
(6)、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
3、跨域服务器
jsonp是利用<script>的跨域能力来实现，src的值为另一个域下的文件目录，即可实现跨域访问.
首先我在一个服务器上apache开启了两个端口80与800，apache的默认端口为80，只需打开800端口即可，进入/etc/httpd/conf/httpd.conf配置文件，把最后的一段注释改写成以下：
1 <VirtualHost *:800> 2 ServerAdmin webmaster@dummy-host.example.com 3 DocumentRoot /var/www/web1 4 ServerName 101.200.175.86:800 5 # ErrorLog logs/dummy-host.example.com-error_log 6 # CustomLog logs/dummy-host.example.com-access_log common 7 </VirtualHost>
重启即可，打开网页，url:800即可进入新的域，网页的根目录为www/web1/.
4、jsonp的实例
现在我们有两个域，在800端口下新建一个jsonp.html文件，在80端口下新建一个re.php文件，这里html文件将调用在其他域下的php文件，实现一个查询取数据功能
jsonp.html
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 var localHandler = function(data){ 8 alert(data.a); //返回后台数组中a的数值 9 } 10 var url = "http://101.200.175.86/re.php?callback=localHandler"; 11 // 创建script标签，设置其属性 12 var script = document.createElement('script'); 13 script.setAttribute('src', url); 14 // 把script标签加入head，此时调用开始 15 document.getElementsByTagName('head')[0].appendChild(script); 16 </script> 17 </head> 18 <body> 19 <button id="getOtherDomainThings">1111111</button> 20 21 </body> 22 </html>
url中可以添加参数
http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler
传入php文件，实现检索的作用
re.php
1 <?php 2 3 $callback = $_REQUEST['callback']; //request同时接受get与post 4 5 $output = array('a' => 'Apple', 'b' => 'Banana'); 6 7 if ($callback) { 8 header('Content-Type: text/javascript'); 9 echo $callback . '(' . json_encode($output) . ');'; //json_encode方法，对象转换为json 10 } else { 11 header('Content-Type: application/x-json'); 12 echo json_encode($output); 13 } 14 15 ?> 16 ~
结果：
5、jquery的实现方法
jquery中把jsonp方法整合进了ajax中，但是ajax与jsonp完全不相同，ajax是通过xmlhttprequest对象来传递，jsonp是利用<script>在不同域的传递。
例子：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script typpe="text/javascript" src="jquery-2.1.1.js"></script> 7 </head> 8 <body> 9 <script> 10 $(function(){ 11 $.ajax({ 12 type:"get", 13 url:"http://101.200.175.86/re.php", 14 dataType:"jsonp", //设置为jsonp格式，会实现自动的格式自动替换函数名等功能 15 jsonp:"callback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名，等于callback=？ 16 //jsonpCallback:"localHandler", //callback=？函数的中？的值，可以不写，jqeury会自动处理 17 success:function(data){ 18 alert(data.a); 19 } 20 }) 21 }) 22 </script> 23 </body> 24 </html>
