使用ajax实现用户名有效性验证

需求：当用户输入完用户名时，用户可以通过页面上的按键来确认当前的用户名是否有效。如下图所示



思路：用户触发按键后可以向服务器发起http请求，将用户名提交给服务器来进行用户名确认，服务器返回检查结果。
很多浏览器中都支持XMLHttpRequest对象的创建，我们可以通过创建该对象，并进行一些设置来向服务器发起HTTP请求。

代码：
<html>

  <head>

  <title>用户注册</title>

  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

  <script type="text/javascript">

 

  function getXmlHttpObject(){

  var xmlHttp = null;

 

if (window.XMLHttpRequest)

  // code for IE7+, Firefox, Chrome, Opera, Safari

  //获取一个XMLHttpRequestd对象

  xmlHttp=new XMLHttpRequest();

else// code for IE6, IE5

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  return xmlHttp;

  }

 

  function checkUser(){

  var myXmlHttpRequest = getXmlHttpObject();

 

  //采用GET方式请求的URL，将数据提交给registerPorcess.php

  //var urlGet="http://localhost/registerPorcess.php?username="+$("username").value;

 

  //采用POST方式请求的URL

  var urlPost="http://localhost/registerPorcess.php";

  var data = "username=" + $("username").value;

  if(myXmlHttpRequest){

  //发起一个建立socket链接，发起http请求，true说明采用异步方式

  //myXmlHttpRequest.open("GET", urlGet, true);

  myXmlHttpRequest.open("POST", urlPost, true);
//采用POST方式需要设置请求头,GET方式则不需要

  myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

  //注册回调函数

  myXmlHttpRequest.onreadystatechange = function(){callBack(myXmlHttpRequest)};

  //如果是GET请求则填入NULL,否则，填入相应的数据

  myXmlHttpRequest.send(data);

  }

  else {

  window.alert("创建失败");

  }

  }

 

  function callBack(xmlHttp){
//状态4表示浏览器已经拿到服务器返回的数据

  if (xmlHttp.readyState==4 && xmlHttp.status == 200)
//获取服务器的返回值

  $('myres').value = xmlHttp.responseText;

   

  }
//该函必须使用$不好，不然会出现问题

  function $(id){

  return document.getElementById(id);

  }

  </script>

  </head>

  <body>

    <form action="???" method="post">

    用户名字:<input type="text"  name="username1" onkeyup="checkUser();" id="username" /><input type="button" onclick="checkUser();" value="验证用户名" />

    <input style="border-width: 0;color: red" type="text" id="myres">

    <br/>

    用户密码:<input type="password" name="password"><br>

    电子邮件:<input type="text" name="email"><br/>

    <input type="submit" value="用户注册">

    </form>

  </body>

</html>

处理页面registerPorcess.php
<?php

header("Content-Type: text/html;charset=utf-8");

header("Cache-Control: no-cache");

$username = $_POST['username'];

if($username == 'abcd'){

echo '用户名不可用';

}

else {

echo '用户名有效';

}

?>

注：谷歌浏览器调试问题
F12进入开发者模式


带你走进ajax(3)的更多相关文章

  1. 带你走进ajax(4)

    处理ajax返回数据类型 ajax返回数据类型:纯文本格式.xml.json 如果只获取简单的字符串可以采用纯文本格式. 如果返回的数据类型比较复杂,则采用xml或者json. 采用XML来处理数据 ...

  2. 带你走进ajax(2)

    ajax原理介绍 传统的web应用 传统的web应用是客户端向服务器发送一个http请求后,客户端要一直等待服务器的响应,这时用户什么事也干不成. 最麻烦的是对于表单的提交.比如用户要填写用户信息,等 ...

  3. 带你走进AJAX(1)

    ajax是什么? (1)ajax (asynchronouse javascript and xml) 异步的javascript 和xml (2)ajax是一个粘合剂,将javascript.xml ...

  4. 小丁带你走进git的世界三-撤销修改

    一.撤销指令 git checkout还原工作区的功能 git reset  还原暂存区的功能 git clean  还没有被添加进暂存区的文件也就是git还没有跟踪的文件可以使用这个命令清除他们 g ...

  5. 小丁带你走进git的世界二-工作区暂存区分支

    小丁带你走进git的世界二-工作区暂存区分支 一.Git基本工作流程 1.初始化一个仓库 git  init git  clone git仓库分为两种情况: 第一种是在现有项目或目录下导入所有文件到 ...

  6. 小丁带你走进git世界一-git简单配置

    小丁带你走进git世界一-git简单配置 1.github的简单配置 配置提交代码的信息,例如是谁提交的代码之类的. git config  –global user.name BattleHeaer ...

  7. 老司机带你走进Core Animation

    为什么时隔这么久我又回来了呢? 回来圈粉. 开玩笑的,前段时间ipv6被拒啊,超级悲剧的,前后弄了好久,然后需求啊什么的又超多,所以写好的东西也没有时间整理.不过既然我现在回来了,那么这将是一个井喷的 ...

  8. 带你走进rsync的世界

    导读 Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件,也可以使用 Rsync 同步本地硬盘中的不同目录.rsync共有3种使用方 ...

  9. 带你走进EJB--MDB

    在之前的文章中我们介绍了带你走进EJB--JMS 和 带你走进EJB--JMS编程模型 对JMS有了初步的了解, 作为EJB系列的文章我们会继续对EJB相关的内容做进一步深的学习和了解.而此次需要进行 ...

随机推荐

  1. （转）python中的参数：*args和**kwargs

    def foo(*args, **kwargs):print 'args = ', argsprint 'kwargs = ', kwargsprint '---------------------- ...

  2. iOS开发之--FMDB的使用

    在很多时候,我们会用到数据库,我们移动端使用的数据库,一般都是嵌入型数据库,是一种较轻型的数据库, 一般很多时候,大牛封装的FMDB的第三方,已经足够满足我们的需求了! 现在分享一下自己的学习心得,希 ...

  3. Android无线测试之—UiAutomator UiScrollable API介绍八

    设置滚动方向 一.设置滚动方向相关API 返回值 API 描述 UiScrollable setAsHorizontalList 设置滚动方向为水平滚动 UiScrollable setAsVerti ...

  4. 收集各种在线HTTP网站载入速度（响应时间）站长测试（检测）工具

    收集各种在线HTTP网站载入速度(响应时间)站长测试(检测)工具 名称\详情 简单功能描述 推荐星级 演示/示例 监控宝 从中国多地对你提交的URL进行载入速度(响应时间)测试 ★★★★★   17C ...

  5. KVC(Key-Value-Coding)和KVO(Key-Value-Observer)

    KVC(Key-Value-Coding)和KVO(Key-Value-Observer) 目录 概述 KVC的基本用法 KVC的运用 KVO的基本用法 KVO的运用 概述 键-值编码是一个用于间接访 ...

  6. 读取properties文件------servletcontext及dao层读取

    用servletcontext读取properties文件-------1) 重点在于:InputStream in=this.getServletContext().getResourceAsStr ...

  7. ios开发 更改状态栏

    设置statusBar 简单来说,就是设置显示电池电量.时间.网络部分标示的颜色, 这里只能设置两种颜色: 默认的黑色(UIStatusBarStyleDefault) 白色(UIStatusBarS ...

  8. http 服务器编程 适配器

    小结: 1.HandleFunc 只是一个适配器 go http 服务器编程(1) - 云+社区 - 腾讯云 https://cloud.tencent.com/developer/article/1 ...

  9. 在任何mac上用u盘安装OSX和Windows10双系统的方法（支持老电脑、不用Bootcamp）

    Win10是微软主推的,兼容性做的还不错,安装工具做的适应性好. 而且很多Mac机上的Bootcamp不支持u盘安装. 1.先安装OSX,一般电脑自带(建议升级到最新版).如果装了新的ssd,重新安装 ...

  10. Python--格式化输出%s和%d

    https://www.cnblogs.com/claidx/p/7253288.html pythn print格式化输出. %r 用来做 debug 比较好,因为它会显示变量的原始数据(raw d ...