JSONP理解

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函数里。