利用Ajax模拟黄金市场价格变化：
三个文件：
goldPrice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<title>金价</title>
<script type="text/javascript" src="my.js"></script>
<script type="text/javascript">
var myXmlRequest="";
var timeout=setInterval(function updatePrice() {
myXmlRequest=getXmlHttpObjet();
if(myXmlRequest){
var url ="goldPricePro.jsp";
var data="city=Id&city=tw&city=dj";
myXmlRequest.open("post",url,true);
myXmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlRequest.onreadystatechange=chuli;
myXmlRequest.send(data);
}
},3000);
function chuli() {
if(myXmlRequest.readyState==4){
$("yc").innerHTML=myXmlRequest.responseText;
var value= $("yc").innerText;
console.log(value);
value=eval("("+value+")");
$("Id").innerText=value[0].price;
$("tw").innerText=value[1].price;
$("dj").innerText=value[2].price;
}
}
</script>
</head>
<body οnlοad="updatePrice()">
<h1>五秒更新数据</h1>
<p id="yc" hidden></p>
<table border="1" >
<tr ><td colspan="3"></td></tr>
<tr><td>市场</td><td>最新价格</td><td>涨跌</td></tr>
<tr><td>伦敦</td><td id="Id">788.7</td></tr>
<tr><td>台湾</td><td id="tw">854.0</td></tr>
<tr><td>东京</td><td id="dj">1791.3</td></tr>
</table>
<input type="button" value="点击" οnclick="updatePrice()">
</body>
</html>goldPricePro.jsp（利用定时器实现定时刷新）
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<%
String[] city =request.getParameterValues("city");
String res="[";
System.out.println(city[0]);
System.out.println((int)(Math.random()*1000+500));
for(int i=0;i<city.length;i++){
if(i<city.length-1)
res +="{'price':'"+String.format("%.2f", Math.random()*1000+500+Math.random())+"'},";
else{
res +="{'price':'"+String.format("%.2f", Math.random()*1000+500+Math.random())+"'}]";
}
}
out.print(res);
%>
</body>
</html>my.js：（将常用功能集成到这个文件里）
function getXmlHttpObjet(){
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function $(id) {
return document.getElementById(id);
}运行截图：
端午安康，今天是个特殊的日子！
