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 相关文章推荐
基于文本的访客签到簿
Oct 09 PHP
php引用地址改变变量值的问题
Mar 23 PHP
解析PHP正则提取或替换img标记属性
Jun 26 PHP
浅谈PHP变量作用域以及地址引用问题
Dec 27 PHP
php发送get、post请求的6种方法简明总结
Jul 08 PHP
php中in_array函数用法探究
Nov 25 PHP
thinkphp文件处理类Dir.class.php的用法分析
Dec 08 PHP
PHP开发框架laravel安装与配置教程
Mar 13 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
Feb 17 PHP
详解PHP防止盗链防止迅雷下载的方法
Apr 26 PHP
thinkphp5 加载静态资源路径与常量的方法
Dec 24 PHP
laravel实现查询最后执行的一条sql语句的方法
Oct 09 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
中国的第一台收音机
2021/03/01 无线电
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
js实现图片拖动改变顺序附图
2014/05/13 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
函授药学自我鉴定
2014/02/07 职场文书
读书小明星事迹材料
2014/05/03 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
办理护照工作证明
2014/10/10 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
教师调动申请报告
2015/05/18 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL