專案地址 https://gitee.com/yyyyys/stockWeb

Servlet（Server Applet）是Java Servlet的簡稱，稱為小服務程式或服務聯結器，用Java編寫的伺服器端程式，主要功能在於互動式地瀏覽和修改資料，生成動態Web內容。(百度百科）

Ajax 即“Asynchronous Javascript And XML”（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發技術。（百度百科）

用JavaScript實現，通過後臺的Servlet提供實時重新整理的資料來非同步重新整理HTML/JSP上的內容。

首先是Servlet的搭建，建議使用Servlet3.0的

@WebServlet(urlPatterns={"/data"})

需要Servlet-api.jar包，在Tomcat的lib裡面有提供，可以直接複製出來新增到Java專案的依賴裡。

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet(urlPatterns={"/img"})
public class imgService extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public imgService() {
        super();
        // TODO Auto-generated constructor stub
    }

    public static void setImg(String stat) {
        //處理圖片的函式
    }

    public static String getImg() {
        return img;
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html; charset=utf-8");
        response.setHeader("Cache-Control", "no-store");
        response.setHeader("Pragma", "no-cache");
        response.setDateHeader("Expires", 0);
        PrintWriter out = response.getWriter();
        try {
            String stat = request.getParameter("id"); //獲得get請求的傳值
            setImg(stat); //處理資料（此處為圖片）
            out = response.getWriter();
            out.println(getImg());  //把要返回的資料顯示在網頁上（路徑為最上面設定的路徑）
        } catch (Exception e) {
            out.print("error: img");
            e.printStackTrace();
        }

    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }
}
 

Servlet設定好並部署到Tomcat以後訪問響應的目錄並提供傳值會得到返回值，在JavaScript部分對返回值加以處理並通過DOM更新HTML上的內容，具體程式碼如下

var req;
function imgrefresh(id) {
    var url = "http://192.168.6.227:8080/img?id=" + id;
    if(window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    }else if(window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    req.open("GET", url, true);
    req.onreadystatechange = callback; //此處callback雖然是函式名，但是不可以加括號，會導致readyState一直為1
    req.send(null);
}
function callback() {
    if(req.readyState == 4 && req.status == 200) { //當Servlet連線成功的時候執行修改
        var res = req.responseText;
        show (res);
    }
}
function show(str) { //通過dom修改HTML上的內容
    var show = "<img class=\"img-self\" src=\"" + str +"\" />";
    document.getElementById("sp").innerHTML=show;
}