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

Ajax简介

news 2026/3/26 10:12:10

Ajax简介和使用

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用户界面。

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 将自动替换 ? 为正确的函数名，以执行回调函数

jQuery官网:jQuery

可去下载jQuery文件

2.Ajax初体验

简单实现一个鼠标移出输入框后的请求

jsp

<%--Created by IntelliJ IDEA.User: 19401Date: 2023/3/9Time: 14:48To change this template use File | Settings | File Templates.
--%>
<%@ 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><script>function a1() {$.post({url:"${pageContext.request.contextPath}/a1",data:{'name':$("#username").val()},success:function (data,status) {alert(data);alert(status);}});}</script></head><body>用户名: <input type="text" id="username" οnblur="a1()"></body>
</html>

Controller

@RequestMapping("/a1")public void a1(String name, HttpServletResponse httpServletResponse) throws IOException {if ("sangyu".equals(name)){httpServletResponse.getWriter().print("true");}else {httpServletResponse.getWriter().print("false");}}

3.体验Ajax

我们再测试一个小Demo，思考一下我们平时注册时候，输入框后面的实时提示怎么做到的；

jsp

<%--Created by IntelliJ IDEA.User: 19401Date: 2023/3/10Time: 11:19To change this template use File | Settings | File Templates.
--%>
<%@ 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><script>function a1() {$.post({url:"${pageContext.request.contextPath}/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:"${pageContext.request.contextPath}/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>用户名:  <input type="text" id="name" οnblur="a1()">
<span id="userInfo"></span>
<p></p>密码:  <input type="text" id="pwd" οnblur="a2()"><span id="pwdInfo"></span>
</body>
</html>

controller

@RequestMapping("/a3")public String a3(String name,String pwd){String msg = "";if (name != null){if ("sangyu".equals(name)){msg = "OK";}else {msg = "用户名输入有误";}}if (pwd != null){if ("sangyu".equals(pwd)){msg = "OK";}else {msg = "密码输入有误";}}return msg;}

【记得处理json乱码问题】

测试一下效果，动态请求响应，局部刷新，就是如此！

在这里插入图片描述

相关文章：

Ajax简介

Ajax简介和使用 1.简介 AJAX Asynchronous JavaScript and XML&#xff08;异步的 JavaScript 和 XML&#xff09;。 AJAX 是一种在无需重新加载整个网页的情况下&#xff0c;能够更新部分网页的技术。 Ajax 不是一种新的编程语言&#xff0c;而是一种用于创建更好更快以及…...

编程日记 2023/3/18 10:08:59

ChatGPT 4 测试 两数比较大小问题。

按&#xff1a; 上次用3.5 测试了ChatGPT的两数比较大小问题&#xff0c;结果失败了。我要求不能用if语句&#xff0c;它避免不了。这次终于成功了&#xff0c;看来是进步很大。对话记录如下&#xff08;英文&#xff09; MaraSun Compare two 2 numbers in C# , but IF is no…...

编程日记 2023/3/18 10:03:57

SSM-CRUD整合视频教程：Spring、SpringMVC、MyBatis、bootstrap、pagehelper、JSR303后端校验

1、项目说明 1.1、业务说明 SSM:SpringMVCSpringMyBatisCRUD&#xff1a; Create&#xff08;创建&#xff09;Retrieve&#xff08;查询&#xff09;Update&#xff08;更新&#xff09;Delete&#xff08;删除) 总结&#xff1a;通过SSM框架来完成一个CRUD的操作。 1.2、功…...

编程日记 2023/3/18 9:58:56

Linux常用命令——基于Ubuntu22.04

本文介绍了一些Linux的常用命令。为了便于快速检索命令位置&#xff0c;文章二级标题都以“命令&#xff1a;命令的作用”展示&#xff0c;有些命令会先介绍命令的几个常用参数&#xff0c;然后结合具体的操作展示命令的使用。为了便于记忆&#xff0c;也会提到命令是由哪些短语…...

编程日记 2023/3/18 9:53:53

Sentinel

SentinelSentinel介绍什么是Sentinel?为什么需要流量控制&#xff1f;为什么需要熔断降级&#xff1f;一些普遍的使用场景本文介绍参考&#xff1a;Sentinel官网《Spring Cloud Alibaba 从入门到实战.pdf》Sentinel下载/安装项目演示构建项目控制台概览演示之前需先明确&#…...

编程日记 2023/3/18 9:48:50

再也不想去字节跳动面试了，6年测开面试遭到这样打击.....

前几天我朋友跟我吐苦水&#xff0c;这波面试又把他打击到了&#xff0c;做了快6年软件测试员。。。为了进大厂&#xff0c;也花了很多时间和精力在面试准备上&#xff0c;也刷了很多题。但题刷多了之后有点怀疑人生&#xff0c;不知道刷的这些题在之后的工作中能不能用到&…...

编程日记 2023/3/18 9:43:48

【深度解刨C语言】符号篇（全）

文章目录一.注释二.续行符与转义符1.续行符2.转义符三.回车与换行四.逻辑操作符五.位操作符和移位操作符六.前置与后置七.字符与字符串八./和%1.四种取整方式2.取模与取余的区别和联系3./两边异号的情况1.左正右负2.左负右正九.运算符的优先级一.注释 注释的两种符号&#xff…...

编程日记 2023/3/18 9:38:43

VS Code 将推出更多 AI 功能给 Java 开发者

大家好&#xff0c;欢迎来到我们的二月更新&#xff01;我们将为您带来与 JUnit 5 并行测试相关的新功能以及用于 Spring Boot Dashboard 的过滤功能。另外&#xff0c;OpenAI 和 ChatGPT 是最近的热点&#xff0c;所以在 GitHub Copilot 方面也有一些令人激动的消息&#xff0…...

编程日记 2023/3/18 9:33:41

关于利用FFT分析时域信号幅相的思考与验证

引言 利用FFT分析/估计时域信号的幅度和相位&#xff0c;属于传统估计的范畴。估计的准确程度受频率分辨率的影响较大。如果被估计的目标频率等于频率分辨率的整数倍&#xff0c;信号的幅相估计都是最准确的。一旦目标频率不等于频率分辨率的整数倍&#xff0c;幅度估计值将会…...

编程日记 2023/3/18 9:28:40

基于java中的Springboot框架实现餐厅点餐系统展示

基于java中的Springboot框架实现餐厅点餐系统开发语言和工具 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对…...

编程日记 2023/3/18 9:23:37

案例07-在线人员列表逻辑混乱

一、背景介绍 在线人员列表涉及到的问题&#xff1a; 类中写了公共变量最后导致数据混乱现象 保存数据没有考虑业务的隔夜覆盖导致的逻辑漏洞 涉及到继承&#xff0c;对于this&#xff0c;如果父类有同样的成员最终使用哪一个&#xff1f; 参数不一致导致后续维护混乱 mysql由…...

编程日记 2023/3/18 9:18:36

Java集合框架

Java集合框架是Java编程语言所提供的一种便捷的数据结构的实现。Java集合框架提供了一种统一的接口和机制来访问和操作集合中的元素&#xff0c;这些元素可以是对象、基本数据类型或其他集合。Java集合框架是Java应用程序中最常用的特性之一&#xff0c;它为开发人员提供了许多…...

编程日记 2023/3/18 9:13:33

奇异值分解(SVD)原理与在降维中的应用

奇异值分解(SVD)原理与在降维中的应用 奇异值分解(Singular Value Decomposition&#xff0c;以下简称SVD)是在机器学习领域广泛应用的算法&#xff0c;它不光可以用于降维算法中的特征分解&#xff0c;还可以用于推荐系统&#xff0c;以及自然语言处理等领域。是很多机器学习算…...

编程日记 2023/3/18 9:08:30

GDB调试程序

1.GDB 调试程序 GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具。在UNIX平台下做软件&#xff0c;GDB这个调试工具有比VC的图形化调试器更强大的功能。所谓“寸有所长&#xff0c;尺有所短”就是这个道理。 一般来说&#xff0c;GDB主要帮忙你完成下面四个方面的功能…...

编程日记 2023/3/18 9:03:28

五种IO模型

用户空间与内核空间 操作系统把内存空间划分成了两个部分&#xff1a;内核空间和用户空间。 为了保护内核空间的安全&#xff0c;操作系统一般都限制用户进程直接操作内核。 所以&#xff0c;当我们使用TCP发送数据的时候&#xff0c;需要先将数据从用户空间拷贝到内核空间&a…...

编程日记 2023/3/18 8:58:26

5 全面认识java的控制流程

全面认识java控制流程1.块作用域2.条件语句3.迭代语句3.1while语句3.2do-while语句3.3for语句3.4 for-in语法4.中断控制流程的语句4.1 return4.2 break和continue4.2.1 不带标签的break语句4.2.2 带标签的break语句4.2.3 continue语句4.3 goto()5.多重选择:switch语句1.块作用域…...

编程日记 2023/3/18 8:53:23

第二章 测验【嵌入式系统】

第二章 测验【嵌入式系统】前言推荐第二章 测验【嵌入式系统】最后前言 以下内容源自《嵌入式系统》 仅供学习交流使用 推荐 第一章 测验【嵌入式系统】 第二章 测验【嵌入式系统】 1单选题 32bit宽的数据0x12345678 在小端模式&#xff08;Little-endian&#xff09;模式…...

编程日记 2023/3/18 8:48:20

排序算法之插入排序

要考数据结构了&#xff0c;赶紧来复习一波排序算法 文章目录一、直接插入排序二、希尔排序一、直接插入排序 直接上主题 插排&#xff0c;揪出一个数&#xff0c;插入到原本已经有序的数组里面&#xff0c;如数组有n个数据&#xff0c;从0~n下标依次排列&#xff0c;先从左往…...

编程日记 2023/3/18 8:43:19

Kaggle实战入门：泰坦尼克号生生还预测

Kaggle实战入门&#xff1a;泰坦尼克号生生还预测1. 加载数据2. 特征工程3. 模型训练4. 模型部署泰坦尼克号&#xff08;Titanic&#xff09;&#xff0c;又称铁达尼号&#xff0c;是当时世界上体积最庞大、内部设施最豪华的客运轮船&#xff0c;有“永不沉没”的美誉&#xff…...

编程日记 2023/3/18 8:38:17

【大汇总】11个Python开发经典错误（1）

“但是太阳，他每时每刻都是夕阳也都是旭日。当他熄灭着走下山去收尽苍凉残照之际，正是他在另一面燃烧着爬上山巅散烈烈朝晖之时。” --------史铁生《我与地坛》 🎯作者主页：追光者♂🔥 🌸个人简介：计算机专业硕士研究生💖、2022年CSDN博客之星人工智能领…...

编程日记 2023/3/18 8:33:15

Chatbot Arena 排行榜解析：如何为你的聊天机器人优化性能

作为一名刚接触聊天机器人开发的开发者&#xff0c;你可能和我一样&#xff0c;面对琳琅满目的模型和框架感到无从下手。这时候&#xff0c;一个客观、公正的“考场”就显得尤为重要。Chatbot Arena 正是这样一个平台&#xff0c;它通过众包用户进行匿名、随机的模型对战&#…...

编程新知 2026/3/26 10:01:09

【华为OD机试真题】战场索敌 · 区域统计问题 (Java/Go)

一、题目题目描述&#xff1a;有一个大小是 N*M 的战场地图&#xff0c;被墙壁 # 分隔成大小不同的区域。上下左右四个方向相邻的空地 . 属于同一个区域。只有空地上可能存在敌人 E。请求出地图上总共有多少区域里的敌人数小于 K。输入描述&#xff1a;第一行输入为 N, M, K&am…...

编程新知 2026/3/26 9:04:44

零代码自动化：OpenClaw+GLM-4.7-Flash实现跨平台数据同步

零代码自动化&#xff1a;OpenClawGLM-4.7-Flash实现跨平台数据同步 1. 为什么选择OpenClaw处理跨平台数据同步&#xff1f; 去年我接手了一个棘手的任务&#xff1a;每周需要从某电商平台导出销售数据&#xff0c;清洗后上传到内部数据库。手动操作不仅耗时2-3小时&#xff…...

编程新知 2026/3/26 8:38:35

辅助用电系统安装：工业项目电力配套的关键环节问题全解析

在工业厂房、园区配套、商业综合体、仓储物流中心以及各类生产型项目中&#xff0c;很多人一提到电气工程&#xff0c;第一反应往往是高压配电、变压器、动力柜或者主供电系统。但真正决定项目是否“好用、稳用、久用”的&#xff0c;往往不是主系统本身&#xff0c;而是隐藏在…...

编程新知 2026/3/26 8:24:31

ChatTTS离线部署实战：从模型优化到生产环境效率提升

最近在做一个需要离线语音合成的项目&#xff0c;用到了ChatTTS这个效果不错的模型。但直接部署原版模型时&#xff0c;遇到了不少头疼的问题&#xff1a;推理速度慢、内存占用高&#xff0c;在资源受限的生产环境里简直是“吞金兽”。经过一番折腾&#xff0c;总算摸索出一套从…...

编程新知 2026/3/26 6:58:03

文档权限验证API：ONLYOFFICE Docs检查用户访问权限的完整指南

文档权限验证API&#xff1a;ONLYOFFICE Docs检查用户访问权限的完整指南 【免费下载链接】DocumentServer ONLYOFFICE Docs is a free collaborative online office suite comprising viewers and editors for texts, spreadsheets and presentations, forms and PDF, fully c…...

编程新知 2026/3/26 5:23:52

DeEAR语音情感识别入门必看：三维度（唤醒度/自然度/韵律）原理与Gradio界面实操

DeEAR语音情感识别入门必看&#xff1a;三维度&#xff08;唤醒度/自然度/韵律&#xff09;原理与Gradio界面实操 1. 为什么需要语音情感识别 想象一下&#xff0c;当你接到客服电话时&#xff0c;对方的声音是机械冰冷的还是热情自然的&#xff1f;这种差异直接影响沟通效果…...

编程新知 2026/3/26 5:03:48

动态规划，实现躲避动态车辆，动态障碍物，连续静态障碍物，采用prescan matlab ca...

动态规划&#xff0c;实现躲避动态车辆&#xff0c;动态障碍物&#xff0c;连续静态障碍物&#xff0c;采用prescan matlab carsim 联合仿真当路径规划遇上动态障碍物&#xff1a;老司机的代码生存指南深夜的十字路口&#xff0c;自动驾驶系统突然遭遇外卖电动车漂移过弯。此时…...

编程新知 2026/3/26 4:19:26

Python实战：5分钟用高德API搞定全国区县边界坐标采集（附完整代码）

Python实战&#xff1a;高德API高效获取全国区县边界坐标的工程化解决方案 1. 需求背景与方案设计 地理信息系统开发中经常需要精确的行政区划边界数据。传统手动采集方式效率低下&#xff0c;而高德地图API提供了完善的行政区划查询接口。本方案将实现&#xff1a; 全国省/…...

编程新知 2026/3/26 4:19:26

解锁Unity游戏扩展：BepInEx插件框架的5个核心应用步骤

解锁Unity游戏扩展&#xff1a;BepInEx插件框架的5个核心应用步骤 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx BepInEx作为Unity游戏的插件框架&#xff0c;为玩家和开发者提供…...

编程新知 2026/3/26 4:11:25