AJAX异步请求判断用户名是否符合要求

最新推荐文章于 2024-10-11 16:49:16 发布

邵邵邵

最新推荐文章于 2024-10-11 16:49:16 发布

阅读量362

点赞数 2

分类专栏： JavaWeb 文章标签： ajax

本文链接：https://blog.csdn.net/qq_45791799/article/details/109081408

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了Ajax在网页中的应用，通过一个简单的注册页面示例展示了如何利用Ajax进行异步数据传输，实现在用户输入用户名时即时检查用户名是否可用，避免了页面刷新。在JavaScript中定义了创建XMLHttpRequest对象、处理请求和响应的函数，Servlet处理了从服务器端返回的验证结果。Ajax请求的五个步骤包括创建对象、设置请求、发送数据、监听状态和接收响应。

摘要由CSDN通过智能技术生成

一、ajax的作用

ajax实现了浏览器网页与服务器的异步传输，在不需要重新加载网页的情况下可以更新网页内容，例如，输入用户名，在不点击提交的情况下就可以检查到用户名的输入是否符合规范！

二、代码展示

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>注册页面</h1>
<form action="registerServlet" method="get" onsubmit="checkform()">
用户名：<input type="text" id="username" name="user" onchange="chuli()"><span id="err"></span>
密码：<input type="password" id="pwd">
</form>


<script>
var xmlhttp;
var flag;
//1.创建对象
function creatObject(){
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
}

//2.处理请求
function chuli(){
	creatObject();
	var username = document.getElementById("username").value;
	xmlhttp.open("GET","TestAjax?username="+username,true);
	xmlhttp.setRequestHeader("If-Modified-Since", "0");//get清空缓存
	xmlhttp.send();
	//进入响应状态
	xmlhttp.onreadystatechange=back;
}

//3.处理响应
function back(){
	 if (xmlhttp.readyState==4 && xmlhttp.status==200){
		 var msg = xmlhttp.responseText;
		 if(msg=="success"){
			 err.innerHTML="该用户名可以使用";
			 flag=true;
		 }else{
			 alert("用户名有误!请重新输入");
			 //1.清空文本框内容
		  document.getElementById("username").value="";
			 flag=false;
		 }
	 }
	 }

function checkform(){
	return flag;
}
</script>
</body>
</html>

TextAjax.java

package com.Servlet;

import java.io.IOException;
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 TestAjax
 */
@WebServlet("/TestAjax")
public class TestAjax extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public TestAjax() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//编码
		response.setContentType("text/html;charset=utf-8");
		
		String username = request.getParameter("username");
		if(("admin".equals(username))) {
			response.getWriter().write("success");
		}else {
			response.getWriter().write("error");
		}
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}