使用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. 使用ProcDump工具抓取dump

    首先得到要抓取的进程号 cd %windir%\syswow64\inetsrvappcmd list wp得到pid之后, 在任务管理器里发现w3wp.exe的CPU总在49%-60%左右, 间歇性 ...

  2. Zabbix-3.0.3使用自带模板监控MySQL

    导读 Zabbix是一款优秀的,开源的,企业级监控软件,可以通过二次开发来监控你想要监控的很多服务,本文介绍使用Zabbix自带的模板监控MySQL服务. 配置userparameter_mysql. ...

  3. 用VS不同版本打开项目，报错：MS Build Error MSB4019: Microsoft.WebApplication.targets was not found

    本例是在用VS2008打开项目是报错 未找到C:\Program Files\MSBuild\Microsoft\VisualStudio\V10.0 In the last article Buil ...

  4. JAVA NIO使用非阻塞模式实现高并发服务器

    参考:http://blog.csdn.net/zmx729618/article/details/51860699  https://zhuanlan.zhihu.com/p/23488863 ht ...

  5. nexus配置第三方库文件

    进入nexus管理界面 默认用户名密码:admin/admin123 在左侧Views/Repositories中选择Repositories,然后在右侧的面板中选择3rd party,在下方arti ...

  6. java面向对象基础回顾

    (49)  (0) 面向对象 啥是面向对象 什么是多态多态的机制 接口和抽象类区别 个人理解 代码实现 面向对象 学习java大家接触到的最多的话语无非就是面向对象,可能大家没有仔细研究过这个问题,但 ...

  7. Win7环境下 IIS配置

    一.介绍IIS Internet Information Services(IIS,互联网信息服务),是由微软公司提供的基于运行Microsoft Windows的互联网基本服务.最初是Windows ...

  8. webPage logService 日志服务 剥离

    [旧的场景]1.x.a.com指向负载均衡服务器ipL;2.代码所在的应用服务器ipA,ipB,ipC,运行nginx-phpFPM服务,提供2个服务: 2.1.应用服务器ipA,ipB,ipC中we ...

  9. NFS服务基础

    NFS服务部署: (一)NFS环境准备: 操作系统 角色 IP地址 CentOS Linux release 7.3.1611 (Core) NFS服务端 192.168.152.138 CentOS ...

  10. MyEclipse安装主题(Color Theme)

    前段时间发现同学开发使用IDE界面相当炫酷(Mac版的IntelliJ IDEA),个人也比较喜欢那种风格的界面,想想自己MyEclipse IDE界面简直是屌丝啊~~~~ 今天上CSDN看见一篇介绍 ...