ajax與後臺的交互demo

原創

小海子l

2020-02-20 23:10

這個demo主要演示ajax與tomcat服務器的簡單交互操作！

思路：在輸入框中輸入用戶名，如用戶名爲空，則顯示“請輸入用戶名”；如輸入的用戶名已存在，則顯示“錯號”圖片；不存在相同的用戶名，則顯示“對號”圖片

源碼鏈接：https://github.com/longhaicheng/ajax-and-java(可以給我一個star就好了！)

目錄截圖
前端界面（比較簡單）
未輸入
隨機輸入用戶名
輸入已存在的用戶名
代碼：
前端界面：

<%@ 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 charset="UTF-8">
<title>ajax提交</title>
<script Charset="UTF-8" type="text/javascript">
	var xmlhttp;
	function createxmlhttp() {
		//創建XMLHttpRequest並進行兼容性調試
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	function checkuser() {
		//獲得輸入框中的值
		var name = document.getElementById("username").value;
		//對空值的判斷及處理
		if (name == "") {
			document.getElementById("msg").innerHTML = "請輸入用戶名！";
			document.getElementById("msg").focus();
			document.getElementById("msg").style.color = "red";
			return false;
		} else {
			//不爲空，則不顯示
			document.getElementById("msg").innerHTML = "";
		}
		createxmlhttp();
		//當得到服務器端的響應時，調用handle函數
		xmlhttp.onreadystatechange = handle;
		//拼接url
		var url = "test?username=" + name;
		//"GET" : 第一個屬性表示請求方法("GET" or "POST");
		//url : 上面以拼接完成的url;
		//true : 是否使用異步
		xmlhttp.open("GET", url, true);
		//發送！！
		xmlhttp.send();
		function handle() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//得到服務器端傳過來的圖片地址
				var imagesrc = xmlhttp.responseText;
				//設置圖片的而大小及路徑
				document.getElementById("imgshow").style.width = '15px';
				document.getElementById("imgshow").style.height = '15px';
				document.getElementById("imgshow").src = imagesrc;
			}
		}
	}
</script>
</head>
<body>
	<input type="text" name="username" id="username" onBlur="checkuser()"
		placeholder="輸入用戶名">
	<span id="msg"></span>
	<img id="imgshow">
	<br>
	<!-- 這裏使用onBlur事件-->
	<button onBlur="checkuser()">點擊</button>
</body>
</html>

服務器端：

package testservlet;

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

/**
 * Servlet implementation class test
 */
@WebServlet("/test")
public class test extends HttpServlet {
	private String teacher = "張三";
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public test() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8"); // 設置編碼
		response.setCharacterEncoding("utf-8"); // 設置編碼
		String name = request.getParameter("username"); // 得到前面的值
		String username = URLDecoder.decode(name, "utf-8"); // 對URL進行編碼
		String url = "";
		if (teacher.equals(username.trim())) {
			url = "image/false.png";
		} else {
			url = "image/true.png";
		}
		// 返回路徑
		response.getWriter().println(url);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	}

}