Jsonp的学习笔记

时间 2019-12-07

标签 jsonp 学习笔记栏目 JSON 繁體版

原文原文链接

最近学习了jsonp，在这里总结一下javascript

一、什么是同源策略？跨域？php

　　首先，jsonp是为了解决跨域而产生的一种手段。跨域是由于浏览器都知足与一种同源策略。html

　　何谓同源:
        URL由协议、域名、端口和路径组成，若是两个URL的协议、域名和端口相同，则表示他们同源。
  同源策略:
        浏览器的同源策略，限制了来自不一样源的"document"或脚本，对当前"document"读取或设置某些属性
        从一个域上加载的脚本不容许访问另一个域的文档属性。java

二、解决跨域问题的方法　jquery

　　(1)、Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一概不许；不过咱们又发现，Web页面上调用js文件时则不受是否跨域的影响（不只如此，咱们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，好比<script>、<img>、<iframe>）；web

　　(2)、因而能够判断，当前阶段若是想经过纯web端（ActiveX控件、服务端代理、属于将来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；ajax

　　(3)、恰巧咱们已经知道有一种叫作JSON的纯字符数据格式能够简洁的描述复杂数据，更妙的是JSON还被js原生支持，因此在客户端几乎能够为所欲为的处理这种格式的数据；apache

　　(4)、这样子解决方案就呼之欲出了，web客户端经过与调用脚本如出一辙的方式，来调用跨域服务器上动态生成的js格式文件（通常以JSON为后缀），显而易见，服务器之因此要动态生成JSON文件，目的就在于把客户端须要的数据装入进去。json

　　(5)、客户端在对JSON文件调用成功以后，也就得到了本身所需的数据，剩下的就是按照本身需求进行处理和展示了，这种获取远程数据的方式看起来很是像AJAX，但其实并不同。跨域

　　(6)、为了便于客户端使用数据，逐渐造成了一种非正式传输协议，人们把它称做JSONP，该协议的一个要点就是容许用户传递一个callback参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了。

三、跨域服务器

　　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/.

四、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 ~

结果：

五、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>