当前位置： 首页 > news >正文

Ajax 学习笔记

news 文章来源：https://blog.csdn.net/qq_46485137/article/details/129011504 2024/11/28 14:47:14

一、Ajax

1.1 什么是Ajax

AJAX = Asynchronous JavaScript and 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 Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON，同时能够把这些外部数据直接载入网页的被选元素中。

jQuery不是生产者，而是大自然搬运工。jQuery Ajax本质就是XMLHttpRequest，对他进行了封装，方便调用!

1.3.1 jquery的安装和使用

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

1.3.2 jQuery Ajax 的核心方法

jQuery.get() 方法的主要参数如下：

jQuery.get(…) 主要参数:
· url: 待载入页面的url地址
· data: 待发送的 key/value 参数
· success: 载入成功时回调函数
· dataType: 返回内容格式，xml, json, script, text, html

jQuery.ajax() 方法类似，最常用的参数 仍是 url data success

jQuery.ajax(…) 主要参数:
· url: 待载入页面的url地址
· data: 待发送的 key/value 参数
· success: 载入成功时回调函数
· error：失败之后执行的回调函数(全局)
· type：请求方式，GET、POST（1.9.0之后用method）

类似的还有 jQuery.post()

1.3.3 简单版 (前端数据-->后端-->success)（使用最原始的HttpServletResponse处理）

这是最原始的HttpServletResponse处理,最简单也最通用,

主要实现的效果: 前端表单里的数据data,传给后端进行处理,后端返回再返回简单的true或false

这里省略了一下关于web.xml 和 springmvc的配置,主要体验一下ajax

  1. 编写一个controller方法:

@Controller
public class AjaxController {@RequestMapping("/a1")public void ajax1(String name , HttpServletResponse response) throws IOException {//if ("admin".equals(name)){response.getWriter().print("true");}else{response.getWriter().print("false");}}
}

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

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>

  1. index.jsp代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$</title><%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%><script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script><script>function a1(){$.post({url:"${pageContext.request.contextPath}/a1",data:{'name':$("#txtName").val()},success:function (data,status) {alert(data);alert(status);}});}</script></head><body><%--onblur：失去焦点触发事件--%>用户名:<input type="text" id="txtName" onblur="a1()"/></body>
</html>

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

1.3.4 升级版(前端事件-->后端-->数据给前端展示)（使用@ResponseController注解,处理后端返回)

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

主要实现的效果: 前端的事件(例如button的点击)-->触发相应的function-->找到后端对应的controller进行处理, 后端返回再返回数据-->前端接收这些数据,处理后再进行显示.

  1. User实体类

//需要提前下载lombok插件
@Data //自动生成getset方法
@AllArgsConstructor  //自动生成有参构造
@NoArgsConstructor  //自动生成无参构造
public class User {private String name;private int age;private String sex;
}

  1. controller层的处理函数

@RequestMapping("/a2")
@ResponseBody
public List<User> ajax2(){List<User> list = new ArrayList<User>();list.add(new User("Boat",2,"女"));list.add(new User("Jack",3,"男"));list.add(new User("Rose",4,"女"));return list; //由于@ResponseBody注解，将list转成json格式返回
}

  1. 前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><meta charset="UTF-8"><title>Title</title>
</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 src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>$(function () {$("#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>

处理的过程如下图所示:

效果如下图所示

1.3.5 至尊版(前端发送数据-->后端处理,并发送数据-->前端接收并展示) (实现注册的提示效果)

主要过程:前端将输入框里的数据发给后端,后端将结果给前端,前端进行展示

  1. Controller层

@RequestMapping("/a3")
public String ajax3(String name,String pwd){String msg = "";//模拟数据库中存在数据if (name!=null){if ("admin".equals(name)){msg = "OK";}else {msg = "用户名输入错误";}}if (pwd!=null){if ("123456".equals(pwd)){msg = "OK";}else {msg = "密码输入有误";}}return msg; //由于@ResponseController注解，将msg转成json格式返回
}

  1. 前端页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script>function a1() {$.post({url: "/a3",data: {'name': $("#name").val()},success: function (data) {if (data.toString() == 'OK') {$("#userInfo").css("color", "green");} else {$("#userInfo").css("color", "red");}$("#userInfo").html(data);}});}function a2() {$.post({url: "$/a3",data: {'pwd': $("#pwd").val()},success: function (data) {if (data.toString() == 'OK') {$("#pwdInfo").css("color", "green");} else {$("#pwdInfo").css("color", "red");}$("#pwdInfo").html(data);}});}</script>
</head>
<body>
<p>用户名:<input type="text" id="name" onblur="a1()"/><span id="userInfo"></span>
</p>
<p>密码:<input type="text" id="pwd" onblur="a2()"/><span id="pwdInfo"></span>
</p>
</body></body>
</html>

效果如图:

Ajax总结：⭐

使用jQuery需要导入jQuery，使用Vue就导入VUE，两个都用，自己原生态实现

三部曲：

  1. 编写对应处理的Controller，返回消息或者字符串或者json格式的数据；

  1. 编写ajax请求

  1. url：Controller请求

  1. data： 键值对

  1. success：回调函数

  1. 给Ajax绑定事件（例如：点击click，失去焦点onblur，键盘弹起 keyup）

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

相关文章：

Ajax 学习笔记

一、Ajax1.1 什么是AjaxAJAX Asynchronous JavaScript and XML(异步的JavaScript和XML)。Ajax是一种在无需加载整个网页的情况下&#xff0c;能够更新部分网页的技术&#xff0c;它不是一种新的编程语言&#xff0c;而是一种用于创建更好更快以及交互性更强的Web应用程序的技术…...

编程日记 2023/5/24 14:03:02

​力扣解法汇总1234. 替换子串得到平衡字符串​

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣 描述&#xff1a; 有一个只含有 Q, W, E, R 四种字符&#xff0c;且长度为 n 的字符串。 假如在该…...

编程日记 2023/5/12 0:41:20

C++关键字之const、inline、static

C 关键字总结 1.const const是 constant 的缩写&#xff0c;本意是不变的、不易改变的意思。在C中用来修饰内置类型变量&#xff0c;自定义对象&#xff0c;成员函数&#xff0c;返回值&#xff0c;函数参数使用如下&#xff1a; //修饰普通类型变量 const int a 7; int ba;…...

编程日记 2023/5/26 21:37:25

【成为架构师课程系列】怎样进行概念架构（Conceptual Architecture）？

目录 前言 什么是概念架构 概念架构阶段的3个步骤 初步设计 高层分割 分层式概念服务架构 Layer:逻辑层 Tier: 物理层 按通用性分层 技术堆叠 考虑非功能需求 【禅与计算机程序设计艺术&#xff1a;更多阅读】 前言 胜兵先胜而后求战&#xff0c;败兵先站而后求胜。…...

编程日记 2023/5/28 19:50:52

PostgreSQL的下载安装教程（macOS、Windows）

postgresql是GIS服务端几乎不可避免要打交道的数据库。因为mysql的空间扩展真是不尽人意。所以想要学会GIS服务端知识，postgresql（下文简称pg）你是必须要会的。 首先要知道，pg是一个空间数据库，和普通数据库不同的是pg支持空间数据的存储与操作。这里所谓的空间数据一般指…...

编程日记 2023/5/13 22:14:35

98年的确实卷，公司新来的卷王，我们这帮老油条真干不过.....

都说00后躺平了&#xff0c;但是有一说一&#xff0c;该卷的还是卷。这不&#xff0c;前段时间我们公司来了个00后&#xff0c;工作没两年&#xff0c;跳槽到我们公司起薪18K&#xff0c;都快接近我了。后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了。 …...

编程日记 2023/5/14 7:34:50

软件架构知识2-系统复杂度

架构设计的真正目的&#xff1a;是为了解决软件系统复杂度带来的问题&#xff0c;一个解决方案。 系统复杂度&#xff0c;如何入手&#xff1a; 1、通过熟悉和理解需求&#xff0c;识别系统复杂性所在的地方&#xff0c;然后针对这些复杂点进行架构设计。 2、架构设计并不是要…...

编程日记 2023/5/16 16:46:02

JavaSE学习day4_02 数组（超级重点）

3.数组 3.1什么是数组 数组就是存储数据长度固定的容器&#xff0c;存储多个数据的数据类型要一致。 3.2数组定义格式 3.2.1第一种&#xff08;常用&#xff09; 数据类型[] 数组名 示例&#xff1a; int[] arr; double[] arr; char[] arr; 3.2.2第二种(在…...

编程日记 2023/5/26 21:38:04

Theano教程：Python的内存管理

在写大型程序时候的一大挑战是如何保证最少的内存使用率。但是在Python中的内存管理是比较简单的。Python显示分配内存&#xff0c;使用引用计数系统管理对象&#xff0c;当指向某一个对象的引用数变为 0 的时候&#xff0c;该对象所占的内存就会被释放。理论上听起来很不错&am…...

编程日记 2023/5/15 4:13:09

Linux | Liunx安装Tomcat（Ubuntu版）

目录 一、下载并上传Tomcat压缩包到Ubuntu 1.1 下载并解压 1.2 执行 startup.sh 文件 二、验证Tomcat启动是否成功 2.1 查看启动日志 2.2 查看启动进程 三、Windows访问 Tomcat 服务 四、停止 Tomcat 服务 Tomcat是一款Web服务器&#xff0c;开发Web项目基本上都会用到…...

编程日记 2023/4/7 18:56:39

缓冲区浅析

缓冲区 程序运行输入数据时&#xff0c;从键盘的输入先存储到缓冲区&#xff0c;只有当缓冲区满或者输入回车时程序才会真正地从缓冲区读入数据 int main() {int a, b;cin >> a >> b;return 0; }in: 1 2\n 例如这里输入空格时程序没有输出&#xff0c;而是将空格…...

编程日记 2023/5/26 21:40:44

Day888.MySQL是怎么保证主备一致的 -MySQL实战

MySQL是怎么保证主备一致的 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于MySQL是怎么保证主备一致的内容。 MySQL 能够成为现下最流行的开源数据库&#xff0c;binlog 功不可没。 在最开始&#xff0c;MySQL 是以容易学习和方便的高可用架构&#xff0c;被开发人…...

编程日记 2023/5/26 21:41:36

互联网舆情监测系统的发展阶段，TOOM互联网舆情监测系统有哪些?

互联网舆情监测系统是一种利用计算机技术对互联网上的大量信息进行实时监测、分析和评估的工具&#xff0c;旨在了解公众对某一事件、话题或品牌等的态度、情感倾向和影响力等。通过对社交媒体、论坛、新闻媒体等多个渠道的数据采集和处理&#xff0c;系统能够实现舆情事件的追…...

编程日记 2023/5/16 16:39:19

GIT命令操作大全

文章目录一、前言二、工作模块2.1 Workspace&#xff1a;工作区2.2 Index / Stage&#xff1a;暂存区2.3 Repository&#xff1a;本地仓库2.4Remote&#xff1a;远程仓库三、GIT基本配置四、GIT项目代码管理4.1 初始化git仓库4.2 提交到暂存区(stage)4.3 将暂存区的文件恢复到工…...

编程日记 2023/5/16 16:40:57

突破传统开发模式，亚马逊云科技助力中科院加速推动合成生物学

当数字技术成为整个社会运行的底座&#xff0c;生物科学也能借力云计算从诸多繁琐重复的工作中解放出来&#xff0c;专注于生物设计与创新。来看看亚马逊云科技如何与TIBCAS合作&#xff0c;推动合成生物学的发展。 明确核心需求&#xff0c;选择合作伙伴 TIBCAS选择与亚马逊…...

编程日记 2023/5/26 21:42:36

分享开放通达信l2接口的过程，开发之后怎么使用？

随着互联网的不断进步&#xff0c;信息技术的不断发展&#xff0c;通达信l2接口技术逐步成熟。那么&#xff0c;这些开放通达信l2接口开发的过程是怎么样的呢?期间又会遇到什么问题&#xff0c;开放之后又会怎么使用呢&#xff1f;这篇文章带你深入了解。 通达信l2接口不像一…...

编程日记 2023/5/30 10:02:57

33、基于51单片机老人防跌倒蜂鸣器报警系统加速度检测

背景技术 老年人出门由于身体不灵活、视力较差&#xff0c;容易发生跌倒&#xff0c;现用的老年人跌倒报警装置是通过无线对讲系统研发的&#xff0c;它外观精美&#xff0c;自动化程度高&#xff0c;有很强的专业性&#xff0c;但是&#xff0c;设计者忽略了一个问题&#xf…...

编程日记 2023/5/29 8:35:25

【项目】基于SpringBoot+Freemarker+Mybatis+MySQL+LayUI实现CRM智能办公系统

这里写目录标题CRM基本概念CRM分类模块功能描述项目代码application-dev.yml部分页面代码CRM基本概念 圈内存在这么一句话&#xff1a;“世上本来没有 CRM&#xff0c;大家的生意越来越难做了&#xff0c;才有了 CRM。” 在同质化竞争时代&#xff0c;顾客资产尤为重要&#x…...

编程日记 2023/5/26 21:43:44

手写识别字体的步骤是什么？怎么识别图片中的文字？

手写识别字体的步骤是什么&#xff1f;怎么识别图片中的文字&#xff1f; 1. 打开信风工具网&#xff0c;点击拍照按钮&#xff0c;选择拍图识字模式&#xff0c;对准需要识别的文件进行拍摄&#xff61;在线工具地址&#xff1a; https://ocr.bytedance.zj.cn/image/ImageT…...

编程日记 2023/5/22 23:20:18

Mysql 存储过程

什么是存储过程&#xff1f; 存储过程是事先经过编译并存储在数据库的一段sql语句的集合 如何创建一个存储过程&#xff1f; create procedure 存储过程名称([参数列表]) beginsql语句; end#例 create procedure p1() beginselect * from t_goods;select * from t_user; end如…...

编程日记 2023/5/28 19:53:10

【LeetCode】每日一题（3）

目录 题目&#xff1a;1234. 替换子串得到平衡字符串 - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 写在最后&#xff1a; 题目&#xff1a;1234. 替换子串得到平衡…...

编程日记 2023/5/14 7:38:02

websocket学习

1.什么是websocket 1&#xff09;首先websocket和http一样&#xff0c;是一种网络通信协议&#xff0c;来自HTML5的特性&#xff1b; 2&#xff09;他可以使客户端和服务端进行双工通信&#xff0c;简单来说&#xff0c;就是双向通信&#xff1a;比如我们熟悉的http协议&…...

编程日记 2023/5/30 10:02:39

Java面试题及答案整理汇总（2023最新版）

前言 面试前还是很有必要针对性的刷一些题&#xff0c;很多朋友的实战能力很强&#xff0c;但是理论比较薄弱&#xff0c;面试前不做准备是很吃亏的。这里整理了很多面试常考的一些面试题&#xff0c;希望能帮助到你面试前的复习并且找到一个好的工作&#xff0c;也节省你在网…...

编程日记 2023/5/26 21:44:59

公司来了个卷王，我愿称之为王中王，让人崩溃

前几天我们公司一下子也来了几个新人&#xff0c;这些年前人是真能熬啊&#xff0c;本来我们几个老油子都是每天稍微加会班就打算走了&#xff0c;这几个新人一直不走&#xff0c;搞得我们也不好走。2023年春招就要开始了&#xff0c;最近内卷严重&#xff0c;各种跳槽裁员&…...

编程日记 2023/5/26 21:47:06

波奇学c语言：代码的编译和链接

test.c&#xff08;源文件&#xff09;->编译->test.obj&#xff08;目标文件&#xff09;->链接->test.exe&#xff08;可执行文件&#xff09;编译1.预编译&#xff08;预处理&#xff09;&#xff1a;text.c->text.i使用gcc -E test.c 进行停止预处理指令&am…...

编程日记 2023/4/14 19:13:29

计算机网络原理--传输层协议(TCP协议十大特性)

目录 1.认识TCP协议 TCP的协议段格式 2. 确认应答机制 3.超时重传 4.连接管理 <...

编程日记 2023/5/18 8:34:52

nvm控制node版本

安装 nvm 1、下载 nvm 官网安装包&#xff1a; github 选择 nvm-setup.exe 下载 2、安装 1、选择 nvm 安装目录&#xff08;可自定义&#xff09; 2、选择 node 安装目录&#xff08;如有安装过&#xff0c;可以选择以前安装目录&#xff0c;可 cdm 输入 where node 查看原nod…...

编程日记 2023/5/26 21:55:49

从0到1一步一步玩转openEuler--13 openEuler用户组管理

文章目录13.1 创建用户组13.1.1 groupadd命令13.1.2 用户组信息文件13.1.3 创建用户组实例13.2 修改用户组13.2.1 修改GID13.2.2 修改用户组名13.3 删除用户组13.4 将用户加入用户组或从用户组中移除13.5 切换用户组在Linux中&#xff0c;每个普通用户都有一个账户&#xff0c;…...

编程日记 2023/5/22 23:21:16

知不知道什么叫米筐量化？怎么来的？

现在量化市场范围越来越大&#xff0c;各种量化系统也是普遍性的了&#xff0c;不过米匡量化这个开发系统通常是由交易接口的专业开发团队开发的的结果&#xff0c;那么米匡量化的终端又是是怎么开发成功的呢&#xff1f;首先&#xff0c;我们可以从api接口的调用来了解&#x…...

编程日记 2023/5/15 21:28:25

Urho3D 事件Events

在脚本中&#xff0c;子系统通过以下全局财产可用&#xff1a;时间、文件系统、日志、缓存、网络、输入、ui、音频、引擎、图形、渲染器、脚本、控制台、debugHud、数据库。请注意&#xff0c;由于WorkQueue和Profiler的低级性质&#xff0c;它们不可用于脚本。 事件本身不需要…...

编程日记 2023/5/23 16:53:58

西宁网站建设报价/百度推广后台登陆首页

WebView 上传图片, 想必很多人都碰到过这样的场景. 而且 WebView 在4.4前后的区别非常大, 比如对URL跳转的格式, 对JS的注入声明等等, 4.4以后的WebView 已经是chromium内核, 有多强大就无需我赘述. 说这些, 其实也是为了说明也因为WebView的前后变化太大了, 所以在低版本和版本…...

编程日记 2024/11/28 13:56:52

做视频小网站犯法吗/网络营销经典案例

英文原文&#xff1a; 10 Myths About Introverts 我非常幸运的发现了这本《内向者优势——如何在外向的世界中获得成功》&#xff08;英文名&#xff1a;The Introvert Advantage (How To Thrive in an Extrovert World)&#xff09;的好书&#xff0c;我感觉就好像是有人专门…...

编程日记 2024/11/28 13:34:41

东莞网站建设费用/女生seo专员很难吗为什么

java并行执行多个任务： 最近做项目中，有个任务需要实现并发编程，个人参考了下网上的实现，自己实现了下并发方法，并且增加了简单的说明，希望的有需要的朋友有些帮助。 import java.util.UUID; import java.util.concurrent.CountDownLatch; import java.util.concurrent.E…...

编程日记 2024/11/28 12:04:47

2016网站设计风格/软文代写多少钱一篇

区块链&#xff0c;可能是当下最有前景又充满分歧的技术与经济趋势。它给数字世界带来了“价值表示”和“价值转移”两项全新的基础功能。其潜力正在显现出来&#xff0c;但当下它又处于朦胧与野蛮生长的阶段。 对比互联网的发展史&#xff0c;现在的区块链可能相当于 1994 年…...

编程日记 2024/11/28 9:31:58

威海市网站建设/网店推广方法

文章目录[Spring MVC]未开启矩阵变量&#xff08;MatrixVariable&#xff09;的支持[Spring MVC]缺少依赖&#xff08;与jsp有关&#xff09;[Spring MVC]缺少依赖[commons-fileupload][Spring MVC]无法访问html文件静态资源缓存配置失败依赖冲突redirect-view-controller不起作…...

编程日记 2024/11/28 7:08:14

莆田高端模板建站/企业网站推广方法实验报告

触摸事件 React中的触摸事件仅用三种&#xff0c;touchstart, touchend, touchend&#xff0c;可是这种会有问题&#xff0c;有时候我需要滚动页面的时候&#xff0c;很容易触发某一个元素的touchend事件&#xff0c;为此笔者找了一个React第三方组件&#xff0c;React-tappabl…...

编程日记 2024/11/28 1:38:16