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>
//保存服务器端返回的股票对象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(); });}<%@ WebHandler Language="C#" %>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 szzs=(Stock)ht["300001"]; Stock pfyh=(Stock)ht["000001"]; double temp; if (flagSz) { temp=szzs.Now + sz; } else { temp = szzs.Now - sz; } temp = Math.Round(temp, 2); szzs.Now = temp; if (flagPf) { temp = pfyh.Now + pf; } else { temp = pfyh.Now - pf; } temp = Math.Round(temp, 2); pfyh.Now = temp; //采用json的数据格式返回股票的信息 //1采用数组的方式返回两个股票信息 StringBuilder json = new StringBuilder(); //json.Append("[{name:"").Append(szzs.Name).Append("",id:"").Append(szzs.Id).Append("",yes:") // .Append(szzs.Yesterday).Append(",tod:").Append(szzs.Today).Append(",now:") // .Append(szzs.Now).Append("},{name:"").Append(pfyh.Name).Append("",id:"") // .Append(pfyh.Id).Append("",yes:").Append(pfyh.Yesterday).Append(",tod:") // .Append(pfyh.Today).Append(",now:").Append(pfyh.Now).Append("}]"); //1采用对象的方式返回两个股票信息 //以对象返回信息时，需要在最外面加上括号，否则页面解析会报错 json.Append("({") .Append(""") .Append(szzs.Id).Append("":{name:"").Append(szzs.Name).Append("",id:"").Append(szzs.Id).Append("",yes:") .Append(szzs.Yesterday).Append(",tod:").Append(szzs.Today).Append(",now:").Append(szzs.Now) .Append("},").Append(""") .Append(pfyh.Id).Append("":{name:"").Append(pfyh.Name).Append("",id:"").Append(pfyh.Id).Append("",yes:") .Append(pfyh.Yesterday).Append(",tod:").Append(pfyh.Today).Append(",now:").Append(pfyh.Now) .Append("}})"); context.Response.Write(json); } private void init() { Stock szzs = new Stock(3000.0, 2999.0, "上证指数", "300001"); Stock pfyh = new Stock(23.22, 23.50, "浦发银行", "000001"); ht.Add(szzs.Id, szzs); ht.Add(pfyh.Id, pfyh); } public bool IsReusable { get { return false; } }}using System;using System.Data;using System.Configuration;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;/// <summary>///股票实体类/// </summary>public class Stock{ public Stock() { } public Stock(double yesterday, double today, string name, string id) { this.yesterday = yesterday; this.today = today; this.name = name; this.id = id; this.now = today; } private double yesterday; public double Yesterday { get { return yesterday; } set { yesterday = value; } } private double today; public double Today { get { return today; } set { today = value; } } private double now; public double Now { get { return now; } set { now = value; } } private string name; public string Name { get { return name; } set { name = value; } } private string id; public string Id { get { return id; } set { id = value; } }}