Question

I’ve been working on this PHP CPU and RAM monitor for a while now – http://nereus.rikkuness.net/php-cpu-monitor/

And it’s all working great and does what it’s supposed to do. But I use Linux so do not have much ability to test on IE. A few friends are saying that it works on everything modern but completely crashes IE.

Just wondering if anyone had any idea as to why that might be?

Code is available here – http://php-cpu-monitor.googlecode.com/files/php-cpu-monitor-1.0.tar.gz

Answer 1

I’ve had some problems very similar to this one in the past, and they are usually always related to caching. And since your AJAX requests are getting cached, your PHP script is no longer sleeping for the user’s given interval, which is why you are seeing the requests complete so much faster.

Background on Caching

There are really only three response headers that your web server will issue to control how your AJAX resources are cached. These apply both to HTTP as well as AJAX requests. You don’t really need to understand these for your purposes, but it is always good information to know:

1. Expires – this header tells the browser when it needs to retrieve a new version of the resource. For example, a photograph or company logo might have an Expires header set to months into the future, since we don’t expect these images to change very often. On the other hand, AJAX requests to retrieve time-sensitive CPU usage data should probably have an expires value of -1 to ensure that this data is always refreshed
2. Last Modified – this can be used by the browser to send conditional GET requests to the server. The server checks to see if the resource has been changed later than the given value, and if so returns the updated content
3. Cache Control – this allows proxies and other caches to store copies of this resource in shared (or non-shared) pools for even quicker access to the resource.

How jQuery.load() Works

jQuery.load() works by sending a simple GET request for html resources on the server. Keep in mind that the jQuery load() function is the simplest way to fetch data, and oftentimes isn’t the best method of data retrieval. It is designed to be a quick way to grab html from the server and subsequently populate the html within your selected jQuery DOM elements. Here’s a snippet from the docs:

This method is the simplest way to fetch data from the server. It is
roughly equivalent to $.get(url, data, success) except that it is a
method rather than global function and it has an implicit callback
function. When a successful response is detected (i.e. when textStatus
is “success” or “notmodified”), .load() sets the HTML contents of the
matched element to the returned data. This means that most uses of the
method can be quite simple.

Since $.load() is primarily a simple way to insert html into jQuery elements, the jQuery library doesn’t provide a mechanism to ensure that your requests are not being cached. This is reasonable, because if you are simply retrieving HTML, we can get much increased performance by caching these responses, especially if they haven’t changed and are being polled frequently.

Of all the browsers I tested, it looks like IE(9) is the only one that consistently caches AJAX requests. Look at the difference between the requests made in Firefox vs. Internet Explorer:

Firefox:

Internet Explorer:

Notice the suspicious <1 ms response time from IE. IE doesn’t ever refresh cached content before it’s expiration date, nor does it distinguish between HTTP and AJAX requests when it comes to caching. We need to try a different solution in order to ensure that we are receiving fresh data each time we make the call to your AJAX URL.

Preventing Internet Explorer from Caching AJAX Requests

There are a couple different ways we can workaround IE’s caching limitations:

1. Add a randomized token (nonce value) to the query string, like ?token=[timestamp]. By altering the request URL for each request, browsers will store different cached copies of the resource for each request, and you’ll ensure that you get the latest data from the server. jQuery creates a nonce value by simple getting a timestamp like so: var nonce = ( new Date() ).getTime();
2. Use POST instead of GET requests. Since POST requests are designed to send requests that modify resources on the server, browsers will never cache them.
3. Send a HTTP response header that specifically forbids browsers to cache it – this would be implemented in your cpu.php. You can easily modify this by altering your $http_response_header array (see here for the documentation)
4. Use jQuery.ajax() instead of jQuery.load(): With $.ajax() you can specify certain AJAX calls to force refresh using the cache: false option. Or even more, you can ensure that all AJAX calls are refreshed each time by configuring this in your ajaxSetup(): $.ajaxSetup ({ cache: false });. This is essentially the same solution as #1, but without the need to create a nonce value in your javascript code.

Of all the alternatives, #4 is the best preserves the type of request you are making and is the easiest to configure.

One other suggestion – using window.setInterval() to call your replay() function is an easy way to set waiting intervals between requests, and it’s usually better to implement variable-length sleep cycles on the client than the server.