close

1.伺服端建立資料代理程式(代理proxy):

伺服端語言:asp.net、php、nodejs、ruby

 

2.jsonp

json with padding

 

3.cors

cross-origin resource sharing

跨來源資源共享,http標頭加額外資訊

 

jsonp

瀏覽器端:回傳+請求

伺服器端:和瀏覽器端同函式(資料放引數內)

網址列?callback=你的函式名稱

 

<!-- 檔案:0914-1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.meal{
			border: 1px solid #aaa;
			padding: 20px;
			display: inline-block;
		}
	</style>
</head>
<body>
	<div id="content"></div>
	<script type="text/javascript">
		function getData(data){
			var DOMElement='';
			for (var i = 0; i < data.meals.length; i++) {
				DOMElement+=
					'<div class="meal"> <h2>主餐:'+data.meals[i].main+'</h2> <h3>飲料:'+data.meals[i].beverage+'</h3> <img src="'+data.meals[i].pic+'"> <h2>價格:'+data.meals[i].price+'</h2> </div>'
			}
			document.getElementById('content').innerHTML=DOMElement;
		}
	</script>
	<script src="http://www.bd101g2.byethost15.com/data/0914.js?callback=getData"></script>
</body>
</html>
// 檔案:data/0914.js
getData({
	"meals":[
		{
			"main":"漢堡",
			"beverage":"可樂",
			"price":"500",
			"pic":"https://api.fnkr.net/testimg/50x50/a00/FFF/?text=A"

		},{
			"main":"炸雞",
			"beverage":"雪碧",
			"price":"400",
			"pic":"https://api.fnkr.net/testimg/50x50/0a0/FFF/?text=B"

		},{
			"main":"吐司",
			"beverage":"紅茶",
			"price":"300",
			"pic":"https://api.fnkr.net/testimg/50x50/00a/FFF/?text=C"

		}

	]
})

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Jerry 的頭像
    Jerry

    Bug倉庫 // 程式日記

    Jerry 發表在 痞客邦 留言(0) 人氣()