使用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 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; 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>
当然页面部分完全可以由脚本自动生成，以及页面动态增减股票信息等功能，就等日后修改吧。
使用ajax技术无刷新动态调用股票信息的更多相关文章
- SpringMVC ajax技术无刷新文件上传下载删除示例
参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...
- php+ajax实现无刷新动态加载数据技术
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术 ...
- 使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...
- Ajax 实现无刷新页面
注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...
- jsp+ajax实现无刷新
jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
- Ajax 实现无刷新分页
Ajax 实现无刷新分页
- PHP+Ajax+plupload无刷新上传头像代码
很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...
- jQuery+php+ajax实现无刷新上传文件功能
jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...
随机推荐
- GoogleMapApi 发布后提示安全问题
今天日本那边发过来一个Bug说是Google Map打不开,提示安全问题. 最后发现,日本那边的发布路径如下: https:xxxxx.gspserver.co.jp 而Source中Google M ...
- netlink
http://blog.csdn.net/zirconsdu/article/details/8569193 http://www.xuebuyuan.com/1725837.html netlink ...
- 从零开始学ios开发（四）：IOS控件（1），Image View、Text Field、Keyboard
长话短说,谢谢大家的关注,这篇写了好长时间,下面继续学习ios.我将用2到3篇的篇幅来学习iphone上的一些常用控件,包括Image View.Text Field.Keyboard.Slider等 ...
- WebApi接口访问频率控制的实现
关于限流的文章,博客园内还是有挺多的.本文做了一个基于Filter限流的例子,算是对WebApiThrottle使用的一个具体的实例. 实现方法: 1.使用Nuget,对WebAPI项目添加WebAp ...
- MongoDB学习笔记-数据库命令
概念 数据库命令(database command)是一种非常特殊类型的查询.文档的创建.更新.删除及查询都属于数据库命令的范畴,它还包含管理性的任务(比如关闭服务器和克隆数据库).统计数据及执行聚合 ...
- C# SQL增删查改
DBHelper: /// <summary> /// 执行查询 /// </summary> /// <param name="sql">有效 ...
- Unity3d之Mecanim（新版动画系统）
1,动画系统配置,2,代码控制动画 原文地址:http://blog.csdn.net/dingkun520wy/article/details/51247491 1,动画系统配置 创建Animato ...
- [shell基础]——数组
数组赋值 1. 逐个数组元素赋值 # array[0]=11 # array[1]=22 # array[2]=33 # echo ${array[@]} 11 22 33 33 2. array( ...
- Linux Shel高级技巧(目录)
Linux Shell高级技巧(一) http://www.cnblogs.com/stephen-liu74/archive/2011/12/22/2271167.html一.将输入信息转换为大写字 ...
- ASCII码排序
ASCII码排序 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 输入三个字符(可以重复)后,按各字符的ASCII码从小到大的顺序输出这三个字符. 输入 第一行输 ...