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调用Oracle存储过程
Oct 09 PHP
开源SNS系统-ThinkSNS
May 18 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
Oct 27 PHP
PHP笔记之:基于面向对象设计的详解
May 14 PHP
Smarty foreach控制循环次数的实现详解
Jul 03 PHP
PHP查找与搜索数组元素方法总结
Jun 12 PHP
PHP实现文件上传和多文件上传
Dec 24 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
Sep 30 PHP
PHP中“=&gt;
Mar 01 PHP
laravel框架分组控制器和分组路由实现方法示例
Jan 25 PHP
PHP pthreads v3下同步处理synchronized用法示例
Feb 21 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
May 25 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
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
关于js类的定义
2011/06/28 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
python 随机数生成的代码的详细分析
2011/05/15 Python
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python入门篇之面向对象
2014/10/20 Python
Python实现list反转实例汇总
2014/11/11 Python
Numpy数组的保存与读取方法
2018/04/04 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
人事助理自荐信
2014/02/02 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书