title: 使用原生Ajax进行用户名重复的检验(一)

date: 2019-01-21 17:35:15

tags: [JavaScript,Ajax]

Ajax的复习

距离刚开始学ajax那会有一段时间了,然后用得又比较少。都有些生疏了呢 ̄へ ̄,现在刚好要实现一个用Ajax检验重复的功能,顺便复习一下Ajax。

关于Ajax

  1. 作用 :通过Ajax可以无需更新整个网页,而只更新部分内容,优化用户体验;
  2. 原理
  3. AjaxEngine, 通常使用XMLHtttpRequest对象与服务器端进行传输交互;

创建步骤

  1. 创建异步交互对象:

    对不同浏览器做兼容处理,IE7+, Firefox, Chrome, Opera, Safari 浏览器用,xmlhttp=new XMLHttpRequest();IE6, IE5 浏览器用xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  2. 设置监听:

    根据返回的状态作出对前端的响应。

    当 readyState 改变时,就会触发 onreadystatechange 事件,触发事件后就可以XMLHtttpRequest对象调用readyState属性获得返回值然后进行响应了。readyState 共有5种状态如下:



    XMLHtttpRequest对象调用status属性可获得服务器返回的 HTTP 状态码

    --200:请求成功

    --404:没有发现文件、查询或url

    --400~499:客户端问题

    --500 :服务端问题

  3. 打开链接:

    使用方法open(method,url,async),三个参数如下:

    -- method:请求的类型;GET 或 POST

    -- url:文件在服务器上的位置

    -- async:true(异步)或 false(同步)

  4. 发送:

    如是post请求,使用send(string);

代码部分

JavaScript

<script>
/*
*异步检验用户名是否被注册
*/
function checkUsername(){
//获取用户名
var username = document.getElementById("username").value;
//1.创建异步交互对象
var xhr = createXmlHttp();
//2.设置监听
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("checkReport").innerHTML = xhr.responseText;
}
}
}
//3.打开链接
xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);
//4.发送
xhr.send(null);
} function createXmlHttp(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
</script>

注:这里Ajax请求时,加了个一时间戳,目的是防止浏览器使用缓存。因为在浏览器开了缓存的情况下,对同一链接的相同参数,浏览器会使用缓存。

表单

<div class="register">
<form action="index.html" onsubmit="return checkForm();">
<ul>
<li>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:
<input type="text" id="username" placeholder="您用户名" onblur="checkUsername();"/>
<span id="checkReport"></span>
</li>
<li>设置密码:<input type="password" id="password" placeholder="至少两种字符组合" /></li>
<li>确认密码:<input type="password" id="repassword" placeholder="再次输入您的密码" /></li>
<li>验证邮箱:<input type="text" id="email" placeholder="输入邮箱" /></li>
<div class="check">
<input type="checkbox" id="accept" onclick="isAccepted()" /> 同意
<a href="index.html" style="text-decoration: none;">《用户注册协议》</a>
</div>
<input class="rbtn" type="submit" id="submit" value="确认注册" disabled="disabled"/>
</ul>
</form>
</div>

使用SHH作为后端。

使用原生Ajax进行用户名重复的检验的更多相关文章

  1. 使用ajax验证用户名重复

    继上次的用户注册登录案例之后,对其中的部分功能再做进一步改进.上一版中用户提交表单后才对用户名进行校验,虽然做了回显,但还是感觉功能弱了些.为了能有更好用户体验,不是在用户提交表单后才给提示,而是在用 ...

  2. ajax检查用户名重复

    1.获取ajax对象 new XMLHttpRequest(); IE6-8: new ActiveXOject("Microsoft.XMLHTTP"); 兼容判断:if(XML ...

  3. SSH+Ajax实现用户名重复检查(二)

    1.另外一种更常用的js表达方式: var user = { inintEvent: function(){ $("input[name='user.User_LogName']" ...

  4. SSH+Ajax实现用户名重复检查(一)

    1.struts.xml设置 <package name="default" namespace="/" extends="json-defau ...

  5. 原生Ajax

    使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...

  6. Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释

    前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...

  7. Django中的文件上传和原生Ajax

    概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传 ...

  8. 使用AJAX实现用户名的唯一性校验(注册界面)-JAVA(新手)

    (1)实现用户名的唯一性校验 所需要准备的: Servlet 注册界面的JSP 接口和实现类 所需要的接口和实现类: 接口: /* * 用户注册 * 账号的唯一性校验,需要传参(username) * ...

  9. Jquery学习笔记 --ajax删除用户,使用了js原生ajax

    主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...

随机推荐

  1. 一起学SpringMVC之入门篇

    本文属于SpringMVC的入门篇,属于基础知识,仅供学习分享使用,如有不足之处,还请指正. 什么是SpringMVC ? SpringMVC是一个基于Spring的MVC框架,继承了Spring的优 ...

  2. 手机分辨率DPI怎么计算

    长度方向像素数平方加宽度方向像素平方然后开根号,最后除以屏幕大小(英寸)

  3. C# OpenCVSharp使用SetMouseCallback设置回调方法,报错"向非托管代码传递委托时,托管应用程序必须让这些委托保持活动状态,直到确信不会再次调用它们。"

    一.描述问题 当非托管代码调用托管应用程序的委托的时候,经常会报错“托管调试助手 "CallbackOnCollectedDelegate"   Message=托管调试助手 &q ...

  4. Netty服务端Channel注册Selector及绑定服务器端口

    当服务端Channel 创建并且初始化完成之后,会将其注册到 selector,通过语句config().group().register(channel)进行注册工作,该方法最终调用 Abstrac ...

  5. Docker启动时提示Get Permission Denied while trying to connect解决方法

    环境描述 vmware15虚拟机安装centos7.4 64位系统,docker版本19.03.2 问题描述 安装完docker后,执行docker相关命令 docker run ubuntu:15. ...

  6. 团队展示&选题

    团队展示 1.队名:螺旋升天队 2.队员学号: 李光证 3117004660 (队长) 卢俊杰 3117004662 吴子昊 3117004671 陈浩民 3117004646 陈俊铭 3117004 ...

  7. oracle12.2RAC之OGG安装配置(一)

    前面配置了ACFS用于ogg目录. 上传软件并解压安装: unzip 123014_fbo_ggs_Linux_x64_shiphome.zip cd fbo_ggs_Linux_x64_shipho ...

  8. 自己用到的解决Python3.6.5+Django2.0集成xadmin后台点击添加或者内容详情报 list index out of range 的错误的办法如下:

    Python3.6.5 Django2.0 这是Django版本与xadmin兼容的问题 解决办法如下: 注释掉如下代码: def render(self, name, value, attrs=No ...

  9. 浅谈JS重绘与回流

    在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流: 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新, ...

  10. 第05组 Alpha事后诸葛亮

    组长博客链接(2分) 组长博客链接 现代软件工程 项目Postmortem 模板(27分) 设想和目标(2分) 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? ...