AJAX+PHP

选择了远方,便只顾风雨兼程;目标是地平线,留给世界的是如风的背影!

 

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

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

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

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

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

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

sql代码:

CREATE TABLE `messages` (
  `id` 
int(7NOT NULL auto_increment,
  `
uservarchar(255NOT NULL,
  `msg` 
text NOT NULL,
  `time` 
int(9NOT 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">
    
<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>
    
</

backend.php

<?php
// Configuration
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "7897896";
$dbname = "jqchat";
$store_num = 10;
$display_num = 10;

// Script
error_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 的字符串格式 ( &.; )。最常用到的场合可能就是处理客户留言的留言版了。
        //& (和) 转成 &amp;
        //" (双引号) 转成 &quot;
        //< (小于) 转成 &lt;
        //> (大于) 转成 &gt;
        //此函数只转换上面的特殊字符,并不会全部转换成 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>";
?>

posted on 2008-03-05 14:26 刘伟 阅读(7071) 评论(0)  编辑 收藏 引用 网摘 所属分类: jQueryPHP


只有注册用户登录后才能发表评论。
网站导航:

导航

统计

公告

严正申明:严禁任何营利性商业网站在未经作者授权同意情况下进行转载等侵权行为。

留言簿(1)

随笔分类

随笔档案

新闻档案

相册

css

搜索

积分与排名

最新评论