AJax技术

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

字号+ 作者:H5之家 来源:H5之家 2017-06-23 12:02 我要评论( )

使用ajax技术无刷新动态调用新浪股票实时数据,新浪的财金频道一直感觉做得很好。但由于最近网速慢的缘故,查看股票信息时网页老是打不开。这几天一直在研究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> <form> <table cellpadding="0" cellspacing="0" bordercolor="#000000"> <tr bgcolor="#3399FF"> <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> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> <tr> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> <tr> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> <tr> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> <tr> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> <tr> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> <tr> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> <tr> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> <tr> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> </table> </form> </body> </html>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax及Ajax技术

    Ajax及Ajax技术

    2017-06-21 08:09

  • ajax技术 应用Ajax技术删除数据

    ajax技术 应用Ajax技术删除数据

    2017-06-18 11:01

  • 到底什么是Ajax技术?

    到底什么是Ajax技术?

    2017-06-10 12:00

  • jQuery实现form表单基于ajax无刷新提交方法详解

    jQuery实现form表单基于ajax无刷新提交方法详解

    2017-06-06 17:00

网友点评