摘要：當然了，和具體股票對象應該是全局的變量這樣才能夠在別的方法中用到二驗證碼校驗對于驗證碼檢查我們并不會陌生，我們在學習的時候已經使用過了驗證碼檢查了。

我們要做的是股票的案例，它能夠無刷新地更新股票的數據。當鼠標移動到具體的股票中，它會顯示具體的信息。

我們首先來看一下要做出來的效果：

首先，從效果圖我們可以看見很多股票基本信息：昨天收盤價、今天開盤價、最高價、最低價、當前價格、漲幅。這些信息我們用一個類來描述出來。

我們發現數據是定時刷新的，于是我們需要一個定時器。

服務器端的數據和客戶端交互，我們使用JSON吧

股票基本信息：

  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);    
}

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

    Refresh
    Refresh
    1


    Refresh
    /Refresh

doPost()代碼：

//封裝成JSON格式，返回給瀏覽器
StringBuffer buffer = new StringBuffer();


//這里我們拼接成4個對象
buffer.append("({");
for (Map.Entry 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()方法

使用div嵌套span和a標簽來進行顯示，span裝載的就是服務端返回json的current數據

    百度：
    


    阿里巴巴：
    


    騰訊：
    


    谷歌：
    

解析JSON，并設置span的內容

function show() {

    getStock();

    //每兩秒就取一次數據
    setInterval(getStock, 2000);

}
var httpRequest;
function getStock() {

//力求是最新的響應數據，如果存在httpRequest，那么將上次的httpRequest終止
    if(httpRequest) {
        httpRequest.abort();
    }

    httpRequest= new XMLHttpRequest();
    httpRequest.open("GET", "Refresh", true);
    httpRequest.onreadystatechange = callBackFunction;
    httpRequest.send(null);

}

function callBackFunction() {
    if(httpRequest.readyState==4) {
        if(httpRequest.status==200) {

            //得到服務器端返回的JSON數據
            var text = httpRequest.responseText;

            //解析成JavaScript對象
            var json = eval(text);

            //遍歷出每個JSON對象【也就是json的id】
            for(var id in json) {

                //得到每個stock對象
                var stock = json[id];

                //將當前的價格設置到span節點里面
                document.getElementById(id).innerHTML = stock.current;

                //比較當前價格和昨天開盤價格，如果大于就是紅色，小于就是綠色
                if(stock.current>stock.yesterday) {
                    document.getElementById(id).style.color = "red";
                }else {
                    document.getElementById(id).style.color = "green";

                }
            }

        }
    }
}

效果

當鼠標移動到具體的股票超鏈接的時候，會顯示具體的數據，并且數據是動態的

在超鏈接上綁定事件

取出和服務器交互的數據，顯示在頁面上

綁定事件，只要鼠標移動到超鏈接上就觸發事件

    百度：
    


    阿里巴巴：
    


    騰訊：
    


    谷歌：
    



    

        昨收：
    

    

        今收：
    

    

        最低：
    
    

        當前：
    
    

        最高：
    
    

        漲幅：
    

詳細框的信息默認是隱藏的

得到交互的數據，設置span里面的值

function update() {

    var stock = json[sid];

    //得到相對應的控件
    var yesterday = document.getElementById("yesterday");
    var today = document.getElementById("today");
    var low = document.getElementById("low");
    var high = document.getElementById("high");
    var range = document.getElementById("range");
    var current = document.getElementById("current");

    //設置具體信息的值

    high.innerHTML = stock.high;
    range.innerHTML = stock.range;
    current.innerHTML = stock.current;
    yesterday.innerHTML = stock.yesterday;
    today.innerHTML = stock.today;
    low.innerHTML = stock.low;

    //如果數值比昨天開盤價低，反則就是紅色
    if (stock.today > stock.yesterday) {
        today.style.color = "red";
    } else {
        today.style.color = "green";
    }

    if (stock.low > stock.yesterday) {
        low.style.color = "red";
    } else {
        low.style.color = "green";
    }
    if (stock.high > stock.yesterday) {
        high.style.color = "red";
    } else {
        high.style.color = "green";
    }

    //如果現在的價格比昨天開盤高，那么漲幅是紅色
    if (stock.current > stock.yesterday) {
        range.style.color = "red";
        current.style.color = "red";
    } else {
        range.style.color = "green";
        current.style.color = "green";
    }
}

只有鼠標移到超鏈接上，才明確id的值是多少！

function callBackFunction() {
    if (httpRequest.readyState == 4) {
        if (httpRequest.status == 200) {

            //得到服務器端返回的JSON數據
            json= eval(httpRequest.responseText);

            //更新詳細框的數據，當鼠標移動到超鏈接上才確定有id，于是判斷有沒有id
            if(sid) {
                update();
            }

            //遍歷出每個JSON對象【也就是json的id】
            for (var id in json) {

                //得到每個stock對象
                var stock = json[id];

                //將當前的價格設置到span節點里面
                document.getElementById(id).innerHTML = stock.current;

                //比較當前價格和昨天開盤價格，如果大于就是紅色，小于就是綠色
                if (stock.current > stock.yesterday) {
                    document.getElementById(id).style.color = "red";
                } else {
                    document.getElementById(id).style.color = "green";

                }
            }


        }
    }
}

function showTool(node) {

    //得到鼠標移動到具體股票的id
    sid = node.parentNode.getElementsByTagName("span")[0].id;

    //把詳細框框顯示出來
    document.getElementById("toolTip").style.display = "block";

}
function clearTool() {
    document.getElementById("toolTip").style.display = "none";
}

①：這是由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

我們當時是同步檢查驗證碼是否正確的，其實沒有必要。因為就驗證一個輸入框的數據，沒必要使用同步的方式驗證【使用異步對用戶體驗更加友好】

當用戶輸入完4位數字的時候，就去服務器端驗證是否需要相同，如果相同，那么返回一個打鉤的圖片。如果不同，那么就返回一個打叉的圖片

綁定鍵盤輸入事件

當輸入數達到4的時候，就與服務器交互

得到服務器帶過來的圖片，使用DOM添加到對應的位置

得到前臺帶過來的值

判斷該值與Session保存的是否相同

根據判斷值返回對應的圖片

值得注意的是：要獲取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" %>


    
    




<%--###################展示頁面#############################--%>


    

        
驗證碼：
        

        

        

    



<%--###################去除空格方法#############################--%>



<%--###################綁定鍵盤事件#############################--%>

處理請求的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);

    }
}

使用AJAX驗證校驗碼主要是監聽鍵盤的響應事件

要獲取td標簽的數據，外邊一定要套有table標簽！【別偷懶不寫table標簽】

當輸入框的數值數為4的時候就與服務器進行交互，服務器返回一張圖片。

可以用自定義的trim()把數據的前后空格去掉，通過正則表達式來去除空格。

當輸入框的數值數不為4的時候就把圖片的內容清空

如果文章有錯的地方歡迎指正，大家互相交流。習慣在微信看技術文章的同學，可以關注微信公眾號:Java3y