php+Ajax无刷新验证用户名操作实例详解


Posted in PHP onMarch 04, 2019

本文实例讲述了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、用户可用

php+Ajax无刷新验证用户名操作实例详解

2、用户不可用

php+Ajax无刷新验证用户名操作实例详解

3、项目文件(register.php-注册页面 和process.php-判断用户名是否可用)

php+Ajax无刷新验证用户名操作实例详解

二、代码

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"恭喜用户名可用";
  }
?>

三、原理图

php+Ajax无刷新验证用户名操作实例详解

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
5.PHP的其他功能
Oct 09 PHP
PHP如何抛出异常处理错误
Mar 02 PHP
php报表之jpgraph柱状图实例代码
Aug 22 PHP
PHP中使用cURL实现Get和Post请求的方法
Mar 13 PHP
PHP实现邮件群发的源码
Jun 18 PHP
PHP四舍五入精确小数位及取整
Jan 14 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
Jul 08 PHP
浅析PHP中strlen和mb_strlen的区别
Aug 31 PHP
PHP的伪随机数与真随机数详解
May 27 PHP
php时间计算相关问题小结
May 09 PHP
Thinkphp 中 distinct 的用法解析
Dec 14 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
Sep 30 PHP
实例介绍PHP删除数组中的重复元素
Mar 03 #PHP
PHP+Ajax简单get验证操作示例
Mar 02 #PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
Mar 01 #PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
Mar 01 #PHP
PHP中“=&gt;
Mar 01 #PHP
PHP htmlspecialchars_decode()函数用法讲解
Mar 01 #PHP
PHP递归的三种常用方式
Feb 28 #PHP
You might like
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
js时间日期和毫秒的相互转换
2013/02/22 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
python实现两张图片的像素融合
2019/02/23 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
python3中sys.argv的实例用法
2020/04/24 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
财会自我鉴定范文
2013/12/27 职场文书
网络宣传方案
2014/03/15 职场文书
教师教学评估方案
2014/05/09 职场文书
安全施工责任书
2014/08/25 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
超市工作总结范文2014
2014/12/19 职场文书
会计工作态度自我评价
2015/03/06 职场文书
python实现简单聊天功能
2021/07/07 Python