应用jQuery淡入或滚动效果Facebook喜欢的新闻源 - Applying jQuery Fade in or Scroll Effect to Facebook Like Newsfeed

我有一个使用PHP、MySQL和jQuery开发的新闻提要。新闻动态通过每5秒获取新内容来完成它的工作。然而，这是通过"刷新"完整的内容来完成的。我想只添加任何新的内容到新闻提要。我希望使用渐入或滚动效果(jQuery)来实现这一点。已经加载的项目应该留在提要上，而不是重新加载任何新内容。我该怎么做呢?

这是我的2页和代码。

feed.php

 <body >
    <script>
    window.setInterval(function(){
      refreshNews();
    }, 5000);
    </script>


    <div id="news"></div>

    <script>
        function refreshNews()
        {
            $("#news").fadeOut().load("ajax.php", function( response, status, xhr){
                if (status == "error"){
                }
                else
                {
                    $(this).fadeIn();
                }
            });
        }
    </script>
    </body>
    </html>

ajax.php

<?php require_once('../../Connections/f12_database_connect.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }
  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
mysql_select_db($database_f12_database_connect, $f12_database_connect);
$query_newsfeed_q = "SELECT * FROM newsfeed ORDER BY pk DESC";
$newsfeed_q = mysql_query($query_newsfeed_q, $f12_database_connect) or die(mysql_error());
$row_newsfeed_q = mysql_fetch_assoc($newsfeed_q);
$totalRows_newsfeed_q = mysql_num_rows($newsfeed_q);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<table border="1">
  <tr>
    <td>pk</td>
    <td>title</td>
    <td>content</td>
  </tr>
  <?php do { ?>
    <tr>
      <td><?php echo $row_newsfeed_q['pk']; ?></td>
      <td><?php echo $row_newsfeed_q['title']; ?></td>
      <td><?php echo $row_newsfeed_q['content']; ?></td>
    </tr>
    <?php } while ($row_newsfeed_q = mysql_fetch_assoc($newsfeed_q)); ?>
</table>
</body>
</html>
<?php
mysql_free_result($newsfeed_q);
?>

我不太确定您是如何设置的，但它似乎不正确:

创建一个只包含php代码的文件，该文件将返回一个json对象，该对象将包含最新的新闻;您将在客户端解析该对象。下面是这个php文件的响应的示例:

newsFeed.php

<php
     $array_with_news = array('news1' => array('pk' => 'pk1', 'title' => 'title1', 'content' => 'title2'), 'news2' => array('pk' => 'pk2', 'title' => 'title2', 'content' => 'content2'));
     echo json_encode($array_with_news);
?>

第二个文件将包含feed.php和ajax.php的其余部分。当您为更新的新闻执行ajax调用时，新创建的php文件将响应一个json对象，您将解析该对象并设置表的值及其最新内容。

index . php

<html>
<head>
<script type="text'javascript">
window.setInterval(function(){
  updateNews();
}, 5000);

function updateNews(){
 var scope = this;
 $.getJSON('newsFeed.php*', function(data) {
  //data will contain the news information
  $.each(data, function(index, value) {
   this.addNewsRow(value);
  });
 });
}
function addNewsRow(newsData){
 //this function will add html content 
 var pk = newsData.pk, title = newsData.title, content = newsData.content;
 $('#news').append(pk + ' ' + title + ' ' + content);
}
</script>
</head>
<body>
 <div id="news"></div>
</body>
</html>

我没有测试这个，但这是它应该如何工作的总体思路。index。php是用户所在的地方，每隔一段时间我们都会执行updateNews这个函数负责通过AJAX调用newsfeed。php。php负责查询数据库并使用包含所有新闻信息的json对象进行响应。一旦updateNews()从newsFeed.php获得响应，它将遍历JSON对象并将响应的内容添加到div中。

希望你明白。

您总是可以从停止滥用innerHTML开始。

相反，您应该从服务器发送JSON作为重播，然后手动为新项目"构建"DOM。为了方便起见，我建议除了关于新闻的数据外，还发送另一个参数:版本号。

数据流是这样的:

在闭包中没有可用的version号(第一次运行):
- 向ajax.php发送请求并接收JSON
- 提取version号保存在局部闭包
- 循环遍历所有数据项，并生成新闻提要(不使用innerHTML)

version

值为而非 undefined:
- 从ajax.php?version=XXXX请求数据并接收JSON:
  1. 如果JSON为空{}，则没有新的提要。什么都不做
  2. 如果JSON包含数据，则:
    - 你更新version到最新收到的服务器
    - 遍历所有数据并添加新闻源项

我就是这么做的