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

Ajax学习

news 文章来源：https://blog.csdn.net/qq_45895217/article/details/135272810 2025/1/12 18:18:32

文章目录

  • 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

Do you know about domestic CPUs

Do you know about domestic CPUs CPU指令集国产CPU CPU指令集 国产CPU 参考文献 国产CPU之4种架构和6大品牌指令集及架构一文深入了解 CPU 的型号、代际架构与微架构国产GPU芯片厂商有哪些深入GPU硬件架构及运行机制详解服务器GPU架构和基础知识...

编程日记 2024/1/6 6:54:33

软件设计模式 --- 类，对象和工厂模式的引入

Q1&#xff1a;什么是软件设计模式&#xff1f; A&#xff1a;软件设计模式&#xff0c;又称设计模式。它是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。综上&…...

编程日记 2024/1/6 6:52:30

LeetCode74二分搜索优化：二维矩阵中的高效查找策略

题目描述 力扣地址 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&…...

编程日记 2024/1/6 6:51:30

三极管组成的光控开关电路原理图

什么是光控开关 光控开关/光控时控器采用先进的嵌入式微型计算机控制技术&#xff0c;融光控功能和普通时控器两大功能为一体的多功能高级时控器&#xff08;时控开关&#xff09;&#xff0c;根据节能需要可以将光控探头&#xff08;功能&#xff09;与时控功能同时启用&…...

编程日记 2024/1/6 6:49:28

【PostgreSQL】从零开始:（四十二）系统列

PostgreSQL 中的系统列 PostgreSQL 中的系统列是一组特殊的列&#xff0c;用于存储关于表和视图的元数据信息。这些列是由 PostgreSQL 数据库自动创建和维护的&#xff0c;并且不能直接修改或删除。 每个表都有多个系统列&#xff0c;这些列由系统隐式定义。因此&#xff0c;…...

编程日记 2024/1/6 6:48:27

快速、准确地检测和分类病毒序列分析工具 ViralCC的介绍和详细使用方法, 附带应用脚本

介绍 viralcc是一个基因组病毒分析工具&#xff0c;可以用于快速、准确地检测和分类病毒序列。 github&#xff1a;dyxstat/ViralCC: ViralCC: leveraging metagenomic proximity-ligation to retrieve complete viral genomes (github.com) Instruction of reproducing resul…...

编程日记 2024/1/6 6:46:25

DNs服务学习笔记

DNS&#xff1a;域名系统&#xff08;英文&#xff1a;Domain Name System)是一个域名系统&#xff0c;是万维网上作为域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使用户更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。类似于生活中的11…...

编程日记 2024/1/6 6:43:23

获取线程池中任务执行数量

获取线程池中任务执行数量 通过线程池进行任务处理&#xff0c;有时我们需要知道线程池中任务的执行状态。通过ThreadPoolExecutor的相关API实时获取线程数量&#xff0c;排队任务数量&#xff0c;执行完成线程数量等信息。 实例 private static ExecutorService es new Thr…...

编程日记 2024/1/6 6:42:22

RK3566 Android 11平台上适配YT8512C 100M PHY

RK3566代码之前适配的1000M IC RTL8211F , 现在需要在之前的基础上修改PHY IC 为裕泰的YT8512C ----------------------------------------------------------------------//将1000M 的配置关掉&#xff0c;改为100M 配置,查看RK3566 资料关于以太网的配置即可知道如何修改 #if…...

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

docker 部署haproxy cpu占用特别高

在部署mysql 主主高可用时&#xff0c;使用haproxy进行负载&#xff0c;在服务部使用的情况下发现服务器cpu占比高&#xff0c;负载也高&#xff0c;因此急需解决这个问题。 1.解决前现状 1.1 部署配置文件 cat > haproxy.cfg << EOF globalmaxconn 4000nbthrea…...

编程日记 2024/1/6 6:32:14

岳阳整站优化/关键词搜索推广

UINavigationController详解 通过这个接口可以初始化自定义的工具栏和导航栏 - (instancetype)initWithNavigationBarClass:(Class)navigationBarClass toolbarClass:(Class)toolbarClass NS_AVAILABLE_IOS(5_0) 使用水平滑动过渡。如果视图控制器已在堆栈中在调用就没有效果 -…...

编程日记 2025/1/12 16:28:46

盛泽网站建设/网站优化最为重要的内容是

/*** 用户登录接口* * * 1明确事务方法前的命名规则* 2保证事务方法执行的时间尽可能的短&#xff0c;不允许出现循环操作&#xff0c;不允许出现RPC等网络请求操作* 3不允许所有的方法都使用事务&#xff0c;节省服务器性能和缩短数据库连接时间* 4如果出现有多个地方需要事务…...

编程日记 2025/1/12 16:24:42

微网站如何做微信支付/百度新闻网页

yum对于经常操作Linux的用户来说并不陌生&#xff0c;也是安装软件包常用的命令&#xff0c;接下来吾爱编程为大家详细的介绍一下yum命令&#xff0c;有需要的小伙伴可以参考一下&#xff1a;1、yum是什么&#xff1f;yum命令是在Fedora和RedHat以及SUSE中基于yum提供了查找、安…...

编程日记 2025/1/12 15:49:12

网站建设执招标评分表/如何做网页

最近学习Runtime&#xff0c;顺便总结一下在Objective-C中KVO使用到的Runtime机制。 系统的KVO使用 故事还得从OC的KVO说起&#xff0c;一般的我们使用KVO类似的如下所示&#xff0c;创建一个对象&#xff0c;然后调用addObserver方法进行某个属性的监听&#xff0c;有意思的是…...

编程日记 2025/1/12 15:16:38

怎么查有做网站的公司有哪些/seo 知乎

zebra http://www.zebra.org/ quagga http://www.quagga.net/...

编程日记 2025/1/12 11:43:45

商城网站建设net2006/网站seo软件

Spring Cloud教程&#xff08;非常详细&#xff09; SpringCloud入门教程&#xff08;全集&#xff09; Spring Cloud 学习笔记&#xff08;1 / 3&#xff09; 狂神说SpringCloud学习笔记 史上最简单的 SpringCloud 教程 | 终章 史上最简单的 SpringCloud 教程 | 第一篇&a…...

编程日记 2025/1/12 11:12:29