当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > 使用ajax技术无刷新动态调用股票信息

AJAX技术
AJAX 用户注册时的应用实例
ajax readyState的五种状态详解
php AJAX POST的使用实例代码
Ajax 用户名验证是否存在
Ajax+PHP简单基础入门实例教程
AJAX 异步传输数据的问题
ASP AJAX 静态分页
js装载xml文件然后发向服务器的实现代码
完成了AJAX树附原理分析
AJAX 支持搜索引擎问题分析
ajax Suggest类似google的搜索提示效果
Ajax 框架学习笔记
用ajax xml的数据读取的HelloWorld程序
Ajax 表单验证 实现代码
Ajax request response 乱码解决方法
AJAX 随记
ajax 乱码的一种解决方法
ajax session过期问题的几个解决方案
四步学会 Ajax
Ajax异步(请求)提交类 支持跨域

No. « 6 7 8 9 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-13   浏览: 37 ::
收藏到网摘: n/a

新浪的财金频道一直感觉做得很好。但由于最近网速慢的缘故，查看股票信息时网页老是打不开。这几天一直在研究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>
<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>

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