您的位置：首页 > 其它

AJAX黄金价格实时图

2015-08-12 08:43 260 查看

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

l        前台代码GoldPrice.php

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<script type="text/javascript" src="the_ajax.js"></script>

<script type="text/javascript">

    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>

       <center>

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

       <tableborder=15>

              <tr><tdcolspan="3"><img src="images/topic.jpg"/></td></tr>

              <tr><td>市场</td><td>最新价格$</td><td>涨跌</td></tr>

              <tr><td>伦敦</td><tdid="ld">788.7</td><td><img id="ld_im"src="images/down.jpg" /><spanid="ld_bd">211.3</span></td></tr>

              <tr><td>台湾</td><tdid="tw">854.0</td><td><img id="tw_im"src="images/down.jpg" /><spanid="tw_bd">146.0</span></td></tr>

              <tr><td>东京</td><tdid="dj">1791.3</td><td><img id="dj_im"src="images/up.jpg" /><spanid="dj_bd">791.3</span></td></tr>

       </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
4000
].'","price":"'.rand(500,1500).'"},';

       }

}

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

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

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax 布局刷新实时更新

相关文章推荐

新的分享

章节导航