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

前端技术 2023/09/07 AJAX

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

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

本文地址：https://www.stayed.cn/item/19776

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)