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代码
Dec 06 PHP
PHP的开发框架的现状和展望
Mar 16 PHP
PHP 伪静态隐藏传递参数名的四种方法
Feb 22 PHP
php下使用strpos需要注意 === 运算符
Jul 17 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
May 07 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
Dec 19 PHP
PHP时间格式控制符对照表分享
Jul 23 PHP
PHP实现图片旋转效果实例代码
Oct 01 PHP
解读PHP的Yii框架中请求与响应的处理流程
Mar 17 PHP
Ajax实现对静态页面的文章访问统计功能示例
Oct 10 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
Feb 23 PHP
PHP中一个有趣的preg_replace函数详解
Aug 15 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中的foreach函数
2013/08/31 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
numpy中的高维数组转置实例
2018/04/17 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
在django模板中实现超链接配置
2019/08/21 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
先进个人获奖感言
2014/01/24 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
公司地址变更通知
2015/04/25 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
利用Java连接Hadoop进行编程
2022/06/28 Java/Android