php+Ajax无刷新验证用户名操作实例详解
本文实例讲述了php+Ajax无刷新验证用户名操作。分享给大家供大家参考,具体如下:
AJAX 简介
AJAX = Asynchronous JavaScript And XML(异步 JavaScript 及 XML) AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。 AJAX 并不是一种新的编程语言,而仅仅是一种新的技术,它可以创建更好、更快且交互性更强的 web 应用程序。 AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。 通过在幕后与 web 服务器交换数据,而不是每当用户作出改变时重载整个 web 页面,AJAX 技术可以使网页更迅速地响应
Ajax请求
传统的 web 应用程序会把数据提交到 web 服务器(使用 HTML 表单)。在 web 服务器把数据处理完毕之后,会向用户返回一张完整的新网页。 由于每当用户提交输入,服务器就会返回新网页,传统的 web 应用程序往往运行缓慢,且越来越不友好。 通过 AJAX,web 应用程序无需重载网页,就可以发送并取回数据。完成这项工作,需要通过向服务器发送 HTTP 请求(在幕后),并通过当服务器返回数据时使用 JavaScript 仅仅修改网页的某部分。 一般使用 XML 作为接收服务器数据的格式,尽管可以使用任何格式,包括纯文本。
无刷验证新用户名
自己最近看视频自学ajax,想把一些实例分享给大家,第一个案列是无刷新验证用户名是否可用。
一、效果图
1、用户可用
2、用户不可用
3、项目文件(register.php-注册页面 和process.php-判断用户名是否可用)
二、代码
register.php-注册页面以及ajax发送请求
<!doctypehtml
<htmllang="en"
<head
<meta charset="UTF-8"
<title 注册</title
<scripttype="text/javascript"
//创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同浏览器获取对象XMLHttpRequest
if(window.ActiveXObject){
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}
else{
xmlHttpRequest=newXMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest="";
//验证用户名是否存在
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
//判断xmlHttpRequest是否成功
if(myXmlHttpRequest){
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数标示请求的方式,‘get'、‘post'
//第二个参数指定url,对那个页面发送ajax请求(本质仍然是http请求)
/*XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser,bstrPassword);
*/
varurl="/Ajax/process.php?username="+$("username").value;
//window.alert(url);
myXmlHttpRequest.open("get",url,true);
//window.alert('创建ajax引擎成功');
//指定回调函数,chuili是函数名
myXmlHttpRequest.onreadystatechange=chuli;//调用
//真的发送请求,如果是各塔请求则填入null即可
//如果是post请求,则填入实际数据
myXmlHttpRequest.send(null);
}
else
{
// window.alert('创建失败');
}
}
function chuli(){
// window.alert("cuhli函数被调用"+myXmlHttpRequest.readyState);
//我要取出从register.php返回的数据
if(myXmlHttpRequest.readyState==4){
//取出值,根据返回信息的数据格式
//window.alert("服务器返回"+myXmlHttpRequest.responseText);
$('myres').value=myXmlHttpRequest.responseText;
}
}
function $(id){
return document.getElementById(id);
}
</script
</head
<body
<formaction="???" method="post"
用户名字:<inputtype="text" name="username1"onkeyup="checkName()" id="username"
<input type="button"value="验证用户名"
<input style="border-width:0;color: #e93b3d" type="text" id="myres"
<br/
用户密码:<inputtype="password" name="password" <br
电子邮件:<inputtype="text" name="email" <br/
<input type="submit"value="用户注册"
</form
</body
</html
process.php—判断用户名是否可用
<?php
//接受数据
$username=$_GET['username'];
// echo "用户名".$username;
if($username=="李四"){
echo "用户名不可用";
}
else{
echo"恭喜用户名可用";
}
?
三、原理图
- Centos中yum方式安装java
- 微信小程序新革命催生新物种新物种带来大红利!玩转行业新玩法
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(3)删除记录
- 部署Zipkin分布式性能追踪日志系统的操作记录
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(4)显示记录
- Android 2.x中使用actionbar - Actionbarsherlock (2)
- python读txt和xml
- 让Jexus支持高并发请求的优化技巧
- 数据压缩算法LZO (C#)
- Html之初体验
- 基于Wolfpack开发业务监控系统
- Android 2.x中使用actionbar - Actionbarsherlock
- Python-操作Memcache、Redis、RabbitMQ、
- 推荐[搜索引擎架构]的几篇文章
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何将pdf转换为word 3.0
- 搭建分布式文件系统FastDFS
- Presto Web UI
- Leetcode No.5 最长回文子串
- Python的循环、判断和各种表达式(长文系列第二篇)
- Java内存泄漏、性能优化、宕机死锁的N种姿势
- 从2.9秒到0.6秒,信息流首屏提效80%的秘诀
- 移植nodejs到嵌入式linux,让终端支持可使用js做些功能
- go语言版串口获取银商秘钥工具
- dotnet Microsoft.Recognizers.Text 超强大的自然语言关键词提取库
- Java 基础面试总结
- 银商TMS平台秘钥下载工具
- 小白向:Linux vim编辑器(一)
- 2020数据库面试题
- 银商TMS平台秘钥自动下载并形成文件工具