如何在MySQL中插入Ajax代码来获取新行？

Question

I have a simple chat service. I store messages, login and time etc. in Mysql database. The chat messages are displayed below with the help of Ajax & PHP

<div id="messages"> </div><!--- chats are displayed here -->

I have following Ajax code which fetches datas from Mysql in every 2 seconds. Ofcourse, everyone recommends not to do this way. It might effect server performances negatively. And its unnecessary.

$(document).ready( function() {

     var destination_hashed = $("#destination_hashed").val();

     var interval = setInterval( function() {

            $.ajax ({
                     type: "POST",
                     url: "chat.php",
                     data: { destination_hashed1: destination_hashed },

                     success: function(data) {
                            $("#messages").html(data);
                     }
             });
     }, 2000);
});

In nutshell, I have two chat clients A & B. When A sends message to B, there are new rows inserted in Mysql.

So, how can I write Ajax & PHP code to fetch only when there are new rows. Rather than fetching data from Mysql every 2 seconds whether new rows inserted or not

Answer 1

Recently I have worked on a chat module of this kind and I can say some correction in you code

First of all don't use setInterval in the way you are using ,

Why

because in your particular code the request is send to the server every 2 second , so if the network is slow your code will have the tendency to send to much request to the server and coordination between those request would be difficult.

So what you do is

function getNewMessage(){

            $.ajax ({
                     type: "POST",
                     url: "chat.php",
                     data: { destination_hashed1: destination_hashed },

                     success: function(data) {
                            $("#messages").html(data);
                     },
                     complete : function(){  // this will be called even if our request fail, success etc
                         setTimeout(function(){   // send request after 2 second from the complition of the previous request
                             getNewMessage();       
                         },2000);
                     }
             });

}

There are two approach in parsing the chat result from the ajax call

a) get the html from the ajax call (this would be slow and inefficient in case you want to extend your module in the future)

You can simpley get the html content from the ajax call on succes parameter you can append that to the table

 For example : -

   if the response from the server on new message is 

     <div class="chat"> 
       <lable>John</lable>
         Hi there !!!
    </div>

Then parsing the content will be something like this

             success: function(data) {
                    // $("#messages").html(data);   //this will change the content in every request
                    $("#messages").append(data);   // this will append the new conent
             },

b) Well the other approch would be to get data in json format(a lot better approch )

For example : -

   if the response from the server on new message is 

     { 
       username : 'john',
       message  : 'Hi there !!!'
     }

Then parsing the content will be something like this

             success: function(data) {
                    // $("#messages").html(data);  this will change the content in every request
                    $("#messages").append('<div class="chat">'+
                                            '<lable>'+data.username+'</lable>'+
                                              data.message +
                                          '</div>');    this will append the new conent
             },