JS获取股票实时数据教程：新浪和讯源接口解析与自动刷新

股票实时刷新网页开发思路

近期开始学习股票交易，工作中难免需要关注盘面动态。为了不影响办公形象，避免长时间盯着手机引起他人注意，需要寻找更隐蔽的查看方式。

因此，计划开发一个仅显示关键数值的小型网页，既满足看盘需求，又不会引起怀疑。确定思路后，立即着手进行开发实现。

开发前需完成以下准备工作：

1、确定数据来源

2、实现网页端的数据展示逻辑

首先展示完整源码，随后进行详细讲解。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
var stockCode="600804";
$(document).ready(function(){
  getNewData();
   var tg=self.setInterval("getNewData()",2000);//N毫秒刷新一次，1000毫秒＝1秒
});
//获取新数据
function getNewData()
{
  if(getQueryString('c')!=undefined)
  {
    stockCode=getQueryString('c');
  }
  var type=stockCode[0]==6?1:2;
  var durl="http://flashquote.stock.hexun.com/Stock_Combo.ASPX?mc="+type+"_"+stockCode+"&dt=T&t="+Math.random();
  $.getScript(durl,function(data){
    //加载脚本并执行
  });
}
//刷新显示
function refreshData(code,type,tip,data)
{ 
 
   
  var result="";
  result+=code;
  result+="<br/>";
  result+= data[1]+'\t'+data[2]+'\t'+data[3]+'\t'+data[4]+'\t　　'+data[5]+'\t'+percent+'%';
  
  result+='<div style="height:10px;width:100px;"></div>'  
   
  result+=''+data[24]+'\t\t'+data[25];
  result+='<br/>'+data[22]+'\t\t'+data[23];
  result+='<br/>'+data[20]+'\t\t'+data[21];
  result+='<br/>'+data[18]+'\t\t'+data[19];
  result+='<br/>'+data[16]+'\t\t'+data[17];
     
  result+='<div style="height:1px;width:100px; border-top:dashed 1px #CCCCCC"></div>'       
  result+=''+data[6] +'\t\t'+data[7];
  result+='<br/>'+data[8] +'\t\t'+data[9];
  result+='<br/>'+data[10]+'\t\t'+data[11];
  result+='<br/>'+data[12]+'\t\t'+data[13];
  result+='<br/>'+data[14]+'\t\t'+data[15];
 
  $("#result").html(result);
}
//getQueryString获取url参数
function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]); return null;
}
</script>
</head>
<body>
  <div id="result" style="color:#CCCCCC;"></div>
</body>
</html>

股票数据接口获取与解析

数据来源获取

若不清楚可用的数据源，可通过搜索引擎查找“股票数据接口”。

搜索结果通常指向新浪博客等技术分享平台，读者可自行搜索获取。

新浪股票数据接口

以获取大秦铁路（股票代码：601006）的最新行情为例，只需访问新浪的股票数据接口。

接口地址为：http://hq.sinajs.cn/list=sh601006。该URL会返回一段文本格式的行情数据，示例如下：


var hq_str_sh601006="大秦铁路, 27.55, 27.25, 26.91, 27.55, 26.20, 26.91, 26.92,
22114263, 589824680, 4695, 26.91, 57590, 26.90, 14700, 26.89, 14300,
26.88, 15100, 26.87, 3100, 26.92, 8900, 26.93, 14230, 26.94, 25150, 26.95, 15220, 26.96, 2008-01-11, 15:05:32";

此处介绍另一个常用的数据来源，即和讯网的行情接口。作者经常在该网站查看财经新闻和行情，因此熟悉其数据获取方式。下面详细说明如何发现该接口。

①在浏览器中打开某只个股的行情页面，例如http://stockdata.stock.hexun.com/gghq_600050.shtml。接着打开浏览器的开发者工具，推荐使用Chrome或Firefox（内置Firebug）。切换到“网络”标签页，观察网络请求，可以发现每隔几秒就会加载一个JavaScript文件，如图1所示。

股票实时刷新网页开发思路

图1

②获取到的链接地址类似：flashquote.stock.hexun.com/Stock_Combo.ASPX?mc=1_600050&dt=MX,DL&t=0.9482741139363497。

在浏览器中直接打开该链接，可以看到返回的内容如下。


refreshData('600050','1','Q',['20140414150001','3.16','3.16','3.16','3.13','3.14','3.13','3668496','3.12','3011500','3.11','1858100','3.10','2850000','3.09','955100','3.14','61400','3.15','4566385','3.16','3849399','3.17','1490702','3.18','2654615','55099344','172995571','8700','0.49','19.33','0.0026','31982854','22913509']);refreshData('600050','1','MX',[['1458','3.15','129800','407904'],['1459','3.14','580900','1824318'],['1500','3.14','8700','27318']]);refreshDeal('DL',[['150001','3.14','8700','2'],['145956','3.14','3700','2'],['145951','3.14','30500','1'],['145946','3.15','1100','2'],['145941','3.15','100','2'],['145936','3.14','508000','1'],['145921','3.14','2000','1'],['145916','3.14','6000','1'],['145906','3.15','28500','2'],['145901','3.14','1000','1']]);

这是一段JavaScript脚本，其中调用了refreshData方法，其余部分为该方法的参数。参数内容清晰可见，正是股票的实时盘口数据。

网页端数据加载与自动刷新实现

网页数据显示实现

既然已获取数据来源，接下来进行第二步：构建网页以加载并展示这些数据。前端开发中，使用jQuery库是一个简单且高效的选择。

这一步相对简单，主要利用jQuery中的ajax方法加载数据并显示。

具体加载方法为$.getScript。由于原始数据中包含refreshData方法，加载完成后会自动执行该方法，因此只需在代码中声明同名方法进行处理即可。在refreshData函数中，将参数及其对应的内容渲染到div元素中，只要能在页面上看到数据即可。

使用setInterval方法设置定时器，让页面每隔N秒钟自动刷新一次数据。

getQueryString方法用于获取页面URL参数。如果只硬编码查看一只股票，修改代码较为繁琐。通过添加参数可以更灵活地切换股票，例如在页面URL后添加参数demo.html?c=000777，即可查看指定股票。

以上即为使用JavaScript实现股票实时刷新数据的完整案例，供读者参考。

使用JavaScript实现股票行情数据实时刷新

股票实时刷新网页开发思路

股票数据接口获取与解析

网页端数据加载与自动刷新实现

实用工具推荐