ajax第三例:用户名是否已被注册|学习笔记

简介: 快速学习ajax第三例:用户名是否已被注册

开发者学堂课程【Ajax:ajax第三例:用户名是否已被注册】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/31

ajax第三例:用户名是否已被注册


一.编写页面

二.编写servlet

.演示用户名是否被注册

四.继续编写servlet

.给用户名注册监听

六、尝试


.编写页面

ajax3.jsp

给出注册表单页面

给用户名文本框添加onblur事件的监听

获取文本框的内容,通过ajax4步发送给服务器,得到响应结果*如果为1:在文本框后显示"用户名已被注册”

如果为0:什么都不做!

.编写servlet

ValidateUsernameServlet

获取客户端传递的用户名参数>判断是否为itcast

是:返回1

否:返回0

.演示用户名是否被注册:

写一个页面:ajax3.jsp。

演示用戸名是否被注册

用户名:br/>

密 码:

此时表单已经没有问题了。

.继续编写servlet

1.获取参数username

2.判断是否为itcast

3.如果是:响应1

4.如果不是:响应0

String username = request. getParameter ("username") ;

if (username . equalsIgnoreCase ("itcast")) {

response.getwriter() .print("1") ;

} else {

response .getwriter() .print("0");

五.给用户名注册监听器

window.onload = function() (

//获取文本框,给它的失去焦点事件注册监听

var userEle = document. getElementById ("usernameEle") ;

userEle.onblur = function() {

//1.得到异步对象

var xmlHttp = createXMLHttpRequest() ;

//2.打开连接

xm1Http. open("POST", "", true) ;

//3.设置请求头: Content-Type

xmlHttp.getRequestHeader ("Content -Type", "application/x-www form-urlencoded");//4.发送请求,给出请求体

xmlHttp. send ("username="+ userEle.value) ;

//5.给xmlHttp的onreadystatechange事件注册监听

xmlHttp . onreadystatechange = function() {

if (xmlHttp. readystate == 4 && xmlHttp.status == 200) {//双重判断

image.png

//获取服务器的响应,判断是否为1

//是:获取span,添加内容:“用户名已被注册”

var text = xmlHttp. responseText;

if(text== "1") {

//得到span元素

var span = document . getElementById ("errorSpan");span. innerHTML = "用户名已被注册! ";

image.png

此时代码已经写完。

六、尝试:

如果更改用户名后还显示,此时需要增加判断,更改代码:

span. innerHTML =用户名已被注册! ";} else { span. innerHTML = "" 。此时已成功。

相关文章
|
机器学习/深度学习 人工智能 网络架构
Transformer原理解析——一种Open AI和DeepMind都在用的神经网络架构
Transformer模型是一种日益流行的神经网络结构。它最近被OpenAI用于他们的语言模型中。与此同时,近期也被DeepMind用于它们的程序“星际争霸”中击败了一名顶级职业星际玩家。 Transformer模型的开发是为了解决序列转换及神经机器翻译问题。
9322 0
|
人工智能 自然语言处理 搜索推荐
如何10分钟获得一位24小时AI专家助手?
进入百炼控制台创建应用,选通义千问-Plus为模型,可设定Prompt引导对话。测试后若发现不足,可进一步优化。获取API-KEY和应用ID以便API调用,实现网页集成。此AI助手能即时解答用户问题,提供个性化服务及推荐,有效提升用户体验与企业效率,同时降低成本并助力策略规划。随着AI技术进步,这类智能助手将成为日常生活的重要组成部分。
|
存储 API 数据安全/隐私保护
web录屏方案实现
【10月更文挑战第9天】
625 138
|
11月前
|
存储 监控 安全
《ArkTS模型更新秘籍:安全升级与一键回滚攻略》
在鸿蒙Next的ArkTS开发中,模型的安全更新和回滚机制至关重要。本文探讨了版本控制与校验、增量更新策略、更新过程中的安全防护、安全审计与监控等有效方法,确保应用稳定性和数据安全。同时,介绍了备份与恢复、基于版本的回滚及自动化触发等回滚机制,保障用户良好体验。
375 29
|
11月前
|
存储 人工智能 运维
首批!阿里云飞天企业版率先通过中国信通院一云多算能力评估
阿里云飞天企业版率先参加中国信通院组织的首批一云多算系列标准的评估,并成功通过该标准的验收测试与专家评审。
306 2
首批!阿里云飞天企业版率先通过中国信通院一云多算能力评估
|
11月前
|
监控 数据可视化 数据挖掘
惊叹!燕云十六声运营团队靠它提升工作效率!
在游戏行业竞争激烈的2025蛇年新春,燕云十六声团队通过选择合适的可视化协作软件实现了高效工作。板栗看板以其高度可视化的任务管理、灵活的任务分配和强大的文件管理功能脱颖而出。Trello、Asana、Monday.com、Zeplin和Slack等工具也各具特色,提供了丰富的插件、权限管理和实时沟通等功能,助力团队应对巨大工作量和协作挑战,提升工作效率,打造更优质的游戏产品。
543 12
|
人工智能 安全
openAI的Red Team
openAI的Red Team
479 3
|
存储 数据中心 云计算
抖音服务器带宽有多大,为什么能够供那么多人同时在线
抖音通过在全国多地设立数据中心,利用分布式云计算技术,如CDN、OSS等,实现视频数据的高效分发与存储。每个用户就近接入当地数据中心,减轻单点压力,确保高并发下的流畅体验。数据中心间通过高速网络同步数据,保证内容的及时更新与访问。这种架构设计有效支撑了大量用户的同时在线。
507 1
|
编解码
视频分辨率和帧率
【10月更文挑战第7天】视频分辨率和帧率
|
搜索推荐 机器人 云计算
纳米机器人:医疗领域的微型革命与精准治疗
【9月更文挑战第16天】随着科技的飞速发展,纳米技术成为推动多个领域变革的重要力量。在医疗领域,纳米机器人以其独特优势引领着微型革命与精准治疗新时代。本文探讨其在药物输送、癌症治疗、手术辅助及疾病诊断中的应用,并分析其小型化、精准化、智能化与综合化的优势。尽管面临制造技术、体内控制等挑战,但随着科技的进步,纳米机器人有望成为人类健康的重要保障。
1005 10