使用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. Android 解决手机unauthorized错误

    转自:http://blog.csdn.net/quicksand201/article/details/19190821 手机开发者选项中USB调试已经打开,在电脑命令行下输入adb devices ...

  2. Linux命令之乐--curl

    参数: -I   获取头部信息 -s/--silent      Silent mode. Don't output anything 沉默模式 --connect-timeout <secon ...

  3. 用一个二维码做下载地址，自动区分是 ios 还是 android

    用一个二维码做下载地址,自动区分是 ios 还是 android, 甚至区分 iphone  和 ipad. <html> <head> <meta http-equiv ...

  4. 第九讲 C#练习题

    1.接收一个整数N 如果N是正数就输出1·N 如果是负数就提示出错输出 由丰老师提供 -_-~ 2.编一个程序,从三个红球,五个白球,六个黑球中任意取出八个球,且其中必须有白球,输出所有可能的方案. ...

  5. HDU 5875 Function 大连网络赛 线段树

    Function Time Limit: 7000/3500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Total ...

  6. 报错分析---->jsp自定义标签：类cannot be resolved to a type

    这个困扰我一个晚上,仔细上网查阅发现,主要是因为jsp自定义标签要用到的这个jsp-api.jar的问题 这是我eclipes中的jar: 然而jsp-api.jar这个jar在tomcat中也有(报 ...

  7. UNION WHERE

    w条件语句的作用域. SELECT * FROM ( SELECT asin, LOWER(country) AS country FROM grab_amzreviews_asins UNION D ...

  8. bash characters

    linux shell通配符(wildcard) 通配符是由shell处理的(不是由所涉及到命令语句处理的,其实我们在shell各个命令中也没有发现有这些通配符介绍), 它只会出现在 命令的“参数”里 ...

  9. MySQL exists 和 not exists 的用法

    有一个查询如下: 1 SELECT c.CustomerId, c.CompanyName   2 FROM Customers c   3 WHERE EXISTS(   4     SELECT  ...

  10. HTML容易遗忘内容（二）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...