AJAX黄金价格实时图

最新推荐文章于 2025-05-08 15:16:50 发布

xiaobozhu

最新推荐文章于 2025-05-08 15:16:50 发布

阅读量1.2k

点赞数

分类专栏： AJAX 文章标签： ajax 布局刷新实时更新

本文链接：https://blog.csdn.net/xiaobozhu/article/details/47438707

版权

AJAX 专栏收录该内容

4 篇文章

订阅专栏

AJAX黄金价格实时图

实现局部刷新是很重要，也是很流行的一种做法，如果你不能做到这一点，那可就lower了哦，下面我们通过一个简单的实例来讲解局部刷新，更新数据，并配合一点业务逻辑的局部刷新功能，需要说明的是本例中数据是随机产生的，而在具体的开发中，数据是需要从后台获取的。

l 前台代码GoldPrice.php

<html>

<head>

var myXmlHttpRequest;

function updateGoldPrice(){

myXmlHttpRequest=getXmlHttpObject();

if(myXmlHttpRequest){

//创建ajax引擎成功

varurl="GoldPriceProcess.php";

vardata="city[]=dj&city[]=tw&city[]=ld";

myXmlHttpRequest.open("post",url,true);

myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

myXmlHttpRequest.onreadystatechange=functionhandle(){

//接收数据json

if(myXmlHttpRequest.readyState==4){

if(myXmlHttpRequest.status==200){

// window.alert("ok");

//取出并转成对象数组

//window.alert(myXmlHttpRequest.responseText);

var jdata=myXmlHttpRequest.responseText;

var res_objects=eval("("+jdata+")");

//波动价格

$('dj_bd').innerText=res_objects[0].price-$('dj').innerText;

$('tw_bd').innerText=res_objects[1].price-$('tw').innerText;

$('ld_bd').innerText=res_objects[2].price-$('ld').innerText;

if($('dj_bd').innerText>0){

$('dj_im').src="images/up.jpg";

}else{

$('dj_im').src="images/down.jpg";

}

if($('tw_bd').innerText>0){

$('tw_im').src="images/up.jpg";

}else{

$('tw_im').src="images/down.jpg";

}

if($('ld_bd').innerText>0){

$('ld_im').src="images/up.jpg";

}else{

$('ld_im').src="images/down.jpg";

}

//更新黄金价格

$('dj').innerText=res_objects[0].price;

$('tw').innerText=res_objects[1].price;

$('ld').innerText=res_objects[2].price;

}

myXmlHttpRequest.send(data);

}

//使用定时器每隔3秒

window.setInterval("updateGoldPrice()",6000);

</script>

</head>

<body>

<h1>每隔6秒中更新数据(以1000为基数计算涨跌)</h1>

<tableborder=15>

</table>

</center>

</body>

</html>

l 通用JS代码the_ajax.js

// JavaScript Document

//创建ajax引擎

function getXmlHttpObject(){

var xmlHttpRequest;

//从不同的浏览器获取对象xmlHttpRequest对象的方法不同

if(window.ActiveXObject){

xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");

}else{

xmlHttpRequest=new XMLHttpRequest();

}

return xmlHttpRequest;

}

//这里写个函数通过id获取dom对象

function $(id){

returndocument.getElementById(id);

}

l 后台业务逻辑GoldPriceProcess.php

<?php

//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式

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"}]';

$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).'"},';

}

echo$res; //注意这句必须要，回送数据到客户端！

file_put_contents("./mylog.log",$res."\r\n",FILE_APPEND);//写入文件，便于调试