使用ajax技术无刷新动态调用股票信息

复制代码 代码如下:

<html>

<head>

<title>ajax test</title>

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

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

<script type="text/javascript">...

function ajaxRequest()...{

$.ajax(...{

url: 'http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028',

type: 'GET',

dataType: 'html',

timeout: 2000,

success: function(response)...{

var stocks = response.split(';');

for(var i=0; i<stocks.length-1; i++)...{

var content = stocks[i];

var temp1 = content.split('=')[0];

var temp2 = content.split('=')[1];

var code = temp1.substr(temp1.length - 6, 6);

var temp3 = temp2.replace('"', '');

var name = temp3.split(',')[0];

var tday_f = temp3.split(',')[1];

var yest_f = temp3.split(',')[2];

var curr_f = temp3.split(',')[3];

var temp_f = curr_f - yest_f;

$('#a'+i).html(code);

$('#b'+i).html(name);

if(curr_f > yest_f) ...{

$('#c'+i).html("<font color='red'>" + curr_f + "</font>");

} else if(curr_f < yest_f) ...{

$('#c'+i).html("<font color='green'>" + curr_f + "</font>");

} else ...{

$('#c'+i).html(curr_f);

}

$('#d'+i).html(tday_f);

$('#e'+i).html(yest_f);

if(temp_f > 0) ...{

$('#f'+i).html("<font color='red'>" + temp_f.toFixed(2) + "</font>");

$('#g'+i).html("<font color='red'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % ");

} else if(temp_f < 0) ...{

$('#f'+i).html("<font color='green'>" + temp_f.toFixed(2) + "</font>");

$('#g'+i).html("<font color='green'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % ");

} else ...{

$('#f'+i).html(temp_f.toFixed(2));

$('#g'+i).html(((temp_f / yest_f) * 100).toFixed(2) + " % ");

}

$('#h'+i).html(temp3.split(',')[4]);

$('#i'+i).html(temp3.split(',')[5]);

}

}

});

}

function pageInit() ...{

window.setInterval("ajaxRequest()",3000);

}

</script>

<style>...

.tr_cls {...}{

height:30px;

font-size:16px;

font-family:"Times New Roman", Times, serif;

background-color:#FFFFCC

}

</style>

</head>

<body onLoad="pageInit();">

<form>

<table width="800" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">

<tr bgcolor="#3399FF" height="30px">

<th scope="col">股票代号</th>

<th scope="col">股票名称</th>

<th scope="col">当前价格</th>

<th scope="col">今日开盘</th>

<th scope="col">昨日收盘</th>

<th scope="col">当前差价</th>

<th scope="col">涨跌幅度</th>

<th scope="col">最高价格</th>

<th scope="col">最低价格</th>

</tr>

<tr class="tr_cls">

<td align="center"><span id="a0"></span></td>

<td align="center"><span id="b0"></span></td>

<td align="center"><span id="c0"></span></td>

<td align="center"><span id="d0"></span></td>

<td align="center"><span id="e0"></span></td>

<td align="center"><span id="f0"></span></td>

<td align="center"><span id="g0"></span></td>

<td align="center"><span id="h0"></span></td>

<td align="center"><span id="i0"></span></td>

</tr>

<tr class="tr_cls">

<td align="center"><span id="a1"></span></td>

<td align="center"><span id="b1"></span></td>

<td align="center"><span id="c1"></span></td>

<td align="center"><span id="d1"></span></td>

<td align="center"><span id="e1"></span></td>

<td align="center"><span id="f1"></span></td>

<td align="center"><span id="g1"></span></td>

<td align="center"><span id="h1"></span></td>

<td align="center"><span id="i1"></span></td>

</tr>

<tr class="tr_cls">

<td align="center"><span id="a2"></span></td>

<td align="center"><span id="b2"></span></td>

<td align="center"><span id="c2"></span></td>

<td align="center"><span id="d2"></span></td>

<td align="center"><span id="e2"></span></td>

<td align="center"><span id="f2"></span></td>

<td align="center"><span id="g2"></span></td>

<td align="center"><span id="h2"></span></td>

<td align="center"><span id="i2"></span></td>

</tr>

<tr class="tr_cls">

<td align="center"><span id="a3"></span></td>

<td align="center"><span id="b3"></span></td>

<td align="center"><span id="c3"></span></td>

<td align="center"><span id="d3"></span></td>

<td align="center"><span id="e3"></span></td>

<td align="center"><span id="f3"></span></td>

<td align="center"><span id="g3"></span></td>

<td align="center"><span id="h3"></span></td>

<td align="center"><span id="i3"></span></td>

</tr>

<tr class="tr_cls">

<td align="center"><span id="a4"></span></td>

<td align="center"><span id="b4"></span></td>

<td align="center"><span id="c4"></span></td>

<td align="center"><span id="d4"></span></td>

<td align="center"><span id="e4"></span></td>

<td align="center"><span id="f4"></span></td>

<td align="center"><span id="g4"></span></td>

<td align="center"><span id="h4"></span></td>

<td align="center"><span id="i4"></span></td>

</tr>

<tr class="tr_cls">

<td align="center"><span id="a5"></span></td>

<td align="center"><span id="b5"></span></td>

<td align="center"><span id="c5"></span></td>

<td align="center"><span id="d5"></span></td>

<td align="center"><span id="e5"></span></td>

<td align="center"><span id="f5"></span></td>

<td align="center"><span id="g5"></span></td>

<td align="center"><span id="h5"></span></td>

<td align="center"><span id="i5"></span></td>

</tr>

<tr class="tr_cls">

<td align="center"><span id="a6"></span></td>

<td align="center"><span id="b6"></span></td>

<td align="center"><span id="c6"></span></td>

<td align="center"><span id="d6"></span></td>

<td align="center"><span id="e6"></span></td>

<td align="center"><span id="f6"></span></td>

<td align="center"><span id="g6"></span></td>

<td align="center"><span id="h6"></span></td>

<td align="center"><span id="i6"></span></td>

</tr>

<tr class="tr_cls">

<td align="center"><span id="a7"></span></td>

<td align="center"><span id="b7"></span></td>

<td align="center"><span id="c7"></span></td>

<td align="center"><span id="d7"></span></td>

<td align="center"><span id="e7"></span></td>

<td align="center"><span id="f7"></span></td>

<td align="center"><span id="g7"></span></td>

<td align="center"><span id="h7"></span></td>

<td align="center"><span id="i7"></span></td>

</tr>

<tr class="tr_cls">

<td align="center"><span id="a8"></span></td>

<td align="center"><span id="b8"></span></td>

<td align="center"><span id="c8"></span></td>

<td align="center"><span id="d8"></span></td>

<td align="center"><span id="e8"></span></td>

<td align="center"><span id="f8"></span></td>

<td align="center"><span id="g8"></span></td>

<td align="center"><span id="h8"></span></td>

<td align="center"><span id="i8"></span></td>

</tr>

</table>

</form>

</body>

</html>

 

习惯用prototype的，把脚本部分的代码替换一下即可。 

复制代码 代码如下:

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

<script type="text/javascript">...

function ajaxRequest()...{

var myAjax = new Ajax.Request(

'http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028',

...{

method: 'get',

onComplete: setData

}

);

}

function setData(response) ...{

var contents = response.responseText;

var stocks = contents.split(';');

for(var i=0; i<stocks.length-1; i++)...{

var content = stocks[i];

var temp1 = content.split('=')[0];

var temp2 = content.split('=')[1];

var code = temp1.substr(temp1.length - 6, 6);

var temp3 = temp2.replace('"', '');

var name = temp3.split(',')[0];

var tday_f = temp3.split(',')[1];

var yest_f = temp3.split(',')[2];

var curr_f = temp3.split(',')[3];

var temp_f = curr_f - yest_f;

$('a'+i).innerHTML = code;

$('b'+i).innerHTML = name;

$('c'+i).innerHTML = curr_f;

if(curr_f > yest_f) ...{

$('c'+i).innerHTML = "<font color='red'>" + curr_f + "</font>";

} else if(curr_f < yest_f) ...{

$('c'+i).innerHTML = "<font color='green'>" + curr_f + "</font>";

} else ...{

$('c'+i).innerHTML = curr_f;

}

$('d'+i).innerHTML = tday_f;

$('e'+i).innerHTML = yest_f;

if(temp_f > 0) ...{

$('f'+i).innerHTML = "<font color='red'>" + temp_f.toFixed(2) + "</font>";

$('g'+i).innerHTML = "<font color='red'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> %";

} else if(temp_f < 0) ...{

$('f'+i).innerHTML = "<font color='green'>" + temp_f.toFixed(2) + "</font>";

$('g'+i).innerHTML = "<font color='green'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> %";

} else ...{

$('f'+i).innerHTML = temp_f.toFixed(2);

$('g'+i).innerHTML = ((temp_f / yest_f) * 100).toFixed(2) + " % ";

}

$('h'+i).innerHTML = temp3.split(',')[4];

$('i'+i).innerHTML = temp3.split(',')[5];

}

}

function pageInit() ...{

window.setInterval("ajaxRequest()",3000);

}

</script>

当然页面部分完全可以由脚本自动生成，以及页面动态增减股票信息等功能，就等日后修改吧。

时间： 2024-09-17 00:38:27

使用ajax技术无刷新动态调用股票信息的相关文章

使用ajax技术无刷新动态调用新浪股票实时数据_AJAX相关

新浪的财金频道一直感觉做得很好.但由于最近网速慢的缘故,查看股票信息时网页老是打不开.这几天一直在研究ajax,于是用jquery自己做了一个自动读取新浪股票实时数据的页面. <html> <head> <title>ajax test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <scri

使用ajax技术无刷新动态调用新浪股票实时数据

新浪的财金频道一直感觉做得很好.但由于最近网速慢的缘故,查看股票信息时网页老是打不开.这几天一直在研究ajax,于是用jquery自己做了一个自动读取新浪股票实时数据的页面. <html> <head> <title>ajax test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <scri

ajax无刷新动态调用股票信息(改良版)_jquery

复制代码 代码如下: <html> <head> <title>ajax test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery.js"></script&

使用EXT实现无刷新动态调用股票信息_YUI.Ext相关

说句老实话,我目前还对Ext技术不是很熟,所以写的代码自己也觉得怪怪的,有什么不对的地方,还望赐教.使用的Ext版本是ext-2.2,下载地址为:http://www.extjs.com/products/extjs/download.php下载Ext JS 2.2 SDK,解压后拷贝resources文件夹至工作目录. 在resources文件夹下新建jscript文件夹,并拷贝ext根目录下ext-all.js文件及adapter\ext\ext-base.js文件至jscript文件夹下,

ajax+php 无刷新数据调用经典实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

php+ajax实现无刷新动态加载数据技术

  无刷新功能我们用到很多很多的,下面我就来给各位介绍一个实例,就是实现php+ajax实现无刷新滚屏加载数据,例子非常的简单大家只要按流程来操作就可以了哦. 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PH

php+ajax实现无刷新动态加载数据技术_php实例

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

基于ajax实现无刷新分页的方法_AJAX相关

本文实例讲述了基于ajax实现无刷新分页的方法.分享给大家供大家参考.具体如下: 在普通的分页中,一旦页码改变,则url改变,整个页面都会刷新,如果我们希望页码的改变不影响整个网页的变动,可以使用ajax技术. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 通过客户端html代码,用ajax把服务器中的数据通过get方式传递过来,显示在html中. <!doct

基于ajax实现无刷新分页的方法

本文实例讲述了基于ajax实现无刷新分页的方法.分享给大家供大家参考.具体如下: 在普通的分页中,一旦页码改变,则url改变,整个页面都会刷新,如果我们希望页码的改变不影响整个网页的变动,可以使用ajax技术. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 通过客户端html代码,用ajax把服务器中的数据通过get方式传递过来,显示在html中. <!doct