PHP&JavaScript控制系列：客户端数据存储

来源：互联网发布：淘宝主播招聘网编辑：程序博客网时间：2024/04/28 04:22

---摘自《PHP学习记录》(文/Luis Argerich, Alejandro Mitrou)
　　所有程序员都喜欢做的一件事就是编写一个可以生成程序的程序。在web 上，我们面临两种不同的开发
环境：客户端（浏览器）和服务端。根据HTTP协议的定义，就可以在服务端编写一个程序，这个程序输出一
个使用了另一种可以在客户端执行的语言的程序。让我们选择PHP（当然的了）编写服务端程序，选择JavaScript来编写客户端程序。在这篇文章中，要向你演示如何通过这种组合在客户端存储数据并且使得服
务器与浏览器之间的数据交换达到最少，以用在一些交互的应用中，如聊天室、新闻系统或你想得到的什么
东西。

要素：

PHP4
JavaScript
Frames

想法：
　　我们将暂时试着开发一个用PHP 编写的HTTP聊天室程序。对于聊天来说，HTTP不是一个很好的协议，但
是它对防火墙和代理服务器有免疫力，我们可以允分发挥PHP的潜力，并且不需要Java Applet。对于聊天室
程序有两个主要的问题：第一个就是，IE不支持“推”的方法，这样就需要把它做成一个全“拉”的应用程
序（指客户端自动刷新），这一点对于一个聊天程序不是很自然。我们打算让客户端的刷新时间是可调的，
服务器将根据前x 分钟内一个位于服务器的用于接收消息数据的函数结果生成刷新时间。第二个问题要难解
决一些：因为采用自动刷新的方法，这样每一次服务器都需要将所有的信息发给客户端，我们估计会造成大
量的传输。并且我们所做的一个模拟简单的聊天室模型的样板程序也显示这就是造成聊天延时的主要原因。
本文处理了第二个问题和更深的问题。

普通模型：
　　通过使用帧，可以刷新一个特定的帧而不需要重新装入其它帧，这个对于最少化c/s 传输很有用。我们
的模型基于下面的设计：

主文件，用来定义帧结构。
装入帧文件。
显示帧文件。
　　在我们的设计中，装入帧每“x” 秒自动刷新，想法是将数据保存在主文件中，允许装入帧文件向服务
器请求客户端还未收到的数据。我们使用时间戳来标记消息，新闻或可传输的东西，并且通过它可以知道哪
一个需要传给客户端，哪一个不需要。我们使用PHP4的session 功能将“最后的时间戳”保存在客户端以便
在服务器它也是可见的。当装入帧文件接收到数据时，数据被保存在主文件里（注意，主文件可能很大，但
是它只传输一次），然后让显示帧文件刷新。为了进一步优化，我们让显示帧文件尽可能的短，在这帧里，
只是调用一个“display”的JavaScript 函数，这个函数明显被保存在主文件中，这个函数使用保存在主文
件中的数据来动态绘制显示帧。让我们看一下这个方法：

浏览器请求主文件（帧结构）
主文件从服务器被传输过来，它定义了帧结构，然后其它的帧（装入帧和显示帧）被传输。
装入帧文件在服务器被分析，如果客户端没有“timestamp”session 变量，它就将所有的数据从服务
器上取回，并且生成JavaScript代码将数据存在主文件中。然后设置“timestamp”session变量。
然后装入帧文件生成JavaScript代码使客户端刷新显示帧文件。
这个刷新引起显示帧文件调用“display”函数，这个函数根据数据生成显示帧。
每“x”秒我们回到(2)
我们对这个方法的分析如下：

我们要三个文件：

主文件 (很大，包含显示代码和保存的变量和初始值)
装入帧文件 (小，包含PHP代码，用于从服务器取回数据和生成JavaScript代码)
显示帧文件 (非常小，只有一个对主文件中的显示函数的调用)

主文件只被传输一次。
装入帧文件和显示帧文件每“x”秒被传输一次。
装入帧文件可能在第一次被调时大一些，然后因为每次只取回客户端未取过的数据，它就变得很短了。
显示帧文件也是一样。
由于显示结果是在客户端被处理的，我们就减少了服务器数据的装入。

糊涂了吗？还是让我们看一看例子吧：

　　在这个例子里，我们建了一个聊天室，它还不能真正使用，只是用来演示如何实现我们的模型，请不要
提出“为什么不在聊天室里加上这个或加上那个功能”之类的要求。如果发现这个模型有用，你可以利用它
建立一个满足你的要求的足够复杂的聊天室来，同时请记住，它不只是能够用来建聊天室。

行动！
　　请使用mysql创建一个测试数据库（mysqladmin create testbase），然后创建一个表：

--------------------------------------------------------------------------------
create table testeable (
    timestamp datetime,
    message   text
);
--------------------------------------------------------------------------------
　　这是主文件：

--------------------------------------------------------------------------------<script>
    lines=new Array();
    function displaymsgs() {
        for(i=0;i<lines.length;i++) {
            display.document.write(lines[i]);
            display.document.write('<BR>');
        }
    }
</script>
<frameset cols="1" rows="20,60,20" border="0">
    <frame name="loader" src="loader.PHP">
    <frame name="display" src="display.PHP">
    <frame name="form" src="form.PHP">
</frameset>
--------------------------------------------------------------------------------
　　注意，我们有了装入帧，显示帧和一个名叫“form”的新的帧，这是我们用来向聊天室发送数据的表单。
注意一下简单的“display”函数，在这里你可以根据你的想法使用颜色、动态颜色、用户信息，html表格，
图像，等等。

　　显示帧文件为：

--------------------------------------------------------------------------------
<script>
    top.displaymsgs();
</script>
--------------------------------------------------------------------------------
　　我们保证过的，它会很短的 :-)

　　接下来就是装入帧文件：

--------------------------------------------------------------------------------
<?PHP

session_start();
// 在这儿我们使用了session
if(!isset($timestamp)) {
    //如果没有timestamp(时间戳)我们把它定义为0
    $timestamp=0;
}
$dab=mysql_connect("localhost", "user", "password");
// 在这里使用你自已的值mysql_select_db( "testbase",$dab);

// 查询信息不会被客户端看见$query= "select * from testeable where timestamp>'$timestamp'";
$result=mysql_query($query,$dab);
$msgs=array();

// 在循环中，我们将对话信息存在一个数组中，并且得到最大的时间戳while($res=mysql_fetch_array($result)) {
    $msgs[]=$res[ "message"];

    if($res["timestamp"]>$timestamp) {
        $timestamp=$res["timestamp"];     }
}
session_register( "timestamp");
// 注册时间戳
echo  '<script>';
// 在这个循环中，我们生成JavaScript代码用来向主文件（注意使用＂top＂来指// 向代表主文件的父帧）中的数组增加对话信息
    for($i=0;$i<$count($msgs);$i++) {

?>
    top.lines[top.lines.length]="<?PHP print("$msgs[$i]"); ?>";
    <?PHP
}
// 现在我们将生成JS代码来使显示帧重新装入
?>
top.display.location.reload();
</script>
 <body onLoad="window.setInterval('location.reload()',4000);">

</body>--------------------------------------------------------------------------------
　　Ok, 然后是用于测试目的“form”帧：

--------------------------------------------------------------------------------
<?PHP

session_start();
if (!isset($timestamp)) {
  $timestamp=0;
}
// 显示表单，使用JavaScript来得到最后的时间戳
if (isset($msg)) {

  $dab=mysql_connect("localhost", "root", "seldon");
    mysql_select_db("testbase",$dab);

$query= "insert into testeable(timestamp,message) values(now(),'$msg')";
    mysql_query($query,$dab);
    // 现在得到在last_time之后的所有聊天对话
    $query= "select * from testeable where timestamp>'$tt'";
    $result=mysql_query($query,$dab);
    $msgs=array();$i=0;$timestamp=0;
    while($res=mysql_fetch_array($result)) {
      $msgs[]=$res["message"];
      if($res["timestamp"]>$timestamp) {
        $tt=$res["timestamp"];
      }
    }
    session_register("timestamp");
    // 现在我有了最大的时间戳，使用JavaScript，我们可以设置这些值        ?>
<script>
<?PHP
for($i=0;$i<$count($msgs);$i++) {
?>
    top.lines[top.lines.length]="<?print("$msgs[$i]");?>";
<?PHP
  }
?>
    top.display.location.reload();

</script>
<?PHP
}
?>
<form name="foo" action=" <?PHP print("$PHP_SELF"); ?>" method="post">
Message:<input type="text" name="msg">   <input type="submit" name="newmsg" value="send">
</form>--------------------------------------------------------------------------------
　　注意，我们根据＂form＂帧来刷新显示，这对用户很好，因为一旦他提交了他的信息就会被马上看见。
用户喜欢这样，因为它在聊天室中增加了一些动态机制。你也看到了，form帧与装入帧非常象。

　　我们向你展示了一个极为有用的技术，它通过将数据保存在客户端从而减少了c/s间的传输量，并且在
客户执行一个复杂的显示操作时减少了从服务器的信息装入。现在你有了能力，去征服世界吧！ <script type="text/javascript"></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>