jQuery无刷新聊天室一例[分析]

来源：互联网发布：基础编程学习编辑：程序博客网时间：2024/06/05 13:34

Wust_star说：

这是个很简单的聊天室，两个页面就搞定了，可以参考！毕竟我刚开始学Ajax;

还要要包含一个jquery.js文件，不然运行不出来。

我先说一下实现的整体思路，然后是详细的源代码----

首先客户端是两处Ajax请求---

(1)是发生在客户点击"发送"后的，把聊天信息提交到后台处理
(2)是没4s就自动请求一下后台，并看有没有新的内容，如有就更新聊天框

然后介绍一下后台，很简单，就不多说了.....

下面看下源代码吧，我都加了详细注释了--------

sql代码：

CREATE TABLE `messages` (  `id` int(7) NOT NULL auto_increment,  `user` varchar(255) NOT NULL,  `msg` text NOT NULL,  `time` int(9) NOT NULL,  PRIMARY KEY  (`id`));

index代码：

<html><head>    <title>AJAX with jQuery Example</title>    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">        $(document).ready(function(){            timestamp = 0;            updateMsg();            $("form#chatform").submit(function(){                $.post("backend.php",{                               //jQuery的post函数，是不是使AJAX变得如此简单了？？                            message: $("#msg").val(),                            name: $("#author").val(),                            action: "postmsg",                            time: timestamp                        }, function(xml) {                    $("#msg").attr("value","");     //清空信息框                    addMessages(xml);                });                return false;            });        });        function addMessages(xml) {            if($("status",xml).text() == "2") return;            timestamp = $("time",xml).text();       //当返回信息后，设置时间戳，请求的时候带着这个时间戳请求                                        //这样通过服务器端的比较可以知道是否需要更新聊天框！            $("message",xml).each(function(id) {                message = $("message",xml).get(id);                $("#messagewindow").prepend("<b>"+$("author",message).text()+                                            "</b>: "+$("text",message).text()+                                            "<br />");            });        }        function updateMsg() {             //   alert(timestamp);            $.post("backend.php",{ time: timestamp }, function(xml) {                $("#loading").remove();            //取出load                addMessages(xml);                  //在聊天框中增加聊天记录            });            setTimeout('updateMsg()', 4000);      //在没有提交的情况下，是自动4s查询一下，如果有新的就更新聊天框        }    </script>    <style type="text/css">        #messagewindow {}{            height: 500px;            border: 1px solid;            padding: 5px;            overflow: auto;        }        #wrapper {}{            margin: 35px auto;            width: 438px;        }    </style></head><body>    <div  align="center">    <div id="wrapper" align="left">    <p id="messagewindow"><span id="loading">Loading</span></p>    <form id="chatform">    姓名:    <input type="text" id="author" size="6" />    信息: <input type="text" id="msg" size="30" />    <input type="submit" value="发送" /><br />    </form>    </ div></div></body></html>

backend.php

<?php// Configuration$dbhost = "localhost";$dbuser = "root";$dbpass = "7897896";$dbname = "jqchat";$store_num = 10;$display_num = 10;// Scripterror_reporting(E_ALL);       //开启PHP的错误和警告检测，关闭用error_reporting(0);header("Content-type: text/xml");    //因为是输出xml格式header("Cache-Control: no-cache");   //为了防止IE缓存，经测试，这句的确不能少！！$dbconn = mysql_connect($dbhost,$dbuser,$dbpass);mysql_select_db($dbname,$dbconn);foreach($_POST as $key => $value){    $$key = mysql_real_escape_string($value, $dbconn);    //明白了！！！---$($key)----$key依次遍历为anction,所以就得到了下面的$action    //注意：mysql_real_escape_string — 转义 SQL 语句中使用的字符串中的特殊字符，并考虑到连接的当前字符集    //看个例子就明白了：    //$item = "Zak's and Derick's Laptop";    // $escaped_item = mysql_real_escape_string($item);    //printf ("Escaped string: %s\n", $escaped_item);    //----输出：Escaped string: Zak\'s and Derick\'s Laptop    //另外:mysql_escape_string------>和 mysql_real_escape_string() 完全一样，除了 mysql_real_escape_string() 接受的是//一个连接句柄并根据当前字符集转移字符串之外}if(@$action == "postmsg")         //index中有两处ajax的地方，其中之一是-----提交按钮，然后提交到这里{    mysql_query("INSERT INTO messages (`user`,`msg`,`time`)                VALUES ('$name','$message',".time().")",$dbconn);   //插入新的    mysql_query("DELETE FROM messages WHERE id <= ".                (mysql_insert_id($dbconn)-$store_num),$dbconn);   //删除10条的那些}//不管是哪个ajax请求，都会执行下面这个！---注意其中的time>$time,是指比起已经发回客户端的信息新增的数据$messages = mysql_query("SELECT user,msg                         FROM messages                         WHERE time>$time                         ORDER BY id ASC                         LIMIT $display_num",$dbconn);if(mysql_num_rows($messages) == 0) $status_code = 2;  //如果没有一条新增的(包括自己和别人的)也没有                                                      //那就标记一下，返回客户端后就不更新聊天框了else $status_code = 1;echo "<?xml version=\"1.0\"?>\n";echo "<response>\n";echo "\t<status>$status_code</status>\n";echo "\t<time>".time()."</time>\n";if($status_code == 1){    while($message = mysql_fetch_array($messages))    {        $message['msg'] = htmlspecialchars(stripslashes($message['msg']));        //（1）stripslashes()可去掉字符串中的反斜线字符。若是连续二个反斜线，则去掉一个，留下一个。        //若只有一个反斜线，就直接去掉。(即：将用addslashes()函数处理后的字符串返回原样。)        //（2）htmlspecialchar---->将特殊字符转成 HTML 的字符串格式 ( &.; )。最常用到的场合可能就是处理客户留言的留言版了。        //& (和) 转成 &        //" (双引号) 转成 "        //< (小于) 转成 <        //> (大于) 转成 >        //此函数只转换上面的特殊字符，并不会全部转换成 HTML 所定的 ASCII 转换。        //这样之后，输入<a href=#><font color=red>ggsdg</font></a> 就直接输出原样了，而返回到客户端就可以看到效// 果了        echo "\t<message>\n";        echo "\t\t<author>$message[user]</author>\n";        echo "\t\t<text>$message[msg]</text>\n";        echo "\t</message>\n";    }}echo "</response>";?>