您当前的位置: 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
韩顺平ajax黄金价格涨跌实例完整版
发布时间:2015-04-24 07:00:19编辑:雪饮阅读()
韩顺平老师的这个源码在互联网上已经没有了真正的完整源码,为了弥补这个空缺,雪饮个人博客以纯手工的方法将源码共享给大家。由于所涉及的图片无法获得,说起来自己还挺较劲儿,为了和韩老师一模一样,自己还用暴风在韩老师的视频中截图然后用百度识图来搜索原图片文件,不过很可惜,百度识图并没有收录。然后勉强用截图以及一些网上找的类似图片在加以布局才ok的。下面大家看看自己还原出来的面貌吧!
封装的js源码(my.js)这个其实不用都贴出来都是可以的,用了好多次了:
function getXmlHttpObject(){
var xmlHttpRequest;
if(window.ActiveXobject){
xmlHttpRequest=new ActiveXobject("Microsoft.XMLHTTP");
}
else{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
function $(id){
return document.getElementById(id);
}
界面源码(goldchange.html):
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="my.js" type="text/javascript"/></script>
<script type="text/javascript">
var myXmlHttpRequest;
function updateGoldPrice(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
var url="glodPriceProcess.php";
var data="city[]=dj&city[]=tw&city[]=ld";
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlHttpRequest.onreadystatechange=function chuli(){
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
//取出并转换成对象数组
var res_object=eval("("+myXmlHttpRequest.responseText+")");
$('dj').innerText=res_object[0].price;
$('tw').innerText=res_object[1].price;
$('ld').innerText=res_object[2].price;
}
}
}
myXmlHttpRequest.send(data);
}
}
window.setInterval("updateGoldPrice()",5000);
</script>
</head>
<center>
<h1>每隔5秒更新数据(以1000为基数计算涨跌)</h1>
<table border="1" class="abc">
<tr><td colspan="3"><img src="hjscbj.png" style="width:100%;" /></td></tr>
<tr><td>市场</td><td align="center">最新价格$</td><td align="center">涨跌</td></tr>
<tr><td>伦敦</td><td align="center" id="ld">788.7</td><td><img src="down.jpg" /> 211.3</td></tr>
<tr><td>台湾</td><td align="center" id="tw">854.0</td><td><img src="down.jpg" /> 146.0</td></tr>
<tr><td>东京</td><td align="center" id="dj">1791.3</td><td><img src="up.jpg" /> 791.3</td></tr>
</table>
</center>
</html>
处理页面源码(glodPriceProcess.php):
<?php
header("Content-Type:text/html;charset=utf-8");
header("Cache-Control:no-cache");
$cities=$_POST['city'];
//随机生成城市个数个500-2000的数,每个城市对应一个随机数
$res='[{"price":"400"},{"price":"1000"},{"price":"1200"}]';
//下面将以上面这个json数据格式来拼接
$res='[';
for($i=0;$i<count($cities);$i++){
if($i==count($cities)-1){
$res.='{"cityname":"'.$cities[$i].'","price":"'.rand(500,1500).'"}]';
}
else{
$res.='{"cityname":"'.$cities[$i].'","price":"'.rand(500,1500).'"},';
}
}
file_put_contents("d:/mylog.log",$res."\r\n",FILE_APPEND);
echo $res;
?>
有喜欢直接下载案例原文件包的可以点击此处下载:ajax黄金价格实时图实例源码
关键字词:ajax,黄金涨跌,个人博客
上一篇:省市级联效果ajax版
下一篇:js获取display属性值