AJAX应用【股票案例、验证码校验】(一)

简介: 笔记

股票案例


我们要做的是股票的案例,它能够无刷新地更新股票的数据。当鼠标移动到具体的股票中,它会显示具体的信息。

我们首先来看一下要做出来的效果:

40.gif

服务器端分析


首先,从效果图我们可以看见很多股票基本信息:昨天收盘价、今天开盘价、最高价、最低价、当前价格、涨幅。这些信息我们用一个类来描述出来。

我们发现数据是定时刷新的,于是我们需要一个定时器.。

服务器端的数据和客户端交互,我们使用JSON吧

服务器端代码


Stock股票类的代码


  • 股票基本信息:

privateStringid;


   privateStringname;


   privatedoubleyesterday;


   privatedoubletoday;


   privatedoublehighest;


   privatedoublelowest;


   privatedoublecurrent;


   privateStringrange;


   //各种setter和getter

  • Stock的构造函数:

/**

    * id,name,yesterday这三个参数都是固定的,其他的属性都是可变的。

    * 因此我们构造函数就传入这三个值

    * */

   publicStock(Stringid,Stringname,doubleyesterday){

       this.id=id;

       this.name=name;

       this.yesterday=yesterday;


       //把开盘价设定为-1,后面在定时器计算出来的随机数,如果发现开盘价是-1,就设置第一次的随机数为开盘价

       this.today=-1;


       //把最高、最低、当前的价格都暂且设置成昨天的开盘价,后面我们可以变化的

       this.highest=yesterday;

       this.current=yesterday;

       this.lowest=yesterday;


   }

  • setCurrent()方法代码:

/**

    * 每次设置当前价钱的时候,最高、最低、涨幅都应该随着当前价钱而变化的

    */

   publicvoidsetCurrent(doublecurrent){


       //计算出涨幅或跌幅

       doublerange=(current-this.yesterday)/this.yesterday;


       //设置涨幅和跌幅不能超过10%,当前的价格只能是昨天开盘价的1.1倍或0.9倍


       //当前价格应该是两位小数

       DecimalFormatformatPrice=newDecimalFormat("#.00");


       if(range>0.1){

           current=Double.parseDouble(formatPrice.format(this.yesterday*1.1));

       }


       if(range<-0.1){

           current=Double.parseDouble(formatPrice.format(this.yesterday*0.9));

       }

       this.current=current;


       //如果今天开盘价没设定,那么就将第一次的当前价作为今天的开盘价

       if(this.today==-1){

           this.today=this.current;

       }


       //比较最大值和最小值

       if(this.current>this.highest){

           this.highest=this.current;

       }

       if(this.current<this.lowest){

           this.lowest=this.current;

       }


       //格式化涨幅的字符串,整数两位,小数两位

       DecimalFormatformatRange=newDecimalFormat("##.##%");

       this.range=formatRange.format(range);    

   }


Servlet的代码


  • init()初始化代码:

/**

    * 重写init()方法,加入一些配置内容

    */

   @Override

   publicvoidinit(ServletConfigconfig)throwsServletException{


       map=newHashMap<>();


       //新建几只固定的股票

       finalStockzhong=newStock("1","百度",1110.1);

       finalStockfu=newStock("2","阿里",222.2);

       finalStockcheng=newStock("3","腾讯",333.3);

       finalStockou=newStock("4","谷歌",1133.5);


       //添加到容器中

       map.put("1",zhong);

       map.put("2",fu);

       map.put("3",cheng);

       map.put("4",ou);


       //生成随机数

       finalRandomrandom=newRandom();


       //格式化生成的随机数

       finalDecimalFormatformat=newDecimalFormat("#.00");


       //Servlet被启动后1秒开始,每两秒扫描一次


       timer=newTimer();

       timer.schedule(newTimerTask(){

           @Override

           publicvoidrun(){


               doublebaidu=random.nextDouble()*1.1;

               doubleali=random.nextDouble()*2;

               doubletengxun=random.nextDouble()*0.3;

               doublegeogle=random.nextDouble()*4;


               //概率大致都是50%,我们用来做正负

               if(random.nextBoolean()){

                   baidu=0-baidu;

               }

               if(random.nextBoolean()){

                   ali=0-ali;

               }


               if(random.nextBoolean()){

                   tengxun=0-tengxun;

               }

               if(random.nextBoolean()){

                   geogle=0-geogle;

               }


               //设置它们的当前价格

               zhong.setCurrent(Double.parseDouble(format.format(zhong.getCurrent()+baidu)));

               fu.setCurrent(Double.parseDouble(format.format(fu.getCurrent()+ali)));

               cheng.setCurrent(Double.parseDouble(format.format(cheng.getCurrent()+tengxun)));

               ou.setCurrent(Double.parseDouble(format.format(ou.getCurrent()+geogle)));


           }

       },1000,2000);



   }

  • 服务器一启动就应该初始化Servlet

<servlet>

       <servlet-name>Refresh</servlet-name>

       <servlet-class>Refresh</servlet-class>

       <load-on-startup>1</load-on-startup>

   </servlet>

   <servlet-mapping>

       <servlet-name>Refresh</servlet-name>

       <url-pattern>/Refresh</url-pattern>

   </servlet-mapping>

目录
相关文章
|
7月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
97 0
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
61 10
React技术栈-react使用的Ajax请求库实战案例
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
37 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
18 0
|
4月前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
47 0
|
5月前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
【7月更文挑战第13天】构建现代Web应用的关键在于提供无缝用户体验,这涉及AJAX和Fetch API的异步数据交换以及Python(如Flask)的后端支持。Fetch API以其基于Promise的简洁接口,改进了AJAX的复杂性。例如,一个Flask应用可提供用户数据,前端利用Fetch API在不刷新页面的情况下显示信息。这种结合提升了效率,减少了服务器负载,是现代Web开发的趋势。随着技术发展,预期将有更多工具优化这一过程。
72 3
|
6月前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
6月前
|
前端开发 Java
杨校老师课堂之使用Ajax校验用户名是否可用
杨校老师课堂之使用Ajax校验用户名是否可用
24 0
|
7月前
|
前端开发 JavaScript
Ajax基本案例详解之$.ajax的实现
Ajax基本案例详解之$.ajax的实现