【挑战达人】Ajax验证用户注册

上一篇 / 下一篇 2008-04-27 18:14:53 / 个人分类：原创

一.使用ajax能够实现客户端与服务器端的异步传输，达到不用刷新页面即可获得服务器端信息的效果。它是js,xml等多种技术的结合。用传统的方法验证用户名是否注册，要先提交表单，将在客户端输入的用户名传到服务器端，由服务器端脚本程序对数据进行处理，连接数据库看该用户名是否已注册过，再将得到的结果传回客户端，即将页面刷新了一次，是客户端与服务器端的同步传输。而使用ajax是在初始化页面时将发出异步请求的类实例化，即xmlhttpresponse，根据该类的对象找到要请求的页面并把请求发出去，用相应的属性接受服务器端传回的信息，就实现了客户端对服务器端的异步请求。

二.代码：

reg.html:

<!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=utf-8" />
<META. HTTP-EQUIV="expires" CONTENT="0">
<META. HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>PHP+AJAX注册用户名验证</title>
<style. type="text/css">

</style>
<script type="text/">
<!--
//XMLHttpRequest
    var xmlhttp = false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();             //实例化XMLHttpRequest类
    }
    function Ajax(data){
        xmlhttp.open("GET","db.php?username="+escape(document.getElementById("username").value),true);                          //open是XMLHttpRequest类的一个方法，该类一共有6个方法和6个属性。6个方法是：1.open。其参数是以什么方式请求哪个页。这里是以GET方式请求db.php.2.send。用来向服务器发送请求。3. setRequestHeader 格式：void setRequestHeader(string header, string value)    用来设定HTTP请求中的头信息。

这个方法必须在调用open()后使用。4. abort 格式：void abort() 这个方法用来停止请求。5. getAllResponseHeaders() 格式：string getAllResponseHeaders() 该方法返回一个字符串，包含HTTP响应中的头信息。6. getResponseHeader 格式：getResponseHeader(string header) 得到HTTP头信息中某个指定项的值，并把这个值作为字符串返回。。

        xmlhttp.send(null);          //由于open方法使用的是GET方式，send的参数就为空。

        xmlhttp.onreadystatechange=function(){       //XMLHttpRequest的6个属性。1. readyState 请求的状态。有5个可取值：0=未初始化，1=正在加载，2=已加载，3=交互中，4=完成。2. onreadystatechange 每个状态改变都会触发这个事件处理器，通常会调用一个函数。 3. responseText 服务器的响应，表示为一个串。4. responseXML服务器的响应，表示为XML。这个对象可以解析为一个DOM对象。5. status服务器的HTTP状态码（200对应OK，404对应未找到，等等。）6. statusTEXT HTTP状态码相应的文本

            if (4==xmlhttp.readyState){
                if (200==xmlhttp.status){
                    document.getElementById("tip").innerHTML=xmlhttp.responseText;
                }else{
                    alert("发生错误!");
                }
            }
        }
    }
    function chkUserName(obj){
        if(obj.value.length<1){
            obj.style.backgroundColor="#efefef";
            alert("请输入用户名!");
            obj.focus();
        }else{
            //调用Ajax函数,向服务器端发送查询
            Ajax(obj.value);
        }

}
//-->
</script>
</head>

db.php

<?php
    /*数据库连接*/

    $conn=mysql_connect("localhost","root","1234");
    mysql_query("SET NAMES UTF8");
    mysql_select_db("php_ajax",$conn);

    //设置页面编码
    header("Content-type:text/html;charset=UTF-8");

    //查询数据库
    if(isset($_GET["username"])){
        $strsql="SELECT * FROM member WHERE username='".unescape($_GET["username"])."'";
        $result=mysql_query($strsql);
        $rows=mysql_num_rows($result);
        mysql_close($conn);

        //判断是否有此记录
        if($rows){
            echo "Have been registed!";
        }else{
            echo "Not registed!";
        }
    }else{
        echo "other";
    }

    /*PHP的unescape转换函数,用来转换用escape函数加密过的字符
    --此函数需要iconv函数库支持*/

    function unescape($str) {
        $str = rawurldecode($str);
        preg_match_all("/%u.{4}|&#x.{4};|&#\d+;|&#\d+?|.+/U",$str,$r);
        $ar = $r[0];
        foreach($ar as $k=>$v) {
            if(substr($v,0,2) == "%u")
                $ar[$k] = iconv("UCS-2","UTF-8",pack("H4",substr($v,-4)));
            elseif(substr($v,0,3) == "&#x")
                $ar[$k] = iconv("UCS-2","UTF-8",pack("H4",substr($v,3,-1)));
            elseif(substr($v,0,2) == "&#") {
                $ar[$k] = iconv("UCS-2","UTF-8",pack("n",preg_replace("/[^\d]/","",$v)));
            }
        }
        return join("",$ar);
    }
?>

sql:

/*
SQLyog Enterprise - MySQL GUI v5.17
Host - 5.0.27-community-nt-log : Database - php_ajax
*********************************************************************
Server version : 5.0.27-community-nt-log
*/

SET NAMES utf8;

SET SQL_MODE='';

create database if not exists `php_ajax`;

USE `php_ajax`;

SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0;
SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO';

/*Table structure for table `member` */

DROP TABLE IF EXISTS `member`;

CREATE TABLE `member` (
`id` int(11) NOT NULL auto_increment,
`usernamemember` varchar(20) NOT NULL default '',
`pwd` varchar(50) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

/*Data for the table `member` */

insert into `member` (`id`,`usernamemember`,`pwd`) values (8,'admin','admin888'),(9,'sss','123');

SET SQL_MODE=@OLD_SQL_MODE;
SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS;

导入论坛引用链接收藏分享给好友管理举报

TAG: