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截取utf-8中文字符串乱码的解决方法
Mar 29 PHP
php开发留言板的CRUD(增,删,改,查)操作
Apr 19 PHP
细谈php中SQL注入攻击与XSS攻击
Jun 10 PHP
PHP字符串长度计算 - strlen()函数使用介绍
Oct 15 PHP
PHP实现采集抓取淘宝网单个商品信息
Jan 08 PHP
PHP使用适合阅读的格式显示文件大小的方法
Mar 05 PHP
php判断输入是否是纯数字,英文,汉字的方法
Mar 05 PHP
CodeIgniter配置之config.php用法实例分析
Jan 19 PHP
php版微信自动登录并获取昵称的方法
Sep 23 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
Aug 10 PHP
PHPUnit测试私有属性和方法功能示例
Jun 12 PHP
PDO::prepare讲解
Jan 29 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共享内存段示例分享
2014/01/20 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
Python中的高级数据结构详解
2015/03/27 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python之os操作方法(详解)
2017/06/15 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
pow在python中的含义及用法
2019/07/11 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
教师远程培训感言
2014/03/06 职场文书
创文明城市标语
2014/06/16 职场文书
房屋维修申请报告
2015/05/18 职场文书
退货证明模板
2015/06/23 职场文书