jsp中应用原生ajax进行数据的访问（以注册时输入账号为例）

叁歲伎倆 2022-05-23 09:40 21阅读 0赞

ajax Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）主要实现在不刷新页面的情况下，进行后端数据的访问

为了给用户更好的体验，ajax的应用已经越来越广泛，我们这里以注册时输入账号进行异步ajax提交账号数据和后台的数据库进行比较返回相应的结果为例进行简单的讲解。

首先我们要进行表单的设计：

原生ajax的应用，先创建xmlHttpRequest 对象

接着进行数据的提交，在提交到服务器以后我们需要执行一些基于相应的任务，我们这里是显示这个账号是否存在

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

<table style="border:0px;margin:4px 0px;padding:0px;width:729.655px;color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:12px;background-color:rgb(255,255,255);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
   <th align="left" style="border-color:rgb(85,85,85);margin:0px;padding:3px;font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;">属性</th> 
   <th align="left" style="border-color:rgb(85,85,85);margin:0px;padding:3px;font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;">描述</th> 
  </tr> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">onreadystatechange</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。</td> 
  </tr> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">readyState</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><p style="border:0px;line-height:2em;font-size:13px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;">存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。</p> 
    <ul style="border:0px;margin-top:1em;margin-bottom:1em;line-height:18.2px;list-style:none;"> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">0: 请求未初始化</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">1: 服务器连接已建立</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">2: 请求已接收</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">3: 请求处理中</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">4: 请求已完成，且响应已就绪</li> 
    </ul></td> 
  </tr> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">status</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">200: "OK"<br>404: 未找到页面</td> 
  </tr> 
 </tbody> 
</table>

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

编写 onreadystatechange 事件：

function processResponse(){
    	if(httpReq.readyState==4){
    		if(httpReq.status==200){
    			document.getElementById("usernameInfo").innerHTML=httpReq.responseText;
    		}
    	}
    }

进行数据提交，使用open（method,url,async） async 指是否异步，默认为true

send() 函数进行数据的提交

function chaxun(){
    	
    	//再进行url请求 传递相应的参数
    	var username = document.getElementById("username").value;
    	
    	var url = "${path}/UserServlet";
    	httpReq.open("POST",url,true);
    	httpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//因为我们这里使用的是post请求，需要添加请求头
    	httpReq.onreadystatechange=processResponse;//这里有括号和没有括号是有区别的 有括号就会立即执行，没有就不会立即执行
    	httpReq.send("act=validate&username="+username);
    
    	//send后进行返回数据的处理
    }

接下来进行后台的处理

转交到控制层的servlet，判断提交的参数，记性选择是否进行账号是否存在的判断,进行数据的判断，当我们在url传值为validate，编写validate函数进行提交后的操作

private void validate(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
    		request.setCharacterEncoding("utf-8");
    		//设置返回的服务器的编码
    		response.setContentType( "text/html" );
    		response.setCharacterEncoding( "UTF-8" );
    
    		//在这里对请求进行处理
    		String username = (String)request.getParameter("username").trim();
    		PrintWriter out;
    		try {
    			out = response.getWriter();
    			if(userService.FindByusername(username))//调用业务逻辑层进行数据的判断
    			{
    				String message = "名称已存在";//需要返回的内容
    				out.println(message);
    			}
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		
    		
    	}

业务逻辑层调用dao层的方法，查询数据库中是否存在这个账号，进行相应结果的返回

public boolean FindByusername(String username)
    	{
    		if(dao.findUserByUName(username))
    		{
    			return true;
    		}
    		return false;
    	}

dao层进行数据的查询

public boolean findUserByUName(String username){
    		
    		try {
    			conn = JDBCUtils.getConn();
    			String sql = "select * from users where username=? ";
    			pstm =conn.prepareStatement(sql);
    			pstm.setString(1, username);
    			rs = pstm.executeQuery();
    			if (rs.next()) {
    				return true;
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}finally {
    			JDBCUtils.close(rs, pstm, conn);
    		}
    		return false;
    	}

根据返回的判断，我们就可以进行判断 你对过程了解了吗?

总结：这里我们简单的讲述了原生ajax 的相关应用，其实还有很多，例如购物网站评价的获取，购物数量的增加与减少，购物商品的获取，都是ajax的应用，这里还简单讲解了一下经典的MVC开发模式，C层用servlet进行数据的控制，V层使用jsp进行显示，M层主要是一些模型，我们用service层进行业务逻辑的处理，dao层进行数据库的访问，降低了耦合，是常见的开发模式。

本人初学，有神魔问题可以给我留言。