JSONP(JSON with Padding),是一种JSON跨域调用的应用模式,基本原理如下:

  • HTML定义用来处理JSON数据的函数;
  • HTML页面中使用<script>加载远程服务器内容,并将本页面建立的函数名称和其它数据参数传给服务器;
  • 远程服务器返回包含函数名调用并将JSON数据传入函数的JS片段,这样就会将数据传入HTML页面的函数并调用完成数据的传输和处理;

使用JSONP

HTML页面

<!doctype html>
<html>
  <head>
    <title>JSONP Callback</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <div id="sales"></div>
    <script>
      function show_sales(jsonsales) {
        document.getElementById("sales").innerHTML = JSON.stringify(jsonsales);
      }
    </script>
    <script src="http://gumball.wickedlysmart.com/?callback=show_sales"></script>
  </body>
</html>

JSONP服务器端返回

show_sales([{"name":"STOCKTON","time":1449155251328,"sales":5,"longitude":"-121.289206","latitude":"+37.958573"},{"name":"RANCHO SANTA FE","time":1449155254233,"sales":8,"longitude":"-117.046183","latitude":"+32.962307"}]);

show_sales为传入的名称

JSONP数据的更新

可以通过js重新加载jsonp数据,只有script对象在整体被替换才会加载,只改变src是不行的。

function refresh_sales() {
  var url = "http://gumball.wickedlysmart.com?callback=show_sales";
  var new_script_element = document.createElement("script");
  new_script_element.setAttribute("src", url);
  new_script_element.setAttribute("id", "jsonp");

  var old_script_element = document.getElementById("jsonp");
  var head = document.getTagByName("head")[0];
  if(old_script_element == null) {
    head.appendChild(new_script_element);
  } else {
    head.replaceChild(new_script_element, old_script_element);
  }
}

JSONP的缺点

保证提供JSONP返回的服务器是可信的,因为返回中可以包含更多的JS代码,也许是恶意的。

相关内容

· JSONP

[ 编辑 | 历史 ]
最近由“jilili”在“2015-12-20 09:49:23”修改