0

I'm creating a little web application and I would like to update the newest data on a field from SQL database on server WITHOUT refreshing the whole page. Is this possible and if yes, how can I do that?

I think I could use jQuery to refresh the whole page from time to time, but I don't think that's very wise, especially on heavier sites, because that would cause a lot of traffic. Instead I would like to update just couple fields with the newest data from the database.

var refresh = function() {
   location.reload(true);
}

$(document).ready(function() {
   setTimeout(refresh, 10000);
});

That's pretty much all I've got so far.

I found another similar question and there people suggested using XMLHttpRequest. Is it possible to use that to get some data from SQL database?

Also when trying to figure out that possible XMLHttpRequest solution, I found out that it could be possible to convert that XMLHtppRequest to SQL query by using some .ASP file, but as much as I understood the whole procedure that would require some Microsoft server framework and anyway it seemed to be quite rough and hard way to go when compared to the size and purpose of the whole application I'm programming. Especially when my whole site is running on Linux.

Moreover, I've read quite a lot about websockets and observer pattern. In theory the sound great and exactly what I need, but well, I'm quite new with these things and I wouldn't like to go that way yet, if I can avoid that. But if there's some easy way to do it and someone could show me a good tutorial about it, I'd be happy as well.

But at the moment I'm primarily looking for a way to do that "good old polling" no matter how ineffective it is. I think it still is a way better than to reload the whole page.

All kind of advice is highly appreciated.

zaplec
  • 1,681
  • 4
  • 23
  • 51

2 Answers2

1

I think you're over-thinking the issue. This is a solved problem and almost all websites use it today: use AJAX. JQuery has a builtin ajax feature that makes sending ajax requests very easy.

On the server side, create an url endpoint. Ideally you will have unique endpoints for each resource that you store in your database. For example:

http://mywebsite.com/book/?uid=124234

This url would theoretically provide a CRUD interface for the book with ID 124234. You can update this object by issuing a POST request. Or you can get all of its data by issuing a GET request.

I hope this helps.

systemizer
  • 355
  • 2
  • 6
  • I'm not sure if I really understood, especially the server side. I want to use AJAX, but I don't really know how to do that query with it. Do I need to create a unique endpoint for each item in the database? And how to do that as the database is updated independently from the website. The website is only reading it. Also does those endpoints mean that the URL of the site would change somehow? Everything should happen on the same site as the actual page is ie. on mywebsite.com. So far I've done only static web pages and just couple days ago started to experiment with these kinds of things. – zaplec Sep 18 '12 at 08:07
  • You need some kind of application server in between your database that will handle the logic of updating the resource. You shouldn't have to write queries as many frameworks already have that built in (RoR, Django, Node, CodeIgnighter, etc). Choose one with which you feel most comfortable and create an endpoint. Then, apply the updating logic at that endpoint. So for example: /book/?uid=125234. First, find book with id 125234. Then return info of that resource in http response. Done. – systemizer Sep 20 '12 at 16:02
0

If you are making use of Django for your framework, then I would suggest looking at django-socketio

Reinbach
  • 761
  • 4
  • 7