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

Ajax--实现检测用户名是否存在功能

news 文章来源：https://blog.csdn.net/2301_76890677/article/details/144359246 2025/1/10 23:31:20

目录

（一）什么是Ajax

 （二）同步交互与异步交互

（三）AJAX常见应用情景

 （四）AJAX的优缺点

 （五）使用jQuery实现AJAX

1.使用JQuery中的ajax方法实现步骤（jQuery是js的一个框架）

2.$.ajax()

语法:

 （六）案例：实现光标移开输入框就判断用户名是否存在的功能

思路：

运行结果：

（一）什么是Ajax

        Ajax（Asynchronous Javascript And XML） 翻译成中文就是“异步JavaScript和XML”，即使用JavaScript与服务器进行异步交互，传输的数据为XML。

        AJAX还可以在浏览器实现局部刷新的效果，即不需要刷新整个页面，就比如之前的案例：验证码，这一特点给用户的感受是在不知不觉中完成请求和响应过程。

特点：

  • 与服务器异步交互
  • 实现浏览器页面局部刷新 

 （二）同步交互与异步交互

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

       通俗来说，同步交互就如同，当你向一个人发消息，你发了一条，必须要等对方回复了才能发下一条，异步交互则不需要等待对方的回复，两人可以同时发送自己想发的信息。

（三）AJAX常见应用情景

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

  • 整个过程中页面没有刷新，只是局部刷新了；

  • 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

 （四）AJAX的优缺点

优点：

  • AJAX使用JavaScript技术向服务器发送异步请求
  • AJAX不需要刷新整个页面
  • 因为服务器不是响应的整个页面，而是局部，所以AJAX能够提高系统的性能

缺点：

  • AJAX并不适用所有场景，有很多情况还是需要用到同步交互
  • AJAX虽然提高了用户的体验，但无形中向服务器发送了太多请求，导致服务器的压力增大
  • 因为AJAX是在浏览器中使用JavaScript技术完成的，所以还需要考虑服务器的兼容性问题

 （五）使用jQuery实现AJAX

        JQuery中已经将AJAX相关的操作进行了封装,使用时只需要在合适的地方调用AJAX相关的方法即可

1.使用JQuery中的ajax方法实现步骤（jQuery是js的一个框架）

  1. 先引入jQuery文件
  2. 调用jQuery中的ajax函数
  3. 编写Servlet方法（接受请求并处理）
  4. 在ajax中接收来自服务端的结果

2.$.ajax()

$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的AJAX的实现,具有较高灵活性

语法:

$.ajax(

参数1：请求地址url,

参数2：请求类型,

参数3：请求参数,

参数4：请求参数的类型,

参数5：请求成功的回调函数

);

常用设置参数如下:

参 数说 明
String url发送请求的地址,默认为当前页地址
String type请求方式(POST或者GET,默认为GET)
Number timeout设置请求超时时间
Object data 或 String data发送到服务器的数据
String dataType预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text
function beforeSend(XMLHttpRequest xhr)发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象
function complete(XMLHttpRequest xhr,String ts)请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串
function success(Object result,String ts)请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串
function error(XMLHttpRequest xhr,String em,Exception e)请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象
boolean global默认为true,表示是否触发全局的AJAX事件

 （六）案例：实现光标移开输入框就判断用户名是否存在的功能

思路：

  1. 绑定事件bluron，实现光标移开聚焦即可检测用户名是否存在
  2. 在jsp中使用ajax函数，湘服务器传递参数
  3. 编写Servlet类，通过response对象得到响应输出流，湘客户端写入用户名是否存在的数据
  4. 编写dao层方法，从数据库中查询该用户名的信息

JSP页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>注册页面</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(function(){$("#uname").blur(function(){var uname = $(this).val();if(uname == ""){$("#remind").html("用户名不能为空");} else {$.ajax({url: "http://localhost:8080/CheckUsername",type: "get",data: "uname=" + uname,dataType: "text",success: function(result) {console.log("Response received: " + result);alert(result);},error: function(xhr, status, error) {console.error("AJAX Error: " + status + error);}});}});});</script>
</head>
<body>
用户名：<input type="text" name="uname" id="uname" /><span id="remind"></span>
</body>
</html>

Servlet方法：

@WebServlet("/CheckUsername")
public class CheckUsernameServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 接收前端输入的用户名String uname = req.getParameter("uname");req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");UserService userService = new UserServiceImpl();if(userService.queryUsername(uname)){resp.getWriter().write("用户名已存在");}else{resp.getWriter().write("用户名不存在");}}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}
}

Dao层方法：

public class UserDaoImpl implements UserDao {@Overridepublic boolean queryUsername(String uname) {Connection conn = null;try {conn= JdbcUtils.getConnection();String sql="select * from users where username = ? ";QueryRunner qr=new QueryRunner();List<User> users = qr.query(conn,sql,new BeanListHandler<User>(User.class),uname);if (users.size()==0){return false;}else {return true;}} catch (SQLException e) {throw new RuntimeException(e);}}
}

运行结果：

用户名不存在：

用户名已存在：

相关文章：

Ajax--实现检测用户名是否存在功能

目录 &#xff08;一&#xff09;什么是Ajax &#xff08;二&#xff09;同步交互与异步交互 &#xff08;三&#xff09;AJAX常见应用情景 &#xff08;四&#xff09;AJAX的优缺点 &#xff08;五&#xff09;使用jQuery实现AJAX 1.使用JQuery中的ajax方法实现步骤&#xf…...

编程日记 2024/12/13 23:25:27

【代码pycharm】动手学深度学习v2-09 Softmax 回归 + 损失函数 + 图片分类数据集

课程链接 1.读取图像分类数据集 import matplotlib.pyplot as plt import torch import torchvision from torch.utils import data from torchvision import transforms from d2l import torch as d2l d2l.use_svg_display() #读取数据集 transtransforms.ToTensor() mnist_…...

编程日记 2024/12/13 23:22:24

设计模式：24、访问者模式

目录 0、定义 1、访问者模式的五种角色 2、访问者模式的UML类图 3、示例代码 0、定义 表示一个作用于某对象结构中的各个元素的操作。它可以在不改变各个元素的类的前提下&#xff0c;定义作用于这些元素的新操作。 1、访问者模式的五种角色 抽象元素&#xff08;Element…...

编程日记 2024/12/13 23:21:23

基于JAVA的旅游网站系统设计

摘要 随着信息技术和网络技术的迅速发展&#xff0c;人们的生活质量和观念也在发生着改变&#xff0c;各地争相发展旅游业&#xff0c;传统的 旅游社已经无法满足人们的需求&#xff0c;旅游网站将突破传统在时间和地域的限制&#xff0c;成为方便、快捷、安全、可靠的旅游 方…...

编程日记 2024/12/13 23:17:19

网络安全产品之认识防火墙

防火墙是一种网络安全产品&#xff0c;它设置在不同网络&#xff08;如可信任的企业内部网和不可信的公共网&#xff09;或网络安全域之间&#xff0c;通过监测、限制、更改跨越防火墙的数据流&#xff0c;尽可能地对外部屏蔽网络内部的信息、结构和运行状况&#xff0c;以此来…...

编程日记 2024/12/13 23:16:18

nginx反向代理（负载均衡）和tomcat介绍

nginx的代理 负载均衡 负载均衡的算法 负载均衡的架构 基于ip的七层代理 upstream模块要写在http模块中 七层代理的调用要写在location模块中 轮询 加权轮询 最小连接数 ip_Hash URL_HASH 基于域名的七层代理 配置主机 给其余客户机配置域名 给所有机器做域名映射 四层代理…...

编程日记 2024/12/13 23:14:09

Microsoft Azure 在线技术公开课：生成式 AI 基础知识

课程介绍 参加我们的生成式 AI 基础知识公开课&#xff0c;了解如何将最新 AI 进展应用到你的工作中。你将了解有关语言模型和生成式 AI 应用程序的基础知识。此外&#xff0c;你还将了解 Azure OpenAI 服务如何通过文本、代码、图像生成、自然语言摘要和语义搜索助你实现成果…...

编程日记 2024/12/13 23:12:06

lnmp+discuz论坛 附实验：搭建discuz论坛

Inmpdiscuz论坛 Inmp: t: linux操作系统 nr: nginx前端页面 me: mysql数据库 账号密码&#xff0c;等等都是保存在这个数据库里面 p: php——nginx擅长处理的是静态页面&#xff0c;页面登录账户&#xff0c;需要请求到数据库&#xff0c;通过php把动态请求转发到数据库 n…...

编程日记 2024/12/13 23:09:59

谷粒商城—分布式高级①.md

1. ELASTICSEARCH 1、安装elastic search dokcer中安装elastic search （1）下载ealastic search和kibana docker pull elasticsearch:7.6.2 docker pull kibana:7.6.2（2）配置 mkdir -p /mydata/elasticsearch/config mkdir -p /mydata/elasticsearch/data echo "h…...

编程日记 2024/12/13 23:02:41

Unity开发配置不足，卡顿崩溃怎么办？

在游戏开发和虚拟现实等领域&#xff0c;Unity 软件以其强大的功能和广泛的适用性成为了众多开发者的首选。然而&#xff0c;要充分发挥 Unity 的性能&#xff0c;一台高性能的电脑设备是必不可少的。今天&#xff0c;我要向大家介绍川翔云电脑&#xff0c;它为 Unity 开发者提…...

编程日记 2024/12/13 22:59:37

在 Linux 上以 All-in-One 模式安装 kubernetes v1.22.12 kubesphere v3.4.1

KubeSphere4.1安装文档 在 Kubernetes 上快速安装 KubeSphere 在 Linux 上以 All-in-One 模式安装 kubernetes v1.22.12 kubesphere v3.4.1 官方文档&#xff1a;在 Linux 上以 All-in-One 模式安装 KubeSphere 下载文件 KubeKey git地址Releases kubesphere/kubekey 或 …...

编程日记 2024/12/13 22:54:31

网络安全自学是一项需要耐心和恒心的任务

网络安全自学是一项需要耐心和恒心的任务&#xff0c;但只要你按照正确的学习路线图去努力&#xff0c;就能够逐步掌握这一领域的知识和技能。下面是一份详细的学习路线图&#xff0c;它将帮助你从零基础开始&#xff0c;逐步成为网络安全领域的专家。 第一阶段&#xff1a;基…...

编程日记 2024/12/13 22:52:29

Python+OpenCV系列：图像的几何变换

Python OpenCV 系列&#xff1a;图像的几何变换 引言 在图像处理领域&#xff0c;几何变换是一个非常重要的操作&#xff0c;它可以改变图像的位置、大小、方向或形状。在计算机视觉中&#xff0c;这些操作对于图像预处理、特征提取和图像增强至关重要。本文将介绍如何利用 …...

编程日记 2024/12/13 22:49:25

第P1周：Pytorch实现mnist手写数字识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标 1. 实现pytorch环境配置 2. 实现mnist手写数字识别 3. 自己写几个数字识别试试具体实现 &#xff08;一&#xff09;环境 语言环境&#xff1a;Python…...

编程日记 2024/12/13 22:46:18

使用EventLog Analyzer进行Apache日志监控和日志分析

一、什么是Apache日志分析 Apache日志分析是网站管理和维护的重要部分&#xff0c;通过分析Apache服务器生成的日志文件&#xff0c;可以了解网站的访问情况、识别潜在的安全问题、优化网站性能等。 二、Apache日志类型 Apache日志主要有两种类型&#xff1a;访问日志&a…...

编程日记 2024/12/13 22:45:17

PaddleOCR模型ch_PP-OCRv3文本检测模型研究（二）颈部网络

上节研究了PaddleOCR文本检测v3模型的骨干网&#xff0c;本文接着研究其颈部网络。 文章目录 研究起点残注层颈部网络代码实验小结 研究起点 摘取开源yml配置文件&#xff0c;摘取网络架构Architecture中颈部网络的配置如下 Neck:name: RSEFPNout_channels: 96shortcut: True可…...

编程日记 2024/12/13 22:42:14

360极速浏览器不支持看PDF

360安全浏览器采用的是基于IE内核和Chrome内核的双核浏览器。360极速浏览器是源自Chromium开源项目的浏览器&#xff0c;不但完美融合了IE内核引擎&#xff0c;而且实现了双核引擎的无缝切换。因此在速度上&#xff0c;360极速浏览器的极速体验感更佳。 展示自己的时候要在有优…...

编程日记 2024/12/13 22:41:12

【深度学习】深刻理解ViT

ViT&#xff08;Vision Transformer&#xff09;是谷歌研究团队于2020年提出的一种新型图像识别模型&#xff0c;首次将Transformer架构成功应用于计算机视觉任务中。Transformer最初应用于自然语言处理&#xff08;如BERT和GPT&#xff09;&#xff0c;而ViT展示了其在视觉任务…...

编程日记 2024/12/13 22:40:11

解决vue2中更新列表数据，页面dom没有重新渲染的问题

在 Vue 2 中&#xff0c;直接修改数组的某个项可能不会触发视图的更新。这是因为 Vue 不能检测到数组的索引变化或对象属性的直接赋值。为了确保 Vue 能够正确地响应数据变化&#xff0c;你可以使用以下几种方法&#xff1a; 1. 使用 Vue.set() 使用 Vue.set() 方法可以确保 …...

编程日记 2024/12/13 22:38:06

vscode通过ssh连接远程服务器（实习心得）

一、连接ssh服务器 1.打开Visual Studio Code&#xff0c;进入拓展市场(CtrlShiftX)&#xff0c;下载拓展Remote - SSH 2. 点击远程资源管理器选项卡&#xff0c;并选择远程(隧道/SSH)类别 3. 点击ssh配置&#xff1a;输入你的账号主机ip地址 4.在弹出的选择配置文件中&#xf…...

编程日记 2024/12/13 22:36:05

知识图谱9:知识图谱的展示

1、知识图谱的展示有很多工具 Neo4j Browser - - - - 浏览器版本 Neo4j Desktop - - - - 桌面版本 graphX - - - - 可以集成到Neo4j Desktop Neo4j 提供的 Neo4j Bloom 是用户友好的可视化工具&#xff0c;适合非技术用户直观地浏览图数据。Cypher 是其核心查询语言&#x…...

编程日记 2024/12/13 22:35:03

leetcode 面试经典 150 题：验证回文串

链接验证回文串题序号125类型字符串解题方法双指针法难度简单 题目 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s&#xf…...

编程日记 2024/12/13 22:34:00

【0363】Postgres内核 从 XLogReaderState readBuf 解析 XLOG Record（ 8 ）

上一篇： 【0362】Postgres内核 XLogReaderState readBuf 有完整 XLOG page header 信息 ？ （ 7 ） 直接相关： 【0341】Postgres内核 读取单个 xlog page （2 - 2 ） 文章目录 1. readBuf 获取 page header 大小1.1 XLOG record 跨 page ？1.2 获取 XLOG Record 的 长度（xl…...

编程日记 2024/12/13 22:28:51

docker tdengine windows快速体验

#拉取镜像 docker pull tdengine/tdengine:2.6.0.34#容器运行 docker run -d --name td2.6 --restartalways -p 6030:6030 -p 6041:6041 -p 6043:6043 -p 6044-6049:6044-6049 -p 6044-6045:6044-6045/udp -p 6060:6060 tdengine/tdengine:2.6.0.34#容器数据持久化到本地 #/va…...

编程日记 2024/12/13 22:27:45

详解RabbitMQ在Ubuntu上的安装

​​​​​​​ 目录 Ubuntu 环境安装 安装Erlang 查看Erlang版本 退出命令 ​编辑安装RabbitMQ 确认安装结果 安装RabbitMQ管理界面 启动服务 查看服务状态 通过IP:port访问 添加管理员用户 给用户添加权限 再次访问 Ubuntu 环境安装 安装Erlang RabbitMq需要…...

编程日记 2024/12/13 22:22:37

Python的3D可视化库【vedo】2-2 (plotter模块) 访问绘制器信息、操作渲染器

文章目录 4 Plotter类的方法4.1 访问Plotter信息4.1.1 实例信息4.1.2 演员对象列表 4.2 渲染器操作4.2.1 选择渲染器4.2.2 更新渲染场景 4.3 控制渲染效果4.3.1 渲染窗格的背景色4.3.2 深度剥离效果4.3.3 隐藏线框的线条4.3.4 改为平行投影模式4.3.5 添加阴影4.3.6 环境光遮蔽4…...

编程日记 2024/12/13 22:21:36

【vue2】文本自动省略组件，支持单行和多行省略，超出显示tooltip

代码见文末 vue3实现 最开始就用的vue3实现&#xff0c;如下 Vue3实现方式 vue2开发和使用文档 组件功能 TooltipText 是一个文字展示组件&#xff0c;具有以下功能&#xff1a; 文本显示&#xff1a;支持单行和多行文本显示。自动判断溢出&#xff1a;判断文本是否溢出…...

编程日记 2024/12/13 22:20:36

网络安全产品之认识防病毒软件

随着计算机技术的不断发展&#xff0c;防病毒软件已成为企业和个人计算机系统中不可或缺的一部分。防病毒软件是网络安全产品中的一种&#xff0c;主要用于检测、清除计算机病毒&#xff0c;以及预防病毒的传播。本文我们一起来认识一下防病毒软件。 一、什么是计算机病毒 计算…...

编程日记 2024/12/13 22:15:22

游戏引擎学习第42天

仓库: https://gitee.com/mrxiao_com/2d_game 简介 目前我们正在研究的内容是如何构建一个基本的游戏引擎。我们将深入了解游戏开发的每一个环节&#xff0c;从最基础的技术实现到高级的游戏编程。 角色移动代码 我们主要讨论的是角色的移动代码。我一直希望能够使用一些基…...

编程日记 2024/12/13 22:14:21

区块链智能合约( solidity) 安全编程

引言&#xff1a;本文由天玄链开源开发者提供&#xff0c;欢迎报名公益天玄链训练营 https://blockchain.163.com/trainingCamp 一、重入和竞态 重入和竞态在solidity 编程安全中会多次提及&#xff0c;历史上也造成了重大的损失。 1.1 问题分析 竞态的描述不严格&#xf…...

编程日记 2024/12/13 22:03:06

网站主页被做跳转/怎么搞自己的网站

phpFreeChat 2.0.0 是一个完全进行重构的版本&#xff0c;目前功能还没完成。 php Free Chat是一个免费,安装简单, 快捷, 可定制和多语言支持的聊天程序,使用文件系统来储存消息和昵称。它使用Ajax的技术无刷新显示聊天信息与昵称&#xff0c;利用CSS支持自定主题并且可以通过插…...

编程日记 2025/1/10 21:41:12

如何做聚合类网站/全面网络推广营销策划

最近&#xff0c;Google 开源了其 TCP BBR 拥塞控制算法&#xff0c;并提交到了 Linux 内核&#xff0c;从 4.9 开始&#xff0c;Linux 内核已经用上了该算法。根据以往的传统&#xff0c;Google 总是先在自家的生产环境上线运用后&#xff0c;才会将代码开源&#xff0c;此次也…...

编程日记 2025/1/10 14:26:03

怎么做自助提卡网站/怎么申请一个网站

我猜你在学Python。其他的答案是对的。但我要回答你的主要问题&#xff1a;“如何用python计算百分比” 虽然它的工作方式是你做的&#xff0c;但它看起来不是很Python。另外&#xff0c;如果你需要添加一个新的主题&#xff0c;会发生什么&#xff1f;你将不得不添加另一个变量…...

编程日记 2025/1/10 13:32:31

手机网站制作器/爱廷玖达泊西汀

pt-kill 是一个优秀的kill MySQL连接的一个工具&#xff0c;是percona toolkit的一部分&#xff0c;在因为空闲连接较多导致超过最大连接数、某个有问题的sql导致mysql负载很高时&#xff0c;都需要将一些连接kill掉&#xff0c;这个工具主要就是这个用途。参数–busy-time运行…...

编程日记 2025/1/10 13:07:20

网页源代码翻译/佛山seo技术

来源&#xff1a;AI早餐汇 授权 产业智能官 转载 Chloe撰文 Linda编辑12月8日,中国知名的大数据分析和可视化领域领导者&#xff0c;海云数据在北京发布图易6和AI能力服务平台新品&#xff0c;介绍了包括公安系统在内的多个行业AI落地实践。(注&#xff1a;海云数据目前有60%的…...

编程日记 2025/1/10 11:26:53

问卷调查网站JAVA怎么做/建设网站公司

1415. [NOIP2001]数的计数 ☆ 输入文件&#xff1a;nums.in 输出文件&#xff1a;nums.out 简单对比 时间限制&#xff1a;1 s 内存限制&#xff1a;256 MB 【题目描述】 我们要求找出具有下列性质数的个数(包含输入的自然数n): 先输入一个自然数n(n≤1000)&#xff0c…...

编程日记 2025/1/10 8:10:25