当用户注册时，服务器数据库需要对用户输入的用户信息（以用户名为例子）进行验证，在不刷新页面的情况下又需要页面和服务器进行数据请求，最好的方法是用ajax异步请求。

一、实现思路：

1.用户输入信息

2.创建输入框失焦事件

　　2.1当用户输入玩完成时记录用户输入的值

　　2.2创建XMLHttpRequest对象

　　2.3使用open（）方法对请求的方式作说明，并将用户输入的数当参数传递给请求的PHP文件

　　2.4send（）方法发送请求

3.创建onreadystatechange事件根据readyState的值和status判断文件以及网络状况

　　if (xmlhttp.readyState==0){
                console.log("请求未初始化");
            }    
            if(xmlhttp.readyState==1){
                console.log("服务器连接已建立");
            }
            if(xmlhttp.readyState==2){
                console.log("请求已接收");
            }
            if(xmlhttp.readyState==3){
                console.log("请求处理中");
            }
            //当请求处理完成且网络畅通显示ajax的处理结果
            if(xmlhttp.readyState==4 && xmlhttp.status===200){
                console.log("请求处理完成");
                document.getElementById("name_info").innerHTML=xmlhttp.responseText;
            }

4.ajax异步处理完判断用户是否能够注册之后提示用户是否可以注册

二、知识点：

1.ajax的工作原理

2.readyState的各个状态表示含义

3.PHP连接MySQL数据并查询数据

4.JavaScript事件的学习

代码：

index.html文件：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>ajax验证用户注册</title>

	<style>

	body{

		background: #b3b3b3;

	}

		.div1{

			margin:300px auto;

			width:300px;

			height:80px;

			text-align: right;

		}

		.div1 p{

			font-size: 12px;

			color:#f00;

			font-weight:bold;

		}

	</style>

</head>

<body>

	<div class="div1">

		<form action="" name="regist">

			用户名：<input type="text" name="username" id="name"><p id="name_info"></p><br/>

			密码：<input type="password" name="pass"><br/>

			确认密码：<input type="password" name="passagain" id="passagain"><p id="pass_info"></p><br/>

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

			<input type="reset" value="取消">

		</form>

	</div>

	<script src="regist.js"></script>

</body>

</html>

regist.js文件：

var xmlhttp;

		//创建失焦事件--验证用户名是不是可以注册

		document.getElementById("name").addEventListener("blur",readTXT);

		//输入框聚焦事件--聚焦时选中

		document.getElementById("name").onfocus=function(){

			this.select();

		}

		//确认密码的文本框失焦时--检验两次密码是否正确

		document.getElementById("passagain").addEventListener("blur",ISsame);

		//网络请求状态发生变化时的事件

		function state_Change(){

			if (xmlhttp.readyState==0){

				console.log("请求未初始化");

			}

			if(xmlhttp.readyState==1){

				console.log("服务器连接已建立");

			}

			if(xmlhttp.readyState==2){

				console.log("请求已接收");

			}

			if(xmlhttp.readyState==3){

				console.log("请求处理中");

			}

			//当请求处理完成且网络畅通显示ajax的处理结果

			if(xmlhttp.readyState==4 && xmlhttp.status===200){

				console.log("请求处理完成");

				document.getElementById("name_info").innerHTML=xmlhttp.responseText;

			}

		}

		function readTXT(){

			var a;

			//创建XMLHttpRequest对象

			if (window.XMLHttpRequest)

			{

				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

				xmlhttp=new XMLHttpRequest();

			}

			else

			{

				// IE6, IE5 浏览器执行代码

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

			}

			a=regist.username.value;//1.更新参数a的值

			//2.发送网络请求

			//获取表单用户输入的用户名

			//获取本地文本

			//xmlhttp.open("GET","test.txt",true);

			//获取本地PHP文件

			//xmlhttp.open("GET","test.php",true);

			//获取服务器端txt文件

			//xmlhttp.open("GET","http://localhost:9999/ajax/biaodan/test.txt",true);

			//获取服务器端php文件

			xmlhttp.open("GET","http://localhost:9999/ajax/biaodan/test.php?a="+a,true);

			xmlhttp.send();

			xmlhttp.onreadystatechange=state_Change;//请求状态改变事件

		}

		function ISsame(){

			if(regist.pass.value!=regist.passagain.value){

				document.getElementById("pass_info").innerHTML="两次输入密码不一致！";

			}

			else{

				document.getElementById("pass_info").innerHTML="";

			}

		}

test.php文件：

<?php

	$temp=$_GET['a'];//接收参数

	$con = mysql_connect("localhost", "root", "root");//创建数据库连接

	if (!$con){

	  //die('Could not connect: ' . mysql_error());

	  }

	  else{

	  	//echo"success!";

	  }

	$db_selected = mysql_select_db("ajax_stydy", $con);

	$sql = "select * from user where username='".$temp."'";

	$result = mysql_query($sql,$con);//查询数据

	if(!mysql_num_rows($result)){//数据库中不存在该用户名时提示可以注册

		//echo "wushuju";

		echo "<span style='color:green'>*恭喜您！用户名'".$temp."'可以注册*</span>";

	}

	else{//已存在该用户提示更换用户名

		echo "<span style='color:red'>*该用户名已被注册请更换！*</span>";

	}

	mysql_close($con);//关闭数据库连接

?>

《ajax学习》之ajax+JavaScript事件验证用户名是否可注册的更多相关文章

  1. Ajax验证用户名是否被注册

    Ajax验证用户名是否被注册 var xmlHttp; function createXMLHttpRequest(){ // 创建XMLHttp请求对象 if(window.ActiveXObjec ...

  2. Django——Ajax发送请求验证用户名是否被注册

    场景: 用户注册的时候,输入用户名之后,Ajax发送请求到后端,后端验证该用户名是否已经被注册,然后返回到注册页面提示用户. 1.模型: from django.db import models cl ...

  3. aJax学习之Ajax工作原理

    转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的 ...

  4. Ajax学习--理解 Ajax 及其工作原理

    Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术:• HTML 用于建立 Web 表单并确定应用 ...

  5. [ajax 学习笔记] ajax初试

    ajax全称是:asynchronous javasctipt and xml. 1.为什么须要ajax? 一般web程序与server的交互是:页面发送请求等待server处理,server处理数据 ...

  6. ajax验证用户名是否被注册 ; ajax提交form表单

    register.html 文件代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo ...

  7. Flask ajax 动态html 的javascript 事件失效

    $('.db_edit').click(function(){ $(".editdbproduct").val($(this).parent().parent().find('.e ...

  8. Day17-18前端学习之路——Javascript事件

    用户在某个元素上点击鼠标或悬停光标. 用户在键盘中按下某个按键. 用户调整浏览器的大小或者关闭浏览器窗口. 一个网页停止加载. 提交表单. 播放.暂停.关闭视频. 发生错误. 更多事件:https:/ ...

  9. Ajax学习系列——Ajax介绍及优缺点

    一.什么是Ajax Ajax即“Asynchronous JavaScript And XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. Ajax = 异步Jav ...

随机推荐

  1. ROS学习笔记五：创建和使用ROS msg和srv

    1 msg和srv简介 1.1 msg文件 msg文件就是一个简单的text文件,其中每行有一个类型和名称,可用的类型如下: int8, int16, int32, int64 (plus uint* ...

  2. Hdu 5379 Mahjong tree (dfs + 组合数)

    题目链接: Hdu 5379 Mahjong tree 题目描述: 给出一个有n个节点的树,以节点1为根节点.问在满足兄弟节点连续 以及 子树包含节点连续 的条件下,有多少种编号方案给树上的n个点编号 ...

  3. _bzoj1036 [ZJOI2008]树的统计Count【树链剖分】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1036 保存模版. 执行qmax与qsum操作,往上爬的时候最开始的代码出了点小问题,往上爬的 ...

  4. 【BZOJ3309】DZY Loves Math（线性筛）

    题目: BZOJ 3309 分析: 首先,经过一番非常套路的莫比乌斯反演(实在懒得写了),我们得到: \[\sum_{T=1}^n \sum_{d|T}f(d)\mu(\frac{T}{d})\lfl ...

  5. TIME-April

    一转眼四月份又过了三分之一,现在才开始计划自己的四月还真是对自己太过放松了呀!不过前一段时间都在搞学生会的五四评优答辩,索然不是我喜欢的过程,但是结果还比较令人欢喜.翻掉过去的篇章,展开新的一页. 四 ...

  6. js连续赋值，你理解了吗

    看一道有意思的题,也许你会自信满满地写下答案,会是正确的吗? }; var b = a; a.x = a = {n: }; console.log('a',a); console.log('b',b) ...

  7. java getDocumentBase() 得到的文件夹路径

    参考一个百度知道上的回答 举例说来,假设你的项目文件是xx,而这个xx文件夹是在D盘下的yy文件夹里,即项目文件的完整路径D:\yy\xx,则编译运行文件后,在xx文件夹里会产生名为build的文件夹 ...

  8. linux下常用网络操作汇总 专题

    centos 更改主机名,需要更改的几个地方: (1) /etc/sysconfig/network  //更改主机名(2)/etc/hostname  //更改主机名(3) /etc/hosts   ...

  9. OAuth 开放授权 Open Authorization

    http://oauth.net/ http://tools.ietf.org/html/rfc6749 http://reg.163.com/help/help_oauth2.html 网易通行证O ...

  10. 迅为工业级arm开发板i.MX6DL开发板软件硬件全开源

    i.MX6是基于ARM Cortex™-A9架构的高扩展性多核系列应用处理器,促进了如高稳定性工业平板电脑.差异化智能本.前装车载中控系统和超高清电子书阅读器等新一代应用的发展.强劲的3D图形加速引擎 ...