使用ajax技术无刷新动态调用新浪股票实时数据
新浪的财金频道一直感觉做得很好。但由于最近网速慢的缘故，查看股票信息时网页老是打不开。这几天一直在研究ajax，于是用jquery自己做了一个自动读取新浪股票实时数据的页面。
<html>
<head>
<title>ajaxtest</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<scripttype="text/javascript"src="jquery.js"></script>
<scripttype="text/javascript">...
functionajaxRequest()...{
$.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)...{
varstocks=response.split(';');
for(vari=0;i<stocks.length-1;i++)...{
varcontent=stocks[i];
vartemp1=content.split('=')[0];
vartemp2=content.split('=')[1];
varcode=temp1.substr(temp1.length-6,6);
vartemp3=temp2.replace('"','');
varname=temp3.split(',')[0];
vartday_f=temp3.split(',')[1];
varyest_f=temp3.split(',')[2];
varcurr_f=temp3.split(',')[3];
vartemp_f=curr_f-yest_f;
$('#a'+i).html(code);
$('#b'+i).html(name);
if(curr_f>yest_f)...{
$('#c'+i).html("<fontcolor='red'>"+curr_f+"</font>");
}elseif(curr_f<yest_f)...{
$('#c'+i).html("<fontcolor='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("<fontcolor='red'>"+temp_f.toFixed(2)+"</font>");
$('#g'+i).html("<fontcolor='red'>"+((temp_f/yest_f)*100).toFixed(2)+"</font>%");
}elseif(temp_f<0)...{
$('#f'+i).html("<fontcolor='green'>"+temp_f.toFixed(2)+"</font>");
$('#g'+i).html("<fontcolor='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]);
}
}
});
}
functionpageInit()...{
window.setInterval("ajaxRequest()",3000);
}
</script>
<style>...
.tr_cls{...}{
height:30px;
font-size:16px;
font-family:"TimesNewRoman",Times,serif;
background-color:#FFFFCC
}
</style>
</head>
<bodyonLoad="pageInit();">
<form>
<tablewidth="800"border="1"align="center"cellpadding="0"cellspacing="0"bordercolor="#000000">
<trbgcolor="#3399FF"height="30px">
<thscope="col">股票代号</th>
<thscope="col">股票名称</th>
<thscope="col">当前价格</th>
<thscope="col">今日开盘</th>
<thscope="col">昨日收盘</th>
<thscope="col">当前差价</th>
<thscope="col">涨跌幅度</th>
<thscope="col">最高价格</th>
<thscope="col">最低价格</th>
</tr>
<trclass="tr_cls">
<tdalign="center"><spanid="a0"></span></td>
<tdalign="center"><spanid="b0"></span></td>
<tdalign="center"><spanid="c0"></span></td>
<tdalign="center"><spanid="d0"></span></td>
<tdalign="center"><spanid="e0"></span></td>
<tdalign="center"><spanid="f0"></span></td>
<tdalign="center"><spanid="g0"></span></td>
<tdalign="center"><spanid="h0"></span></td>
<tdalign="center"><spanid="i0"></span></td>
</tr>
<trclass="tr_cls">
<tdalign="center"><spanid="a1"></span></td>
<tdalign="center"><spanid="b1"></span></td>
<tdalign="center"><spanid="c1"></span></td>
<tdalign="center"><spanid="d1"></span></td>
<tdalign="center"><spanid="e1"></span></td>
<tdalign="center"><spanid="f1"></span></td>
<tdalign="center"><spanid="g1"></span></td>
<tdalign="center"><spanid="h1"></span></td>
<tdalign="center"><spanid="i1"></span></td>
</tr>
<trclass="tr_cls">
<tdalign="center"><spanid="a2"></span></td>
<tdalign="center"><spanid="b2"></span></td>
<tdalign="center"><spanid="c2"></span></td>
<tdalign="center"><spanid="d2"></span></td>
<tdalign="center"><spanid="e2"></span></td>
<tdalign="center"><spanid="f2"></span></td>
<tdalign="center"><spanid="g2"></span></td>
<tdalign="center"><spanid="h2"></span></td>
<tdalign="center"><spanid="i2"></span></td>
</tr>
<trclass="tr_cls">
<tdalign="center"><spanid="a3"></span></td>
<tdalign="center"><spanid="b3"></span></td>
<tdalign="center"><spanid="c3"></span></td>
<tdalign="center"><spanid="d3"></span></td>
<tdalign="center"><spanid="e3"></span></td>
<tdalign="center"><spanid="f3"></span></td>
<tdalign="center"><spanid="g3"></span></td>
<tdalign="center"><spanid="h3"></span></td>
<tdalign="center"><spanid="i3"></span></td>
</tr>
<trclass="tr_cls">
<tdalign="center"><spanid="a4"></span></td>
<tdalign="center"><spanid="b4"></span></td>
<tdalign="center"><spanid="c4"></span></td>
<tdalign="center"><spanid="d4"></span></td>
<tdalign="center"><spanid="e4"></span></td>
<tdalign="center"><spanid="f4"></span></td>
<tdalign="center"><spanid="g4"></span></td>
<tdalign="center"><spanid="h4"></span></td>
<tdalign="center"><spanid="i4"></span></td>
</tr>
<trclass="tr_cls">
<tdalign="center"><spanid="a5"></span></td>
<tdalign="center"><spanid="b5"></span></td>
<tdalign="center"><spanid="c5"></span></td>
<tdalign="center"><spanid="d5"></span></td>
<tdalign="center"><spanid="e5"></span></td>
<tdalign="center"><spanid="f5"></span></td>
<tdalign="center"><spanid="g5"></span></td>
<tdalign="center"><spanid="h5"></span></td>
<tdalign="center"><spanid="i5"></span></td>
</tr>
<trclass="tr_cls">
<tdalign="center"><spanid="a6"></span></td>
<tdalign="center"><spanid="b6"></span></td>
<tdalign="center"><spanid="c6"></span></td>
<tdalign="center"><spanid="d6"></span></td>
<tdalign="center"><spanid="e6"></span></td>
<tdalign="center"><spanid="f6"></span></td>
<tdalign="center"><spanid="g6"></span></td>
<tdalign="center"><spanid="h6"></span></td>
<tdalign="center"><spanid="i6"></span></td>
</tr>
<trclass="tr_cls">
<tdalign="center"><spanid="a7"></span></td>
<tdalign="center"><spanid="b7"></span></td>
<tdalign="center"><spanid="c7"></span></td>
<tdalign="center"><spanid="d7"></span></td>
<tdalign="center"><spanid="e7"></span></td>
<tdalign="center"><spanid="f7"></span></td>
<tdalign="center"><spanid="g7"></span></td>
<tdalign="center"><spanid="h7"></span></td>
<tdalign="center"><spanid="i7"></span></td>
</tr>
<trclass="tr_cls">
<tdalign="center"><spanid="a8"></span></td>
<tdalign="center"><spanid="b8"></span></td>
<tdalign="center"><spanid="c8"></span></td>
<tdalign="center"><spanid="d8"></span></td>
<tdalign="center"><spanid="e8"></span></td>
<tdalign="center"><spanid="f8"></span></td>
<tdalign="center"><spanid="g8"></span></td>
<tdalign="center"><spanid="h8"></span></td>
<tdalign="center"><spanid="i8"></span></td>
</tr>
</table>
</form>
</body>
</html>
习惯用prototype的，把脚本部分的代码替换一下即可。
复制代码代码如下:
<scripttype="text/javascript"src="prototype.js"></script>
<scripttype="text/javascript">...
functionajaxRequest()...{
varmyAjax=newAjax.Request(
'http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028',
...{
method:'get',
onComplete:setData
}
);
}
functionsetData(response)...{
varcontents=response.responseText;
varstocks=contents.split(';');
for(vari=0;i<stocks.length-1;i++)...{
varcontent=stocks[i];
vartemp1=content.split('=')[0];
vartemp2=content.split('=')[1];
varcode=temp1.substr(temp1.length-6,6);
vartemp3=temp2.replace('"','');
varname=temp3.split(',')[0];
vartday_f=temp3.split(',')[1];
varyest_f=temp3.split(',')[2];
varcurr_f=temp3.split(',')[3];
vartemp_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="<fontcolor='red'>"+curr_f+"</font>";
}elseif(curr_f<yest_f)...{
$('c'+i).innerHTML="<fontcolor='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="<fontcolor='red'>"+temp_f.toFixed(2)+"</font>";
$('g'+i).innerHTML="<fontcolor='red'>"+((temp_f/yest_f)*100).toFixed(2)+"</font>%";
}elseif(temp_f<0)...{
$('f'+i).innerHTML="<fontcolor='green'>"+temp_f.toFixed(2)+"</font>";
$('g'+i).innerHTML="<fontcolor='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];
}
}
functionpageInit()...{
window.setInterval("ajaxRequest()",3000);
}
</script>
当然页面部分完全可以由脚本自动生成，以及页面动态增减股票信息等功能，就等日后修改吧。