JSONP

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

使用JSONP

JSONP数据的更新

JSONP的缺点

相关内容