在PHP中应用Ajax技术检测用户名

来源：互联网发布：mac电脑重新安装系统编辑：程序博客网时间：2024/06/03 20:47

一代码

fun.js

function chkUsername(username){if(username==''){     //判断用户名是否为空    alert('请输入用户名！');}else{        var xmlObj;     //定义XMLHttpRequest对象    if(window.ActiveXObject){     //如果是浏览器支持ActiveXObjext则创建ActiveXObject对象        xmlObj = new ActiveXObject("Microsoft.XMLHTTP");    }else if(window.XMLHttpRequest){     //如果浏览器支持XMLHttpRequest对象则创建XMLHttpRequest对象    xmlObj = new XMLHttpRequest();    }    xmlObj.onreadystatechange = callBackFun;    //指定回调函数    xmlObj.open('GET', 'chk.php?username='+username, true);     //使用GET方法调用chk.php并传递username参数的值    xmlObj.send(null);     //不发送任何数据，因为数据已经使用请求URL通过GET方法发送    function callBackFun(){     //回调函数        if(xmlObj.readyState == 4 && xmlObj.status == 200){   //如果服务器已经传回信息并没发生错误    if(xmlObj.responseText=='y'){    //如果服务器传回的内容为y，则表示用户名已经被占用    alert('该用户名已被他人使用！');    }else{       //不为y，则表明用户名未被占用        alert('恭喜，该用户未被使用！');    }    }    }}}

chk.php

<?phprequire_once 'conn.php';     //包含数据库连接文件$sql = mysql_query("select id, username from tb_user where username='".trim($_GET['username'])."'", $connID);     //执行查询$result = mysql_fetch_array($sql);if ($result) {     //判断用户名是否存在    echo 'y';} else {    echo 'n';}?>

conn.php

<?php$host = '127.0.0.1';     $userName = 'root';     $password = 'root';     $connID = mysql_connect($host, $userName, $password);     mysql_select_db('db_database27', $connID);     mysql_query('set names gbk');     ?>

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Ajax检测用户名</title></head><script language="javascript" src="js/fun.js"></script><body><h2>Ajax检测用户名</h2><form name="form_register">    用户名：<input type="text" id="username" name="username" size="20" />&nbsp;<input type="button" value="查看用户名是否被占用" onclick="javascript:chkUsername(form_register.username.value)" /></form></body></html>

二运行结果

查看图片附件

阅读全文

0 0