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 相关文章推荐
随机头像PHP版
Oct 09 PHP
PHP实现的功能是显示8条基色色带
Oct 09 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
Nov 07 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
Jun 01 PHP
php的一个简单加密解密代码
Jan 14 PHP
CI(CodeIgniter)框架中的增删改查操作
Jun 10 PHP
Linux下安装oracle客户端并配置php5.3
Oct 12 PHP
PHP实现的简单分页类及用法示例
May 06 PHP
thinkPHP中_initialize方法实例分析
Dec 05 PHP
laravel dingo API返回自定义错误信息的实例
Sep 29 PHP
laravel 解决paginate查询多个字段报错的问题
Oct 22 PHP
PHP时间相关常用函数用法示例
Jun 03 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
PHP-FPM 的管理和配置详解
2019/02/17 PHP
php链式操作的实现方式分析
2019/08/12 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
python中元类用法实例
2014/10/10 Python
python变量不能以数字打头详解
2016/07/06 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
村官学习十八大感想
2014/01/15 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
安全责任协议书范本
2016/03/23 职场文书
Python合并多张图片成PDF
2021/06/09 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python
Python中的socket网络模块介绍
2022/07/23 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python