AJAX原理及实现用户注册

忘是亡心i 2024-04-19 07:18 1阅读 0赞

# 1、AJAX #

### 1.1 AJAX相关概念 ###

##### （1） 为什么要有AJAX #####

有需求实现刷新页面中的局部,但是传统的请求方式只能通过刷新整个页面达到改变内容的目的,于是就又了AJAX。用于（时间倒计时,点赞功能,邮箱用户名验证等等）

#### （2） AJAX特点 ####

**异步加载,局部刷新**  
1.通过发送请求,获取响应的一种浏览器交互技术  
2.异步:ajax请求,并不阻断我们继续对浏览器进行操作.

#### （3） Ajax的使用 ####

1.通过xmlhttp技术,发送请求,xmlhttp可以在javascript和js脚本中直接执行（或jquery）；  
2.发送ajax请求,需要使用xmlhttprequest对象。浏览器的内核中内置了js的解析器,**而js中自己引入了xmlhttp技术**（可以直接使用）；

**3. 使用ajax需要定义四个参数，用逗号隔开。  
url(要提交的selvet位置)、  
data(要发送的数据，可以是json格式)、  
callback(回调函数，要执行的内容)、  
type(返回值的类型，xml，json，text，html等等)**

### 1.2 AJAX实现 ###

1.  传统用户注册方式：需要输入用户名，点击提交按钮之后，才会去查询数据库中是否已存在此账户名；查询之后将结果反馈。（**效率慢，且需要刷新整个页面**）
2.  使用AJAX方式：当输入用户名，鼠标移开此输入框时，就会去查询数据库，并直接在局部页面上反馈结果。（**效率高，只需要刷新局部页面**）

### 1.3 用户注册实现步骤 ###

（1） 新建jsp页面  
JavaScript和jquery都可以实现ajax；此处使用jquery（需要导入jar包）

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="logincheck.js"></script>
    
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    
    	
    	<form action="register" method="post">
    		
    		<input name="checkname" id="checkname"/>
    		
    		<span id="checkinfo"></span><br/>
    		<input type="submit" value="注册" id="checksubmit"/>
    	</form>
    
    </body>
    </html>

（2）新建logincheck.js文件

$(function(){
    	/*用户名提交到js文件中，通过鼠标移出事件*/
    	$("#checkname").blur(function(){
    		/*使用ajax需要定义四个参数，用逗号隔开。
    		分别是url(要提交的selvet位置)、
    		data(要发送的数据，可以是json格式)、
    		callback(回调函数，要执行的内容)、
    		type(返回值的类型，xml，json，text，html等等)*/
    		
    		var checkname = $("#checkname").val();
    		
    		$.post("checkusername",{"checkname":checkname},
    		function(data){
    			if(data == "exists" ){
    				/*将返回的数据显示在jsp页面*/
    				$("#checkinfo").css("color","red").html(data);
    				$("#checksubmit").prop("disabled",true);
    			}else{
    				$("#checkinfo").css("color","black").html(data);
    				/*用户名已经存在，则无法点击注册按钮*/
    				$("#checksubmit").prop("disabled",false);
    			}
    		},
    		"text"
    		)
    	});
    });

（3）新建controller类  
通过业务方法查询数据库是否存在此用户，并返回 text 结果。

@RequestMapping("/checkusername")
    private void check(HttpServletRequest request, HttpServletResponse response){
    		// 检查用户名是否存在，并且必须以PrintWriter返回
    		try {
    			PrintWriter writer = response.getWriter();
    			//拿到js文件中的用户名
    			String checkname = request.getParameter("checkname");
    			//调用业务层方法查询
    			User user = new LoginServer().checkname(checkname);
    			if(user!=null) {
    				
    				writer.write("exists");
    			}else {
    				
    				writer.write("ok");
    			}
    		} catch (Exception e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    	}

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc4NDY3Mw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9848b21217974b8d915e853607d475b4.png