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

落日映苍穹つ 2021-09-14 19:12 414阅读 0赞

# 股票案例 #

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

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

![这里写图片描述][SouthEast]

## 服务器端分析 ##

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

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

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

## 服务器端代码 ##

### **Stock股票类的代码** ###

*  股票基本信息：

private String id;
    
        private String name;
    
        private double yesterday;
    
        private double today ;
    
        private double highest;
    
        private double lowest;
    
        private double current;
    
        private String range ;
    
        //各种setter和getter

*  Stock的构造函数：

/** * id,name,yesterday这三个参数都是固定的，其他的属性都是可变的。 * 因此我们构造函数就传入这三个值 * */
        public Stock(String id, String name, double yesterday) {
            this.id = id;
            this.name = name;
            this.yesterday = yesterday;
    
            //把开盘价设定为-1，后面在定时器计算出来的随机数，如果发现开盘价是-1，就设置第一次的随机数为开盘价
            this.today = -1;
    
            //把最高、最低、当前的价格都暂且设置成昨天的开盘价，后面我们可以变化的
            this.highest = yesterday;
            this.current = yesterday;
            this.lowest = yesterday;
    
        }

*  **setCurrent()方法代码：**

/** * 每次设置当前价钱的时候，最高、最低、涨幅都应该随着当前价钱而变化的 */
        public void setCurrent(double current) {
    
            //计算出涨幅或跌幅
            double range = (current - this.yesterday) / this.yesterday;
    
            //设置涨幅和跌幅不能超过10%，当前的价格只能是昨天开盘价的1.1倍或0.9倍
    
            //当前价格应该是两位小数
            DecimalFormat formatPrice = new DecimalFormat("#.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;
            }
    
            //格式化涨幅的字符串，整数两位，小数两位
            DecimalFormat formatRange = new DecimalFormat("##.##%");
            this.range = formatRange.format(range);    
        }

--------------------

### **Servlet的代码** ###

*  init()初始化代码：

/** * 重写init()方法，加入一些配置内容 */
        @Override
        public void init(ServletConfig config) throws ServletException {
    
            map = new HashMap<>();
    
            //新建几只固定的股票
            final Stock zhong = new Stock("1", "百度", 1110.1);
            final Stock fu = new Stock("2", "阿里", 222.2);
            final Stock cheng = new Stock("3", "腾讯", 333.3);
            final Stock ou = new Stock("4", "谷歌", 1133.5);
    
            //添加到容器中
            map.put("1", zhong);
            map.put("2", fu);
            map.put("3", cheng);
            map.put("4", ou);
    
            //生成随机数
            final Random random = new Random();
    
            //格式化生成的随机数
            final DecimalFormat format = new DecimalFormat("#.00");
    
            //Servlet被启动后1秒开始，每两秒扫描一次
    
            timer = new Timer();
            timer.schedule(new TimerTask() {
                @Override
                public void run() {
    
                    double baidu = random.nextDouble() * 1.1;
                    double ali = random.nextDouble() * 2;
                    double tengxun = random.nextDouble() * 0.3;
                    double geogle = 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>

*  doPost()代码：

//封装成JSON格式，返回给浏览器
            StringBuffer buffer = new StringBuffer();
    
    
            //这里我们拼接成4个对象
            buffer.append("({");
            for (Map.Entry<String, Stock> entry : map.entrySet()) {
                String id = entry.getKey();
                Stock stock = entry.getValue();
    
                buffer.append(id).append(":{yesterday:").append(stock.getYesterday()).append(",today:").append(stock.getToday()).append(",high:").append(stock.getHighest()).append(",low:").append(stock.getLowest()).append(",current:").append(stock.getCurrent()).append(",range:'").append(stock.getRange()).append("'}").append(",");
    
            }
            //消除最后一个逗号
            buffer.deleteCharAt(buffer.lastIndexOf(","));
    
            //最后补上括号
            buffer.append("})");
    
            //返回给浏览器
            response.getWriter().write(buffer.toString());

*  **拼接成的JSON数据：**

({
        3:{yesterday:333.3,today:333.48,high:333.48,low:333.3,current:333.48,range:'0.05%'},
        2:{yesterday:222.2,today:223.46,high:223.46,low:222.2,current:223.46,range:'0.57%'},
        1:{yesterday:1110.1,today:1109.73,high:1110.1,low:1109.73,current:1109.73,range:'-0.03%'},
        4:{yesterday:1133.5,today:1135.49,high:1135.49,low:1133.5,current:1135.49,range:'0.18%'}
    })

## 客户端分析之一 ##

客户端要做的就是显示数据，**每隔两秒就和服务器进行一次交互**  
\- **用到Ajax和setInterval()方法**

### **html代码** ###

**使用div嵌套span和a标签来进行显示，span装载的就是服务端返回json的current数据**

### **javaScript代码** ###

*  **解析JSON，并设置span的内容**

*  效果

![这里写图片描述][SouthEast 1]

--------------------

## 客户端分析之二 ##

**当鼠标移动到具体的股票超链接的时候，会显示具体的数据，并且数据是动态的**  
\- **在超链接上绑定事件**  
\- **取出和服务器交互的数据，显示在页面上**

### **html代码：** ###

绑定事件，只要鼠标移动到超链接上就触发事件

### **css代码** ###

详细框的信息默认是隐藏的

### **javaScript代码** ###

**得到交互的数据，设置span里面的值**

**只有鼠标移到超链接上，才明确id的值是多少！**

## 最终效果： ##

![这里写图片描述][SouthEast 2]

## 总结要点 ##

①：这是由AJAX来实现的，因为它无刷新的动态交互数据。

②：服务器端应该保存着股票的基本信息。于是乎，我们用一个类来装载着这些信息【信息之间的关系就不一一说明了，因为每个案例用的可能都不一样】

③：用到了DecimalFormat类来格式化小数变为自己想要的格式

④：使用HashMap来装载这些股票，使用Map集合主要是在客户端中，可以通过键来访问具体的股票，只要能访问到股票了，那么一切就好说了。

⑤：当然啦，装载股票的任务就交给init()方法，因为只需要装载一次。

⑥：我们会发现，股票的信息是不断会变化的，所以我们使用定时器和Random类来不断修改股票的信息

⑦：JavaScript和服务端交互使用AJAX，要么使用XML，要么就是JSON，这次我们采用的是JSON

⑧：JavaScript使用XMLHttpRequest对象得到Servlet返回给浏览器的JSON数据，解析JSON数据，变成是JavaScript对象

⑨：在页面上显示服务端带过来的数据，一般都是使用div来显示【块级】，用控件绑定id，在JavaScript中得到控件，填充数据。这样就是动态地修改页面的数据了。

⑩：浏览器想要不断地从服务端获取股票的数据，那么就需要不断地与服务端交互，解析JSON，填充数据…..这种我们可以通过setInterval()定时器来做

①①：想要修改字体的颜色，只要获取它的控件再style.color就可以修改了。

①②：鼠标移动到具体的股票链接的时候，会出现股票的详细信息时，这明显就是为超链接绑定了事件

①③：股票的详细信息用一个框框装载着，那么我们就在css中初始化这个框框，它平时是不显示出来的，只用在鼠标移到它那里的时候才显示，我们把display=“none”就行了。

①④：在响应事件的时候，我们需要知道用户是移动到哪一个超链接上，所以要获取得到具体的超链接id。知道id以后，我们就知道用户想要知道的股票是哪一个了。

①⑤：股票的信息也想要及时的更新，那么我们想把它抽取成一个方法，在AJAX回调方法中加入进去就行了。当然了，id和具体股票对象应该是全局的变量【这样才能够在别的方法中用到】

# 验证码校验 #

对于验证码检查我们并不会陌生，我们在学习Session的时候已经使用过了验证码检查了。详细可参考：[http://blog.csdn.net/hon\_3y/article/details/54799494\#t11][http_blog.csdn.net_hon_3y_article_details_54799494_t11]

我们当时是同步检查验证码是否正确的，其实没有必要。因为**就验证一个输入框的数据，没必要使用同步的方式验证【使用异步对用户体验更加友好】**

![a][]

## 分析 ##

**当用户输入完4位数字的时候，就去服务器端验证是否需要相同，如果相同，那么返回一个打钩的图片。如果不同，那么就返回一个打叉的图片**

### 前台分析 ###

*  **绑定键盘输入事件**
 *  **当输入数达到4的时候，就与服务器交互**
 *  **得到服务器带过来的图片，使用DOM添加到对应的位置**

### 后台分析 ###

*  **得到前台带过来的值**
 *  **判断该值与Session保存的是否相同**
 *  **根据判断值返回对应的图片**

--------------------

## 编写JSP ##

值得注意的是：**要获取td定义的id，外边一定要套上table标签**。。。我在刚开始写的时候，是没有table标签的。然后死活得不到td的标签….很烦…

<%-- Created by IntelliJ IDEA. User: ozc Date: 2017/5/17 Time: 20:52 To change this template use File | Settings | File Templates. --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>验证码校验</title>
        <script type="text/javascript" src="js/ajax.js"></script>
    </head>
    <body>
    
    
    <%--###################展示页面#############################--%>
    
    <table>
        <tr>
            <td>验证码：</td>
            <td><input type="text" id="checkCode" name="checkCode"></td>
            <td><img src="01_image.jsp"/></td>
            <td id="result"></td>
        </tr>
    </table>
    
    
    <%--###################去除空格方法#############################--%>
    <script type="text/javascript"> function trim(str) { //去除左边的空格 str.replace("/^\s*/", ""); //去除右边的空格 str.replace("/\s*$/", ""); return str; } </script>
    
    
    <%--###################绑定键盘事件#############################--%>
    
    <script type="text/javascript"> document.getElementById("checkCode").onkeyup = function () { //得到输入框的内容，把的前后空格都去除 var keyValue = this.value; keyValue = trim(keyValue); /*******************ajax代码*******************************/ if (keyValue.length == 4) { var ajax = createAJAX(); var method = "post"; var url = "${pageContext.request.contextPath}/CheckCodeServlet?time=" + new Date().getTime(); ajax.open(method, url); ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); ajax.send("keyValue=" + keyValue); /*******************ajax回调函数*******************************/ ajax.onreadystatechange = function () { if (ajax.readyState == 4) { if (ajax.status == 200) { //得到服务器带过来的数据 var tip = ajax.responseText; /*******************使用DOM把数据添加到页面上*******************************/ var img = document.createElement("img"); img.src = tip; img.style.width = "14px"; img.style.height = "14px"; var td = document.getElementById("result"); td.innerHTML = ""; td.appendChild(img); } } }; }else { //清空图片 var td = document.getElementById("result"); td.innerHTML = ""; } }; </script>
    
    
    </body>
    </html>

*  处理请求的Servlet

import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;
    
    /** * Created by ozc on 2017/5/17. */
    @WebServlet(name = "CheckCodeServlet",urlPatterns = "/CheckCodeServlet")
    public class CheckCodeServlet extends HttpServlet { 
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            //得到带过来的数据
            String keyValue = request.getParameter("keyValue");
            //得到Session中的数据
            String checkCodeInSession = (String) request.getSession().getAttribute("CHECKNUM");
            response.setContentType("text/html;charset=UTF-8");
    
            String src = "images/MsgError.gif";
    
            //判断俩数据是否相同
            if (keyValue.equals(checkCodeInSession)) {
                src = "images/MsgSent.gif";
            }
            PrintWriter writer = response.getWriter();
            writer.write(src);
    
            writer.flush();
            writer.close();
    
    
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            this.doPost(request, response);
    
        }
    }

## 测试 ##

![这里写图片描述][SouthEast 3]

--------------------

## 总结 ##

*  **使用AJAX验证校验码主要是监听键盘的响应事件**  
    
    
     *  要获取td标签的数据，外边一定要套有table标签！【别偷懒不写table标签】
     *  当输入框的数值数为4的时候就与服务器进行交互，服务器返回一张图片。
     *  可以用自定义的trim()把数据的前后空格去掉，通过正则表达式来去除空格。
     *  当输入框的数值数不为4的时候就把图片的内容清空

--------------------

> 如果文章有错的地方欢迎指正，大家互相交流。习惯在微信看技术文章的同学，**可以关注微信公众号:Java3y**

[SouthEast]: /images/20210827/4091df548f634c1c955db880ce1d82f5.png
[SouthEast 1]: /images/20210827/eec9b8da6a4b4b67add6c5d083ee090f.png
[SouthEast 2]: /images/20210827/a18f44de8ba34af7b48d2557636ac42d.png
[http_blog.csdn.net_hon_3y_article_details_54799494_t11]: http://blog.csdn.net/hon_3y/article/details/54799494#t11
[a]: /images/20210827/0c3ab84f710f4b47859211bdc141c96d.png
[SouthEast 3]: /images/20210827/23740763d0b546718370471f68b1e8f6.png