[ Use jquery to retrieve a lot of data ]

Hey guys I created this chat system that used to work fine till number of messages increased (over 300 messages and i want it to take up to 1000)started to cause slow script and takes time to retrieve all data. The idea depends on selecting the data XML style and then add it to a specific tab and repeat the act with setTimeout,is there any other way i can do i really need ideas and here is my code.

 function updateMessage()
 {
  $.post("db.php",
  {MsgNo :$("#no_of_msgs").val()},
  function(data)
 {
   $(data).find("message").each(function() {
   var msg_id = $(this).find("msg_id").text();
   var date_time = $(this).find("date_time").text();
   var from_user = $(this).find("from_user").text();
   var from_user_id = $(this).find("from_user_id").text();
   var from_group = $(this).find("from_group").text();
   var to_user = $(this).find("to_user").text();
   var to_user_id = $(this).find("to_user_id").text();
   var to_group = $(this).find("to_group").text();
   var msg_type = $(this).find("msg_type").text();
   var msg = $(this).find("msg").text();
   var from_grp_abr = $(this).find("from_grp_abr").text();
   var to_grp_abr = $(this).find("to_grp_abr").text();
   var flagged = $(this).find("flagged").text();
   var onlydate = getonlydate(date_time);
   $("#no_of_msgs").val(msg_id);


   if (from_group == $("#login").val())
{
 var reply = '';
}
else {var reply = 'reply';}

   if(from_user == "")
   {
    var handle_reply = from_grp_abr;
   }
   else 
   {
    var handle_reply = from_user;
   }

   var html = "<tr id='row_"+msg_id+"'>";
   html += "<td><a class='bullet' onclick='changeStatus(\""+msg_id+"\")'> <\/a><\/td>";
   html += "<td><a class='"+reply+"' onclick=\"reply('"+escape(handle_reply)+"','"+escape(to_user)+"',"+from_user_id+","+to_user_id+");\">  <\/a><\/td>";
    html += "<td class='time'>"+date_time+"<\/td>";
     html += "<td>"+from_user+" ["+from_grp_abr+"]"+"<\/td>";
     html += "<td>"+to_user+" ["+to_grp_abr+"]"+"<\/td>";
     html += "<td><a href='#' class="+msg_type+"><\/a><\/td>";
html += "<td><a id='flag_"+msg_id+"' class='"+class_flag+"' onclick='flagMsg("+msg_id+")'>  <\/a><\/td>";
         html += "<td>"+msg+"<\/td>";
         html += "<td>"+from_grp_abr+"<\/td><\/tr>";

           $('#no_of_msgs').val(msg_id);

  $("#tbody1").prepend(html);
updatetabledata('t1');
alternateRows('t1');
 //append data to tab2 messages received
    if (to_group == $("#login").val())
    {
         $("#tbody2").prepend(html);
         updatetabledata('t2');
         alternateRows('t2');
      }
   //append data to tab3 sent messages
else if (from_group == $("#login").val())
   {
   $("#tbody3").prepend(html);
   updatetabledata('t3');
   alternateRows('t3');
  }

   if(from_group != $("#login").val())
  {
   $("#tbody"+from_group).prepend(html);
   updatetabledata('t'+from_group);
   alternateRows('t'+from_group);
  }
   if(to_group != $("#login").val())
  {
   $("#tbody"+to_group).prepend(html);
   updatetabledata('t'+to_group);
   alternateRows('t'+to_group);    
  }
    });
 });
   setTimeout('updateMessage()',3000); 
 }

I am thinking the problem is for using each() and then distributing the data over several tabs at same time any ideas.

Answer 1

The server should only respond with messages that are new since the last time it was polled by a particular client. Similarly, the initial download of messages could be broken up into batches of X messages. As you have a message ID field already, the easiest way would be for clients to send the server the message ID of the most recent message you have when polling for data, that way you don't have to keep track of clients individually on the server side.