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"
}
]
})
沒有留言:
張貼留言