Dynamically get data from database using Ajax without a refresh interval

Question

I have been working with jquery/ajax requests. I have successfully got a ajax request which will retrieve data from a database, the problem is, that i'm constantly serving window.setInterval() to refresh this function every x amount of seconds.

How would I change this to keep the ajax request alive, so it updates the html content without having to serve multiple requests to my ajax script.

My code follows:

window.setInterval(function()
{
  $(function () 
  {
    $.ajax({                                      
        url: 'Ajax.php'+SearchTerm, dataType: 'json',  success: function(rows)        
        {
        $('#NumberOfVotes').empty();

            for (var i in rows)
            {
                var row = rows[i];          
                var QuestionID = row[0];
                var Votes = row[1];
                $('#NumberOfVotes')
                .append(Votes);
            } 
        } 
    });       
  });
}, 500);

setInterval is the right way to do this. If you want an asynchronous server you should try node.js. — soyuka
– soyuka, Commented Mar 14, 2013 at 14:37

David L · Accepted Answer · 2013-03-14 14:44:11Z

2

A lot of this depends on how your server would be able to update it's content dynamically. That said, what you are looking for is websockets. Websockets are designed to replace the long-polling paradigm.

EDIT: Since you use mainly php for your server technology, look at Ratchet. I've heard good things about it http://socketo.me/

Here is an excellent article on using websockets with HTML http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/

.NET has a great socket library in SignalR http://signalr.net/

There is a myriad of php documentation on sockets out there http://php.net/manual/en/book.sockets.php

edited Mar 14, 2013 at 14:44

answered Mar 14, 2013 at 14:37

David L

34.1k8 gold badges70 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Christofer Eliasson Over a year ago

A nice thing with SignalR is that it falls back to long-polling and similar techniques for older browsers that lack native support for web sockets.

David L Over a year ago

@ChristoferEliasson Yes, amongst other things. The SignalR library is so revolutionary that Scott Hansleman and company have now included it as part of a standard web library for .NET. It's incredibly powerful

user2146021 Over a year ago

Should have specified that I am mainly using PHP

David L Over a year ago

@user2146021 No worries. I've updated my answer with an excellent PHP websocket library that I've heard recommended quite often and retagged your question to make it a bit more clear.

Alexandre Bourdin Over a year ago

The main issue with websockets is that they are still not well supported by some browsers

|

Dimitri Kennedy · Accepted Answer · 2013-03-14 14:38:35Z

0

look into using web sockets - you could send the client a message anytime they need to go an look for new data - that way your not making any unnecessary requests. Try checking out pubnub -service is cheap and could handle everything you need.

answered Mar 14, 2013 at 14:38

Dimitri Kennedy

4083 silver badges8 bronze badges

Comments

karaxuna · Accepted Answer · 2013-03-14 14:42:50Z

0

You could set xhr.multipart = true and modify server code. see Multipart Responses Example Code. Alternative way is to use websockets as mentioned

answered Mar 14, 2013 at 14:42

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Comments

Alexandre Bourdin · Accepted Answer · 2013-03-14 15:09:32Z

0

You need something server side that keeps the request alive until it has something to return. This is usually called "Comet", "Long-polling" or "Push".

The principle is :

You send a request client-side via AJAX
Your server receives the request, and doesn't return a response yet. It sleeps/waits until it has something to return
A new entry in your database ! Your server now has something to return : it returns some JSON data for the waiting request
Your receive the response server side, display what you have to display, and go back to step 1 sending another request.

Now, the implementation server side will depend on the language/framework you are using.

Edit :

Some examples using PHP :

Comet and PHP

Simple Comet Implementation Using PHP and jQuery

edited Mar 14, 2013 at 15:09

answered Mar 14, 2013 at 14:39

Alexandre Bourdin

8351 gold badge14 silver badges31 bronze badges

1 Comment

Alexandre Bourdin Over a year ago

I edited my answer adding examples of PHP Comet implementations. Hope this helps :)

Collectives™ on Stack Overflow

Dynamically get data from database using Ajax without a refresh interval

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related