使用Ajax校验用户名是否存在 -- 实例
2021/5/31 10:25:18
本文主要是介绍使用Ajax校验用户名是否存在 -- 实例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
这里我们先使用js原生操作ajax的方式,先感受一下,在新版的js中提供了更便捷的操作方式,我们后面再介绍。通常情况下在一个系统中的用户的登录名是唯一的,为了保证用户名的唯一性,需要在用户注册时添加校验,即根据用户输入的用户名去数据库中查找,这里使用ajax校验用户名可以很好的提升用户体验,用户输入完用户名失去鼠标焦点后通过ajax去数据库中查找是否唯一,然后根据结果给用户相应的提示信息,这样对于用户来说非常方便。
我们这次实例 就写死某个值啊 因为呢 我们不打算采用数据库 ,我们懂原理即可!、
【此次采用 JSP + SERVLET 】
开始之前先重点讲一下 原生AJAX的流程:
因为自己也是在第一次写的时候吃了很多苦头:
1.原生的 Ajax 主要就是使用 XmlHttpRequest 对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现 IE5.5 中存在(ActiveX控件),所以一定要用教科书式的注册方法来注册:
//这是XMLHttpReuquest对象无部使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
2.确认XMLHTtpRequest对象创建成功 这些小细节要做到位! 才可以让自己养成好习惯!
if (!XHR) {
alert("XMLHttpRequest对象创建失败!!");
return;
}
3. 设置连接信息 记住异步和同步很重要! send的发送和他有关:
//第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post
//第二个参数表示请求的url地址,get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互,true表示异步
//POST方式请求的代码
//xmlhttp.open("POST","/servlet/ajaxServer",true);
//POST方式需要自己设置http的请求头
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
//xmlhttp.send("name=" + userName);
4.发送数据,开始和服务器端进行交互
//同步方式下,send这句话会在服务器段数据回来后才执行完
//异步方式下,send这句话会立即完成执行
!!! 注意! 是否异步关乎到发送是否立即发送还是等有数据回来再发送!!!
5.回调函数
//当send执行完(发送完) 且 服务端返回了数据,才会执行回调函数! 所以! 我们一定要在里面做判断、接受操作 是最合适的:
判断对象的状态是交互完成 代码:4
判断http的交互是否成功 代码: 200
responseText 是返回的内容
这5个基本是流程 -- 第一次吃了不少苦头... 参照于 博客园 --Ruthless 。
然后你就可以写实例了:
这篇关于使用Ajax校验用户名是否存在 -- 实例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-04TiDB 资源管控的对撞测试以及最佳实践架构
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现