JSONP教程

Jsonp (JSON with Padding) è una "modalità di utilizzo" di json che permette a una pagina web di ottenere informazioni da altri domini (siti web), ovvero di leggere dati cross-domain.

Cos'è JSONP?

JSONP rappresenta un JSON con riempimento.

A causa delle strategie di cross-domain, richiedere file da un altro dominio potrebbe causare problemi.

richiedere script esterni da un altro dominio non presenta questo problema.

JSONP sfrutta questo vantaggio e utilizza<script>usa un tag di script invece dell'oggetto XMLHttpRequest per richiedere il file.

　　<script src="jsonp_demo.php">

Il file sul server (jsonp_demo.php) impacchetta il risultato all'interno di una chiamata di funzione:

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

La funzione "myFunc" è situata sul lato client e può elaborare dati 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);
}