jsp ajax實例講解

時間 2019-12-14

標籤 jsp ajax 實例講解欄目 JSP 简体版

原文原文鏈接

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

1、說明：

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

2、基本流程：

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

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

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>

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

2.一、函數validate()要點：

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

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

Js代碼

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

2.1.三、經過if()語句以兼容IE，Firefox等多個瀏覽器版本的方式建立一個XMLHttpRequest對象。java

Java代碼

if(window.XMLHttpRequest) {
//IE7, Firefox, Opera支持
req = new XMLHttpRequest();
}else if(window.ActiveXObject) {
//IE5,IE6支持
req = new ActiveXObject("Microsoft.XMLHTTP");
}

2.1.四、調用XMLHttpRequest對象函數open()準備向servlet發送請求（此時只是「準備發送」，並無發送）web

Js代碼

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

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

Js代碼

req.send(null);

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

Js代碼

req.onreadystatechange = callback;

2.二、function callback()要點：

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

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

Js代碼

var check = req.responseText;

2.三、經過show()函數輸出結果到標籤標記的位置。服務器

完整的Ajax.js文件：app

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

3、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";
}
}