JavaWeb10_Ajax-CSDN博客

本文链接：https://blog.csdn.net/BLU_111/article/details/113687658

Ajax

Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）

AJAX 指的是一种交互方式：异步加载。

客户端和服务器的数据交互更新在局部页面的技术，不需要刷新整个⻚面（局部刷新）

优点：

1、局部刷新，效率更高
2、用户体验更好

使用 JQuery 实现 Ajax

前端 jsp：

<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		var btn = $("#btn");
		btn.click(function(){
			$.ajax({
				url:'ajaxtest',
				type:'post',
				data: 'id=1',
				dataType: 'text',
				success: function(data){
					$("#text").before("<span>"+data+"</span><br/>");
				}
			})
		});
	})
</script>

<body>
	<input id="text" type="text"/>
	<input id="btn" type="button" value="提交">
</body>

后端：

@WebServlet("/ajaxtest")
public class ajaxtestServlet extends HttpServlet {
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String id = req.getParameter("id");
		System.out.println(id);
		try {
			Thread.sleep(3000);
		} catch (Exception e) {
			e.printStackTrace();
		}
		resp.getWriter().write("Hello, BLU!");
	}

}

效果展示：
在这里插入图片描述

Ajax 参数说明

url：请求的后端服务地址
type：请求方式，默认 get
data：请求参数
dataType：服务器返回的数据类型
success：请求成功的回调函数
error：请求失败的回调函数
complete：请求完成的回调函数（无论成功或者失败，都会调用）

$("#btn").click(function(){
	$.ajax({
		url:'ajaxtest',
		type:'post',
		data: 'id=1',
		dataType: 'text',
		success: function(data){
			$("#text").before("<span>"+data+"</span><br/>");
		},
		error: function(){
			alert("服务器维护中")
		},
		complete: function(){
			alert("请求完成")
		}			
	})
	
});

请求成功的效果展示：
在这里插入图片描述
请求失败的效果展示：

结论：
请求成功时先执行success方法，再执行complete，然后渲染DOM
请求失败时先执行error方法，再执行complete

Ajax 返回JSON示例：

@WebServlet("/ajaxtest")
public class ajaxtestServlet extends HttpServlet {
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		User user = new User("BLU", 22);
		String jsonUser = JSON.toJSONString(user);
		resp.getWriter().write(jsonUser);
	}

}

<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#btn").click(function(){
			$.ajax({
				url:'ajaxtest',
				type:'post',
				dataType: 'json',
				success: function(data){
					console.log(data);
					$("#name").val(data.name);
					$("#age").val(data.age);
				}
			})
		});
	})
</script>

<input id="btn" type="button" value="点击"><br/>
name:<input id="name" type="text"/><br/>
age:<input id="age" type="text">

在这里插入图片描述

Ajax 的应用场景

1、用户名重复校验
2、省市区三级联动