Ajax技术的重要特性与应用

最新推荐文章于 2023-03-20 19:01:28 发布

徐州蔡徐坤

最新推荐文章于 2023-03-20 19:01:28 发布

阅读量424

点赞数

CC 4.0 BY-SA版权

分类专栏：开发常用知识点文章标签： ajax

本文链接：https://blog.youkuaiyun.com/qq_29864051/article/details/88405526

开发常用知识点专栏收录该内容

28 篇文章

订阅专栏

本文介绍AJAX技术，一种使网页实现异步更新的方法。通过与服务器的少量数据交换，无需重新加载整个页面即可更新部分网页内容。文章详细讲解了如何使用jQuery的AJAX方法进行异步数据请求，包括设置请求方式、URL、参数及响应处理，并通过一个用户名验证的具体案例展示了AJAX的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是AJAX？

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。与传统的页面相比，在更新部分内容时，不需要加载整个页面。

2.如何使用AJAX？

jQuery 对 JS 原生的 AJAX 进行了封装，最常用的AJAX中是：

$.ajax( { option1:value1,option2:value2… } );
常用的 option 有如下：

async：是否异步，默认是 true 代表异步
data：发送到服务器的参数，建议使用 json 格式
dataType：服务器端返回的数据类型，常用 text 和 json
success：成功响应，执行的函数，对应的类型是 function 类型（回调函数，通常会有一个参数，接收来自servlet中返回的数据）
type：请求方式，POST/GET
url：请求服务器端地址

3.具体案例的实现

以简单的注册页面为例，当我们输入姓名的时候，希望当鼠标光标移动到密码框的时候，就可以判断出来用户名是否就已经重复不可以被使用了。
register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>


<script type="text/javascript">
	//校验该用户名是否已经存在
	function checkUsername(username){
		$.ajax({
			url:"checkUsernameServlet",
			type:"post",
			data:{"username":username},
			success:function(data){
				if(data=="true"){
					//说明存在
					$("#msg").html("该用户已存在");
				}else{
					//不存在
					$("#msg").html("");// 清空
				}
			}
		});
	}
</script>


</head>
<body>
	<form  action="RegisterServlet" method="post">
          	  用户名:	
            <input name="username" type="text" placeholder="请输入用户名" value="" onblur="checkUsername(this.value)" >
            <span id="msg"></span><br>
             密码:
            <input type="password" name="password"  value="" placeholder="请输入密码" ><br>
            <input type="submit" value="提交">
   	</form>
</body>
</html>

这里我们主要分析js中的代码：
在form表单的用户名文本框中，有οnblur="checkUsername(this.value)"这么一个函数，onblur()函数是在对象失去焦点时触发，简单来说就是鼠标光标离开input输入框时就被调用。

//校验该用户名是否已经存在
function checkUsername(username){
	$.ajax({
		url:"checkUsernameServlet",
		type:"post",
		data:{"username":username},
		success:function(data){
			if(data=="true"){
				//说明存在
				$("#msg").html("该用户已存在");
			}else{
				//不存在
				$("#msg").html("");// 清空
			}
		}
	});
}

语法主要是：
$ajax({ 代码 });
常用的选项有:
async：是否异步，默认是 true 代表异步，所以可以不写
url：主要是请求的服务器端地址，上面案例是发送给servlet
type：请求的方式，get/post
data:发送到服务器中的参数，通常使用json格式
success：成功响应，执行的函数，对应的类型是 function 类型,function中的参数，是servlet返回的数据。这里需要放一下servlet中的代码，如下

@WebServlet("/checkUsernameServlet")
public class checkUsernameServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		request.setCharacterEncoding("utf-8");
		String username=request.getParameter("username");
		//根据username查询数据库，省略校验过程
		//假设存在
		response.getWriter().write("true");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

function函数中的参数就是 response.getWriter().write(“true”);，这句代码返回的值，接下来就是具体的需求逻辑。
最后可以实现在输入用户名就可以判断判断是否用户名可以被使用。
以上。