jsonp原理

http://blog.csdn.net/u014607184/article/details/52027879

一、同源策略

要理解跨域，先要了解一下“同源策略”。所谓同源是指，域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。

一些常见的是否同源示例可参照下表：

这里写图片描述

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的。例如我们在自己的网站通过ajax去获取豆瓣上https://developers.douban.com/wiki/?title=api_v2提供的接口数据。这里我们以搜索图书为例，参数链接为：https://api.douban.com/v2/book/search?q=javascript&count=1，该链接中数据为JSON格式，如下：

这里写图片描述

我通过如下代码去访问该数据： 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> </head> <body> <div id="mydiv"> <button id="btn">点击</button> </div> </body> <script type="text/javascript"> window.onload = function() { var oBtn = document.getElementById('btn');

    oBtn.onclick = function() { var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) {
                    alert( xhr.responseText );
            }
        };

        xhr.open('get', 'https://api.douban.com/v2/book/search?q=javascript&count=1', true);
        xhr.send(); 
    };

}; </script> </html>上述程序运行时会报错：

这里写图片描述

但<img>的src（获取图片），<link>的href（获取css），<script>的src（获取javascript）这三个都不符合同源策略，它们可以跨域获取数据。这里要介绍的JSONP就是利用<script>的src来实现跨域获取数据的。

二、JSONP

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。

JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

动态创建<script>标签，设置其src，回调函数在src中设置： 

var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild);
	
    
		
		
  • 
			1
		
    • 

		
  • 
			2
		
    • 

		
  • 
			3
		
    •

在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。 

function handleResponse(response){ // 对response数据进行操作代码
了解了JSONP的基本使用方法，我们在实现上面通过ajax调用豆瓣接口的需求，实现代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JSONP实现跨域2</title> </head> <body> <div id="mydiv"> <button id="btn">点击</button> </div> </body> <script type="text/javascript"> function handleResponse(response){ console.log(response);
    } </script> <script type="text/javascript"> window.onload = function() { var oBtn = document.getElementById('btn');

    oBtn.onclick = function() { var script = document.createElement("script");
        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
        document.body.insertBefore(script, document.body.firstChild);   
    };
}; </script> </html>在控制台，我们可以查看到返回的response数据格式为JSON对象格式的，具体需要取出哪些参数，可以根据自己的需要：

这里写图片描述

JSONP目前还是比较流行的跨域方式，虽然JSONP使用起来方便，但是也存在一些问题： 
首先， JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。

其次，要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给<script>元素新增了一个 onerror事件处理程序，但目前还没有得到任何浏览器支持。为此，开发人员不得不使用计时器检测指定时间内是否接收到了响应。

二、jQuery封装JSONP

对于经常用jQuery的开发者来说，能注意到jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。需要了解的一点是，虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样。

通过jQuery的$.ajax实现跨域的代码参考如下： 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery实现JSONP</title> </head> <body> <div id="mydiv"> <button id="btn">点击</button> </div> </body> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $.ajax({
                async : true,
                url : "https://api.douban.com/v2/book/search",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式 jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback jsonpCallback: 'handleResponse', //设置回调函数名 data : {
                    q : "javascript", 
                    count : 1 }, 
                success: function(response, status, xhr){ console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                    console.log(response);
                }
            });
        });
    }); </script> </html>
最后的结果与JavaScript通过动态添加<script>标签得到的结果是一样的。

这里写图片描述

通过$.getJSON(）

利用getJSON来实现，只要在地址中加上callback=?参数即可，参考代码如下： 

$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){ console.log(data);
            });
	
    
		
		
  • 
			1
		
    • 

		
  • 
			2
		
    • 

		
  • 
			3
		
    •

这样也能实现跨域的功能。

http://www.jb51.net/article/38874.htm

http://test.a.com/index.php

<?php
header("content-type:text/html;charset=utf-8");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
     <title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){
        $.ajax({
             type: "GET",
             async: false,
             //url: "http://test/jsonp.php",
             url:"http://www.a.com/jsonp.php",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
             success: function(json){
                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。回调函数名为: '+json.func);
             },
             error: function(){
                 alert("fail");
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
 </html>
http://www.a.com/jsonp.php

root@bananapi /var/www/html # cat jsonp.php
<?php
$callback = $_GET["callback"];
$a = array(
 'code'=>'CA1998',
    'price'=>'6000',
    'tickets'=>20,
    'func'=>$callback,
);
$result = json_encode($a);
echo "flightHandler($result)";

转:http://www.runoob.com/json/json-jsonp.html

JSONP 教程

本章节我们将向大家介绍 JSONP 的知识。

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

JSONP 应用

1. 服务端JSONP格式数据

如客户想访问 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假设客户期望返回JSON数据：["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码为：

jsonp.php 文件代码

<?php header('Content-type: application/json'); //获取回调函数名 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json数据 $json_data = '["customername1","customername2"]'; //输出jsonp格式的数据 echo $jsoncallback . "(" . $json_data . ")"; ?>

2. 客户端实现 callbackFunction 函数

<script type="text/javascript"> function callbackFunction(result, methodName) { var html = '<ul>'; for(var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; } </script>

页面展示

<div id="divCustomers"></div>

客户端页面完整代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 实例</title> </head> <body> <div id="divCustomers"></div> <script type="text/javascript">
function callbackFunction(result, methodName) { var html = '<ul>'; for(var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; }
</script> <script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> </body> </html>

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 实例</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div id="divCustomers"></div> <script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { var html = '<ul>'; for(var i = 0; i < data.length; i++) { html += '<li>' + data[i] + '</li>'; } html += '</ul>';
$('#divCustomers').html(html); });
</script> </body> </html>

    A+
发布日期：2016年11月02日  所属分类：未分类

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: