电商建站系统,网站开发技术架构,2022年楼市最新政策,不定期更新域名【WEEK4】 【DAY4】AJAX第一部分【中文版】 2024.3.21 Thursday 目录 8.AJAX8.1.简介8.2.伪造ajax8.2.1.新建module#xff1a;springmvc-06-ajax8.2.2.添加web支持#xff0c;导入pom依赖8.2.2.1.修改web.xml8.2.2.2.新建jsp文件夹 8.2.3.新建applicationContext.xml8.2.4.…【WEEK4】 【DAY4】AJAX第一部分【中文版】 2024.3.21 Thursday 目录 8.AJAX8.1.简介8.2.伪造ajax8.2.1.新建modulespringmvc-06-ajax8.2.2.添加web支持导入pom依赖8.2.2.1.修改web.xml8.2.2.2.新建jsp文件夹 8.2.3.新建applicationContext.xml8.2.4.新建AjaxController.java8.2.5.配置Tomcat8.2.6.注8.2.7.新建test.html8.2.8.利用ajax可以做 8.3.jQuery.ajax8.3.1.介绍8.3.2.jQuery.ajax(...)部分参数8.3.3.导入jQuery8.3.4.修改applicationContext.xml8.3.5.修改index.xml8.3.6.修改AjaxController.java8.3.7.运行8.3.8.流程图 8.AJAX
8.1.简介
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用户界面。
8.2.伪造ajax
8.2.1.新建modulespringmvc-06-ajax 8.2.2.添加web支持导入pom依赖
因为该module被创建在SpringMVC_try1文件下所以可以直接沿用父文件的依赖
8.2.2.1.修改web.xml
?xml version1.0 encodingUTF-8?
web-app xmlnshttp://xmlns.jcp.org/xml/ns/javaeexmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsdversion4.0servletservlet-namespringmvc/servlet-nameservlet-classorg.springframework.web.servlet.DispatcherServlet/servlet-class!--绑定配置文件--init-paramparam-namecontextConfigLocation/param-nameparam-valueclasspath:applicationContext.xml/param-value/init-param!--启动加载--load-on-startup1/load-on-startup/servletservlet-mappingservlet-namespringmvc/servlet-nameurl-pattern//url-pattern/servlet-mappingfilterfilter-nameencoding/filter-namefilter-classorg.springframework.web.filter.CharacterEncodingFilter/filter-classinit-param !--解决乱码--param-nameencoding/param-nameparam-valueutf-8/param-value/init-param/filterfilter-mappingfilter-nameencoding/filter-nameurl-pattern/*/url-pattern !--过滤所有请求--/filter-mapping
/web-app8.2.2.2.新建jsp文件夹 8.2.3.新建applicationContext.xml ?xml version1.0 encodingUTF-8?
beans xmlnshttp://www.springframework.org/schema/beansxmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexmlns:contexthttp://www.springframework.org/schema/contextxmlns:mvchttp://www.springframework.org/schema/mvcxsi:schemaLocationhttp://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttps://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttps://www.springframework.org/schema/mvc/spring-mvc.xsd!-- 自动扫描指定的包下面所有注解类交给IOC容器管理 --context:component-scan base-packageP24.controller/mvc:annotation-driven/!-- 视图解析器 --bean classorg.springframework.web.servlet.view.InternalResourceViewResolveridinternalResourceViewResolver!-- 前缀 --property nameprefix value/WEB-INF/jsp/ /!-- 后缀 --property namesuffix value.jsp //bean/beans8.2.4.新建AjaxController.java
先新建controller文件夹
package P24.controller;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;RestController
public class AjaxController {RequestMapping(/t1)public String test(){return hello;}
}
测试使用
8.2.5.配置Tomcat 添加lib支持
8.2.6.注
如果删除module后重新创建名称相同的module可能出现“Module ‘----‘already exists”在项目保存的文件夹里删除文件之后解决方法详见https://blog.csdn.net/weixin_43673163/article/details/126538827
8.2.7.新建test.html 注意新建的位置和WEB-INF平级直接属于web目录下一级 测试加载了一个高度为500px的窗口
!DOCTYPE html
html langen
headmeta charsetUTF-8titleiframe测试体验页面无刷新/titlescriptfunction go() {var url1 document.getElementById(url).value;//所有的值变量提前获取document.getElementById(iframe1).srcurl1;}/script/head
bodydivp请输入地址/ppinput typetext idurl valuehttps://www.csdn.net/input typebutton value提交 onclickgo()/p
/div!--弹窗--
diviframe idiframe1 stylewidth: 100%; height: 500px/iframe
/div/body
/html新建ajax-frame.html效果相同
!DOCTYPE html
html
head langenmeta charsetUTF-8titlekuangshen/title
/head
bodyscript typetext/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;}/scriptdivp请输入要加载的地址span idcurrentTime/span/pp
!-- input idurl typetext valuehttps://www.baidu.com//不要使用百度的网址打不开--input idurl typetext valuehttps://www.csdn.net//input typebutton value提交 onclickLoadPage()/p
/divdivh3加载页面位置/h3iframe idiframePosition stylewidth: 100%;height: 500px;/iframe
/div/body
/html注意在输入框中不能访问百度官网可以使用百度知道的网址进行实践
8.2.8.利用ajax可以做
注册时输入用户名自动检测用户是否已经存在。登陆时提示用户名密码错误删除数据行时将行ID发送到后台后台在数据库中删除数据库删除成功后在页面DOM中将数据行也删除。 等等
8.3.jQuery.ajax
8.3.1.介绍
纯JS原生实现Ajax我们不去讲解这里直接使用jquery提供的方便学习和使用避免重复造轮子有兴趣的同学可以去了解下JS原生XMLHttpRequest Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。jQuery 不是生产者而是大自然搬运工。jQuary是一个库包含js的大量函数jQuery Ajax本质就是 XMLHttpRequest对他进行了封装方便调用
8.3.2.jQuery.ajax(…)部分参数 url请求地址 type请求方式GET、POST1.9.0之后用method headers请求头 data要发送的数据 contentType即将发送信息至服务器的内容编码类型(默认: “application/x-www-form-urlencoded; charsetUTF-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 将自动替换 ? 为正确的函数名以执行回调函数 8.3.3.导入jQuery
下载地址 https://jquery.com/download/ 导入步骤 右键上图链接另存为到本地地址然后导入下图所示位置web-statics-js
8.3.4.修改applicationContext.xml
?xml version1.0 encodingUTF-8?
beans xmlnshttp://www.springframework.org/schema/beansxmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexmlns:contexthttp://www.springframework.org/schema/contextxmlns:mvchttp://www.springframework.org/schema/mvcxsi:schemaLocationhttp://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttps://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttps://www.springframework.org/schema/mvc/spring-mvc.xsd!-- 自动扫描指定的包下面所有注解类交给IOC容器管理 --context:component-scan base-packageP24.controller/!--静态资源过滤--mvc:default-servlet-handler /mvc:annotation-driven/!-- 视图解析器 --bean classorg.springframework.web.servlet.view.InternalResourceViewResolveridinternalResourceViewResolver!-- 前缀 --property nameprefix value/WEB-INF/jsp/ /!-- 后缀 --property namesuffix value.jsp //bean/beans8.3.5.修改index.xml
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitle$Title$/title%--script srchttps://code.jquery.com/jquery-3.1.1.min.js/script--%script src${pageContext.request.contextPath}/statics/js/jquery-3.7.1.js/scriptscript%--事件a--%function a1(){$.post({//1. 请求地址url:${pageContext.request.contextPath}/a1,//2. 请求数据//$(#txtName).val()取出输入框给出的值这里的‘name就是AjaxController中方法a1中的String namedata:{name:$(#txtName).val()},//3. 请求成功success:function (data,status) {//弹窗显示alert(data);alert(status);//在console界面显示console.log(datadata);console.log(datastatus);},// //4. 请求失败// error:function () {// }});}/script
/head
body%--onblur失去焦点触发事件--%
%--失去焦点的时候发起一个请求携带信息到后台--%
%-- a href/t1/a这种不能实现失去焦点功能——因为会直接重定向或者转发--%
用户名:input typetext idtxtName onblura1()//body
/html8.3.6.修改AjaxController.java
package P24.controller;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletResponse;
import java.io.IOException;RestController
public class AjaxController {RequestMapping(/t1)public String test(){return hello;}RequestMapping(/a1)public void a1(String name, HttpServletResponse response) throws IOException {System.out.println(a1:paramname);if (zzz.equals(name)){response.getWriter().print(true);}else {response.getWriter().print(false);}}
}8.3.7.运行
在输入框输入任意内容后如果失去焦点将触发function a1将数据传到后端的a方法作为name参数经过判断会弹出“true”或“false” http://localhost:8080/springmvc_06_ajax_war_exploded/ 输入字符
alert(data);alert(status);console.log(datadata);
console.log(datastatus);输入不符合要求的字符时
8.3.8.流程图 学习前端的注意事项 Htmlcssjs熟练 Js包含1函数闭包必考就是自己调用自己2Domid, name, tag; create, remove3Bomwindow事件操作浏览器document操作文档对象 ES6import, require
