使用ajax技術(shù)無(wú)刷新動(dòng)態(tài)調(diào)用新浪股票實(shí)時(shí)數(shù)據(jù)
更新時(shí)間：2014年08月24日 10:06:43 投稿：whsnow
由于最近網(wǎng)速慢的緣故，查看股票信息時(shí)網(wǎng)頁(yè)老是打不開(kāi)。這幾天一直在研究ajax，于是用jquery自己做了一個(gè)自動(dòng)讀取新浪股票實(shí)時(shí)數(shù)據(jù)的頁(yè)面
新浪的財(cái)金頻道一直感覺(jué)做得很好。但由于最近網(wǎng)速慢的緣故，查看股票信息時(shí)網(wǎng)頁(yè)老是打不開(kāi)。這幾天一直在研究ajax，于是用jquery自己做了一個(gè)自動(dòng)讀取新浪股票實(shí)時(shí)數(shù)據(jù)的頁(yè)面。
<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">股票代號(hào)</th>
<th scope="col">股票名稱(chēng)</th>
<th scope="col">當(dāng)前價(jià)格</th>
<th scope="col">今日開(kāi)盤(pán)</th>
<th scope="col">昨日收盤(pán)</th>
<th scope="col">當(dāng)前差價(jià)</th>
<th scope="col">漲跌幅度</th>
<th scope="col">最高價(jià)格</th>
<th scope="col">最低價(jià)格</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>
習(xí)慣用prototype的，把腳本部分的代碼替換一下即可。
復(fù)制代碼 代碼如下:
<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>
當(dāng)然頁(yè)面部分完全可以由腳本自動(dòng)生成，以及頁(yè)面動(dòng)態(tài)增減股票信息等功能，就等日后修改吧。
您可能感興趣的文章:
- ThinkPHP結(jié)合AjaxFileUploader實(shí)現(xiàn)無(wú)刷新文件上傳的方法
- Jquery基于Ajax方法自定義無(wú)刷新提交表單Form實(shí)例
- 使用ajax實(shí)現(xiàn)無(wú)刷新改變頁(yè)面內(nèi)容和地址欄URL
- php+ajax實(shí)現(xiàn)無(wú)刷新動(dòng)態(tài)加載數(shù)據(jù)技術(shù)
- jQuery+AJAX實(shí)現(xiàn)無(wú)刷新下拉加載更多
- jQuery實(shí)現(xiàn)AJAX定時(shí)刷新局部頁(yè)面實(shí)例
- jQuery使用$.ajax進(jìn)行異步刷新的方法(附demo下載)
- jQuery實(shí)現(xiàn)form表單基于ajax無(wú)刷新提交方法詳解
- jQuery+Ajax實(shí)現(xiàn)無(wú)刷新操作
- 分頁(yè)技術(shù)原理與實(shí)現(xiàn)之無(wú)刷新的Ajax分頁(yè)技術(shù)(三)
- Ajax回退刷新頁(yè)面問(wèn)題的解決辦法
相關(guān)文章
做一個(gè)表單驗(yàn)證里面最簡(jiǎn)單的例子，檢查用戶(hù)名是否存在，使用Ajax完成表單驗(yàn)證的正常步驟應(yīng)該是2008-12-12
這篇文章主要介紹了ajax 如何使用不同namespace的action,需要的朋友可以參考下2014-07-07
ajax回調(diào)函數(shù)中使用$(this)取不到對(duì)象的解決方法
如果在ajax的回調(diào)函數(shù)內(nèi)使用$(this)的話，實(shí)踐證明，是取不到任何對(duì)象的,需要的朋友可以參考下2014-06-06
Ajax注冊(cè)用戶(hù)時(shí)實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了Ajax注冊(cè)用戶(hù)時(shí)實(shí)現(xiàn)表單驗(yàn)證，在網(wǎng)站上注冊(cè)時(shí)，通常需要驗(yàn)證用戶(hù)名和電子郵件地址的可用性，本文將介紹如何實(shí)現(xiàn)表單驗(yàn)證功能2015-12-12
這篇文章主要為大家詳細(xì)介紹了ajax無(wú)刷新驗(yàn)證注冊(cè)信息示例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Ajax請(qǐng)求過(guò)程中下載文件在FireFox(火狐)瀏覽器下的兼容問(wèn)題
最近做了個(gè)項(xiàng)目，其中有項(xiàng)目需求是這樣的，點(diǎn)擊一個(gè)文件鏈接下載該文件，同時(shí)向后臺(tái)發(fā)送請(qǐng)求，在開(kāi)發(fā)過(guò)程中問(wèn)題百出，小編把問(wèn)題總結(jié)分享在腳本之家平臺(tái)，供大家參考2016-01-01
ajax+php 谷歌搜索框自動(dòng)填充功能 實(shí)例代碼
應(yīng)用Ajax技術(shù) 結(jié)合php語(yǔ)言寫(xiě)的簡(jiǎn)單的類(lèi)谷歌搜索框自動(dòng)填充功能。2009-11-11
眾所周知，驗(yàn)證，最好是在客戶(hù)端盡量解決，以降低服務(wù)端資源開(kāi)銷(xiāo)；在目前AJAX流行的今天，基于AJAX的驗(yàn)證更能夠?yàn)榭蛻?hù)端驗(yàn)證提供豐富的機(jī)制和美觀的交互效果。本文收集了13個(gè)比較通用的AJAX驗(yàn)證框架，與大家分享！2009-08-08
本文給大家介紹ajax實(shí)現(xiàn)加載進(jìn)度條效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了AJAX XMLHttpRequest對(duì)象，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03