JSONP 教程

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

什么是JSONP？

JSONP表示带有填充的JSON。

由于跨域策略，从另一个域请求文件可能会导致问题。

从另一个域请求外部脚本不会出现此问题。

JSONP利用了这一优势，并使用<script>标记而不是XMLHttpRequest对象来请求文件。

  <script src="jsonp_demo.php">

服务器上的文件（jsonp_demo.php）将结果包装在函数调用中：

  <?php
  $myJSON = '{ "name":"Seagull", "age":32, "city":"New Delhi" }';
  echo "myFunc(".$myJSON.");";
  ?>

名为“ myFunc”的函数位于客户端上，可以处理JSON数据：

function myFunc(myObj) {
  document.getElementById("output").innerHTML = myObj.name;
}

JSON和JSONP之间的区别

JSON： JavaScript使用JSON（JavaScript对象表示法）通过网络交换数据。它仔细查看JSON数据，它只是一个字符串格式的JavaScript对象。

  { "name":"Seagull", "age":22, "city":"New Delhi" }

JSONP： JSONP是带有填充的JSON。在这里，填充意味着将函数包装在JSON中，然后再返回到请求中。

  myFunc({ "name":"Seagull", "age":22, "city":"New Delhi" })

使用JSONP的方法

• 在HTML代码中，包括script标签。该脚本标签的来源将是要从中检索数据的URL。Web服务允许指定回调函数。在URL中，最后包含callback参数。

• 当浏览器遇到script元素时，它将HTTP请求发送到源URL。

• 服务器使用封装在函数调用中的JSON发送回响应。

• 浏览器会解析字符串形式的JSON响应并将其转换为JavaScript对象。调用回调函数，并将生成的对象传递给它。

创建动态脚本标签

上面的示例将在页面加载时根据放置script标记的位置执行“ myFunc”功能。

但是，仅应在需要时创建脚本标签。

下面的示例将在单击按钮时创建并插入<script>标记：

function createScriptDynamically() {
  var elem = document.createElement("script");
  elem.src = "jsonp_demo.php";
  document.body.appendChild(elem);
}