利用ajax实现简单的注册验证局部刷新实例
更新时间：2013年10月08日 14:40:22 作者：
ajax的工作原理想必大家都有所了解吧，不懂的可以看看本文。下面是注册验证案例register。php是注册页面。registerProcess.php用于接收数据并返回数据
1,ajax(asynchronouse javascript and xml)异步的 javascrip 和xml
2,（包含了7种技术：javascript xml xstl dom xhtml css xmlhttpRequest）
3,是一种与服务器语言无关的技术，可以用在（php/jsp/asp.net）
4,ajax的工作原理： 创建一个ajax引擎->发送数据给服务器--》通过回调函数接收数据---》将数据赋给指定的页面
下面是注册验证案例register。php是注册页面。registerProcess.php用于接收数据并返回数据
register.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户注册</title>
<!-- 告诉浏览器不要缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
<!--
function sendRequest(){
//创建一个ajax引擎
var xmlHttpRequest;
//不同浏览器获取xmlRequest对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest = new ActiveXObject("MMMMMictofrt");
}else{
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest
function checkName(){
myXmlHttpRequest = sendRequest();
if(myXmlHttpRequest){
//window.alert("创建成功");
//第一个参数表示请求方式get.post。第二个参数指定url,对哪个页面发送ajax请求
//用get方式提交的数据如果没有发生变化的话浏览器将会从缓存中直接提取
var url = "/ajax_yhyz/registerProcess.php? username=getValue('username').value";
//1,用这样就可以不从缓存提取了
//var url = "/ajax_yhyz/registerProcess.php? mytime='new Date()' & username=getValue('username').value";
//2,<meta http-equiv="pragma" content="no-cache">告诉浏览器不要缓存
//window.alert(url); 用于测试url是否成功
//第三个参数ture 表示异步机制
myXmlHttpRequest.open("get",url,true);
//指定回调函数，chul是函数名，表示如果状态发生变化就调用该函数，有四个状态
myXmlHttpRequest.onreadystatechange = chuli;
//发送请求，如果是get请求则填写null即可
//额如果是post请求，则填写实际的数据
myXmlHttpRequest.send(null);
}
}
function chuli(){
//window.alert("处理函数被回调");
if(myXmlHttpRequest.readyState == 4){
//window.alert("服务器返回"+myXmlHttpRequest.responseText);
getValue("myres").value = myXmlHttpRequest.responseText;
}
}
function getValue(id){
//return document.getElementById(id).value; 这样做的话没办法完成局部刷新
return document.getElementById(id);
}
-->
</script>
</head>
<body>
<form action="???" method="post">
用户名字:<input type="text" name="username1" id="username" ><input type="button" onclick="checkName()" value="验证用户名">
<input type="text" id="myres" />
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
<form action="???" method="post">
用户名字:<input type="text" name="username2" >
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
</body>
</html>
regiseterProcess.php
<?php
$username=$_REQUEST['username'];
if($username=="shunping"){
echo "err";
}else{
echo "ok";
}
?>
2,（包含了7种技术：javascript xml xstl dom xhtml css xmlhttpRequest）
3,是一种与服务器语言无关的技术，可以用在（php/jsp/asp.net）
4,ajax的工作原理： 创建一个ajax引擎->发送数据给服务器--》通过回调函数接收数据---》将数据赋给指定的页面
下面是注册验证案例register。php是注册页面。registerProcess.php用于接收数据并返回数据
register.php
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户注册</title>
<!-- 告诉浏览器不要缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
<!--
function sendRequest(){
//创建一个ajax引擎
var xmlHttpRequest;
//不同浏览器获取xmlRequest对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest = new ActiveXObject("MMMMMictofrt");
}else{
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest
function checkName(){
myXmlHttpRequest = sendRequest();
if(myXmlHttpRequest){
//window.alert("创建成功");
//第一个参数表示请求方式get.post。第二个参数指定url,对哪个页面发送ajax请求
//用get方式提交的数据如果没有发生变化的话浏览器将会从缓存中直接提取
var url = "/ajax_yhyz/registerProcess.php? username=getValue('username').value";
//1,用这样就可以不从缓存提取了
//var url = "/ajax_yhyz/registerProcess.php? mytime='new Date()' & username=getValue('username').value";
//2,<meta http-equiv="pragma" content="no-cache">告诉浏览器不要缓存
//window.alert(url); 用于测试url是否成功
//第三个参数ture 表示异步机制
myXmlHttpRequest.open("get",url,true);
//指定回调函数，chul是函数名，表示如果状态发生变化就调用该函数，有四个状态
myXmlHttpRequest.onreadystatechange = chuli;
//发送请求，如果是get请求则填写null即可
//额如果是post请求，则填写实际的数据
myXmlHttpRequest.send(null);
}
}
function chuli(){
//window.alert("处理函数被回调");
if(myXmlHttpRequest.readyState == 4){
//window.alert("服务器返回"+myXmlHttpRequest.responseText);
getValue("myres").value = myXmlHttpRequest.responseText;
}
}
function getValue(id){
//return document.getElementById(id).value; 这样做的话没办法完成局部刷新
return document.getElementById(id);
}
-->
</script>
</head>
<body>
<form action="???" method="post">
用户名字:<input type="text" name="username1" id="username" ><input type="button" onclick="checkName()" value="验证用户名">
<input type="text" id="myres" />
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
<form action="???" method="post">
用户名字:<input type="text" name="username2" >
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
</body>
</html>
regiseterProcess.php
复制代码 代码如下:
<?php
$username=$_REQUEST['username'];
if($username=="shunping"){
echo "err";
}else{
echo "ok";
}
?>
相关文章
AJAX 可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页,下面这篇文章主要给大家介绍了关于实现AJAX异步调用和局部刷新的基本步骤,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了一个简单的ajax上传进度显示示例,需要的朋友可以参考下2014-02-02![[asp]天枫AJAX blog V1.0 程序提供下载了](//img.jbzj.com/images/xgimg/bcimg2.png)
[asp]天枫AJAX blog V1.0 程序提供下载了...2007-09-09
今天小编就为大家分享一篇ajax动态查询数据库数据并显示在前台的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
我很开心您来阅读我写的关于ajax的实例教程,无论您是第一次还是老朋友.我将在这里献上我至今所学,并毫不吝啬。2010-08-08
ajax跨域请求数据在谷歌火狐我本地IE11都是没问题的，IE9版本以下ajax 跨域却有问题，解决方法是对Internet 安全选项进行自定义级别2014-10-10
今天小编就为大家分享一篇关于Ajax报错400的参考解决办法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-10-10
这篇文章主要为大家详细介绍了Ajax实现页面无刷新留言效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
本篇文章通过两种方法实例讲解ajax定时刷新局部页面，当然方法有很多种，也可以不使用ajax来刷新页面，可以使用jquery中的append来给指定内容加东西，但是都不太实用，最实用的方法还是ajax加载数据了。2015-09-09
ThinkPHP5 通过ajax插入图片并实时显示(完整代码)
这篇文章主要介绍了ThinkPHP5 通过ajax插入图片并实时显示功能，本文给大家分享网站代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
![[asp]天枫AJAX blog V1.0 程序提供下载了](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论