Ajax xmlhttp – Update value from text file into a div no refresh

18th August 2013

Jquery - Ajax

This script is an eyeopener, the holygrail of understanding for anyone wishing to take that next step of a website that auto updates every bit of information without reloading the wholepage for new information, it will refresh live if any new information comes along , it can read from a database live to the screen, as soon as the information arrives, usually with a timer function also running.

BUILD IT

To begin an auto update feature on your website, you will need to string together a few jquery events and functions.

First you would create a button for your trigger, then give it an id.
Then create a jquery timer function that runs every 10 seconds, with a function of click() using the button you just created.
This will run the code to check the file change or database call, and get the data, it can check the data and run a function, or send an email, or change a css style to increase the size of a bar, it could probably interact with many other xml weather sites, and retrieve scores and other live data, if you know the url, or have a source thats xml or text, maybe a database that you have access to. Where’ s your data, that’ s the first thing you have to find out!
The next part it again very much needed – What to do with this data? Do I check it, capitalise it, hide a div, add a style, send an email, or update another database, etc.

The jquery would wait for a click function of that id and if so read the file and it will update.


<script type="text/javascript">// <![CDATA[
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test.txt",true);
xmlhttp.send();
}
// ]]></script>


<div id="myDiv">
<h2>Let AJAX change this text</h2>
</div>
<button onclick="loadXMLDoc()" type="button">Change Content</button>