jQuery aJax技术以及PHP实现简单聊天室

最近学习了jQuery，主要包括jQuery库的使用和jQuery操作DOM、jQuery动画、事件，aJax等等，后面实现了一个简单聊天室，后面一步步介绍。推荐大家两本书《锋利的jQuery》和《jQuery权威指南》，前面一本挺适合初学者，挺容易理解的。

环境搭建

首先是服务器的搭建，这里采用的是集Apache，PHP，MySQL于一体的工具包AppServ。首先下载AppServ，AppServ下载地址
AppServ的安装也很简单，一直点”Next”按钮，输入网址，电子邮箱，密码等信息就可以，这个密码要记着，是后面连接数据库的时候需要用到的。默认端口为80，本次我将端口设为8080.

后面所有的网页都放在AppServ/www文件夹下，就可以通过localhost:8080/来访问。

至于数据库的访问，必须要保证访问时数据库打开着，数据库的地址是：http://localhost:8080/phpmyadmin。登录名为root，密码为之前安装配置AppServ时设置的密码。这个数据库管理工具还是比较方便的，有界面，为了方便快捷可以手动创建table，也可以删除Table中的项。

简易聊天室的功能

• 注册：
  页面中由一系列表单元素组成，失去焦点时进行表单验证；
  点击注册按钮，表单验证通过时，判断该用户是否已经注册？若已注册，弹出框提示用户已注册。否则，注册成功并将注册信息保存起来。
  放上实现界面感受下：
  
• 登录：
  主要功能有：判断用户是否已注册？
  判断用户密码是否正确？
  判断该用户是否已经登录？
  
• 聊天主页面
  这是聊天主要逻辑所在。
  功能：
  左边区域显示所有人发出的消息，最多显示最近的9条（由于div高度的限制）；
  右边区域显示都有谁在线；
  底下输入框可以输入消息，点击发送就发送到每个用户，类似于群聊的功能；
  当页面关闭或者刷新时，将在线列表里将不存在该用户。

界面做的比较粗，希望大家不要嫌弃* _ *

整体的页面逻辑可以看看下图：

实现

拿每个页面来说吧

• 注册（register.html）

HTML部分：

<div id="box">    <div class="item" id="first">        <label for="usr">昵称:</label>        <input type="text" name = "usr" id="uname" />        <span id="info1"></span>    </div>    <div class="item" id="two">        <label for="pwd">设置密码:</label>        <input type="password" name="pwd" id="pass" />        <span id="info2"></span>    </div>    <div class="item" id="three">        <label for="pwd_again">确认密码:</label>        <input type="password" name="pwd_again" id="pass1" />        <span id="info3"></span>    </div>    <input id="btn" type="button" value="注册" /></div>

利用jQuery库的JS部分：

$(function(){    var flag = 0;    //文本框的验证；确认密码的验证；以及点击注册之后的操作    $("#uname").blur(function(){    //用户名只能为数字且长度不少于4；不大于10;    /*alert($(this).val());*/    if(!/^\d*$/.test($(this).val()) || $(this).val().length < 4 || $(this).val().length > 10)    {        $("#info1").text('帐号不符合要求').css('color','rgba(200,10,10,0.8)');        flag = 1;    }    else    {        $('#info1').text('帐号合法').css('color','rgba(10,200,10,0.8)');        flag = 0;    }    /*alert($(this).val().length);*/    });    $("#pass").blur(function(){        if($(this).val().length < 6 || $(this).val().length > 12)        {            $("#info2").text("密码长度在6-10之间").css('color','rgba(200,10,10,0.8)');            flag = 1;        }        else        {            $("#info2").text("密码长度符合要求").css('color','rgba(10,200,10,0.8)');            flag = 0;        }    });    $("#pass1").blur(function(){        if($(this).val() != "" &&  $(this).val() == $("#pass").val())        {            $("#info3").text("密码确认一致").css('color','rgba(10,200,10,0.8)');            flag = 0;        }        else        {            $("#info3").text("请重新确认密码").css('color','rgba(200,10,10,0.8)');            flag = 1;        }    });    $("#btn").click(function(){        if(flag == 1)  //说明表单有错        {            return false;        }        else        {            //去请求另一个php页面，用于将本次输入的用户名和密码存入数据库的Register表中;            /*alert($("#pass").val());*/            $.post('register.php', {usrname: $("#uname").val(), password: $("#pass").val()}, function(data, textStatus){            alert(data);         //这里的data就是php页面返回的数据            console.log(data);            })        }    });})

当然，表单的验证还可以用jQuery 表单验证插件来实现，非常简单便捷，这里先不对这部分进行总结。

这里利用了jQuery中aJax有关方法post()方法，这是一个全局方法，利用post请求页面，数据可以作为参数传进去，并且还有一个可选的回调函数。这里请求的页面是php文件，我是在实现聊天室这个功能时候边做边学的PHP，主要是对于数据库的操作。为了把这个过程讲清楚，贴下面一段代码：

<?php    $usr = $_POST['usrname'];    $pwd = $_POST['password'];    //连接服务器数据库    $sql_con = mysql_connect('localhost', 'root', 'hellen123');    if(!$sql_con)    {        die("Can not connect to localhost database");    }    /*echo $sql_con;*/    //选择要连接的数据库    $con_mysql = mysql_select_db('mysql');    /*echo $con_mysql;*/    if(!$con_mysql)    {        die("Can not connect to the database selected");    }    //连接上数据库之后，将用户名和密码存入数据库中的Register表；若Register表存在，直接将数据插入即可；若Register表不存在，先创建表Register，再插入数据    $res = mysql_list_tables("mysql");  //得到数据库中所有的Table    $i = 0;    while($i < mysql_num_rows($res))  //对每一行进行遍历，判断每一行中的table名是否为regiter    {        if('register' != mysql_tablename($res, $i))        {            $i++;        }        else        {            echo "数据库表存在";            //表Register已经存在，所以将数据插入表Register就行            //先判断表中是否存在usr，如果存在，就提示用户名已经存在，若不存在，就将该用户名和密码插入到表中            $mysql1 = "select * from register where usr = '" . "$usr'";            $res = mysql_query($mysql1);            /*$flag = 0;*/            while($row = mysql_fetch_array($res))   //取register表中的每一项,判断每一项中的usr是否等于当前注册的用户名            {                if($row['usr'] == $usr)                {                    die('用户名已经存在');                    /*$flag = 1;                    break;*/                }            }            break;        }    }    if($i >= mysql_num_rows($res))    {        //register表不存在时创建Register表        $sql_table = "CREATE TABLE Register        (            usr varchar(15),            pwd varchar(15)        )";        mysql_query($sql_table);        $mysql2 = "insert into register (usr, pwd)        values ('$usr', '$pwd')";        mysql_query($mysql2);        /*mysql_query('create tables "Register"');*/    }    else    {        $mysql3 = "insert into register (usr, pwd)        values ('$usr', '$pwd')";        mysql_query($mysql3);    }?>

我想提醒大家的一点是：不管进行什么数据库操作，首先要把数据库操作语句保存到一个变量中，然后调用mysql_query()去执行，才能产生想要的效果。

• 登录(login.html)
  上代码：

$(".first").focus(function(){    if($(this).val() == "帐号/手机/邮箱" || $(this).val() == "密码")    {         $(this).val("");    }});$(".first").blur(function(){    if($(this).attr('id') == 'password')    {        if($(this).val() == "")        {            $(this).val("密码");        }    }    else{        if($(this).val() == "")        {            $(this).val("帐号/手机/邮箱");        }        else        {            //涉及到表单验证;即判断是否为数字            var reg = /\d+/;            if(!reg.test($(this).val()))            {                alert("格式错误！");            }        }    }});$("#Login").click(function(){    /*if($(".first").val() == "")    {        alert("请核对登录信息");    }*/    if($("#num").val() == "帐号/手机/邮箱" || $("#password").val() == "密码")    {        alert("请输入用户名和密码！");    }    else{        $.get('login.php', {num: $("#num").val(), pass: $("#password").val()}, function(data,textStatus){            console.log(data);            if(data == '登录成功')            {                $.ajax({                    url : 'ChatMain.html',                    type: 'get',                    success : function(response){                        $("#Box").hide();                        /*console.log(response);*/                        $("#g").append($(response));                     }                });            }            else            {                $("#num").val("");                $("#password").val("");                alert(data);            }        });    }});

这部分主要是验证输入的用户名和密码是否与数据库中保存的一致，如果一致，请求聊天主界面，并将其载入到当前页面中。

• 聊天主界面
  这块的逻辑比较复杂，因为不仅要将发送的消息发送后显示在聊天历史记录里，还要保证其他用户能收到这条消息，同时每次有新用户登录之后，在线列表中会动态更新。而Apache和PHP的混搭主要还是依靠HTTP协议来实现通信，这就表示每次只能是客户端发起请求。因此将当前用户发出的消息要发到其他用户界面的需求只能靠客户端经过一段时间去轮询服务器，即每隔一段时间去访问服务器的数据，并将数据返回给客户端。

setInterval( function(){    $.ajax({        url: 'LoginUsr.php',        type: 'get',        success: function(data){  //注意返回数据的格式        //console.log( typeof data);        var res = JSON.parse(data);        /*console.log(res);*/        var text = "";        for(var i = 0; i < res.length; i++)        {            text += res[i] + "<br>";        }        /*console.log(text);*/        $("#onLinePanel").html("在线用户"+ "<br>" + text);                             }    });}, 2000);      //每隔2s访问服务器，将所有在线用户显示出来setInterval(function(){ //每隔2s访问服务器，将所有发送的最近9条消息显示出来    $.ajax({        url: 'usrMess.php',        type: 'get',        async: true,        success : function(response){        //将返回的所有消息表现在chatContent中        /*console.log(typeof response);*/        var res = JSON.parse(response);        var text = "";        console.log(res.length);        //最多只显示之前发的9条消息        if(res.length <= 9)        {            i = 0;        }        else        {            i = res.length - 9;        }        for(; i < res.length; i++)        {            var res_json = JSON.parse(res[i]);            /*console.log(JSON.parse(res[i]));*/            /*console.log(typeof res_json); */    //数据处理：如何把PHP返回的字符串数组变成JSON对象            console.log(JSON.parse(res_json).usrname);            console.log(decodeURIComponent(JSON.parse(res_json).content));            text += "<p>";            text += JSON.parse(res_json).usrname + ":</p>";            text += "<p id='indexp'>" + decodeURIComponent(JSON.parse(res_json).content) +"</p>";            /*console.log(text);*/        }        $("#chatContent").html(text);        }    });}, 2000);

在这个过程遇到的最大的问题就是返回的数据格式问题，Php返回的是字符串，所以客户端接收到之后要将其进行转换。这个过程中可以加一些打印信息，将中间数据输出出来，可能更明显一些。还有想说一点是：引入库并且利用了后端语言之后，调试起来不太好调试，因此可以输出一些辅助信息来验证代码的逻辑性。
上面主要功能已经实现。
最后，还有一点需要注意：页面每次刷新或者关闭之后，那么表示当前用户已经下线，因此要将数据库中存的已登录用户删除掉。在JS中有一个window.onunload事件，这个事件监听页面关闭或者刷新时，可以做一些操作，但经过我的尝试，发现这个事件的处理函数中并不会响应alert()，aJax()等操作。同时，考虑了刷新时也会触发window.onbeforeunload事件，因此，主要利用这个事件处理函数来删除已登录的用户。

这样一个简易的聊天室就形成了，如果想看源码，可以访问我的GitHub。