JSONP理解

发布时间：2020-12-16 19:37:09 所属栏目：百科来源：网络整理

导读：1. 定义 JSONP（JSON with Padding）是一个非官方的协议，它允许有服务器端集成Script tags返回至客户端，通过JavaScript callback的形式实现跨域访问。 2. 作用由于同源策略的限制，XMLHttpRequest只允许请求当前源（域名、协议、端口都相同的域）的资源，

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!