日期:2014-05-17  浏览次数:20776 次

ASP.NET+JQuery模拟股票信息涨跌(Ajax技术)
index.html文件
<!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">
<head>
    <title>JQuery之股票信息</title>
    <link href="css/Stock.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery.js" type="text/javascript"></script>


    <script src="js/Stock.js" type="text/javascript"></script>
</head>
<body>
    <div id="300001"><a href="#">上证指数:</a><span></span></div>
    <div id="000001"><a href="#">浦发银行:</a><span></span></div>
    <div id="stock">
        <div id="yes">昨天:<span></span></div>
        <div id="tod">今天:<span></span></div>
        <div id="now">当前:<span></span></div>
    </div>
</body>
</html>

Stock.js文件
//保存服务器端返回的股票对象
var obj;
var divId;
$(function(){
    var stockNode=$("#stock");
    stockNode.css("border","1px solid black").css("background-color","#eee").width("200px")
             .css("position","absolute").css("z-index","50"); 
    stockNode.hide();
    var aNodes=$("a");
    //鼠标进入股票名称时的操作
    aNodes.mouseover(function(event){
        var aNode=$(this);
        var divNode=aNode.parent();
        divId=divNode.attr("id");
        updateInfo();
        //控制弹出框的位置
        //var offset=aNode.offset();
        //stockNode.css("left",offset.left+"px").css("top",offset.top+aNode.height()+"px");
        var myEvent=event || window.event;
        stockNode.css("left",myEvent.clientX+10+"px").css("top",myEvent.clientY+10+"px");
        //显示弹出框
        stockNode.show();
        
    });
     //鼠标离开股票名称时的操作
    aNodes.mouseout(function(){
        stockNode.hide();
    });
    
    getInfo();
    //每一秒钟和服务器交互一次,更新数据信息
    setInterval(getInfo,1000);
    
});

//更新弹出框中的信息
function updateInfo()
{
    var stockObj=obj[divId];
    for(var proName in stockObj){
        if(proName !="name" && proName!="id"){
            $("#"+proName).children("span").html(stockObj[proName]);
        }
    }
}

function getInfo()
{
    //向服务器发送请求    
    $.get("handle/stock.ashx?t=" + (new Date()).valueOf(),function(data){
        //接收解析数据               
        obj=eval(data);
        //获取两只股票的当前指数
        var szzs=obj["300001"];//obj.300001
        var pfyh=obj["000001"];
        /*
        遍历一个对象
        for(var stockid in obj)
        {
            var stock=obj[stockid];
        }
        */
        //找到相应的div节点
        var sz= $("#300001").children("span")
        sz.html(szzs.now);
        if(szzs.now>szzs.yes){
            //当前价格大于昨天收盘,则为红色
            sz.css("color","red");
        }else{
            sz.css("color","green");
        }
        var pf=$("#000001").children("span")
        pf.html(pfyh.now);
        if(pfyh.now>szzs.pfyh){
            //当前价格大于昨天收盘,则为红色
            pf.css("color","red");
        }else{
            pf.css("color","green");
        }    
        updateInfo();           
    });
}

stock.ashx一般处理程序文件
<%@ WebHandler Language="C#" Class="stock" %>

using System;
using System.Web;
using System.Data;
using System.Collections;
using System.Collections.Generic;
using System.Text;

public class stock : IHttpHandler {
 
    Hashtable ht = new Hashtable();
    
    public void ProcessRequest (HttpContext context) 
    {
        context.Response.ContentType = "text/plain";
        init();
        Random data=new Random();
        double sz = data.NextDouble() * 20;
        double pf = data.NextDouble() * 0.5;
        //true涨,false跌
        bool flagSz = ((int)(data.NextDouble() * 10)) % 2 == 0;
        bool flagPf = ((int)(data.NextDouble() * 10)) % 2 == 0;
        Stock s