异步的表单校验

快来打我* 2023-06-11 06:24 28阅读 0赞

### 文章目录 ###

*  Ajax完成异步请求
 *   *  什么是Ajax
     *  异步处理
     *  异步请求对象
     *   *  Xhr对象的获取
         *  Xhr对象的方法
         *  XMLHttpRequest对象的属性
 *  使用JQuery框架来发送异步请求

# Ajax完成异步请求 #

## 什么是Ajax ##

1）AJAX是 Asynchronous JavaScript And XML 的简称。即：异步的JS和XML  
2）AJAX的实际意义是：不发生页面跳转、异步载入内容并改写页面内容的技术。  
3）AJAX也可以简单的理解为通过js向服务器端发送请求

具体请参见：[AJAX学习][AJAX]

## 异步处理 ##

1）同步处理： AJAX出现之前，我们访问互联网时一般都是同步请求，也就是当我们通过一个页面向服务器发送一个请求时，在服务器响应结束之前，我们的整个页面是不能操作的，也就是只管上来看他是卡主不动的。

这就带来了非常糟糕的用户体验。首先，同步请求时，用户只能等待服务器的响应，而 不能做任何操作。其次，如果请求时间过长可能会给用户一个卡死的感觉。最后，同步 请求的最大缺点就是即使整个页面中只有一小部分内容发生改变我们也要刷新整个页 面。

2）异步处理：而异步处理指的是我们在浏览网页的同时，通过AJAX向服务器发送请求，发送请求的过程中我们浏览网页的行为并不会受到任何影响，甚至主观上感知不到在向服务器发送请求。当服务器正常响应之后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。

使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先，发送请求时不会影响到用户的正常访问。其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。

## 异步请求对象 ##

*  XMLHttpRequest对象是AJAX中非常重要的对象，所有的AJAX操作都是基于该对象的。
 *  XMLHttpRequest对象用来封装请求报文，我们向服务器发送的请求信息全部都需要封装到该对象中。
 *  这里需要稍微注意一下，XMLHttpRequest对象并没有成为标准，但是现在的主流浏览器都支持该对象，而一些如IE6的老版本浏览器中的创建方式有一些区别，但是问题不大。

### Xhr对象的获取 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]

### Xhr对象的方法 ###

**①open(method,url,async)**

open()用于设置请求的基本信息，接收三个参数。
        ①method
           请求的方法：get或post
           接收一个字符串
        ②url
           请求的地址，接收一个字符串
        ③Assync
          发送的请求是否为异步请求，接收一个布尔值。
          true 是异步请求
          false 不是异步请求（同步请求）

**②send(string)**

send()用于将请求发送给服务器，可以接收一个参数
        ①string参数
          该参数只在发送post请求时需要。
          string参数用于设置请求体

**③setRequestHeader(header,value)**

用于设置请求头
        ①header参数
          字符串类型，要设置的请求头的名字
        ②value参数
          字符串类型，要设置的请求头的值

### XMLHttpRequest对象的属性 ###

**1)readyState**

①描述XMLHttpRequest的状态
    ②一共有五种状态分别对应了五个数字：
    	0 ：请求尚未初始化，open()尚未被调用
    	1 ：服务器连接已建立，send()尚未被调用
    	2 ：请求已接收，服务器尚未响应
    	3 ：请求已处理，正在接收服务器发送的响应
    	4 ：请求已处理完毕，且响应已就绪。

**2)status**

①请求的响应码
    	200 响应成功
    	404 页面为找到
    	500 服务器内部错误 
    	… … … …

**3)onreadystatechange**

①该属性需要指向一个函数
    ②该函数会在readyState属性发生改变时被调用

**4)responseText**

①获得字符串形式的响应数据。

**5)responseXML（用的比较少）**

①获得 XML 形式的响应数据。

6)示例代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]

7）需求：当用户输入用户名之后，立即发送请求给服务器检查当前用户名是否可用【不影响当前用户继续输入密码等东西】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]

# 使用JQuery框架来发送异步请求 #

*  JQuery是当前比较主流的JS库，封装了很多预定义的对象和实现函数，帮助使用者建立有高难度交互的页面，并且兼容大部分主流的浏览器。
 *  JQuery实现了对Ajax的支持，可以更加方便快速的进行AJax开发
    
    实现功能：当用户输入用户名之后，立即发送请求给服务器检查当前用户名是否可用  
    当用户输入密码和确认密码，完成密码的验证  
    如果用户名不可用或者两次输入的密码不一致，不允许提交

1、下载JQuery框架：[JQuery框架下载][JQuery]

2、在WebContent目录下建立scripts目录，然后将下载好的JQuery库放在这个目录下

<%@ 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>Insert title here</title>
    	<style type="text/css">
    		span{
        
    			color:red ;
    		}
    	
    	</style>
    	
    	<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"> </script>
    	<script type="text/javascript">
    		// 获取 xhr 对象
    		function getXhr(){
        
    			var xhr = new XMLHttpRequest();
    			//alert(xhr);
    			return xhr; 
    		}
    		
    		function checkUsername(){
        
    			//获取用户输入的用户名。
    			var username = document.getElementById("username").value;
    			//发送异步请求进行校验
    			var xhr = getXhr();
    			
    			//设置请求信息
    			xhr.open("get","checkUsername?username="+username,true);
    			//发送请求
    			xhr.send();
    			//监听readyState的状态
    			xhr.onreadystatechange=function(){
          //匿名函数
    				if(xhr.readyState == 4 ){
          // 响应处理完成
    					if(xhr.status == 200){
         //处理正确
    						//获取服务端响应回来的数据. 
    						var msg = xhr.responseText ;
    						//将信息显示到用户名输入框后面
    						document.getElementById("regist_span").innerHTML=msg ;
    					}
    				}
    			}
    		}
    		
    		
    		$(function(){
        
    			var  usernameFlag = false ; 
    			var  passwordFlag = false ; 
    			
    			$("#username").blur(function(){
        
    				var username = $("#username").val();
    				//发送异步请求
    				$.ajax({
        
    					url:"checkUsername",
    					type:"post",
    					data:"username=" + username,
    					success:function(data){
          // 会将服务器返回的数据保存到data中
    						if(data == 0){
        
    							$("#regist_span").html("用户名可以使用");
    							usernameFlag =true;
    						}else{
        
    							$("#regist_span").html("用户名不可以使用");
    						}
    					}
    				});
    			});
    			
    			$("#repassword").blur(function(){
        
    				var password = $("#password").val();
    				var repassword = $("#repassword").val();
    				
    				if(password !=null && password !="" && password == repassword){
        
    					$("#pass_span").html("密码一致");
    					passwordFlag = true ;
    				}else{
        
    					$("#pass_span").html("密码不一致");
    				}
    				
    			});
    			
    			
    			$("form").submit(function(){
        		
    				return usernameFlag && passwordFlag ;
    			});
    		});
    		
    	
    	</script>
    </head>
    <body>	
    	<h1>欢迎注册</h1>
    	<form action="regist"  method="post">
    		<%-- 用户名称:<input type="text" id="username" name="username" onblur="checkUsername();"/><span id="regist_span">${
        regist_msg }</span> --%>
    		
    		用户名称:<input type="text" id="username" name="username" /><span id="regist_span">${
        regist_msg }</span>
    		<br/>
    		
    		用户密码:<input type="password" id="password" name="password"/>
    		<br/>
    		确认密码:<input type="password" id="repassword" name="repassword"/><span id="pass_span"></span>
    		<br/>
    		<input type="submit" value="注册"/>  
    		
    	</form>
    	
    	<input type="button" value="测试xhr对象" onclick="getXhr();"/>
    </body>
    </html>

[AJAX]: https://www.w3school.com.cn/ajax/index.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]: /images/20230531/f1c17223fe8b4c8992082eb5b36b9c59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]: /images/20230531/727bebefdbe84462a6d2f6fd5f51bf12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]: /images/20230531/aee3b43dc5264337a37c9774b9913536.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]: /images/20230531/d03ab95db6c84f9ba30e5fc9a60f7529.png
[JQuery]: http://www.jq22.com/jquery-info122