新浪的財金頻道一直感覺做得很好。但由于最近網速慢的緣故，查看股票信息時網頁老是打不開。這幾天一直在研究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; istocks.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; istocks.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>
當然頁面部分完全可以由腳本自動生成，以及頁面動態增減股票信息等功能，就等日后修改吧。
您可能感興趣的文章:- ThinkPHP結合AjaxFileUploader實現無刷新文件上傳的方法
- Jquery基于Ajax方法自定義無刷新提交表單Form實例
- 使用ajax實現無刷新改變頁面內容和地址欄URL
- php+ajax實現無刷新動態加載數據技術
- jQuery+AJAX實現無刷新下拉加載更多
- jQuery實現AJAX定時刷新局部頁面實例
- jQuery使用$.ajax進行異步刷新的方法(附demo下載)
- jQuery實現form表單基于ajax無刷新提交方法詳解
- jQuery+Ajax實現無刷新操作
- 分頁技術原理與實現之無刷新的Ajax分頁技術(三)
- Ajax回退刷新頁面問題的解決辦法
