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 相关文章推荐
一个好用的分页函数
Nov 16 PHP
PHP批量生成缩略图的代码
Jul 19 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
Aug 07 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
Mar 05 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
Aug 06 PHP
php 判断网页是否是utf8编码的方法
Jun 06 PHP
php调用shell的方法
Nov 05 PHP
php生成高清缩略图实例详解
Dec 07 PHP
详解WordPress中给链接添加查询字符串的方法
Dec 18 PHP
详解PHP使用Redis存储session时的一个Warning定位
Jul 05 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
Feb 23 PHP
PHP 实现 JSON 数据的编码和解码操作详解
Apr 22 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类的使用 实例代码讲解
2009/12/28 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
javascript 写类方式之八
2009/07/05 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
利用Python破解斗地主残局详解
2017/06/30 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
python aiohttp的使用详解
2019/06/20 Python
python drf各类组件的用法和作用
2021/01/12 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
自我评价的范文
2014/02/02 职场文书
拉歌口号大全
2014/06/13 职场文书
北京奥运会口号
2014/06/21 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
尊师重教主题班会
2015/08/14 职场文书