register.php

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>用户注册</title>

<script type="text/javascript">

//创建ajax引擎

function getXmlHttpObject(){

	//不同的浏览器获取xmlhttprequest 的方法不一样

	if(window.ActiveXObject){

		//window.alert('ie');

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

		}

	else{

		//window.alert('ff');

		xmlHttpRequest=new XMLHttpRequest();

		}

	return xmlHttpRequest;

}

var myXmlHttpRequest="";

function checkName(){

	myXmlHttpRequest=getXmlHttpObject();//1号线

	if(myXmlHttpRequest){

		//window.alert("创建Ajax引擎成功！");

		//通过myXmlHttpRequest对象发送请求到服务器的某一个页面

		//第一个参数表示请求的方式，get/post

		//第二个参数指定url，对那个页面发出ajax请求(本质仍然是http请求)，只要是web开发的底层是http请求，http的底层是tcp/ip协议

		//第三个参数 true 表使用异步机制，false表示不使用异步机制。

		//打开请求

		//var url="/ajax/registerPro.php?username="+$("username").value;

		//var url="/ajax/registerPro.php?mytime="+new date()+"&username="+$("username").value;

		var url="/ajax/registerPro.php";

		//这个是要发送数据

		var data="username="+$("username").value;

		//window.alert(url);

		myXmlHttpRequest.open("post",url,true);

		//这句话不可少

		//http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

		myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

		//指定回调函数 . chuli是函数名

		myXmlHttpRequest.onreadystatechange=chuli;

		//真的发送请求，如果是get请求发送null即可；如果是post请求，则填入实际的请求即可

		//myXmlHttpRequest.send(null); //2号线

		myXmlHttpRequest.send(data); //2号线

		}

}

//回调函数

function chuli(){

	//window.alert("回调函数成功!!"+xmlHttpRequest.readyState);

	//还是取值了

	if(xmlHttpRequest.readyState==4){

			//window.alert("服务器返回"+xmlHttpRequest.responseText);

			$("myres").value=xmlHttpRequest.responseText;

		}

}

//这里写一个函数

function $(id){

 	return document.getElementById(id);

 }

</script>

</head>

<body>

	<form action="" method="post">

			用户名字：<input type="text" onkeyup="checkName()" name="username1" id="username" />

			<input onclick="checkName();" type="button" value="验证用户名" /><input style="border-width:0px;color:red;" type="text" id="myres"/> <br />

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

			电子邮件：<input type="text" name="email" /> <br /> <input type="button" value="注册账号">

	</form>

</body>

</html> 

registerPro.php

$username = $_POST['username'];

// echo "用户名是：" . $username; // 3号线

if ($username == "zhosoft") {

	echo "此用户名不可用！";  // 注意，这里的数据是返回给请求的页面。

} else {

	echo "恭喜您，此用户名可用！";

}

AJAX实现无刷新验证用户名的更多相关文章

  1. 【转】 ASP.NET使用ICallbackEventHandler无刷新验证用户名是否可用

    功能说明:当用户在用户名输入框输入字符并焦点离开此输入框时,自动到数据库用户表中验证此用户名是否已被注册,如果已被注册,显示[不可用],反之,显示[可用],期间页面不刷新,读者也可以考虑将提示文字换成 ...

  2. Ajax实现注册无刷新验证用户名是否存在

    1. [代码][JavaScript]代码     ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...

  3. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  4. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  5. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  6. Ajax 实现无刷新分页

    Ajax 实现无刷新分页

  7. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  8. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  9. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

随机推荐

  1. zoj 3665 数论 二分法 两个参数

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4888 标题两个参数,途径:小参数的枚举,然后二分法大参数 想想两个点.以后就不 ...

  2. Spring之SpringMVC(源码)启动初始化过程分析

    1.说明 SpringMVC作为Spring提供的MVC实现,可以实现与Spring的天然无缝联合,因为具有很广泛的用途.具体的关于SpringMVC的处理流程逻辑我在这里就不在赘述了.还是来通过源码 ...

  3. Visual Studio 2015 & C#6.0 试用报告，持续更新。

    昨天早上看到了.net开源的消息,我是非常兴奋的,毕竟局限于Windows的.NET经常被人唾弃.VB暂且不提,C#常年被人指责跨平台性不佳,我也是无能为力.即使有Mono等第三方跨平台工程,.NET ...

  4. avalon.js实现一个简易日历

    使用MVVM框架avalon.js实现一个简易日历   最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...

  5. 老调重弹--面向对象设计原则--GRASP设计原则

    GRASP概述 GRASP,全称General Responsibility Assignment Software Patterns,译为”通用职责分配软件原则“,包含以下原则和模式 控制器(Con ...

  6. mediawiki在windows下的安装

    mediawiki在windows下的安装 对于刚接触wiki的朋友们来说,配置一个服务器环境,安装并运行mediawiki是一件很麻烦的事情,在这里,我尽量用通俗易懂的语言,介绍mw(mediawi ...

  7. waitFor和waitForAny的实现

    waitFor和waitForAny的实现 在实现waitFor方法之前,我们先要搞明白下面这些问题: 1. waitFor方法的形参有限制吗? 没有!如果形参是Task类型,不应该启动Task,如果 ...

  8. c#、sql、asp.net、js、ajax、jquery大学知识点笔记

    <table cellSpacing="0" cellPadding="0" width="609" height="470 ...

  9. 【Oracle】-【插入读取顺序】-插入读取之间的顺序关系

    Oracle插入记录的顺序是否是读取的顺序? 通过一个简单的实验验证: SQL> create table t ( x int, a char(2000) default 'x', b char ...

  10. 了解mongoDB存储结构

    mongoDB 深入浅出一 了解mongoDB存储结构   MongoDB 深入浅出 数据逻辑结构 1 mongoDB中的文档(document) 相当于 关系性数据库的一条一条的记录 2 colle ...