Ajax异步操作实现登录验证

Ajax 异步js和xml

异步刷新: 如果网页中某一个地方需要修改，异步刷新可以使用：只刷新需要修改的地方，其他地方不用动
1. js： XMLHttpRequest对象
2. XMLHttpRequest对象的方法
3. open(方法名（提交方式get|post，服务器地址，true)与服务端建立连接
4. send()
set：RequestHeader(header, value)
get:不需要设置此方法
post：需要设置
如果请求元素中包含了文件上传

setRequestHeader(“Content-Type”,“multiparty/form-data”);
不包含文件上传
setRequestHeader(“Content-Type”,“application/x-www-form-urllencoded”)
XMLHttpRequest对象的属性

readystate:请求状态只有状态4代表请求完毕成功响应
status：响应状态只有200-300之间的数字代表响应正常
onreadystatechange 回调函数
responseText 响应格式为String
responseXML 响应格式为xml

js访问请求

<script>
	function check() {
    
    
		var u = document.getElementById("uname");
		var name = u.value;

		//访问字符串
		var url = "AjaxServlet";
		
		xmlHttp = new XMLHttpRequest();
		//设置xmlhttpRquest对象的回调函数

		xmlHttp.onreadystatechange = callback;

		xmlHttp.open("post", url, true);

		//设置post方式的头信息
		xmlHttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xmlHttp.send("name=" + name);
	}
	//回调函数
	function callback() {
    
    
		if (xmlHttp.status == 200 && xmlHttp.readyState == 4) {
    
    
			var data = xmlHttp.responseText;//得到服务端的输出结果
			if (data == "true") {
    
    
				//document.getElementById("alert").innerHTML = "<font color='red'>用户名已经存在！</font>";
				alert("失败，用户存在")
			} else {
    
    
				//document.getElementById("alert").innerHTML = "<font color='blue'>用户名可以使用！</font>";
				alert("注册成功")
			}
		}
	}
</script>
<body>
	请输入用户名：
	<input id="uname" name="uname" type="text" onblur="checkUserExists()" />
	<input type="button" value="登录" onclick="check()">
	<div id="alert" style="display: inline"></div>
</body>

在这里插入图片描述
jQuery请求

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
   function check() {
    
    
	   var $name = $("#uname").val();
	   alert($name);
	   $.ajax({
    
    
		
           type: "POST",
           url: "AjaxServlet",
           data: "name=" + $name,
           success: function (result,test) {
    
    
             if(result == "true"){
    
    
            	 alert("失败")
             }else{
    
    
            	 alert("成功")
             }
           },
		 error:function(xhr,errorMessage,e){
    
    alert("系统异常");}
		 
	 });
}
</script>
	请输入用户名：
	<input id="uname" name="uname" type="text" onblur="checkUserExists()" />
	<input type="button" value="登录" onclick="check()">
	<div id="alert" style="display: inline"></div>
</body>

Servlet

protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
    
    
		request.setCharacterEncoding("UTF-8");
		String name = request.getParameter("name");// 获取到输入的用户名
		System.out.println(name);
		response.setCharacterEncoding("UTF-8");// 设置字符编码
		PrintWriter out = response.getWriter();
		if ("ls".equals(name)) {
    
    
			out.write("true");
		} else {
    
    
			out.write("false");
		}

	}

post请求
$.post(
url
data
function(result){判断}
, :xml json text
);

<%@ 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>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	function check() {
    
    
		var $name = $("#uname").val();
		$.post("AjaxServlet", "name=" + $name, function(result) {
    
    
			if (result == "true") {
    
    
				alert("注册失败");
			} else {
    
    
				alert("注册成功");
			}
		}, "text"

		);	}
</script>
<body>
	<input type="text" id="uname">
	<input type="button" value="登录" onclick="check()">
</body>
</html>

get请求

$.get(
url
data
function(result){判断});

<script type="text/javascript">
	function check() {
    
    
		var $name = $("#uname").val();
		$.get("AjaxServlet", "name=" + $name, function(result) {
    
    
			if (result == "true") {
    
    
				alert("注册失败");
			} else {
    
    
				alert("注册成功");
			}
		});	}
</script>

load方式
语法load(url,data,function(response,status,xhr))

url	规定要将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)	可选。规定当请求完成时运行的函数。额外的参数：
xhr - 包含 XMLHttpRequest 对象	可选。规定当请求完成时运行的函数

response - 包含来自请求的结果数据
status - 包含请求的状态（“success”, “notmodified”, “error”, “timeout” 或 “parsererror”）
xhr - 包含 XMLHttpRequest 对象|

<script type="text/javascript">
	function check() {
    
    
		var $name = $("#uname").val();
	
		$("#asd").load("AjaxServlet", "name=" + $name);

	}
</script>

Ajax异步操作实现登录验证

Ajax 异步js和xml

猜你喜欢