。

Ajax是一种在无需加载整个网页的情况下#xff0c;能够更新部分网页的技术#xff0c;它不是一种新的编程语言#xff0c;而是一种用于创建更好更快以及交互性更强的Web应用程序的技术…一、Ajax1.1

Asynchronous

XML(异步的JavaScript和XML)。

Ajax是一种在无需加载整个网页的情况下能够更新部分网页的技术它不是一种新的编程语言而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

例如在搜索框输入字符的时候提醒框实时更新但是页面地址没变这就是Ajax的功劳。

没有使用ajax技术的网站想要更新内容或者提交一个表单都需要重新加载整个页面使用了ajax技术的网页通过在后台服务器进行的少量的数据交换就可以实现异步局部更新。

1.2

利用ajax可以做什么注册时输入用户名自动检测用户是否已经存在登录时提醒用户名密码错误删除数据行时将行ID发送到后台后台在数据库中删除数据库删除成功后在页面DOM中将数据行也删除。

1.3

jQuery

实现Ajax先不考虑纯JS实现Ajax的方法这里直接使用jquery提供的更方便学习避免重复造轮子可以去了解下本质XMLHttpRequest

!也没有展示用iframe标签伪造ajax的方法有兴趣的话可以参考狂神原课程视频。

Ajax的核心是XMLHttpRequest对象(XHR)。

XHR为向服务器发送请求和解析服务器响应提供了接口。

能够以异步方式从服务器获取新数据。

jQuery提供多个与AJAX有关的方法。

通过jQuery

AJAX方法能够使用HTTP

Post从远程服务器上请求文本、HTML、XML或JSON同时能够把这些外部数据直接载入网页的被选元素中。

jQuery不是生产者而是大自然搬运工。

jQuery

Ajax本质就是XMLHttpRequest对他进行了封装方便调用!1.3.1

jquery的安装和使用jquery的安装和使用和基础知识见另一篇笔记jQuery学习笔记_爱学习的小船的博客-CSDN博客1.3.2

jQuery

(前端数据--后端--success)使用最原始的HttpServletResponse处理这是最原始的HttpServletResponse处理,最简单也最通用,

前端表单里的数据data,传给后端进行处理,后端返回再返回简单的true或false这里省略了一下关于web.xml

springmvc的配置,主要体验一下ajax编写一个controller方法:Controller

public

(admin.equals(name)){response.getWriter().print(true);}else{response.getWriter().print(false);}}

}导入jquery,可以用在线的CDN,也可以下载导入,方法见jquery的笔记,这里是用绝对地址导入:script

srchttps://code.jquery.com/jquery-3.1.1.min.js/script

script

src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/scriptindex.jsp代码%

page

contentTypetext/html;charsetUTF-8

languagejava

htmlheadtitle$Title$/title%--script

srchttps://code.jquery.com/jquery-3.1.1.min.js/script--%script

src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/scriptscriptfunction

a1(){$.post({url:${pageContext.request.contextPath}/a1,data:{name:$(#txtName).val()},success:function

(data,status)

{alert(data);alert(status);}});}/script/headbody%--onblur失去焦点触发事件--%用户名:input

typetext

/html实现的过程如下图所示,需要对应的名称也在图中标出来了1.3.4

升级版(前端事件--后端--数据给前端展示)使用ResponseController注解,处理后端返回)结合学习的json,

使用ResponseController注解来处理后端返回给前端的数据,可以自动转为json格式,

前端的事件(例如button的点击)--触发相应的function--找到后端对应的controller进行处理,

后端返回再返回数据--前端接收这些数据,处理后再进行显示.User实体类//需要提前下载lombok插件

Data

}controller层的处理函数RequestMapping(/a2)

ResponseBody

//由于ResponseBody注解将list转成json格式返回

}前端页面%

contentTypetext/html;charsetUTF-8

languagejava

aligncentertrtd姓名/tdtd年龄/tdtd性别/td/trtbody

idcontent/tbody

src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/script

script$(function

{$.post(${pageContext.request.contextPath}/a2,function

(data)

/tr}$(#content).html(html);});})})

/script

至尊版(前端发送数据--后端处理,并发送数据--前端接收并展示)

(实现注册的提示效果)主要过程:前端将输入框里的数据发给后端,后端将结果给前端,前端进行展示Controller层RequestMapping(/a3)

public

//由于ResponseController注解将msg转成json格式返回

}前端页面!DOCTYPE

charsetUTF-8titleTitle/titlescript

srchttps://code.jquery.com/jquery-3.1.1.min.js/script

/head

red);}$(#userInfo).html(data);}});}function

a2()

red);}$(#pwdInfo).html(data);}});}/script

/head

/html效果如图:Ajax总结⭐使用jQuery需要导入jQuery使用Vue就导入VUE两个都用自己原生态实现三部曲编写对应处理的Controller返回消息或者字符串或者json格式的数据编写ajax请求urlController请求data

键值对success回调函数给Ajax绑定事件例如点击click失去焦点onblur键盘弹起

keyup课程链接:【狂神说Java】一小时掌握Ajax_哔哩哔哩_bilibili