神奇的Ajax

最新推荐文章于 2022-04-29 16:57:31 发布

原创最新推荐文章于 2022-04-29 16:57:31 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #ajax

JavaWeb 专栏收录该内容

42 篇文章

订阅专栏

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

为什么要学习Ajax:

在早期的网页开发中，在与用户进行交互主要靠用户发送请求，服务器进行响应。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。这样一来，占用了大量的服务器资源，效率非常低。当时google最早使用了Ajax技术，Ajax 是一种用于创建快速动态网页的技术。它无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

举个Ajax在生活中使用的例子：

我们在进行百度账号注册的时候往往要先填写自己的信息，如果你输入的用户名已经被使用了就会出现如上图的红色警告信息：此用户名太受欢迎，请更换一个。那么这是如何实现的呢？这就是Ajax技术的应用。

首先说一下传统的网页技术是如何实现注册的：传统的网页就直接给你一个注册页面，然后你一项一项去填写自己的信息，填写完毕后点击注册按钮，如果你运气好的话，填写的用户名没有人用，那么恭喜你注册成功。如果用户名被占用了，那么问题就来了，辛辛苦苦一大堆信息填写完了，满心欢喜点了注册按钮，这时候通过表单提交方式将你填写的信息传到业务层进行处理，再与数据库进行查询，这时候发现你填写的用户名已经存在了，存在了你就不能用了，所以系统做出自己的响应：重新发送一个注册页面给你，让你重新再填写自己所有的信息，这时候你还不得崩溃了。如果你现在还这样做网页肯定没人愿意用。

但是现在使用了Ajax,服务器对于用户的请求只需要局部刷新就行，你注册的时候只要一输入用户名，当你鼠标离开输入框就会触发事先绑定好的事件，然后直接与数据库进行交互，如果用户名不存在，就提醒你可以使用这个用户名进行注册，如果用户名已经存在，就会提醒你更换用户名。这样就可以大大的提高网页响应效率。

了解了Ajax后，自己做一下：

第一步:

制作一个简单的注册页面：register.jsp

1.我们在创建用户名的输入框中绑定οnblur="checkuser()"事件

2.在checkuser()中创建xmlhttprequest（xhr）对象

3.设置状态改变回调函数cb

4.设置请求方式和路径(这里用Servlet,的get方式，将输入框的值也传过去)

5.发送请求

6.处理响应内容（在回调函数中处理）

7.为了能看的方便，我们在输入框后面加上提示信息<span id="msg"></span>然后根据回调函数中相应的信息显示相应的提示内容

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>register</title>
</head>
<style type="text/css">
body{
	margin-left:700px;
	margin-top:100px;
} 
table{
	width:500px;
	height:320px;
	border:1px solid #009999;
}
table tr{
	border:1px solid #009999;
}
table tr td{
	border:1px solid #009999;
	text-align:left;
}
</style>
<script type="text/javascript">
	var xhr;
        //1.创建xmlhttprequest（xhr）对象
	function checkuser(){
		try{
		xhr=new XMLHttpRequest();
		
		}catch(e){
			xhr=new ActiveXObject("Microsoft.XMLHTTP");
		}
		//alert(xhr);
	//2.设置状态改变回调函数
	xhr.onreadystatechange=cb;
	var uname=document.getElementById("uname");
	//3.设置请求方式和路径
	xhr.open("GET","CheckUserServlet?un="+uname.value);
	//4.发送请求
	xhr.send();
	}
	//5.处理响应内容
	function cb(){
		//完成响应
		if(xhr.readyState==4){
			//成功响应
			if(xhr.status==200){
				var resText=xhr.responseText;
				var msg=document.getElementById("msg");
				//alert(resText);
				if(resText=="t"){
					msg.style.color="red";
					msg.innerHTML="账号已经存在";
				}else{
					msg.style.color="green";
					msg.innerHTML="账号可以使用";
				}
			}
		}
		//alert(xhr.readyState);
	}
</script>
<body >
<div id="all">
	<form action="RegisterServlet">
	<table>
	<tr>
	<td align="right" >创建用户名:</td>
	<td><input type="text" id="uname" name="username" onblur="checkuser()"/><span id="msg"></span></td>
	</tr>
	
	<tr>
	<td align="right">创建密码:</td>
	<td><input type="password" name="userpwd"/></td>
	</tr>
	
	<tr>
	<td align="right">注册邮箱:</td>
	<td><input type="text" name="mail"/></td>
	</tr>

	<tr>
	<td align="right">地址:</td>
	<td><input type="text" name="address"/></td>
	</tr>
	
	<tr>
	<td align="right">爱好:</td>
	<td><input type="text" name="hobby"/></td>
	</tr>
	
	<tr>
	<td align="right"><input type="submit" value="提交"/></td>
	<td align="right"><input type="reset" value="重置"/></td>
	</tr>
</table >
</form>
</div>
</body>
</html>

也可以将它换成jQuery

$(function(){
		$("#uname").blur(function(){
			$.post("CheckUserServlet",{un:this.value},function(resText){
				if(resText=="t"){
					$("#msg").css("color","red").html("此用户名太受欢迎，请更换一个");
				}else{
					$("#msg").css("color","green").html("恭喜您:账号可以使用");
				}
			})
		})
	})

来看一下效果，简单做的，页面较丑

二、写相应的CheckUserServlet

1.获取请求参数，得到注册页面输入的用户名

2.业务响应（从数据库查询已存在的用户，我的数据库已经提前弄好了，业务层也写好了相应的方法，所以可以直接使用）

3.响应，如果用户应经存在，输出t，不存在，输出f

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.xintouyun.jweb.entity.User;
import com.xintouyun.jweb.service.UserService;
import com.xintouyun.jweb.service.impl.UserServiceImpl;

public class CheckUserServlet extends HttpServlet{
	public void doGet(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{		
		PrintWriter out=response.getWriter();
		//1.获取请求参数
		String uname=request.getParameter("un");
		//System.out.println("uname"+uname);
		 // 2.业务处理，根据用户名查询数据库中的用户
		UserService userService = new UserServiceImpl();
		User user= userService.getUser(uname);
		//System.out.println("username:"+user.getUsername());
		 //3.响应
		if(user!=null) {
			out.print("t");
		}else {
			out.print("f");
		}
		out.close();
	}
}

三、配置xml文件

<servlet>
		<servlet-name>CheckUserServlet</servlet-name>
		<servlet-class>com.xintouyun.jweb.servlet.CheckUserServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>CheckUserServlet</servlet-name>
		<!--访问servlet的路径：必须以/开头，这个/代表应用的根 -->
		<url-pattern>/CheckUserServlet</url-pattern>
	</servlet-mapping>

四、重启服务器，测试一下：

我之前已经存储好的数据库为：