Getting Text Noticed in Ajax Applications

One of the problems with Ajax applications is that the new text you download and display has a good chance of not being noticed because there was no page refresh. CSS includes a variety of ways to get text noticed; for example, you can change the color of that text.

The example changeColor.html, which you can see at work in Figure 10.5, downloads text and displays it in red for half a second, after which it changes to black. It’s hard not to notice that.

image from book
Figure 10.5: Changing the color of text to get it noticed

This application starts with the button and a <div> element to display text in:

 <body>    <H1>Drawing attention to text</H1>        <form>       <input type = "button" value = "Display the text"         onclick = "getData('message.txt', 'targetDiv')">    </form>    <div >      <p>The fetched data will go here.</p>    </div> </body>

The button is connected to a function named getData, which starts by creating an XMLHttpRequest object:

 function getData(dataSource, divID) {   var XMLHttpRequestObject = false;   if (window.XMLHttpRequest) {     XMLHttpRequestObject = new XMLHttpRequest();   } else if (window.ActiveXObject) {     XMLHttpRequestObject = new     ActiveXObject("Microsoft.XMLHTTP");   }   .   .   . }

If the XMLHttpRequest object creation was successful, the code continues on to download the file message.txt, which contains the text “This text will be red for half a second, then change to black.”:

 <html>   <head>     <title>Drawing attention to text</title>          <script language = "javascript">       function getData(dataSource, divID)       {         var XMLHttpRequestObject = false;                  if (window.XMLHttpRequest) {           XMLHttpRequestObject = new XMLHttpRequest();         } else if (window.ActiveXObject) {           XMLHttpRequestObject = new             ActiveXObject("Microsoft.XMLHTTP");         }                  if(XMLHttpRequestObject) {           var obj = document.getElementById("targetDiv");           XMLHttpRequestObject.open("GET", dataSource);           XMLHttpRequestObject.onreadystatechange = function()           {             if (XMLHttpRequestObject.readyState == 4 &&               XMLHttpRequestObject.status == 200) {                 obj.style.color = "#FF0000";                 obj.innerHTML =                   XMLHttpRequestObject.responseText;                 .                 .                 .             }           }           XMLHttpRequestObject.send(null);         }         .         .         .       }

Here’s the key: at this point, the code calls a JavaScript function named setTimeout, which lets you execute code after a time interval has passed. In this case, you pass the name of a function you’ve written, named changer in this case, and the time interval that has to elapse before changer is called:

 <html> <head>   <title>Drawing attention to text</title>   <script language = "javascript">     function getData(dataSource, divID)     {       var XMLHttpRequestObject = false;       if (window.XMLHttpRequest) {         XMLHttpRequestObject = new XMLHttpRequest();       } else if (window.ActiveXObject) {         XMLHttpRequestObject = new           ActiveXObject("Microsoft.XMLHTTP");       }       if(XMLHttpRequestObject) {         var obj = document.getElementById("targetDiv");         XMLHttpRequestObject.open("GET", dataSource);         XMLHttpRequestObject.onreadystatechange = function()         {           if (XMLHttpRequestObject.readyState == 4 &&             XMLHttpRequestObject.status == 200) {               obj.style.color = "#FF0000";               obj.innerHTML =                  XMLHttpRequestObject.responseText;               setTimeout(changer, 500);           }       }       XMLHttpRequestObject.send(null);     } }

Note

The time interval is in milliseconds (thousandths of a second), so to be sure that changeris called after half a second, you pass setTimeouta value of 500.

And you’re nearly done. The changer function, which changes the color of the downloaded text from red to black, is called half a second after the text has been downloaded and displayed. All that’s left is to write the changer function:

 function changer() {   .   .   . }

The changer function starts by getting an object corresponding to the target <div> element:

 <body>    <H1>Drawing attention to text</H1>        <form>      <input type = "button" value = "Display the text"        onclick = "getData('message.txt', 'targetDiv')">    </form>        <div >      <p>The fetched data will go here.</p>    </div> </body>

Here’s how that works in code:

 function changer() {     var target = document.getElementById("targetDiv");     .     .     . }

Then you can use CSS to change the color of the text in the target <div> element to black, accessing that text color as target.style.color:

 function changer() {     var target = document.getElementById("targetDiv");          target.style.color = "#000000"; }

That’s all you need.

This application points out a big use of CSS in Ajax applications: making sure the user sees the changes you’ve made in a Web page. That’s an important point to bear in mind in Ajax applications, because without a page refresh, the user may not even notice that anything has changed.

Besides changing the color of downloaded text, you can also change its size. For example, if you had originally displayed text in 24-point font, you could change it back to 12 points in the changer function like this:

 function changer() {     var target = document.getElementById("targetDiv");          target.style.font-size = "12pt"; }

Another use for the setTimeout function is to display scrolling text, which is discussed in the next section.