JSONP理解

来源：互联网发布：洛杉矶旅游攻略知乎编辑：程序博客网时间：2024/05/29 11:09

1. 定义

JSONP（JSON with Padding）是一个非官方的协议，它允许有服务器端集成Script tags返回至客户端，通过JavaScript callback的形式实现跨域访问。

2. 作用

由于同源策略的限制，XMLHttpRequest只允许请求当前源（域名、协议、端口都相同的域）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务器端输出JSON数据并执行回调函数，从而解决了跨域的访问。

3. 使用

下面通过一个例子来学习JSONP的实现方式。在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务器端返回相应的数据并动态执行回调函数。

HTML代码：

<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/><script>     function jsonpCallback(result) {          for(var i in result) {               console.log(i+":"+result[i]);          }     }     var JSONP = document.createElement("script");     JSONP.type = "text/javascript";     JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";     document.getElementsByTagName("head")[0].appendChild(JSONP);</srcipt>

或者：

<meta conent="text/html;charset=utf-8" http-equiv="Content-Type"/>     <script>          function jsonpCallback(result) {               for(var i in result) {                    console.log(i+":"+result[i]);               }          }     </script>     <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

以上两种方式的实现结果是相同的。这里要注意一点：JavaScript的链接必须在回调函数function实现的在下面。
服务器PHP代码：

<?php          $arr = array('a'=>1. 'b'=>2, 'c'=>3, 'd'=>4);          $callback = $_GET['callback'];          return $callback."(".json_encode($arr).")"; ?>

这样就简单地实现了jsonp的跨域请求数据。

下面我们来看下jQuery中的使用方式：
方式1：

<script type="text/javascript" src="jquery.js"></script>     <script>          $.getJSON("http://crossdomain.com/services.php?callback=?", function(result) {               for(var i in result) {                    console.log(i+":"+result[i]);               }          });</script>

方式2：

<script type="text/javascript" src="jquery.js"></script>     <script>          $.ajax({               url: 'http://crossdomain.com/services.php ',               type: 'GET',               dataType: 'jsonp',               data: '',               jsonp: 'callback',               success:   function(result) {                    for(var i in result) {                         console.log(i+":"+result[i]);                    }               },               timeout: 3000          });</script>

方式3：

<script type="text/javascript" src="jquery.js"></script>     <script>          $.get('', {name:encodeURIComponenet('tester')}, function(result) {                for(var i in result) {                     console.log(i+":"+result[i]);                }          });</script>

其中，jsonCallback是客户端注册的，用于执行获取跨域服务器上的json数据后的回调函数。服务器端返回的数据格式如下：

 jsonpCallback({msg:'return data'});

4. 原理

首先在客户端注册一个callback，然后把callback的名字传给服务器，服务器将生成的json数据以javascript语法的方式，生成一个function，这个function的名字就是传递过来的参数callback，最后将json数据直接以参数方式放入到function中，生成一段js语法的数据，返回给客户端，客户端浏览器解析script标签，并执行返回的javascript文档，此时数据作为参数，传入到了客户端预先定义好的callback函数里。

0 0