What's the best way to constantly receive updates for few <div>'s without refreshing web page?
Is the Server sent events best option?
Websockets (push technology) is your answer. Repeated ajax calls will result in a lot of unnecessary requests. Have a look at this question.
If you are just trying to refresh the contents of a DIV once in a while without reloading the entire page, I highly recommend just using a JavaScript framework called JQuery. It has very easy-to-write code, and it's very simple to set a timer and reload a div at a certain interval - or on a click.
jQuery
All you need to do is include the script tag
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
in your document, and JavaScript can then use all sorts of AJAX shorthand and DIV loading code, such as $("#divID").load("http://somesite.com/new/content/for/div");
If you only need to get a couple updates, old school ajax short polling is probably fine. If you need to maintain a constant connection that updates at random intervals, you'll need a more robust option, to which there's a lot.
socket.io, nodejs, faye, comet, websockets, etc. Depends on the compatibility level you want with browsers and your exact needs.
EDIT: Just to update a couple DIVs you're probably fine just doing a few AJAX requests.
Server Sent Events are not supported in all browsers.
Maybe take a look at websockets
Related
Isn't there a way where I can refresh the page right after a database new entry WITHOUT using Javascript setTimeout or setInterval?
Isn't there an AJAX function to do so? Or maybe a MySql function?
The only way is keep checking the database all the time?
Doesn't it spend too much of the server?
My page will work like a Messenger.
You need to understand that what happens on the server and what happens on the client are completely separated, and while the client has a straight-forward way to contact the server, the converse is not true. There's no way any MySQL function could possibly refresh the browser on the client machine.
So polling (with ajax or similar) is frequently how this is done. However, it's not the only way. There are various "Comet" techniques, and of course the new web sockets initiative.
I'd like to make a div's contents update as soon as a new row appears in a MySQL database (I'm making a webmail app). As I'm writing this, it's becoming more clear to me that I can't send some sort of server message to the client asking it to update, so I've come to the conclusion that the best way to have live updates is to use a jQuery ajax call, triggered by a setTimeOut event.
My question is: is there a better way to do this? Or if I have to use setTimeOut, what time interval should I set to keep the optimal balance between server usage and update times?
The code run every AJAX call will be one query (to fetch new mails) and a loop to post it to a ul.
This is the best way unless you use Stream Hub or a COMET server which is reverse AJAX :)
I think HTML5 WebSockets might be what you're looking for...
There's an example usage here.
As you mention, support is limited to Chrome and Safari at present.
i try to make a "status monitor" for our small network. After the page was load i make a ping for every IP which i addedd. Its, ok. But i would like to do this ping in every X minute, without reload my hole page.
I can make it if i reload the page with header refresh, but i would like to do this witout reload.
I think i have to do this with AJAX?, But i dont know how..
Thank you
I would strongly suggest you have a look at Nagios or something similar:
1) you don't need to have a web page constantly open to detect problems
2) it can automatically verify and escalate issues
3) there are lots of probes available out of the box which can be used to measure all sorts of things - not just ping times
4) responding to a ping is not the same thing as working
5) it automatically collates stats to identify patterns of issues
6) it also provides SLA type reporting
7) Nagios is simple enough that even I can understand it
8) its what I chose after a lot of work researching a replacement for a system similar to you are suggesting.
HTH
C.
If it is entire code of page i suggest setting up a cron job
and if you want to use ajax ( ie jquery ajax there is a plugin called jquery timer) use it send a ajax request to the page with code you want to run.
http://plugins.jquery.com/project/timers
check this out
I suggest you take a look at some of the "other-way-around" approaches, such as COMET, here is an interesting article covering basic usage with PHP.
This would put the implementation of "ping" in your server instead of the client.
You could for instance instead of setting a fixed interval push out updates at will. Meaning you would get almost realtime status notifications instead of the fixed interval updates.
In web development, Comet is a
neologism to describe a web
application model in which a long-held
HTTP request allows a web server to
push data to a browser, without the
browser explicitly requesting it.
Comet is an umbrella term for multiple
techniques for achieving this
interaction. All these methods rely on
features included by default in
browsers, such as JavaScript, rather
than on non-default plugins.
COMET (Wikipedia)
Why don't you try a cron?
I'm not sure exactly what you want to do here, but this quick tutorial shows you how to call a php file every second and update a dib block with the results. It is quick and simple using jquery.
I need to update my UI (webpage) periodically with new values. I have PHP code that grabs the values form a database, but I am not 100% sure on what is the best way of getting that data to the UI side.
The complication here is that:
1. I need to constantly update the values (every second)
2. I need to update many different areas of the page independently
Thanks,
You use javascript to ask a PHP script for the values. You don't push from PHP to javascript.
You'll probably want to use AJAX and setInterval()
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
What you probably want is comet, not setInterval as you'll overwhelm your servers with a lot of unnecessary traffic.
This is what Facebook does for their chat features, and their live feeds (or at least used to do, I haven't looked at it in quite some time.
You should also look into http://dev.w3.org/html5/websockets/
More and more browsers starts to support them and it's a good way to constantly pass information back and forth.
You can check for browser support and use it if it exist.
When is it appropriate to use AJAX?
what are the pros and cons of using AJAX?
In response to my last question: some people seemed very adamant that I should only use AJAX if the situation was appropriate:
Should I add AJAX logic to my PHP classes/scripts?
In response to Chad Birch's answer:
Yes, I'm referring to when developing a "standard" site that would employ AJAX for its benefits, and wouldn't be crippled by its application. Using AJAX in a way that would kill search rankings would not be acceptable. So if "keeping the site intact" requires more work, than that would be a "con".
It's a pretty large subject, but you should be using AJAX to enhance the user experience, without making the site totally dependent on it. Remember that search engines and some other visitors won't be able to execute the AJAX, so if you rely on it to load your content, that will not work in your favor.
For example, you might think that it would be nice to have users visit your blog, and then have the page dynamically load the newest article(s) with AJAX once they're already there. However, when Google tries to index your blog, it's just going to get the blank site.
A good search term to find resources related to this subject is "progressive enhancement". There's plenty of good stuff out there, spend some time following the links around. Here's one to start you off:
http://www.alistapart.com/articles/progressiveenhancementwithjavascript/
When you are only updating part of a page or perhaps performing an action that doesn't update the page at all AJAX can be a very good tool. It's much more lightweight than an entire page refresh for something like this. Conversely, if your entire page reloads or you change to a different view, you really should just link (or post) to the new page rather than download it via AJAX and replace the entire contents.
One downside to using AJAX is that it requires javascript to be working OR you to construct your view in such a way that the UI still works without it. This is more complicated than doing it just via normal links/posts.
AJAX is usually used to perform an HTTP request while the page is already loaded (without loading another page).
The most common use is to update part of the view. Note that this does not include refreshing the whole view since you could just navigate to a new page.
Another common use is to submit forms. In all cases, but especially for forms, it is important to have good ways of handling browsers that do not have javascript or where it is disabled.
I think the advantage of using ajax technologies isn't only for creating better user-experiences, the ability to make server calls for only specific data is a huge performance benefit.
Imagine having a huge bandwidth eater site (like stackoverflow), most of the navigation done by users is done through page reloads, and data that is continuously sent over HTTP.
Of course caching and other techniques help this bandwidth over-head problem, but personally I think that sending huge chunks of HTML everytime is really a waste.
Cons are SEO (which doesn't work with highly based ajax sites) and people that have JavaScript disabled.
When your application (or your users) demand a richer user experience than a traditional webpage is able to provide.
Ajax gives you two big things:
Responsiveness - you can update only parts of a web page at a time if need be (saving the time to re-load a page). It also makes it easier to page data that is presented in a table for instance.
User Experience - This goes along with responsiveness. With AJAX you can add animations, cooler popups and special effects to give your web pages a newer, cleaner and cooler look and feel. If no one thinks this is important then look to the iPhone. User Experience draws people into an application and make them want to use it, one of the key steps in ensuring an application's success.
For a good case study, look at this site. AJAX effects like animating your new Answer when posted, popups to tell you you can't do certain things and hints that new answers have been posted since you started your own answer are all part of drawing people into this site and making it successful.
Javascript should always just be an addition to the functionality of your website. You should be able to use and navigate the site without any Javascript involved. You can use Javascript as an addition to existing functionality, for example to avoid full-page reloads. This is an important factor for accessibility. Javascript should never be used as the only possibility to reach or complete a request on your site.
As AJAX makes use of Javascript, the same applies here.
Ajax is primarily used when you want to reload part of a page without reposting all the information to the server.
Cons:
More complicated than doing a normal post (working with different browsers, writing server side code to hadle partial postbacks)
Introduces potential security vulnerabilities (
You are introducing additional code that interacts with the server. This can be a problem on both the client and server.
On the client, you need ways of sending and receiving responses. It's another way of interacting with the browser which means there is another point of entry that has to be guarded. Executing arbritary code, posting data to a non-intended source etc. There are several exploits for Ajax apps that have been plugged over time, but there will always be more.
)
Pros:
It looks flashier to end users
Allows a lot of information to be displayed on the page without having to load all at the same time
Page is more interactive.