使用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. HttpClient使用学习

    import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.apac ...

  2. Tanks案例笔记(一、场景搭建)

    一.场景搭建 1.首先我们导入案例的资源,然后新建一个空场景: 2.资源中为我们准备的场景的预制,我们直接把LevelArt预制拖到Hierarchy面板: 3.移除场景中默认的光源: 4.确保物体的 ...

  3. [SharePoint 2010] 如何安裝啟用多國語系支援的SharePoint網站

    SharePoint 2010的多國語系支援與前一版的SharePoint 2007有所不同,SharePoint 2010內允許使用者自行決定使用介面語系的選擇. SharePoint 2010的多 ...

  4. PAT 甲级 1060 Are They Equal

    1060. Are They Equal (25) 时间限制 50 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue If a ma ...

  5. LVS,HAPROXY,NGINX各自的优缺点

    Nginx/LVS/HAProxy的基于Linux的开源免费的负载均衡软件. LVS:使用集群技术和Linux操作系统实现一个高性能.高可用的服务器,它具有很好的可伸缩性.可靠性和可管理性,是一款强大 ...

  6. order meeting room - 离散度30min

    w <meta charset="UTF-8"> <?php include('conn.php'); include('w_fun.php'); include ...

  7. 剑指Offer——数组中重复的数字

    题目描述: 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度 ...

  8. 【react npm】解决用npmstart启动别人的react项目的问题1：sha1-xxx checksum failed wanted sha1-xxx but got sha512-xxx. (10700 bytes)

    1.npm是nodejs的包管理器,相当于php的composer,python的pip,用于安装各种包. 2.一般来说,别人拷给你的react项目不会带依赖包的,因为太大了,需要用npm命令自己安装 ...

  9. Number Sequence---hdu1711（kmp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1711 题意就是求b数组在a数组出现的位置:就是kmp模板: #include<stdio.h&g ...

  10. Mybatis框架学习总结-优化Mybatis配置文件中的配置

    连接数据库的配置单独放在一个properties文件中 之前,是直接将数据库的连接配置信息卸载了Mybatis的conf.xml文件中,如下: <?xml version="1.0&q ...