HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mighty Gumball(JSON)</title>
<script src="gumball.js"></script>
</head>
<body>
<h1>Migthy Gumball Sales</h1>
<div id="sales">
</div>
<script src="http://gumball.wickedlysmart.com/?callback=updateSales"></script>
</body>
</html>
javascript代碼：
window.onload = function(){
}
function updateSales(sales){
var salesDiv = document.getElementById("sales");
for (var i = 0;i<sales.length;i++) {
var sale = sales[i];
var div = document.createElement("div");
div.setAttribute("class","saleItem");
div.innerHTML = sale.name+" sold "+sale.sales+" gumballs";
salesDiv.appendChild(div);
}
}
如上圖代碼，當瀏覽器想請求http://gumball.wickedlysmart.com中的JSON數據時，就會遇到跨域問題而被阻止訪問。
解決辦法是使用JSONP,JSONP是一種使用<script>標記獲取JSON對象的方法，他可以避免XMLHttpRequest的同源安全問題。JSONP的全稱是JSON with padding，含義是在請求返回的JSON中先用一個函數來包裝。
其工作步驟如下：
1、HTML中包含一個<script>元素，這個script的源是一個web服務的URL，這個web服務將爲我們提供JSON數據。
2、當瀏覽器遇到頁面中的<script>元素，會向src中的URL發送一個HTTP請求。
3、服務器正常處理這個請求，發送回JSON數據，不過在發送JSON串之前，會將它包裝在一個函數調用中，如updateSales調用。
4、解析和解釋JSON響應時，它包裝在一個函數調用中，所以會調用這個函數，並把由JSON串創建的對象傳入這個函數。
注：web服務器允許指定一個回調函數，也就是自己命名函數。一般Web服務將其命名爲callback，可以查看自己的web服務文檔，明確web服務實際使用的參數名。
使用<script>加載JavaScript就不再安全了。
如果向一個惡意Web服務器發出一個JSONP請求，響應中可能包含有開發者不需要的JavaScript代碼，瀏覽器會執行這些惡意的代碼。所以要謹慎選擇所鏈接的web服務。