万能糖果公司web应用——从服务器获取数据

最新推荐文章于 2022-08-23 19:46:07 发布

产品汪的进阶

最新推荐文章于 2022-08-23 19:46:07 发布

阅读量516

点赞数

文章标签： html javascript web应用服务器

本文链接：https://blog.csdn.net/pingguoyuan/article/details/53334778

版权

1.源代码（HTML部分）：

<!doctype html>
<html lang="en">

<head>
<title>Mighty Gumball (JSON)</title>
<meta charset="utf-8">
<script src="mightygumball.js"></script>
<link rel="stylesheet" href="mightygumball.css">
</head>
<body>
<h1>Mighty Gumball Sales</h1>
<div id="sales">
</div>
<script>
function handleRefresh() {
var url = "http://gumball.wickedlysmart.com?callback=updateSales"+"&random="+(new Date()).getTime(); //加个随机串，防止每次读取缓存

var newScriptElement = document.createElement("script");
newScriptElement.setAttribute("src", url);
newScriptElement.setAttribute("id", "jsonp"); //创建script元素

var oldScriptElement = document.getElementById("jsonp");
var head = document.getElementsByTagName("head")[0];//取<head>元素数组的第一个

if (oldScriptElement == null) {
head.appendChild(newScriptElement);
}else {
head.replaceChild(newScriptElement, oldScriptElement);
}//设置script更新

}
window.onload = function () {
setInterval(handleRefresh, 3000);
}//每3s调用一次刷新函数

</script>
</body>
</html>

2.源代码（JS部分）

//向DOM中插入div的函数，在不进行自动刷新的时候可以使用

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);
}
}