做項目過程中,需要用到 ajax 實時驗證註冊的用戶名是否已經存在。所以寫了一個小例子,經過測試直接可用。
主要分爲4個文件,分別爲 web.xml 文件,login.jsp文件,login.js 以及
LoginServlet.java文件。
在eclipse中新建項目,文件的存放樹如下:
注意引進所需的 jar 包.
1 . login.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
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">
<title>驗證用戶名是否存在</title>
<script type="text/javascript" src="./login.js"></script>
</head>
<body>
<form action="" enctype="application/x-www-form-urlencoded" >
用戶名:<input type="text" name="username" value="" id="username">
<div id="divcheck"></div>
<input type="button" name="checkusername" value="查看用戶名" id="checkusername"/>
</form>
</body>
</html>
login.jsp 即界面,在login.jsp中引入.js文件用來做ajax處理。
2 . login.js
window.onload = function() {
//通過id獲取頁面button的onclick點擊事件
document.getElementById("checkusername").onclick = function() {
var username = document.getElementById("username").value;
//測試打印出username(輸入值)
alert(username);
//1.創建ajax對象
var xhr = ajaxFunction();
xhr.onreadystatechange = function() {
//處理後臺返回的數據
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var data= xhr.responseText;
document.getElementById("divcheck").innerHTML = data;
}
}
}
//規定發送數據的形式(post/get),url,以及傳輸方式(同步/異步)
xhr.open("post","./LoginServlet?timeStamp="+new Date().getTime(),true);
//post方式需要加下邊這句,get方式不需要
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//將頁面輸入數據發送到後臺
xhr.send("username="+username);
}
}
function ajaxFunction() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch(e) {
try {
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {}
}
}
return xmlHttp;
}
在.js文件中進行ajax的處理過程,處理過程分爲4個階段
1.創建ajax對象(XMLHttpRequest對象)
2.與服務器建立連接
3.客戶端發送請求數據到服務器
4.服務器返回響應到客戶端,客戶端接收響應。
需要注意的是,第一步創建XMLHttpRequest對象,之後所有的操作都是針對於這個對象的屬性來完成的。
3 . web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<welcome-file-list>
<welcome-file>register.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>com.test.Servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/LoginServlet</url-pattern>
</servlet-mapping>
</web-app>
web.xml是配置文件,配置前臺頁面和後臺Servlet的映射關係,注意url路徑的對應。
4 . LoginServlet.java
package com.test.Servlet;
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 LoginServlet extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
response.setContentType("text/html;charset=utf-8");
//定義輸出流
PrintWriter out = response.getWriter();
//獲取前端頁面輸入數據
String username = request.getParameter("username");
//測試打印,測試接收前臺數據是否成功
System.out.println(username);
//進行比較並作出響應。
if(username==null || username.equals("")) {
out.println("請輸入用戶名 ");
} else if("sa".equals(username)) {
out.println("該用戶名已經存在");
} else {
out.println("可以註冊");
}
}
}
效果展示:
關於ajax驗證的過程—-》需要驗證兩部分:
1 .驗證ajax的狀態,通過 readyState 狀態碼來驗證 0-4
0 表示未初始化,還沒有調用open方法
1 表示已經初始化,但是沒有發送請求,即沒有調用send方法,即正在加載
2 表示加載完畢,send已經被調用,請求開始
3 代表交互中,服務器正在發送響應
4 代表交互完成
2 . 驗證返回的狀態碼是否爲200或者304
404 沒有找到頁面
403 禁止訪問
500 訪問出錯
200 一切正常
304 源文件沒有被修改
做完這個小例子之後,我將servlet+ajax 和我之前寫的項目結合到了一起。
之前的項目我用struts2框架寫的,所以我將servlet+ajax+struts2結合到了一起去,並且成功運行。
需要注意的是默認情況下struts會攔截servlet的請求,所以我們只需要修改和servlet處理有關的配置文件就行,在web.xml配置文件中找到servlet的配置路徑,加入.servlet後綴名。在ajax處理的.js文件中,找到servlet處理的路徑,加入.servlet後綴名。如下圖所示:
修改這兩處就能避免struts2攔截servlet的請求,實現servlet+strut2+ajax
的處理。