jsp+ajax實例

下面介紹JSP前臺表單內容通過Ajax異步提交到後臺Servlet進行校驗（校驗方式多種，包括提取數據庫信息，校驗用戶名是否重複等），異步在JSP表單頁面顯示校驗結果信息的基本過程。

一、說明：

       1.由於本文只限於介紹JSP+Servlet+Ajax運用的基本流程，重點不在於後臺數據庫的訪問和校驗內容，因此省略Servlet對數據庫的訪問。

二、基本流程：

      1. JSP頁面login.jsp提供一個表單“form”，表單中有兩個“text”類型的輸入框，其中我們將用第一個輸入框來做實驗。

        在第一個輸入框中（輸入用戶名），通過onblur=validate();，當用戶光標離開輸入框時，觸發JS函數validate() ，函數validate()在Ajax.js文件中聲明。

Html代碼  

<%@page contentType="text/html" pageEncoding="UTF-8"%>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  

    "http://www.w3.org/TR/html4/loose.dtd">  

<html>  

    <head>  

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

        <script type="javascript" src="Ajax.js"></script>        

    </head>  

    <body>  

        <h1>Test Ajax</h1><p>  

        <form action="" method="get" name="form">  

            <br>  

            輸入用戶名：  

            <input type="text" size="10" maxlength="8" id="userName" name="name" onblur="validate()">  

            <span id="info"></span>  

            <br>  

            輸入商品名：  

            <input type="text" size="10" maxlength="8" >  

        </form>  

    </body>  

</html>

2、Ajax.js文件聲明瞭一系列函數，用於完成向表單與servlet的中接處理。

2.1、函數validate()要點：

        2.1.1、通過document.getElementById(String id)獲取表單中有特定id值的輸入框的值，即獲取用戶輸入的用戶名。

        2.1.2、聲明一個變量url，存放要訪問的servlet:"validate.do?id=" + escape(idField.value)，問號？後面表示在url後添加一個值，這個值在validate.do這個servlet中可以通過request.getParameter("id")來獲取。

Js代碼  

var url = "validate.do?id=" + escape(idField.value);  

2.1.3、通過if()語句以兼容IE，Firefox等多個瀏覽器版本的方式創建一個XMLHttpRequest對象。

Java代碼  

if(window.XMLHttpRequest) {  

    //IE7, Firefox, Opera支持  

    req = new XMLHttpRequest();  

}else if(window.ActiveXObject) {  

    //IE5,IE6支持  

    req = new ActiveXObject("Microsoft.XMLHTTP");  

}

2.1.4、調用XMLHttpRequest對象函數open()準備向servlet發送請求（此時只是“準備發送”，並沒有發送）

Js代碼  

req.open("GET", url, true);  

2.1.5、調用XMLHttpRequest對象函數send(param)向servlet發送請求。param參數的值null（關於send()方法使用請另外查閱）

Js代碼  

req.send(null);  

2.1.6、調用一個觸發事件onreadystatechange，每當 readyState 改變時，onreadystatechange 函數就會被執行。readyState有5個可能值：0：請求未初始化（在調用open()之前）；1：請求已經提出（調用send()之前）；2：請求已經發送（這裏通常可以從響應得到內容頭部）；3：請求處理中（響應中通常有部分數據可用，但是服務器還沒有完成響應）；4：請求已經完成（可以訪問服務器響應並使用它）

Js代碼  

req.onreadystatechange = callback;  

2.2、function callback()要點：

2.2.1 XMLHttpRequest.status = 200表示服務器已經成功響應。

通過XMLHttpRequest.responseText獲取servlet端的getPrintWriter().write()輸出的響應。得到的值是一個String類型數據。

Js代碼  

var check = req.responseText;  

2.3、通過show()函數輸出結果到標籤標記的位置。

完整的Ajax.js文件：

Js代碼  

var req;  

function validate() {  

    //獲取表單提交的內容  

    var idField = document.getElementById("userName");  

    //訪問validate.do這個servlet，同時把獲取的表單內容idField加入url字符串，以便傳遞給validate.do  

    var url = "validate.do?id=" + escape(idField.value);                  

    //創建一個XMLHttpRequest對象req  

    if(window.XMLHttpRequest) {  

        //IE7, Firefox, Opera支持  

        req = new XMLHttpRequest();  

    }else if(window.ActiveXObject) {  

        //IE5,IE6支持  

        req = new ActiveXObject("Microsoft.XMLHTTP");  

    }  

    /* 

     open(String method,String url, boolean )函數有3個參數 

     method參數指定向servlet發送請求所使用的方法，有GET,POST等 

     boolean值指定是否異步，true爲使用，false爲不使用。 

     我們使用異步才能體會到Ajax強大的異步功能。 

     */  

    req.open("GET", url, true);  

    //onreadystatechange屬性存有處理服務器響應的函數,有5個取值分別代表不同狀態  

    req.onreadystatechange = callback;  

    //send函數發送請求  

    req.send(null);                  

}  

function callback() {  

    if(req.readyState == 4 && req.status == 200) {  

        var check = req.responseText;  

        show (check);  

    }  

}  

function show(str) {  

    if(str == "OK") {  

        var show = "<font color='green'>恭喜！！用戶名可用！</font>";  

        document.getElementById("info").innerHTML = show;  

    }  

    else if( str == "NO") {  

        var show = "<font color='red'>對不起，用戶名不可用！！請重新輸入！</font>";  

        document.getElementById("info").innerHTML = show;  

    }  

}

三、servlet處理：

重點1：通過以下幾行代碼設置瀏覽器不進行Ajax處理頁面的緩存（如果出現緩存，將導致一些不可預知的麻煩）

Java代碼  

response.setContentType("text/html");  

response.setHeader("Cache-Control", "no-store");  

response.setHeader("Pragma", "no-cache");  

response.setDateHeader("Expires", 0);

重點2：通過request.getParameter()來獲取Ajax傳遞的參數。

Java代碼  

String name = request.getParameter("id");  

重點3：通過response.getWriter().write()向Ajax輸出參數，在Ajax一端通過var check = XMLHttpRequest.responseText獲取參數值。

Java代碼  

if(name.equals("1")) {  

    out.write("OK");  

}  

else {  

    out.write("NO");  

}

完整的servlet代碼：

Java代碼  

package com.model;  

import java.io.IOException;  

import java.io.PrintWriter;  

import javax.servlet.ServletException;  

import javax.servlet.http.HttpServlet;  

import javax.servlet.http.HttpServletRequest;  

import javax.servlet.http.HttpServletResponse;  

public class DoAjaxServlet extends HttpServlet {  

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)  

    throws ServletException, IOException {  

        response.setContentType("text/html;charset=UTF-8");  

        PrintWriter out = response.getWriter();  

        try {  

            response.setContentType("text/html");  

            response.setHeader("Cache-Control", "no-store");  

            response.setHeader("Pragma", "no-cache");  

            response.setDateHeader("Expires", 0);  

            String name = request.getParameter("id");  

            if(name.equals("1")) {  

                out.write("OK");  

            }  

            else {  

                out.write("NO");  

            }  

        } finally {   

            out.close();  

        }  

    }   

    @Override  

    protected void doGet(HttpServletRequest request, HttpServletResponse response)  

    throws ServletException, IOException {  

        processRequest(request, response);  

    }   

    @Override  

    protected void doPost(HttpServletRequest request, HttpServletResponse response)  

    throws ServletException, IOException {  

        processRequest(request, response);  

    }  

    @Override  

    public String getServletInfo() {  

        return "Short description";  

    }  

}

最後，記得在web.xml配置文件中配置這個servlet:

Xml代碼  

<servlet>  

    <servlet-name>DoAjaxServlet</servlet-name>  

    <servlet-class>com.model.DoAjaxServlet</servlet-class>  

</servlet>  

<servlet-mapping>  

    <servlet-name>DoAjaxServlet</servlet-name>  

    <url-pattern>/validate.do</url-pattern>  

</servlet-mapping>

星級評分的簡化實現

Struts框架中類的功能與方法

JSP web.xml 配置詳解

httpClient4.x 爬蟲教學

jsp+ajax實例

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結