AJAX + div 动态显示后台数据

Question

先描述下背景：
1，我的后台是一个用C语言写的cgi，主要作用就是向前台的网页吐数据。
2，前台网页用的AJAX（从后台获得的数据通过一个div显示），并且设置xmlhttp.readyState==3，这样我可以做到，在cgi退出之前，只要后台向前台吐数据，前台的div就可以实时显示后台发来的数据，而不用等cgi退出后div才显示。我的问题是：现在虽然后台每吐一条数据，div就可显示一条，但是，随着后台数据不断吐过来，div的也在不断变大，直到cgi退出。
我想实现：cgi一直不退出，它一直向前台吐数据，但是div是个固定大小不能增大，当数据太多装不下的时候，把旧数据刷掉，载入新的数据。请各位高手帮忙，我不是写前台的，所以最好给一段代码，谢谢！

Answer 1

<div id ='divs'><table></table></div>
 我用Jquery  实现你的需求
function mydata(){
  $post("数据的页面",{},function(data){
     data=$.trim(data);
     eval("var str="+data);
//这里我限定是数据多余50条就删除；
if($("#divs")find("tr").length>50){
          $("#divs")find("table").html("");
                       }
      $("#divs")find("table").append("<tr><td>"+str+"</td></tr>");
});
 setTimeout("mydata()",1000);这里是设置没过1秒去取数据
}
mydata();

Answer 2

显示数据的div结构：<div id="ajaxData"><ul></ul></div>
你必须加载jquery才能运行以下代码
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>$.ajax({
    type: "get",
    cache: false,
    url: "输出数据的地址?参数1=1&参数2=2",
    beforeSend: function () {},
    success: function (data) {
        var o = $("#ajaxData");
        var temp="<li>"+data+"</li>";
        if(o.find("li").size()>50)//设置超过50条数据就清空
        {
            o.find("ul").innerHTML='';
        }
        o.find("ul").append(temp);
    },
    error: function (http) {alert('发生错误')},
    complete: function (http) {    }
});

Answer 3

如果，你的ajax方法已经存在了，不是用的jquery的话，在获取数据后：
显示数据的div原始结构：<div id="ajaxData"><ul></ul></div>var o = document.getElementById("ajaxData");
var temp="<li>你获取的数据</li>";
if(o.getElementsByTagName("li").length>50)
{
    o.getElementsByTagName("ul")[0].innerHTML='';
}
o.getElementsByTagName("ul")[0].innerHTML+=temp;