Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've had some problems very similar to this one in the past, and they are usually always related to <a href="http://viralpatel.net/blogs/ajax-cache-problem-in-ie/" rel="nofollow noreferrer">caching</a>. 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.</p> <p><strong>Background on Caching</strong></p> <p>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:</p> <ol> <li><strong>Expires</strong> - 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</li> <li><strong>Last Modified</strong> - 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</li> <li><strong>Cache Control</strong> - 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.</li> </ol> <p><strong>How jQuery.load() Works</strong></p> <p>jQuery.load() works by sending a simple GET request for html resources on the server. Keep in mind that the jQuery <code>load()</code> 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 <a href="http://api.jquery.com/load/" rel="nofollow noreferrer">docs</a>:</p> <blockquote> <p>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.</p> </blockquote> <p>Since <code>$.load()</code> 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.</p> <p>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:</p> <p>Firefox:</p> <p><img src="https://i.stack.imgur.com/IN86p.png" alt="AJAX Request in Firefox"></p> <p>Internet Explorer:</p> <p><img src="https://i.stack.imgur.com/1oVyC.png" alt="AJAX Request in IE9"></p> <p>Notice the suspicious &lt;1 ms response time from IE. <a href="http://blog.httpwatch.com/2009/08/07/ajax-caching-two-important-facts/" rel="nofollow noreferrer">IE doesn't ever refresh cached content before it's expiration date</a>, 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.</p> <p><strong>Preventing Internet Explorer from Caching AJAX Requests</strong></p> <p>There are a couple different ways we can workaround IE's caching limitations:</p> <ol> <li><strong>Add a randomized token (nonce value) to the query string</strong>, like <code>?token=[timestamp]</code>. 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: <code>var nonce = ( new Date() ).getTime();</code></li> <li><strong>Use POST instead of GET requests</strong>. Since POST requests are designed to send requests that modify resources on the server, browsers will never cache them.</li> <li><strong>Send a HTTP response header that specifically forbids browsers to cache it</strong> - this would be implemented in your cpu.php. You can easily modify this by altering your <code>$http_response_header</code> array (see <a href="http://php.net/manual/en/reserved.variables.httpresponseheader.php" rel="nofollow noreferrer">here</a> for the documentation)</li> <li><strong>Use <code>jQuery.ajax()</code> instead of <code>jQuery.load()</code></strong>: With <code>$.ajax()</code> you can specify certain AJAX calls to force refresh using the <code>cache: false</code> option. Or even more, you can ensure that all AJAX calls are refreshed each time by configuring this in your ajaxSetup(): <code>$.ajaxSetup ({ cache: false });</code>. This is essentially the same solution as #1, but without the need to create a nonce value in your javascript code.</li> </ol> <p>Of all the alternatives, #4 is the best preserves the type of request you are making and is the easiest to configure.</p> <p>One other suggestion - using <code>window.setInterval()</code> to call your <code>replay()</code> 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.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload