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

JavaWeb基础专项复习6——AJAX

news 来源：原创 2025/9/12 8:08:54

系列文章目录

1、JavaWeb基础专项复习1——XML文件-CSDN博客

2、JavaWeb基础专项复习2——JSP文件-CSDN博客

3、JavaWeb基础专项复习2——Servlet相关知识-CSDN博客

4、JavaWeb基础专项复习4——会话对象Session and Cookie-CSDN博客

5、JavaWeb基础专项复习5——请求对象和响应对象request and response-CSDN博客

文章目录

系列文章目录

文章目录

1、初识AJAX

1.1 AJAX介绍

1.2 AJAX工作原理

2、AJAX使用

2.1 环境准备

2.2 创建AJAX请求

2.3 AJAX参数说明

3、AJAX练习

1、初识AJAX

1.1 AJAX介绍

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。 js jQuery

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

目前几乎所有的网站都离不开AJAX这门技术。

传统技术:

AJAX技术:

AJAX最大特点: 页面无刷新的请求，ajax默认是异步的，速度快，用户体验比较好

1.2 AJAX工作原理

浏览器端触发事件：在浏览器中发生某个事件（例如用户点击按钮、页面加载等），此时会创建一个XMLHttpRequest对象，该对象用于在后台与服务器进行数据交换而不影响页面的显示。然后通过这个对象发送 HTTP 请求。
服务器处理请求：服务器接收到 HTTP 请求后，对其进行处理，接着创建一个响应，并将数据发送回浏览器。
浏览器处理响应：浏览器接收到服务器返回的数据后，使用 JavaScript 对数据进行处理，最后更新页面内容，这样可以在不重新加载整个网页的情况下，局部更新页面的信息。

2、AJAX使用

2.1 环境准备

使用AJAX技术我们需要用到HTML/CSS/JS/jQuery/JavaWeb相关知识,原生的JS也可以进行AJAX的操作,但是相对比较繁琐也没有必要,故此我们本节课学习使用jQuery封装后的AJAX技术来进行学习;

2.2 创建AJAX请求

$.ajax({url : "ajax/getName?id="+id,// ajax请求的url地址type : "get",// 提交的方法success : function(data) { // ajax请求回调后执行的方法,data表示从服务器返回的数据alert(data);}
});

以上代码表示的意思为:

使用get方法向ajax/getName的URL提交id数据,并且在服务器返回后弹出服务器返回内容

2.3 AJAX参数说明

url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
timeout:要求为Number类型的参数，设置请求超时时间（ms）。此设置将覆盖$.ajaxSetup()方法的全局设置。
async:要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
cache:要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
data:要求为Object或String类型的参数，服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 服务端返回的数据类型。要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

xml：返回XML文档，可用JQuery处理。

html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。

json：返回JSON数据。

jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。

text：返回纯文本字符串。

beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

 function(XMLHttpRequest){this;   //调用本次ajax请求时传递的options参数}

complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

  function(XMLHttpRequest, textStatus){this;    //调用本次ajax请求时传递的options参数}

success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

(1)由服务器返回，并根据dataType参数进行处理后的数据。

(2)描述状态的字符串。

 function(data, textStatus){//data可能是xmlDoc、jsonObj、html、text等等this;  //调用本次ajax请求时传递的options参数}

error:要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

 function(XMLHttpRequest, textStatus, errorThrown){//通常情况下textStatus和errorThrown只有其中一个包含信息this;   //调用本次ajax请求时传递的options参数}

contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded","json"。该默认值适合大多数应用场合。
dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

    function(data, type){//返回处理后的数据return data;}

global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。
processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

3、AJAX练习

表单验证用户名是否存在

构建页面 jsp html
引入jquery的js文件
构建表单或者输入用户名的input标签
考虑什么情况下（什么事件触发验证的ajax）
不用jdbc不用数据库模拟“admin用户”）
Ajax发送异步请求验证数据（拿到服务端的结果并局部更新页面）
编写服务端的servlet处理ajax的请求
相应结果给客户端

前台页面:

<head><meta charset="UTF-8"><title>AJAX测试页</title><!--引入jQuery的js--><script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>ID:<input type="text" id="username" onblur="sendAjax()"/><br><span id="msg"></span><br>
</body>
<script type="text/javascript">// 发送ajax的方法function sendAjax(){// 获取当前输入框的idvar username = $("#username").val();// 调用jquery的ajax方法发送请求$.ajax({url : "ajax/getName?username="+username,type : "post",success : function(data) {// 获取服务器返回内容后显示在页面上$("#msg").html(data);}});}
</script>
</html>

Servlet代码:

public class AJAXServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String username = request.getParameter("username");String result = "";if(username!=null && username.equals("zhangsan")){result = "is exist";}else{result = "not exist";}response.getWriter().write(result);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request,response);}
}

4、补充：同步与异步

异步：异步是指在执行某个操作时，不会阻塞后续代码的执行。

也就是说，当一个异步操作开始后，程序会继续执行后续的语句，而不会等待该操作完成。当异步操作完成后，会通过特定的方式（如回调函数、Promise 等）来通知程序进行后续处理。

同步：与异步相对的是同步操作。在同步操作中，代码会按照顺序依次执行，当前一个操作完成后才会执行下一个操作。

例如，在同步读取文件时，程序会暂停执行，直到文件读取完成，再继续后续的代码。这种方式在操作耗时较长时，会导致程序长时间阻塞，影响用户体验或其他任务的执行。而异步操作则可以避免这种阻塞，提高程序的响应性和效率。

JavaWeb基础专项复习6——AJAX

系列文章目录 1、JavaWeb基础专项复习1——XML文件-CSDN博客 2、JavaWeb基础专项复习2——JSP文件-CSDN博客 3、JavaWeb基础专项复习2——Servlet相关知识-CSDN博客 4、JavaWeb基础专项复习4——会话对象Session and Cookie-CSDN博客 5、JavaWeb基础专项复习5——请求对象…...

编程日记 2025/9/12 8:08:54

RabbitMQ快速入门

目录 MQ简介 1、同步通信图片 2、异步通信图片 RabbitMQ快速上手基本介绍： Producer和Consumer Connection和Channel Virtual host Queue Exchange 工作流程 AMQP Java编写RabbitMQ生产者消费者生产者 1.建立连接 2.开启信道 3.声明交换机 4.声…...

编程日记 2025/9/12 7:04:48

内存中的缓存区

在 Java 的 I/O 流设计中，BufferedInputStream 和 BufferedOutputStream 的“缓冲区”是内存中的缓存区（具体是 JVM 堆内存的一部分），但它们的作用是优化数据的传输效率，并不是直接操作硬盘和内存之间的缓存。以下是详…...

编程日记 2025/9/10 11:03:39

快速列出MS Word中所有可用字体

Word中有很多字体，虽然在字体下拉列表中提供了字体的样例，但是并不全面，例如使用Batang字体的话，数字会显示成什么效果，就无法直观的看到。打开Word应用程序，新建一个空白文档，按AltF11打开VBE…...

编程日记 2025/9/12 18:41:01

《机器学习数学基础》补充资料：矩阵的LU分解

本文是对《机器学习数学基础》第2章2.3.3节矩阵LU分解的拓展。判断是否可LU分解并非所有矩阵都可以实现LU分解。定理1： 若 n n n 阶可逆矩阵 A \pmb{A} A 可以进行LU分解，则 A \pmb{A} A 的 k k k 阶顺序主子阵（leading principal s…...

编程日记 2025/9/12 18:41:39

seasms v9 注入漏洞 + order by注入+information_schema解决方法

目录一、当注入时，information_schema被禁用的解决方法 1.通过sys库可以获取到表名和库名 2.通过无列名注入join获取列名二、seasms v9 注入漏洞三、order by注入一、当注入时，information_schema被禁用的解决方法 information_schema数据库是My…...

编程日记 2025/9/12 18:34:50

跨端方案选型：对比Uni-app与Taro在复杂电商项目中的技术选型依据参考

跨端方案选型：对比Uni-app与Taro在复杂电商项目中的技术选型依据参考请赏析： Uni-app与Taro复杂电商项目选型对比指南一、核心选型维度速记技术栈匹配 → 跨端能力 → 性能优化 → 开发效率 → 生态支持 → 长期维护二、关键维度对比分析 1. 技术栈匹配性框架技术栈适…...

编程日记 2025/9/12 18:41:37

32个关键字 1.基本数据类型 signed unsigned char int float double short long void 2.构造数据类型 struct union enum 3.数据存储类别 auto static extern register 4.数据优化 const volatile 5. 9条基本语句 if else switch case break default while do for…...

编程日记 2025/9/9 1:12:05

音乐游戏Drummania(GITADORA)模拟器

文章目录 （一）Drummania和GITADORA（1.1）基本情况（1.2）机体 （二）模拟器（2.1）主程序（2.2）模拟器主题 （三）曲谱文…...

编程日记 2025/9/10 19:23:12

WPF中对滚动条进行平滑滚动

有时候我们在动态添加内容时，需要将滚动条滚动到指定内容处。一般我们会调用ScrollViewer的ScrollToVerticalOffset（垂直方向）函数和ScrollToHorizontalOffset（水平方向）函数来控制滚动条滚动到指定位置。正常滚动效…...

编程日记 2025/9/12 18:41:38

【通俗讲解电子电路】——从零开始理解生活中的电路(一)

导言：电子电路为什么重要？ ——看不见的“魔法”，如何驱动你的生活？ 清晨，当你的手机闹钟响起时，你可能不会想到，是电子电路在精准控制着时间的跳动；当你用微波炉加热早餐时&#…...

编程日记 2025/9/12 18:32:55

达梦：内存相关参数

目录 28个相关参数1. 内存池相关MEMORY_POOLMEMORY_N_POOLSMEMORY_BAK_POOL 2. 大缓冲区相关HUGE_BUFFERHUGE_BUFFER_POOLS 3. 共享缓冲区相关BUFFERBUFFER_POOLSBUFFER_MODEMAX_BUFFER 4. 快速池相关FAST_POOL_PAGES 5. 回收池相关RECYCLE_POOLS 6. 回滚段池相关ROLLSEG_POOLS…...

编程日记 2025/9/8 20:23:06

MySql面试总结（一）

mysql中排序是怎么实现的？ MySQL 中的排序主要通过ORDER BY子句来实现，其底层实现方式有文件排序和索引排序两种，以下是具体介绍：通过ORDER BY子句实现排序这是 MySQL 中进行排序的基本方式，语法为SELECT column1, column2,... FROM table_name ORDER BY column_name…...

编程日记 2025/9/12 18:42:36

YOLOv5 + SE注意力机制：提升目标检测性能的实践

一、引言目标检测是计算机视觉领域的一个重要任务，广泛应用于自动驾驶、安防监控、工业检测等领域。YOLOv5作为YOLO系列的最新版本，以其高效性和准确性在实际应用中表现出色。然而，随着应用场景的复杂化，传统的卷积神经网络在处…...

编程日记 2025/8/31 2:21:52

第十四届蓝桥杯大赛软件赛国赛C/C++大学C组

A 【跑步计划——日期问题】-CSDN博客 B 【残缺的数字】-CSDN博客 C 题目代码 #include <bits/stdc.h> using namespace std;void change(int &x) {int sum 0, t x;while(t){sum t % 10;t / 10;}x - sum; } int main() {int n;cin >> n;int ans 0;…...

编程日记 2025/9/9 4:24:03

【备份】php项目处理跨域请求踩坑

这都是老生常谈的东西了。我还在踩坑，记录一下。我在项目入口明明写了如下代码： // 处理预检请求 (OPTIONS) if ($_SERVER[REQUEST_METHOD] OPTIONS) {header("Access-Control-Allow-Origin: https://xxx.vip");header("Access-Cont…...

编程日记 2025/9/12 18:40:02

编程题 - 汽水瓶【JavaScript/Node.js解法】

‌“学如逆水行舟，不进则退。”‌ ——《增广贤文》目录汽水瓶题目：解答分析：js代码解答 -ACM模式：代码通过：题解分析：简洁思路代码： 汽水瓶题目： 某商店规定：三个空…...

编程日记 2025/9/12 9:22:19

【考研】复试相关上机题目

文章目录 22机试回忆版1、判断燃气费描述输入格式输出格式输入样例输出样例 C o d e Code Code 2、统计闰年数量描述输入格式输出格式输入样例输出样例 C o d e Code Code 3、打印图形描述输入格式输出格式 C o d e Code Code 4、密文数据描述输入格式输出格式输入样例输出样例…...

编程日记 2025/9/4 23:00:56

HONOR荣耀MagicBook 15 2021款独显(BOD-WXX9,BDR-WFH9HN)原厂Win10系统

适用型号：【BOD-WXX9】 MagicBook 15 2021款 i7 独显 MX450 16GB512GB (BDR-WFE9HN) MagicBook 15 2021款 i5 独显 MX450 16GB512GB (BDR-WFH9HN) MagicBook 15 2021款 i5 集显 16GB512GB (BDR-WFH9HN) 链接：https://pan.baidu.com/s/1S6L57ADS18fnJZ1…...

编程日记 2025/9/8 14:37:33

微信小程序：完善购物车功能，购物车主页面展示，详细页面展示效果

一、效果图 1、主页面根据物品信息进行菜单分类，点击单项购物车图标添加至购物车，记录总购物车数量 2、购物车详情页根据主页面选择的项，根据后台查询展示到页面，可进行多选，数量加减等二、代码 1、主页面页…...

编程日记 2025/9/8 16:37:47

Spring Boot集成MyBatis访问MySQL：从项目搭建到基础数据库查询（基础入门）

Spring Boot集成MyBatis访问MySQL 一、引言在当今企业级应用开发中，Spring Boot、MyBatis与MySQL的组合凭借其高效性和灵活性，成为构建数据驱动型应用的首选方案。本文将带你从零开始搭建项目，掌握Spring Boot集成MyBatis的基础入门内容。…...

编程日记 2025/9/3 22:24:55

基于STM32的智能家居能源管理系统

1. 引言传统家庭能源管理存在能耗监控粗放、设备联动不足等问题，难以适应绿色低碳发展需求。本文设计了一款基于STM32的智能家居能源管理系统，通过多源能耗监测、负荷预测与优化调度技术，实现家庭能源的精细化管理与智能优化，提…...

编程日记 2025/9/8 12:57:28

OpenAI发布GPT-4.5：功能非常特殊，推理很贵

今天凌晨4点，OpenAI进行了在线技术直播，发布了最新模型GPT-4.5。 GPT-4.5与之前的模型相比，本次最大的亮点是加上了“情商”，这也是目前所有大模型最缺、最难的功能。此外，GPT-4.5 在SimpleQA上的测试数据显示&…...

编程日记 2025/9/10 0:11:50

DeepSeek开源周 Day04：从DualPipe聊聊大模型分布式训练的并行策略

DualPipe简介今天是DeepSeek开源周的第四天，官方开源了一种新型并行计算优化策略——DualPipe。其实大家阅读过Deepseek-V3技术报告的同学，对这个技术并不陌生。开源地址：https://github.com/deepseek-ai/DualPipe 核心亮点 DualPipe&…...

编程日记 2025/9/11 8:58:17

RabbitMQ系列（七）基本概念之Channel

RabbitMQ 中的 Channel（信道） 是客户端与 RabbitMQ 服务器通信的虚拟会话通道，其核心作用在于优化资源利用并提升消息处理效率。以下是其核心机制与功能的详细解析： 一、Channel 的核心定义虚拟通信链路 Channel 是建立在 TCP 连…...

编程日记 2025/9/10 9:43:50

LeetCode 热题 100_有效的括号（69_20_简单_C++）（栈；栈+哈希表（建立左右括号的对应关系））

LeetCode 热题 100_有效的括号（69_20） 题目描述：输入输出样例：题解：解题思路：思路一（栈）：思路二（栈哈希表（建立左右括号的对应关系）&a…...

编程日记 2025/9/9 14:19:10

c#-LINQ与lambda表达式学习笔记

https://blog.csdn.net/m0_56259289/article/details/144134122 static void Main(string[] args) //程序入口{int[] arr1 new int[] { 1, 2, 3, 4, 5, 6, 7 };int[] arr2 new int[] { 1, 2, 3, 4, 5, 6, 7 };var query1 from n in arr1 select n;var query2 from a in arr…...

编程日记 2025/9/10 10:56:29

系列文章目录

文章目录

1、初识AJAX

1.1 AJAX介绍

1.2 AJAX工作原理

2、AJAX使用

2.1 环境准备

2.2 创建AJAX请求

2.3 AJAX参数说明

3、AJAX练习

4、补充：同步与异步

相关文章：