使用ajax實現頁面區域性重新整理

簡述

網頁區域性重新整理功能在web網站上已經屢見不鮮了，如即時新聞資訊，股票資訊等，都需要不斷獲取最新資訊。在傳統的web實現方式中，想要實現類似的效果，必須進行整個頁面的重新整理，在網路速度受到一定限制的情況下，這種因為一個區域性變動而牽動整個頁面的處理方式顯得有些得不償失。Ajax技術的出現很好的解決了這個問題，利用Ajax技術可以實現網頁的區域性重新整理，只更新指定的資料，並不更新其他的資料。本文以 登入案例 來介紹一下ajax的使用。

登入html關鍵程式碼

    賬號： 
    密碼：登入

解析：在傳統的專案中提交表單資料到後臺，我們都是使用 form 表單進行的，此時使用ajax技術我們將拋棄以往的form提交方式。

ajax關鍵程式碼

解析：使用ajax技術我們需要依靠jQuery,所以在使用ajax的使用我們需要引入jQuery的包

ajax語法特點

url：請求地址
type：傳遞方式(get/post)
data：用來傳遞的資料
success：互動成功後要執行的方法
dataType：ajax接收後臺資料的型別

servlet關鍵程式碼

protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException {
        //獲取使用者名稱和密碼
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        //建立json物件
        JSONObject jsonObject = null;
        if ("root".equals(username) && "123456".equals(password)) {
            jsonObject = new JSONObject("{flag:true}");
        } else {
            jsonObject = new JSONObject("{flag:false}");
        }
        //將資料返回給ajax
        resp.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));
    }

解析：如圖我們將使用者名稱設定為 root ,密碼設定為123456，如果使用者輸入的跟設定的一致將提示密碼正確，否則提示密碼錯誤！