Maison > Article > interface Web > Utilisez la technologie ajax pour appeler dynamiquement les données boursières Sina en temps réel sans actualiser

Utilisez la technologie ajax pour appeler dynamiquement les données boursières Sina en temps réel sans actualiser

亚连original: 2018-05-25 15:38:022577parcourir

En raison de la lenteur de l'Internet récemment, la page Web ne peut toujours pas être ouverte lors de la vérification des informations boursières. J'étudie l'ajax ces jours-ci, j'ai donc utilisé jquery pour créer une page qui lit automatiquement les données boursières de Sina en temps réel

Le canal financier de Sina a toujours été bien géré. Cependant, en raison de la lenteur récente de l'Internet, la page Web ne peut pas être ouverte lors de la vérification des informations boursières. J'étudie Ajax ces jours-ci, j'ai donc utilisé jquery pour créer une page qui lit automatiquement les données en temps réel des actions Sina.

<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: &#39;http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028&#39;, 
type: &#39;GET&#39;, 
dataType: &#39;html&#39;, 
timeout: 2000, 
success: function(response)...{ 
var stocks = response.split(&#39;;&#39;); 
for(var i=0; i<stocks.length-1; i++)...{ 
var content = stocks[i]; 
var temp1 = content.split(&#39;=&#39;)[0]; 
var temp2 = content.split(&#39;=&#39;)[1]; 
var code = temp1.substr(temp1.length - 6, 6); 
var temp3 = temp2.replace(&#39;"&#39;, &#39;&#39;); 
var name = temp3.split(&#39;,&#39;)[0]; 
var tday_f = temp3.split(&#39;,&#39;)[1]; 
var yest_f = temp3.split(&#39;,&#39;)[2]; 
var curr_f = temp3.split(&#39;,&#39;)[3]; 
var temp_f = curr_f - yest_f; 
$(&#39;#a&#39;+i).html(code); 
$(&#39;#b&#39;+i).html(name); 
if(curr_f > yest_f) ...{ 
$(&#39;#c&#39;+i).html("<font color=&#39;red&#39;>" + curr_f + "</font>"); 
} else if(curr_f < yest_f) ...{ 
$(&#39;#c&#39;+i).html("<font color=&#39;green&#39;>" + curr_f + "</font>"); 
} else ...{ 
$(&#39;#c&#39;+i).html(curr_f); 
} 
$(&#39;#d&#39;+i).html(tday_f); 
$(&#39;#e&#39;+i).html(yest_f); 
if(temp_f > 0) ...{ 
$(&#39;#f&#39;+i).html("<font color=&#39;red&#39;>" + temp_f.toFixed(2) + "</font>"); 
$(&#39;#g&#39;+i).html("<font color=&#39;red&#39;>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % "); 
} else if(temp_f < 0) ...{ 
$(&#39;#f&#39;+i).html("<font color=&#39;green&#39;>" + temp_f.toFixed(2) + "</font>"); 
$(&#39;#g&#39;+i).html("<font color=&#39;green&#39;>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % "); 
} else ...{ 
$(&#39;#f&#39;+i).html(temp_f.toFixed(2)); 
$(&#39;#g&#39;+i).html(((temp_f / yest_f) * 100).toFixed(2) + " % "); 
} 
$(&#39;#h&#39;+i).html(temp3.split(&#39;,&#39;)[4]); 
$(&#39;#i&#39;+i).html(temp3.split(&#39;,&#39;)[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>

Si vous avez l'habitude d'utiliser des prototypes, remplacez simplement le code dans la partie script.
Copier le code Le code est le suivant :

<script type="text/javascript" src="prototype.js"></script> 
<script type="text/javascript">... 
function ajaxRequest()...{ 
var myAjax = new Ajax.Request( 
&#39;http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028&#39;, 
...{ 
method: &#39;get&#39;, 
onComplete: setData 
} 
); 
} 
function setData(response) ...{ 
var contents = response.responseText; 
var stocks = contents.split(&#39;;&#39;); 
for(var i=0; i<stocks.length-1; i++)...{ 
var content = stocks[i]; 
var temp1 = content.split(&#39;=&#39;)[0]; 
var temp2 = content.split(&#39;=&#39;)[1]; 
var code = temp1.substr(temp1.length - 6, 6); 
var temp3 = temp2.replace(&#39;"&#39;, &#39;&#39;); 
var name = temp3.split(&#39;,&#39;)[0]; 
var tday_f = temp3.split(&#39;,&#39;)[1]; 
var yest_f = temp3.split(&#39;,&#39;)[2]; 
var curr_f = temp3.split(&#39;,&#39;)[3]; 
var temp_f = curr_f - yest_f; 
$(&#39;a&#39;+i).innerHTML = code; 
$(&#39;b&#39;+i).innerHTML = name; 
$(&#39;c&#39;+i).innerHTML = curr_f; 
if(curr_f > yest_f) ...{ 
$(&#39;c&#39;+i).innerHTML = "<font color=&#39;red&#39;>" + curr_f + "</font>"; 
} else if(curr_f < yest_f) ...{ 
$(&#39;c&#39;+i).innerHTML = "<font color=&#39;green&#39;>" + curr_f + "</font>"; 
} else ...{ 
$(&#39;c&#39;+i).innerHTML = curr_f; 
} 
$(&#39;d&#39;+i).innerHTML = tday_f; 
$(&#39;e&#39;+i).innerHTML = yest_f; 
if(temp_f > 0) ...{ 
$(&#39;f&#39;+i).innerHTML = "<font color=&#39;red&#39;>" + temp_f.toFixed(2) + "</font>"; 
$(&#39;g&#39;+i).innerHTML = "<font color=&#39;red&#39;>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> %"; 
} else if(temp_f < 0) ...{ 
$(&#39;f&#39;+i).innerHTML = "<font color=&#39;green&#39;>" + temp_f.toFixed(2) + "</font>"; 
$(&#39;g&#39;+i).innerHTML = "<font color=&#39;green&#39;>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> %"; 
} else ...{ 
$(&#39;f&#39;+i).innerHTML = temp_f.toFixed(2); 
$(&#39;g&#39;+i).innerHTML = ((temp_f / yest_f) * 100).toFixed(2) + " % "; 
} 
$(&#39;h&#39;+i).innerHTML = temp3.split(&#39;,&#39;)[4]; 
$(&#39;i&#39;+i).innerHTML = temp3.split(&#39;,&#39;)[5]; 
} 
} 
function pageInit() ...{ 
window.setInterval("ajaxRequest()",3000); 
} 
</script>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. l'avenir.

Articles Liés

Voir plus