| View previous topic :: View next topic |
| Author |
Message |
Mark Voss
Divine Being
Joined: 19 Jun 2002
Posts: 4946
Location: Cardiff, UK
|
 Posted: Thu May 04, 2006 12:28 pm Post subject: Auto-refreshing dynamic content using AJAX |
 |
|
Auto-refreshing dynamic content using AJAX
Using AJAX, it is possible to regularly auto-refresh a section of a webpage containing dynamic content without reloading the whole page.
The script uses an XMLHTTPRequest to retrieve a dynamic page which is then inserted into the output page.
This content is then refreshed automatically using the Javascript setTimeout() function.
First of all you need a dynamic content page.
I've used a simple ASP date & time script as an example and named the page time.asp:
| Code: | <% Response.CacheControl = "no-cache" %>
<%= Date %> @ <%= Time %> |
You need to include the line:
| Code: | | <% Response.CacheControl = "no-cache" %> |
As Internet Explorer will cache this page otherwise, and the content will not be updated on the output page.
Next, place the following script in the head of the output page:
| Code: | <script type="text/javascript">
var page = "time.asp";
function ajax(url,target)
{
// native XMLHttpRequest object
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send();
}
}
setTimeout("ajax(page,'scriptoutput')", 10000);
}
function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ajax error:\n" +
req.statusText;
}
}
}
</script> |
Set the variable for your dynamic content page at the top of the script:
| Code: | | var page = "time.asp"; |
Adjust the content reload time (currently set at 10000 milli-seconds or 10 seconds):
| Code: | | setTimeout("ajax(page,'scriptoutput')", 10000); |
Add an onload event to the page's body tag to call the script:
| Code: | | <body onload="ajax(page,'scriptoutput')"> |
Define an area for the content - in this case is just a span within a paragraph:
| Code: | <p>Current Server date & time (updated every 10 seconds):<br />
<span id="scriptoutput"></span></p> |
Finally, save the page and upload it along with time.asp to the same folder in your webspace. |
|
| Back to top |
|
 |
Mark Voss
Divine Being
Joined: 19 Jun 2002
Posts: 4946
Location: Cardiff, UK
|
| Posted: Thu May 04, 2006 12:32 pm Post subject: |
|
|
If you want to use the example above but don't have access to the dynamic content page to add the CacheControl line:
| Code: | | <% Response.CacheControl = "no-cache" %> |
you can still avoid Internet Explorer caching the content by adding a random querystring to the called page in the script.
To do this, replace the two instances of the line:
| Code: | | req.open("GET", url, true); |
in the script with:
| Code: | | req.open("GET", url+"?sid="+Math.random(), true); |
_________________
Mark Voss
http://www.markvoss.net |
|
| Back to top |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Powered by phpBB 2.0.11 © 2001, 2002 phpBB Group
|
Click here for help using the phpBB forum
Search
Members
Register
Profile
Log in
