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

Ajax学习

news 2026/2/10 2:35:09

文章目录

  • Ajax
    • Ajax 是什么
    • Ajax 经典应用场景
    • Ajax 原理示意图
    • ajax的异步请求的方法
      • ajax的逻辑：
    • 应用实例-验证用户名是否存在
      • 思路框架图：
    • 需求分析: 到数据库去验证用户名是否可用
      • 思路框架图
    • 大功告成：
    • 使用JQuery-Ajax实现上面相同的需求：

Ajax

Ajax 是什么

  1. AJAX 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML)
  2. Ajax 是一种浏览器异步发起请求(指定发哪些数据)，局部更新页面的技术

Ajax 经典应用场景

  1. 搜索引擎根据用户输入关键字，自动提示检索关键字
  2. 动态加载数据，按需取得数据【树形菜单、联动菜单…】
  3. 改善用户体验。【输入内容前提示、带进度条文件上传…】
  4. 电子商务应用。 【购物车、邮件订阅…】
  5. 访问第三方服务。【访问搜索服务、rss 阅读器】
  6. 页面局部刷新, https://piaofang.maoyan.com/dashboard

Ajax 原理示意图

在这里插入图片描述

ajax的异步请求的方法

在这里插入图片描述
在这里插入图片描述

要在点击某个按钮之后才能有反应，所以整个的ajax的异步请求需要在onclick里面写：

 // $(function () {}) 等价 window.onload = function () {}
$(function () {// $("#btn01") 底层: document.getElementById("btn01")var $checkButton = $("#checkButton");	//得到按钮// 绑定click事件$checkButton.click(function () {在这里写ajax的逻辑...}
}

ajax的逻辑：

  1. 创建XMLHttpRequest对象(!!!) [ajax引擎对象]
var xhr = new XMLHttpRequest();
  1. 准备发送指定数据：open，send
 xhr.open("GET", "/ajax/checkUserServlet?uname=" + $uname, true);

在send函数调用前，需要给XMLHttpRequest绑定一个事件onreadystatechange事件。 该事件可以去指定一个函数，当数据变化时，会出发onreadystatechange每当xhr对象readyState改变时， 就会触发onreadystatechange事件

xhr.onreadystatechange = function () { .... }
  1. 真正的发送ajax请求[http请求]
    老韩再说明如果你POST 请求，再send(“发送的数据”)
xhr.send();

应用实例-验证用户名是否存在

  1. 演示 jquery 发送 ajax 请求的案例
    1 ) 在输入框输入用户名
    2 ) 点击验证用户名, 服务端验证该用户名是否已经占用了, 如果该用户已经占用, 以 json格式返回该用户信息
    3 ) 假定用户名为 king , 就不可用, 其它用户名可以
    4 ) 对页面进行局部刷新, 显示返回信息
    在这里插入图片描述

思路框架图：

在这里插入图片描述

  1. 导包
    由于需要以json格式返回数据，所以需要导入gson包。
    由于还是用到servlet，需要在tomcat的lib目录下找servlet-api并导入该包。
    导入到哪里？
    由于是web应用，所以需要导入到web/WEB-INF/lib目录下。
    在这里插入图片描述
    你以为结束了？ 还需要导入jquery所需要的包：
    在这里插入图片描述

  2. 编写用户登录界面（这里需要用到ajax的异步请求的方法）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title><!--使用JQUery需要先正确加载JQuery--><script type="text/javascript" src="script/jquery-3.7.1.min.js"></script><script type="text/javascript">// $(function () {}) 等价 window.onload = function () {}$(function () {// $("#btn01") 底层: document.getElementById("btn01")var $checkButton = $("#checkButton");// 绑定click事件$checkButton.click(function () {// 1. 创建XMLHttpRequest对象(!!!) [ajax引擎对象]var xhr = new XMLHttpRequest();// 获取用户填写的用户名var $uname = $("#uname").val();// alert($uname);// 2. 准备发送指定数据：open，sendxhr.open("GET", "/ajax/checkUserServlet?uname=" + $uname, true);	// 这里发送数据是GET方法，把内容一起打过去// 在send函数调用前，需要给XMLHttpRequest绑定一个事件onreadystatechange事件// 该事件可以去指定一个函数，当数据变化时，会出发onreadystatechange// 每当xhr对象readyState改变时， 就会触发onreadystatechange事件xhr.onreadystatechange = function () {// 如果请求已完成，且响应已就绪，且状态码是200if(xhr.readyState == 4 && xhr.status == 200){//把json数据显示在div1中var $div1 = $("#div1");var responseText = xhr.responseText;console.log("当前得到的response=" + responseText)$div1.html(responseText);if(responseText != "") {// 返回的json串为""，则用户名可用$("#myres").val("用户名不可用");}else {$("#myres").val("用户名可用");}}}//3. 真正的发送ajax请求[http请求]// 老韩再说明如果你POST 请求，再send("发送的数据")xhr.send();})});</script>
</head>
<body>
<h1>用户注册~</h1>
<form action="/ajax/checkUserServlet" method="post">用户名字:<input type="text" name="username" id="uname"><input type="button" id="checkButton" value="验证用户名"><input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>		<!--编写服务端打回来的内容-->用户密码:<input type="password" name="password"><br/><br/>电子邮件:<input type="text" name="email"><br/><br/><input type="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>
  1. 编写checkUserServlet.java，接受发送过来的数据
@WebServlet(urlPatterns = "/checkUserServlet")
public class checkUserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException

相关文章：

Ajax学习

文章目录 AjaxAjax 是什么Ajax 经典应用场景Ajax 原理示意图ajax的异步请求的方法ajax的逻辑：应用实例-验证用户名是否存在思路框架图：需求分析: 到数据库去验证用户名是否可用思路框架图大功告成：使用JQuery-Ajax实现上面相同的需求：Ajax Ajax 是什么 AJAX 即"Async…...

编程日记 2024/1/6 7:29:06

排序算法——关于快速排序的详解

目录 1.基本思想 2.基本原理 2.1划分思想 2.2排序过程 &#xff08;1&#xff09;选择基准值 &#xff08;2&#xff09;分割过程&#xff08;Partition&#xff09; &#xff08;3&#xff09;递归排序 &#xff08;4&#xff09;合并过程 2.3具体实例 2.4实现代码 2.5关键要…...

编程日记 2024/1/6 7:28:05

序言：《未来已来》

尊敬的读者&#xff0c; 你是否曾经在面对冗长的报告、繁琐的工作、沉重的生活压力时感到困扰&#xff0c;渴望找到一种方式来提升效率&#xff0c;释放压力&#xff1f;你是否曾经在自我创业的道路上&#xff0c;苦于找不到有效的市场营销方式&#xff0c;寻求突破&#xff1f…...

编程日记 2024/1/6 7:27:04

【Spring实战】22 Spring Actuator 入门

文章目录 1. 定义2. 功能3. 依赖4. 配置5. 常用的应用场景1&#xff09;环境监控2&#xff09;运维管理3&#xff09;性能优化 结论 Spring Actuator 是 Spring 框架的一个模块&#xff0c;为开发人员提供了一套强大的监控和管理功能。本文将深入探讨 Spring Actuator 的定义、…...

编程日记 2024/1/6 7:26:03

JSON安全性

确保JSON处理的安全性是现代Web开发中重要的一环。以下是一些关键的安全实践&#xff0c;用于防止JSON注入攻击以及确保数据在传输过程中的安全性&#xff1a; 1. **验证和清洗输入&#xff1a;** - 在将任何数据写入数据库之前&#xff0c;请确保验证用户输入。对于期望的JSON…...

编程日记 2024/1/6 7:25:02

spring-boot-maven插件repackage（goal）的那些事

前言&#xff1a;在打包Springboot项目成jar包时需要在pom.xml使用spring-boot-maven-plugin来增加Maven功能&#xff0c;在我的上一篇博客<<Maven生命周期和插件的那些事&#xff08;2021版&#xff09;>>中已经介绍过Maven和插件的关系&#xff0c;在此不再赘述&…...

编程日记 2024/1/6 7:21:59

ubuntu的boot分区被删除恢复

在鼓捣黑苹果的时候&#xff0c;误删了ubuntu的boot分区&#xff0c;进系统的时候出现emergency mode&#xff0c;那么现在来讲讲怎么恢复 首先做一个ubuntu的启动盘&#xff0c;然后进入启动盘的系统选择试用 呼出命令行&#xff0c;然后添加一个源 sudo add-apt-repository…...

编程日记 2024/1/6 7:20:58

【userfaultfd 条件竞争】starCTF2019 - hackme

前言 呜呜呜&#xff0c;这题不难&#xff0c;但是差不多一个多月没碰我的女朋友 kernel pwn 了&#xff0c;对我的 root 宝宝也是非常想念&#xff0c;可惜这题没有找到我的 root 宝宝&#xff0c;就偷了她的 flag。 哎有点生疏了&#xff0c;这题没看出来堆溢出&#xff0c…...

编程日记 2024/1/6 7:18:56

深度学习中的自动化标签转换：对数据集所有标签做映射转换

在机器学习中&#xff0c;特别是在涉及图像识别或分类的项目中&#xff0c;标签数据的组织和准确性至关重要。本文探讨了一个旨在高效转换标签数据的 Python 脚本。该脚本在需要更新或更改类标签的场景中特别有用&#xff0c;这是正在进行的机器学习项目中的常见任务。我们将逐…...

编程日记 2024/1/6 7:17:55

c语言-函数指针

目录 前言一、函数指针1.1 函数指针定义1.2 函数指针调用函数1.3 函数指针代码分析 总结 前言 本篇文章介绍c语言中的函数指针以及函数指针的应用。 一、函数指针 函数指针&#xff1a;指向函数的指针。 函数在编译时分配地址。 &函数名 和 函数名代表的意义相同&#xf…...

编程日记 2024/1/6 7:16:54

conda

一、安装 推荐清华源 https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/?CN&OD选择版本 Miniconda3-py39_4.12.0-MacOSX-arm64.pkg测试命令 conda help二、更换仓库 配置加速 https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/没有 .condarc 文件则执行…...

编程日记 2024/1/6 7:15:53

【Vue】灵魂拷问

1、说说Vue的优缺点 优点&#xff1a;渐进式&#xff0c;组件化&#xff0c;轻量级&#xff0c;虚拟dom&#xff0c;响应式&#xff0c;单页面路由&#xff0c;数据与视图分开缺点&#xff1a;单页面不利于seo&#xff0c;不支持IE8以下&#xff0c;首屏加载时间长 2、为什么…...

编程日记 2024/1/6 7:14:53

Scrapy 1.3.0 使用简介

scrapy 1.3.0 python 2.7 创建一个项目&#xff1a; Before you startscraping, you will have to set up a new Scrapy project. Enter a directory whereyou’d like to store your code and run: scrapy startproject tutorial 然后就会得到一系列文件&#xff1a; 第一个爬…...

编程日记 2024/1/6 7:10:49

单机+内部备份_全备案例

此场景为单机数据库节点内部备份&#xff0c;方便部署和操作&#xff0c;但备份REPO与数据库实例处于同一个物理主机&#xff0c;冗余度较低。 前期准备 配置ksql免密登录(必须) 在Kingbase数据库运行维护中&#xff0c;经常用到ksql工具登录数据库&#xff0c;本地免密登录…...

编程日记 2024/1/6 7:08:47

【kettle】pdi/data-integration 打开ktr文件报错“Unable to load step info from XML“

一、报错内容&#xff1a; Unable to load step info from XML step nodeorg.pentaho.di.core.exception.KettleXMLException: Unable to load step info from XMLat org.pentaho.commons.launcher.Launcher.main (Launcher.java:92)at java.lang.reflect.Method.invoke (Met…...

编程日记 2024/1/6 7:05:44

cocos creator人开发小游戏免费素材资源

1、首先熟悉官方的手册和api文档&#xff0c;文档还是比较详细&#xff0c;游戏的方方面面都涉及到了 官方手册&#xff1a; http://docs.cocos.com/creator/manual/zh/官方api文档&#xff1a; http://docs.cocos.com/creator/api/zh/官方论坛&#xff1a; https://forum.coco…...

编程日记 2024/1/6 7:04:43

除了sd webui，compfy还有一个sd UI

GitHub - VoltaML/voltaML-fast-stable-diffusion: Beautiful and Easy to use Stable Diffusion WebUI...

编程日记 2024/1/6 7:03:41

c++属于同一个类的不同对象之间可相互访问private和protected成员

先看一个代码例子&#xff1a; #include <stdio.h>class A { private:char* name;void printA_Name() const {printf(name);} public:A(char* name) {this->name name;}void printA_Name(const A& a) {printf(a.name);}void printA_Name2(const A& a) {a.pr…...

编程日记 2024/1/6 7:01:39

QT/C++ 远程数据采集上位机+服务器

一、项目介绍&#xff1a; 远程数据采集与传输 课题要求:编写个基于TCP的网络数据获取与传输的应用程序; 该程序具备以下功能: 1)本地端程序够通过串口与下位机(单片机)进行通信&#xff0c;实现数据采集任务 2)本地端程序能将所获取下位机数据进行保存(如csv文本格式等); 3…...

编程日记 2024/1/6 6:59:37

算法每日一题：保龄球游戏的获胜者

大家好&#xff0c;我是星恒 今天的每一一题是一道简单题目&#xff0c;但是没能秒掉&#xff0c;原因就是题意理解不到位&#xff0c;边界问题没有判断清楚 不过这本来就是一个试错&#xff0c;迭代&#xff0c;积累经验的过程&#xff0c;加油加油&#xff0c;相信做多了&…...

编程日记 2024/1/6 6:58:36

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/8 6:37:43

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2026/2/8 4:37:06

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2026/2/8 22:56:45

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2026/1/22 16:15:42

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29