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. Javascript规范

    本文地址: http://www.hicss.net/evolve-your-javascript-code/ 方才在程序里看到一段JS代码,写法极为高明,私心想着若是其按照规范来写,定可培养对这门语 ...

  2. SQL 2005 中查询或执行另外的数据库操作的方法

    原文:SQL 2005 中查询或执行另外的数据库操作的方法 摘要: 如果,你想在一台数据库服务器上,查询另一个台数据服务器的数据该如何做呢?如果,你想在同一台数据服务器上,在不同的数据库之间查询数据, ...

  3. HEAP CORRUPTION DETECTED

    发生主要是由于这个问题给写入超出预分配的空间,注意检查越界情况 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  4. SQL点滴11—重置win7登录密码影响SQL登录

    原文:SQL点滴11-重置win7登录密码影响SQL登录 2011-04-20  修改机器登录密码后不能登录SQL Server 今天发现一个很有趣的现象.公司的电脑每两个月就会提示重置登录密码,今天 ...

  5. 打印man手册为pdf文件

    只需要一个命令就可以了! merlin@tfAnalysis:~/projects/tfadc$ man -t errno | ps2pdf - ~/errno.pdf 输出的文件很漂亮.

  6. [译]Java 设计模式之桥接

    (文章翻译自Java Design Pattern: Bridge) 简单来说,桥梁设计模式是一个两层的抽象. 桥接模式就是从一个抽象中实现中解耦以便两个都可以独立的改变.桥接使用封装聚合而且使用继承 ...

  7. The Native POSIX Thread Library for Linux - 设计文档

    nptl-design

  8. mysql 安装后无法登陆mysql的 shell 那mysql&gt;经验:ERROR 1045 (28000): Access denied for user &#39;root&#39;@&#39;localhost‘

    [root@hzswtb2-mpc ~]# mysql ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using pas ...

  9. JS中的prototype(转载)

    在研究别人写的js图像处理算法时,发现其中脚本中大量使用prototype,很难读明白,就网上查了下资料发现这篇文章很易懂,就转载如下: 1 原型法设计模式 在.Net中可以使用clone()来实现原 ...

  10. jquery防止事件冒泡和取消默认行为案例

    ----------------js取消事件冒泡: window.event.cancelBubble=true; --------------jquery事件参数可以防止事件冒泡: $(" ...