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数字格式化
Dec 06 PHP
php disk_free_space 返回目录可用空间
May 10 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
Dec 18 PHP
PHP编写简单的App接口
Aug 28 PHP
php 实现一个字符串加密解密的函数实例代码
Nov 01 PHP
php检查函数必传参数是否存在的实例详解
Aug 28 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
May 29 PHP
在laravel5.2中实现点击用户头像更改头像的方法
Oct 14 PHP
通过PHP实现获取访问用户IP
May 09 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
May 14 PHP
如何在PHP环境中使用ProtoBuf数据格式
Jun 19 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 CURL用法的深入分析
2013/06/09 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php实现webservice实例
2014/11/06 PHP
PHP连接access数据库
2015/03/27 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
javascript每日必学之多态
2016/02/23 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
什么是跨站脚本攻击
2014/12/11 面试题
庆八一活动方案
2014/01/25 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
党员公开承诺事项
2014/03/25 职场文书
大学开学计划书
2014/04/30 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书