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. [LeetCode]Copy List with Random Pointer &amp;Clone Graph 复杂链表的复制&amp;图的复制

    /** * Definition for singly-linked list with a random pointer. * struct RandomListNode { * int label ...

  2. java设计模式之七装饰器模式（Decorator）

    顾名思义,装饰模式就是给一个对象增加一些新的功能,而且是动态的,要求装饰对象和被装饰对象实现同一个接口,装饰对象持有被装饰对象的实例,关系图如下: Source类是被装饰类,Decorator类是一个 ...

  3. js 正则之 控制字符 \cX

    原文:js 正则之 控制字符 \cX 前些天在司徒正美的群里有人问了这么个问题:正则表达式里特殊字符 \cX 到底是什么?确实,我之前也挺在意的,但是一直没去看到底是什么.在MDN上只说是控制字符(详 ...

  4. oracle 存储过程的基本语法

    原文:oracle 存储过程的基本语法 1.基本结构 CREATE OR REPLACE PROCEDURE 存储过程名字(    参数1 IN NUMBER,    参数2 IN NUMBER) I ...

  5. Mybatis包分页查询java公共类

    Mybatis包分页查询java公共类   分页----对于数据量非常大的查询中.是不可缺少的. mybatis底层的分页sql语句因为须要我们自己去手动写.而实现分页显示的时候我们须要依据分页查询条 ...

  6. 使用SoapUI 测试Web Service

    原文:使用SoapUI 测试Web Service 如何测试写好的Webservice?你当然可以写代码来测试,但还是太麻烦,你得花时间去学习各语言的关于Webservice调用的相关API.这里推荐 ...

  7. Node.js日志框架选型比較：Winston

    日志对于问题定位.调试,系统性能调优至关重要,尤其是系统复杂以及在线执行的情况下. 好的开发框架都会有一个可开启关闭/可配置记录级别的日志系统.我们从下面几个方面来做选型: 1. 每行日志都须要有准确 ...

  8. leetcode第五题--Longest Palindromic Substring

    Problem:Given a string S, find the longest palindromic substring in S. You may assume that the maxim ...

  9. bootstrap-paginator 分页插件笔记

    [MVC]bootstrap-paginator 分页插件笔记   bootstrap-paginator基于bootstrap框架,使用起来非常简单.官网:http://harttle.github ...

  10. 【SSRS】入门篇(六) -- 分组和总计

    原文:[SSRS]入门篇(六) -- 分组和总计 通过[SSRS]入门篇(五) -- 设置报表格式的设计,一份简单格式的报表已产生,如下图: 这节来说说分组和总计: 根据日期.订单对数据进行分组 添加 ...