7 Ajax
7 Ajax
简介
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。
Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
传统的网页（即不使用ajax技术的网页），想要更新内容或者提交一个表单，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
伪造Ajax
1、新建module springmvc-06-ajax，导入web支持，测试项目，是否能成功运行！
2、编写一个 test.html 使用 iframe测试
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>伪造AJAX</title></head><body><script type="text/javascript"> window.onload = function(){ var myDate = new Date(); document.getElementById('currentTime').innerText = myDate.getTime(); }; function LoadPage(){ var targetUrl = document.getElementById('url').value; console.log(targetUrl); document.getElementById("iframePosition").src = targetUrl; }</script><div> <p>请输入要加载的地址：<span id="currentTime"></span></p> <p> <input id="url" type="text" value="https://www.baidu.com/"/> <input type="button" value="提交" onclick="LoadPage()"> </p></div><div> <h3>加载页面位置：</h3> <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe></div></body></html>3、在IDEA中打开浏览器查看效果！
利用AJAX可以做：
- 注册时，检测用户名是否已注册
- 登录时，提示用户名密码错误
- 等等
jQuery.ajax
这里使用jquery来实现ajax；
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据；
jQuery 提供多个与 AJAX 有关的方法；
通过jQuery.AJAX方法，可以使用HTTP GET 何HTTP POST从远程服务器上请求文本、HTML、XML活JSON，同时也可以把这些外部数据直接载入网页的被选元素中;
jQuery 不是生产者，而是大自然搬运工;
jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！
jQuery.ajax(...) 部分参数： url：请求地址 type：请求方式，GET、POST（1.9.0之后用method） headers：请求头 data：要发送的数据 contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8") async：是否异步 timeout：设置请求超时时间（毫秒） beforeSend：发送请求前执行的函数(全局) complete：完成之后执行的回调函数(全局) success：成功之后执行的回调函数(全局) error：失败之后执行的回调函数(全局) accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型 dataType：将服务器端返回的数据转换成指定类型 "xml": 将服务器端返回的内容转换成xml格式 "text": 将服务器端返回的内容转换成普通文本格式 "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。 "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式 "json": 将服务器端返回的内容转换成相应的JavaScript对象 "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数使用 HttpServletResponse 处理，实现简单的测试！
1、配置 web.xml 和 springmvc 的配置文件。
2、编写一个AjaxController
package com.zzb.controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@RestControllerpublic class AjaxController { @RequestMapping("/a1") public void a1(String name, HttpServletResponse response) throws IOException { System.out.println("a1:param=>" + name); if("admin".equals(name)){ response.getWriter().print("true"); }else{ response.getWriter().print("false"); } }}3、编写index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>$Title$</title> <%--导入在线jquery--%> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script> <script> function a(){ $.post({ url:"${pageContext.request.contextPath}/a1", data:{'name':$("#txtName").val()}, success:function (data){ alert(data); } }); } </script> </head> <body> <%--失去焦点触发事件--%> 用户名：<input type="text" id="txtName" onblur="a()"> </body></html>4、启动tomcat测试
SpringMVC实现
1、实体类
package com.zzb.pojo;public class User { private String name; private int age; private String sex; public User() { } public User(String name, int age, String sex) { this.name = name; this.age = age; this.sex = sex; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } @Override public String toString() { return "User{" + "name='" + name + '\'' + ", age=" + age + ", sex='" + sex + '\'' + '}'; }}2、Controller类编写
@RequestMapping("/a2") public List<User> a2(){ List<User> userList = new ArrayList<User>(); userList.add(new User("Zzb1号",1,"男")); userList.add(new User("Zzb2号",2,"男")); userList.add(new User("Zzb3号",3,"男")); return userList; // 由于@RestController注解，将list转成json格式返回 }3、前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script></head><body><input type="button" id="btn" value="获取数据"/><table width="80%" align="center"> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tbody id="content"> </tbody></table><script> $("#btn").click(function (){ $.post("${pageContext.request.contextPath}/a2", function (data){ console.log(data) var html = ""; for(var i = 0; i < data.length; ++i){ html+="<tr>" + "<td>" + data[i].name + "</td>" + "<td>" + data[i].age + "</td>" + "<td>" + data[i].sex + "</td>" + "</tr>" } $("#content").html(html); }) })</script></body></html>4、测试
注册提示效果
1、编写Controller类
@RequestMapping("/a3") public String a3(String name){ String msg = ""; // 模拟数据库中存在数据 if(name != null){ if("admin".equals(name)){ msg = "ok"; }else{ msg = "用户名不存在！"; } } return msg; }2、前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script></head><body><p> 用户名：<input type="text" id="name" onblur="a()"> <span id="userInfo"></span></p><p> 密码：<input type="password" id="pwd" onblur="a()"></p><script> function a(){ $.post({ url:"${pageContext.request.contextPath}/a3", data:{'name':$("#name").val()}, success:function (data){ console.log(data); if(data.toString() == "ok"){ $("#userInfo").css("color", "green"); }else{ $("#userInfo").css("color", "red"); } $("#userInfo").html(data); } }); }</script></body></html>注意：因为传递的是json对象，所以要处理json字符串的乱码问题
<mvc:annotation-driven> <mvc:message-converters register-defaults="true"> <bean class="org.springframework.http.converter.StringHttpMessageConverter"> <constructor-arg value="UTF-8"/> </bean> <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="objectMapper"> <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean"> <property name="failOnEmptyBeans" value="false"/> </bean> </property> </bean> </mvc:message-converters> </mvc:annotation-driven>3、测试
获取百度接口Demo
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JSONP百度搜索</title> <style> #q{ width: 500px; height: 30px; border:1px solid #ddd; line-height: 30px; display: block; margin: 0 auto; padding: 0 10px; font-size: 14px; } #ul{ width: 520px; list-style: none; margin: 0 auto; padding: 0; border:1px solid #ddd; margin-top: -1px; display: none; } #ul li{ line-height: 30px; padding: 0 10px; } #ul li:hover{ background-color: #f60; color: #fff; } </style> <script> // 2.步骤二 // 定义demo函数 (分析接口、数据) function demo(data){ var Ul = document.getElementById('ul'); var html = ''; // 如果搜索数据存在 把内容添加进去 if (data.s.length) { // 隐藏掉的ul显示出来 Ul.style.display = 'block'; // 搜索到的数据循环追加到li里 for(var i = 0;i<data.s.length;i++){ html += '<li>'+data.s[i]+'</li>'; } // 循环的li写入ul Ul.innerHTML = html; } } // 1.步骤一 window.onload = function(){ // 获取输入框和ul var Q = document.getElementById('q'); // 事件鼠标抬起时候 Q.onkeyup = function(){ // 如果输入框不等于空 if (this.value != '') { // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ // 创建标签 var script = document.createElement('script'); //给定要跨域的地址 赋值给src //这里是要请求的跨域的地址 我写的是百度搜索的跨域地址 //&cb=demo ---》 会返回 demo(data) script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo'; // 将组合好的带src的script标签追加到body里 document.body.appendChild(script); } } } </script></head><body><input type="text" id="q" /><ul id="ul"></ul></body></html> 赞 (0)