SpringMVC(3)：AJAX
一，AJAX 简介
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法
- AJAX 最大的优点是在不重新加载整个页面的情况下，能与服务器交换数据并更新部分网页内容
- AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行
二，用前端标签伪造一个AJAX
传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页，但是使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
我们可以使用前端的一个标签来伪造一个ajax的样子； iframe标签
要求：在不刷新网页的情况下加载出百度
代码
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>Shandx</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 11 function LoadPage(){ 12 var targetUrl = document.getElementById('url').value; 13 console.log(targetUrl); 14 document.getElementById("iframePosition").src = targetUrl; 15 } 16 17 </script> 18 19 <div> 20 21 <p> 22 <h3>请输入要加载的地址：</h3> 23 <input id="url" type="text" value="https://www.baidu.com/"/> 24 <input type="button" value="提交" onclick="LoadPage()"> 25 </p> 26 27 </div>
28 29 <div> 30 <h3>加载页面位置：</h3> 31 <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe> 32 </div> 33 34 </body> 35 </html>
运行结果
三，jQuery.Ajax 简介
- Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据
- jQuery 提供多个与 AJAX 有关的方法，通过 jQuery AJAX 方法，我们能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON；同时我们能够把这些外部数据直接载入网页的被选元素中
- jQuery 不是生产者，而是大自然搬运工；jQuery Ajax本质就是 XMLHttpRequest
四，代码小测试
使用jQuery时我们要先导入jQuery的jar包
下载地址：https://mvnrepository.com/artifact/org.webjars.bower/jquery/3.4.1
1，使用最原始的HttpServletResponse处理
编写一个Ajax Controller
1 @Controller 2 @RequestMapping("/ajax") 3 public class AjaxController { 4 5 @RequestMapping("/a1") 6 public void ajax1(String name , HttpServletResponse response) throws IOException { 7 if ("admin".equals(name)){ 8 response.getWriter().print("true"); 9 }else{ 10 response.getWriter().print("false"); 11 } 12 } 13 14 }
编写index.jsp测试
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <head> 3 <title>ajax</title> 4 5 <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script> 6 <script> 7 8 /* jQuery.post(...) 所有参数： 9 url: 待载入页面的URL地址 (必填) 10 data: 待发送 Key/value 参数 11 success: 载入成功时回调函数 12 data:请求返回的数据 13 status：请求返回的状态*/ 14 15 function a1(){ 16 $.post({ 17 url:"${pageContext.request.contextPath}/ajax/a1", 18 data:{'name':$("#txtName").val()}, 19 success:function (data,status) { 20 console.log(data); 21 console.log(status); 22 } 23 }); 24 } 25 26 </script> 27 </head> 28 <body> 29 30 <%--onblur：失去焦点触发事件--%> 31 用户名:<input type="text" id="txtName" onblur="a1()"/> 32 33 </body>
运行结果
2，SpringMVC实现
编写一个Controller
1 @RequestMapping("/a2") 2 @ResponseBody 3 public List<User> ajax2(){ 4 List<User> list = new ArrayList<User>(); 5 list.add(new User("钢铁侠",1,"男")); 6 list.add(new User("蜘蛛侠",2,"男")); 7 list.add(new User("闪电侠",3,"男")); 8 return list; //由于@ResponseBody注解，将list转成json格式返回 9 } 10 ``` 11 **编写index2.jsp测试** 12 13 ``` 14 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 15 <html> 16 <head> 17 <title>Title</title> 18 </head> 19 <body> 20 21 <input type="button" id="btn" value="获取数据"/> 22 <table width="80%" align="center"> 23 <tr> 24 <td>姓名</td> 25 <td>年龄</td> 26 <td>性别</td> 27 </tr> 28 <tbody id="content"> 29 </tbody> 30 </table> 31 32 <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script> 33 34 <script> 35 $(function () { 36 $("#btn").click(function () { 37 $.post("${pageContext.request.contextPath}/ajax/a2",function (data) { 38 console.log(data); 39 var html = ""; 40 for (var i=0;i<data.length;i++){ 41 html += "<tr>" + 42 "<td>"+data[i].name + "</td>" + 43 "<td>"+data[i].age + "</td>" + 44 "<td>"+data[i].sex + "</td>" + 45 "</tr>" 46 } 47 $("#content").html(html); 48 }) 49 }) 50 }) 51 </script> 52 53 </body> 54 </html>
运行结果
3，注册提示
编写一个Controller
1 @RequestMapping("/a3") 2 @ResponseBody 3 public String ajax3(String name,String pwd){ 4 5 String msg = ""; 6 //模拟数据库中存在数据 7 if (name!=null){ 8 if ("admin".equals(name)){ 9 msg = "OK"; 10 }else { 11 msg = "用户名输入错误"; 12 } 13 } 14 if (pwd!=null){ 15 if ("123456".equals(pwd)){ 16 msg = "OK"; 17 }else { 18 msg = "密码输入有误"; 19 } 20 } 21 return msg; //由于@ResponseBody注解，将list转成json格式返回 22 }
编写index3.jsp测试
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <html> 3 <head> 4 <title>ajax</title> 5 <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script> 6 <script> 7 8 function a1() { 9 $.post({ 10 url: "${pageContext.request.contextPath}/ajax/a3", 11 data: {'name': $("#name").val()}, 12 success: function (data) { 13 if (data.toString() == 'OK') { 14 $("#userInfo").css("color", "green"); 15 } else { 16 $("#userInfo").css("color", "red"); 17 } 18 $("#userInfo").html(data); 19 } 20 }); 21 } 22 23 function a2() { 24 $.post({ 25 url: "${pageContext.request.contextPath}/ajax/a3", 26 data: {'pwd': $("#pwd").val()}, 27 success: function (data) { 28 if (data.toString() == 'OK') { 29 $("#pwdInfo").css("color", "green"); 30 } else { 31 $("#pwdInfo").css("color", "red"); 32 } 33 $("#pwdInfo").html(data); 34 35 } 36 }); 37 } 38 39 </script> 40 </head> 41 <body> 42 <p> 43 用户名:<input type="text" id="name" onblur="a1()"/> 44 <span id="userInfo"></span> 45 </p> 46 <p> 47 密码:<input type="text" id="pwd" onblur="a2()"/> 48 <span id="pwdInfo"></span> 49 </p> 50 </body> 51 </html>
运行结果
