`
Spring_g
  • 浏览: 64071 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax学习笔记03-模拟动态显示股票信息动态变化的小例子

阅读更多
模拟实现一个动态显示股票价格的经典例子:

实体类 :Stock.java  
由于篇幅问题,此处省略了get Set 方法
/**
 * Created by IntelliJ IDEA.
 * User: 赵光鹏
 * Date: 2011-11-24
 * Time: 10:51:15
 * To change this template use File | Settings | File Templates.
 */
public class Stock {
        private double yesterday;
        private double today ;
        private double  now;
  	     private String name;
        private String id;

    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;
    }
    public String toString(){
        return this.name+":"+this.now;
    }
}

Servlet: GetStocksInfo.java

import ...


/**
 * Created by IntelliJ IDEA.
 * User: 赵光鹏
 * Date: 2011-11-24
 * Time: 10:52:01
 * To change this template use File | Settings | File Templates.
 */
public class GetStocksInfo extends HttpServlet {
    private HashMap<String,Stock> stocks;
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         doGet( request,  response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //返回两只股票的价格信息
        //1.计算随机数
        double sz = Math.random() + 20;
        double pf = Math.random() + 0.5;

        //通过随机数是奇数还是偶数来判断股票上涨还是下跌
        boolean flagsz = ((int)(Math.random() * 10))%2 ==0;
         boolean flagpf = ((int)(Math.random() * 10))%2 ==0;

        //2.将随机数和当前价格进行加减的操作
          //2.1首先获取到先前实例化好的两个数据
         Stock szzs = stocks.get("300001");
         Stock pfyh = stocks.get("000001");

        double temp;
        if(flagsz){
           temp = szzs.getNow() + sz;
        }  else{
             temp = szzs.getNow() - sz;
        }
        //对新的书进行小数位数进行处理,只保留小数点后后两位
        temp = (int)(temp*100)/100.0;
        szzs.setNow(temp);
      if(flagpf){
           temp = pfyh.getNow() + pf;
        }  else{
             temp = pfyh.getNow() - pf;
        }
        temp = (int)(temp*100)/100.0;
        pfyh.setNow(temp);
        //采用json数据格式返回股票的信息
        StringBuilder builder = new StringBuilder();
        //采用数组的形式 在此处略过
        //采用对象的方式回传两个股票对象
        //前台效果:{
        //           300001:{name:"上证指数",yes:3000.0",tod:2990.0,now:3010.02},
        //           000001:{name:"浦发银行",yes:23.22",tod:23.55,now:24.4}
        //          }
        builder.append("({")
                .append("\"")
               .append(szzs.getId()).append("\":{name:\"").append(szzs.getName())
                .append("\",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday())
                .append(",now:").append(szzs.getNow())
                .append("},")  .append("\"")
                .append(pfyh.getId()).append("\":{name:\"").append(pfyh.getName())
                .append("\",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday())
                .append(",now:").append(pfyh.getNow())
                .append("}})");

        response.setContentType("text/html;charset=gb2312");
        PrintWriter out = response.getWriter();
        out.print(builder);
    }
    //在服务器启动时(配置文件中配置好),执行该方法,虚拟出两条股票信息
    @Override
    public void init(ServletConfig servletConfig) throws ServletException {
        stocks = new HashMap<String, Stock>();
        Stock szzs = new Stock(3000.0, 2990.0, "上证指数", "300001");
        Stock pfyh = new Stock(23.22, 23.55, "浦发银行", "000001");
        //将两支股票保存在Stock的Map中
        stocks.put(szzs.getId(),szzs);
        stocks.put(pfyh.getId(),pfyh);

        System.out.println(stocks);
    }
}


Html页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="jslib/jquery-1.4.2.js"></script>
    <script type="text/javascript " src="jslib/jquerystock.js"></script>
    <title>动态显示股票信息</title>
</head>
<body>
   <div id="300001">[url=#]上证指数:[/url]<span></span></div>
   <div id="000001">[url=#]浦发银行:[/url]<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>

Js文件:
//期望进入页面后就可以开始从服务器端获取数据,然后显示股票价格
//获取服务器端返回的数据对象
 var obj;
var sid;
$(function(){
       //页面载入时隐藏弹出框
    var stockNode =  $("#stock").css("border","1px solid black").width("150px").css("background-color","green");
     stockNode.hide();
    var as = $("a");
    as.mouseover(function(){
        //
        var aNode = $(this);
        var divNode = aNode.parent();
            sid = divNode.attr("id");
        //找到对应的股票对象
          updatediv();
        //控制弹出框的位置
        //找出当前a的位置
      var offset = aNode.offset();
    stockNode.css("left",offset.left+"px").css("top",offset.top + aNode.height() +"px").css("position","absolute");
       // var myEvent = event || window.event;
    
    // stockNode.css("left",myEvent.clientX + "px").css("top",myEvent.clientY + "px");
        stockNode.show();
    });
    as.mouseout(function(){
        //弹出框隐藏
        stockNode.hide();
    });
       //获取服务端信息
        getInfo();
        //3.每隔1秒钟和服务器交互一次,用户不需要刷新页面
        setInterval(getInfo,1000);
});

function getInfo(){
 //向服务器发起请求,获取数据
    $.get("GetStocksInfo", null, function(data){
        obj = eval(data);//在参数栏加上json参数之前
       
     // obj = data;
     //获取两只股票当前的指数信息 ,对于较多个对象
        //遍历一个较多的js对象for(var stockid in obj){var stock =
        // obj[stockid]}
        var szzs = obj["300001"];
        var pfyh = obj["000001"];
        //2.2找到页面中对应的节点,然后填充最新的股票价格
        var span3 = $("#300001").children("span");
                span3.html(szzs.now);
         if(szzs.now > szzs.yes){
             span3.css("color","red");
         }else{
             span3.css("color","green");
         }
       var span0 =  $("#000001").children("span");
         span0.html(pfyh.now);
         if(pfyh.now > pfyh.yes){
             span0.css("color","red");
         }else{
             span0.css("color","green");
         }

             updatediv();
        })
    
}

function updatediv(){
    var stockObj = obj[sid];
       for(var proname in stockObj){
           if(proname != "name"){
               //找到对应的div节点,然后将数据放到子节点span内
               $("#" + proname).children("span").html(stockObj[proname]);
           }
       }
}


在配置文件中注册servlet,应该在启动服务器时,自动加载该servlet,以实现对两个模拟数据的初始化,:具体配置如下 web.xml
    <!--load-on是在服务器启动时自动加载该servlet-->
    <servlet>
        <servlet-name>GetStocksInfo</servlet-name>
        <servlet-class>GetStocksInfo</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>GetStocksInfo</servlet-name>
        <url-pattern>/GetStocksInfo</url-pattern>
    </servlet-mapping>
0
2
分享到:
评论

相关推荐

    Anthem学习笔记

    【Anthem学习笔记】 Anthem是一个用于ASP.NET的Ajax框架,最初源于作者在教授Aap.Net课程时的一个练习。这个框架是由Michael Schwarz的Ajax.NET启发而来,但它在某些方面有所改进,尤其是解决了无法在回调时从...

    js模拟土豆官网右下角广告导航菜单.zip

    【标题】"js模拟土豆官网右下角广告导航菜单.zip" 涉及的主要知识点是使用JavaScript(特别是jQuery库)来实现动态的网页交互效果,尤其是模拟网站右下角的广告导航菜单。jQuery是一个轻量级、高性能的JavaScript库...

    遮罩层滤镜文字发光CSS3特效.zip

    在这个案例中,jQuery可能被用来触发或控制CSS3效果的显示,例如,当用户触发某个事件(如鼠标悬停或点击)时,通过jQuery来改变元素的CSS属性,实现文字发光或遮罩层的动态变化。 在实际应用中,开发者可以依据...

    jQuery商品发布三级联动菜单代码.zip

    这是一个很好的学习和实践jQuery交互效果的例子,对于初学者来说,理解并模仿这段代码,能有效提升自己的前端开发技能。同时,对于有经验的开发者,这个代码也是一个快速构建此类功能的模板,节省了从零开始编写的...

    HTML5 SVG分段步骤进度条加载特效.zip

    在这个例子中,可能使用了多个元素来表示进度条的不同部分,并通过CSS来控制它们的颜色、宽度和动画效果。 其次,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。在这个特效中,...

    jQuery背景图片跟随鼠标摆动动画特效.zip

    总的来说,这个"jQuery背景图片跟随鼠标摆动动画特效"是一个很好的学习案例,它展示了如何利用jQuery轻松创建复杂的动态效果。对于初学者,这将是一个了解jQuery事件处理和动画功能的好起点;对于有经验的开发者,这...

    jQuery新闻公告文字横向滚动切换代码.zip

    在这个例子中,可能通过改变元素的`left`或`margin-left`值来模拟水平滚动。 5. **事件监听**:通过`.on()`方法监听用户的滚动、点击或其他交互行为,触发相应的动画效果。例如,用户可能可以通过点击按钮或自动...

    CSS3夜晚空中孔明灯特效.zip

    【标题】"CSS3夜晚空中孔明灯特效.zip"是一个包含使用CSS3技术实现的动态效果的资源包,主要用于在网页上展示夜晚孔明灯升空的视觉效果。这种特效通常用于营造浪漫、宁静或者节日氛围,吸引用户注意力,提升网站的...

    the_fruit_market

    这个例子很可能与水果市场交易、库存管理或者数据分析有关,可能是通过编程来模拟真实的商业环境。 【描述】提到的是一个“水果市场”的场景,可能是用于总理学院(可能是某个教育机构的名称)的学生学习实践。这个...

    始终居于网页底部可展开关闭的左右全屏滚动图.zip

    对于开发者来说,这是一个很好的学习和实践jQuery交互效果的例子,特别是对那些希望增强网站视觉吸引力和交互性的开发者而言。同时,由于项目声明可以进行二次修改,这意味着可以根据自己的需求进行定制,使其更符合...

Global site tag (gtag.js) - Google Analytics