AJAX= Asychronous JavaScript and XML（异步的JavaScript和 xml）。
AJAX 是一直那个在无需重新加载真个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新语言，而是一直那个用于创建更好的更快的以及交互性更强的web应用程序技术。
在2005 年，Google 通过Google Suggest 使AJAX 变得流行起来。
Google Suggest 使用 AJAX创造出动态性极强的web页面：
当你在谷歌的搜索框输入关键字时，JavaScrip 会把这些字符送到服务器，然后服务去会返回一个搜索建议的列表。
就像百度的搜索框一样：
传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
利用AJAX可以做：
注册时，输入用户名自动检测用户是否已经存在。
登陆时，提示用户名密码错误
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
我们可以使用前端的一个标签来伪造一个ajax的样子。 iframe标签
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<title>ajax</title>
<script src="${pageContext.request.contextPath}/statics/jsp/jquery-3.4.1.js"></script>
<script>
/*
jQuery.post(...)
所有参数：
url: 待载入页面的URL地址 (必填)
data: 待发送 Key/value 参数
success: 载入成功时回调函数
data:请求返回的数据
status：请求返回的状态
*/
function a1(){
//ajax默认是get请求
$.post({
url:"${pageContext.request.contextPath}/ajax/a1",
data:{‘name‘:$("#txtName").val()},
success:function (data,status) {
console.log(data);
console.log(status);
}
});
}
</script>
</head>
<body>
<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>
</body>
---------------------
作者：java—explore
来源：CSDN
原文：https://blog.csdn.net/weixin_44821177/article/details/98465253
版权声明：本文为博主原创文章，转载请附上博文链接！
然后编写我们的 contorller：
package com.wu.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @Controller @RequestMapping("/ajax") public class AjaxController { //第一种方式，服务器要返回一个字符串，直接使用response @RequestMapping("/a1") public void ajax(String name, HttpServletResponse response) throws IOException { if ("admin".equals(name)){ response.getWriter().print("true"); }else { response.getWriter().print("false"); } } }
运行结果：
点击输入框，当鼠标点击输入框以外的地方时就会触发 事件：显示 false success
在原有的基础上升级：
1 @RequestMapping("/a3") 2 @ResponseBody 3 public String ajax3(String name,String pwd){ 4 String msg = ""; 5 if (name!=null){ 6 if ("admin".equals(name)){ 7 msg = "ok"; 8 }else { 9 msg = "用户名有误"; 10 } 11 } 12 if (pwd!=null){ 13 if ("123456".equals(pwd)){ 14 msg = "ok"; 15 }else { 16 msg = "密码输入有误"; 17 } 18 } 19 return msg; 20 } 21 1 22 23 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 24 <html> 25 <head> 26 <title>Title</title> 27 <script src="${pageContext.request.contextPath}/statics/jsp/jquery-3.4.1.js"></script> 28 29 <script> 30 function a1() { 31 $.post({ 32 url:"${pageContext.request.contextPath}/ajax/a3", 33 data:{"name":$("#name").val()}, 34 success: function (data) { 35 if (data.toString()==‘ok‘) { //信息核对成功 36 $(‘#userInfo‘).css("color","green"); 37 }else { 38 $(‘#userInfo‘).css("color","red"); 39 } 40 $("#userInfo").html(data); 41 } 42 }) 43 44 } 45 function a2() { 46 $.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("#pwd").val()},function (data) { 47 if (data.toString()==‘ok‘) { //信息核对成功 48 $(‘#pwdInfo‘).css("color","green"); 49 }else { 50 $(‘#pwdInfo‘).css("color","red"); 51 } 52 $("#pwdInfo").html(data); 53 }) 54 } 55 </script> 56 57 </head> 58 <body>
59 </html>
运行结果“：”
输入正确的用户名和密码：
nice大功告成 动态请求响应 局部刷新 就是如此。。。
---------------------
作者：java—explore
来源：CSDN
原文：https://blog.csdn.net/weixin_44821177/article/details/98465253
版权声明：本文为博主原创文章，转载请附上博文链接！
原文：https://www.cnblogs.com/wmcq/p/11298910.html