使用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. 使用javascript来访问本地文件夹

    常用的.net 的aspx文件由于运行在服务器端,并不具有访问用户本地文件夹的权限,导致类似于<a href="file:///d:/backup" > open fo ...

  2. 后Hadoop时代的大数据架构

    提到大数据分析平台,不得不说Hadoop系统,Hadoop到现在也超过10年的历史了,很多东西发生了变化,版本也从0.x进化到目前的2.6版本.我把2012年后定义成后Hadoop平台时代,这不是说不 ...

  3. 【BZOJ1135】[POI2009]Lyz 线段树

    [BZOJ1135][POI2009]Lyz Description 初始时滑冰俱乐部有1到n号的溜冰鞋各k双.已知x号脚的人可以穿x到x+d的溜冰鞋. 有m次操作,每次包含两个数ri,xi代表来了x ...

  4. 【BZOJ3572】[Hnoi2014]世界树 虚树

    [BZOJ3572][Hnoi2014]世界树 Description 世界树是一棵无比巨大的树,它伸出的枝干构成了整个世界.在这里,生存着各种各样的种族和生灵,他们共同信奉着绝对公正公平的女神艾莉森 ...

  5. android how to deal with data when listview refresh

    如何解决listview数据刷新,下拉刷新,上拉加载更多时,图片不闪烁. 在Activity的onResume()方法中将adaper和listView重新再绑定一次. listView.setAda ...

  6. vue 把后台返回的json拼接成excel并下载

    先封装一下生成excel的方法 downfile.js export default { data() { return {} }, components: {}, created() { }, me ...

  7. angular的属性绑定

    1. 图片地址属性绑定 html文件 <img [src]="imgUrl"> ts文件 export class ProductComponent implement ...

  8. 170327、Java微信支付中的扫码支付

    微信支付现在已经变得越来越流行了,随之也出现了很多以可以快速接入微信支付为噱头的产品,不过方便之余也使得我们做东西慢慢依赖第三方,丧失了独立思考的能力,这次打算分享下我之前开发过的微信支付. 一 H5 ...

  9. ZOJ 3932 Deque and Balls

    There are n balls, where the i-th ball is labeled as pi. You are going to put n balls into a deque. ...

  10. win10系统下把Oracle卸载干净

    我和大家一样,遇到了一个问题,就是如何把Oracle从自己的电脑卸载干净,很多人都觉得很难把Oracle卸载干净,于是选择重装系统,因为解决不了Oracle没有卸载干净之后,重装不了的问题,有时候真的 ...