AJAX异步检查,检查用户名是否存在

写法一:

 var xmlHttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, SafarixmlHttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}console.log("xmlHttp,XHR,created"+xmlHttp.readyState);var url = "validateUsername.jsp?username=" + trim(field.value) + "&time=" + new Date().getTime(); //设置请求方式为GET,设置请求的URL,设置为异步提交  xmlHttp.open("GET", url, true); //将方法地址复制给onreadystatechange属性  xmlHttp.onreadystatechange = function() {state_Change(xmlHttp);};<span style="color:#ff0000;">//Bad Code</span> xmlHttp.onreadystatechange = state_Change(xmlHttp);//将设置信息发送到Ajax引擎  xmlHttp.send(null); } else { document.getElementById("CheckField").innerHTML = ""; } 
function state_Change(xmlHttp) { console.log("state_Change start");//Ajax引擎状态为成功  if (xmlHttp.readyState == 4) { //HTTP协议状态为成功  if (xmlHttp.status == 200) { if (trim(xmlHttp.responseText) != "") { //console.log("responseText: START___",xmlHttp.responseText," ___END");if(trim(xmlHttp.responseText)=="OK"){document.getElementById("userCheck").className="icon ticker"; document.getElementById("CheckField").innerHTML = ""; }else{document.getElementById("userCheck").className="";document.getElementById("CheckField").innerHTML = "<font color='red' style='font-size:15px; line-height: 3; vertical-align:middle'>" + xmlHttp.responseText + "</font>"; }}else {document.getElementsByName("userCheck").className="icon into";document.getElementById("CheckField").innerHTML = ""; } }else { alert("数据库可能出错,请求失败,错误码=" + xmlHttp.status); } }
} 

写法二:

$(function() {$("#checkbtn").click(function() {if ($("#searchkey").val() == "") {console.log("searchkey is null");alert("没有输入值!!!!");} else {$.ajax({url : "CheckID?searchkey=" + $("#searchkey").val(),success : function(result) {tablename = $("#searchform").children("[name='tablename']").val();if(...){if (result == "exsit") {...} else {...}}else{if (result == "exsit") {...} else {...}}}});}});});

写法二比较简单,写法一比较原始。

使用异步的Ajax的好处是页面不用刷新,还能不需要点击什么按钮,不需要提交表单, 直接 由某事件自动提交到服务器进行 检查 取值等操作。

转载于:https://www.cnblogs.com/slankka/p/9158551.html

AJAX异步检查,检查用户名是否存在相关推荐

  1. php ajax邮箱,PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

    前 言 直接上代码有点不厚道.于是按照天朝传统,整段描述吧....(本人语言表达能力有限,大家忍着看) 功 能 在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册. ...

  2. AJAX异步判断注册用户名是否重复

    研究了几天,网上的例子大部分都很复杂,不适合新手学习和理解,自己整合这几天学习的知识,用原生的ajax知识浅显易懂地实现了这个功能,现在分享出来一起学习: <%@ page language=& ...

  3. asp ajax异步请求,get方法:用户名异步请求asp服务端报错?

    js代码如下: var res = '';//常量 0用户名不存在 :1用户名存在 function Ajax(obj){ $.ajax({ type:"get", url:&qu ...

  4. ale插件 vim_Vim中异步语法检查ale配置

    注意 在设置let g:ale_sign_error = '✗'和let g:ale_sign_warning = '⚡'这些时,可能vim不让你保存,提示fenc这个东西. 所以,为了保险起见,你最 ...

  5. 【转】4.1触碰jQuery:AJAX异步详解

    传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 X ...

  6. Ajax异步方式实现登录与參数的校验

    Ajax异步方式实现登录与參数的校验 登录代码 这个是使用Bootstrap3的组件功能实现的 <div class="login_con_R"><h4>登 ...

  7. Ajax注册表单用户名实时验证

    原文地址为: Ajax注册表单用户名实时验证 1.1.1 摘要 很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性:从而确保用户之间不拥有相同的用户名和电子邮件地址: ...

  8. 从浅到深,带你彻底搞懂AJAX异步请求

    在平时开发过程中,异步请求似乎比同步请求出现的频率还要高一些.这是为什么呢?在同步请求时如果对网页的部分内容进行更新时,是不是就必须重载整个页面.这样肯定是不行的,这时就可以采用异步请求来解决此问题. ...

  9. AJAX异步请求(Asynchronous Javascript And Xml)

    文章目录 1.传统请求及缺点 (1)传统的请求 (2)传统请求存在的问题 2.AJAX概述 3.XMLHttpRequest对象 4.AJAX GET请求 5.AJAX GET请求缓存问题 6.AJA ...

最新文章

  1. 1亿元“真金白银”发展大数据产业
  2. RabbitMq 本地连接报错 org.springframework.amqp.AmqpIOException: java.io.IOException
  3. 同步 异步 阻塞 非阻塞深入理解
  4. 使用TensorFlow训练神经网络进行价格预测
  5. linux如何安装交叉工具链,Linux:制作mipsel 交叉工具链 (更新版)
  6. java求实数的整数部分和小数部分_输入一个浮点数,并输出该数的整数部分和小数部分...
  7. 如何减小电压跟随器输出电阻_一文看懂放大器和比较器差别
  8. Unity 资源加载卸载过程
  9. RecyclerView自定义分割线实战
  10. android 读取单反相机,手机怎么直接读取相机照片更方便?
  11. 反激电源电路电磁干扰抑制措施
  12. Forth?什么鬼?
  13. 搜索词纠错(拼写检查)、相关搜索的原理与实现
  14. Mac版 微信 撤回消息拦截两种方法
  15. Word2003快速操作技巧及常用快捷键使用
  16. 数据结构——图的十字链表实现
  17. python的字符串切片操作
  18. JSPlumb文档翻译
  19. 湖仓一体:基于Iceberg的湖仓一体架构在B站的实践
  20. Ubuntu 安装一款常用的图像编辑软件

热门文章

  1. python播放视频代码_python实现实时视频流播放代码实例
  2. JavaScript笔记-对wheelDeltaY和deltaY的体会
  3. SoapUI笔记-使用SoapUI测试WebService服务端
  4. Java笔记-模拟QQ三方登录(单点登录2.0)
  5. C++设计模式-桥接模式
  6. Qt5.7+Opencv2.4.9人脸识别(四)模型训练
  7. java sqlite 创建_关于Java:创建3个由sqlite数据库填充的微调器
  8. android 华为手机灭屏搜索不到蓝牙_华为Mate 30更新EMUI10.1.0.132版本,新增10项实用功能...
  9. windowblinds 6_过年回家选车很重要!锐骐6强势对比纳瓦拉
  10. python蟒蛇绘制步骤_如何用python绘制蟒蛇移动的样子-百度经验