Refreshing Server Data

Our Ajax application has fetched information from the server and then parsed the data and acted upon it. Now we’ll show you how to make the application retrieve a new version of the data from the server, which automatically refreshes the page. Script 13.9 contains the necessary JavaScript.

To refresh server information:

1. 
function getPix() {
  xhr.open("GET", "flickrfeed.xml", true);
  xhr.onreadystatechange = showPictures;
  xhr.send(null);

  setTimeout(getPix,5 * 1000);
}



Where the previous script did the xhr call inside initAll(), this script pushes it down into its own function, getPix(). There’s one addition: the setTimeout() afterwards. Five seconds after the script has grabbed a random image, it goes and gets another.

Script 13.9. Use this script to automatically refresh server information.
window.onload = initAll;
var xhr = false;

function initAll() {
     if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
     }
     else {
        if (window.ActiveXObject) {
           try {
              xhr = new ActiveXObject("Microsoft.XMLHTTP");
           }
           catch (e) { }
        }
     }

     if (xhr) {
        getPix();
     }
     else {
        alert("Sorry, but I couldn't create an XMLHttpRequest");
     }
}

function getPix() {
							xhr.open("GET", "flickrfeed.xml", true);
							xhr.onreadystatechange = showPictures;
							xhr.send(null);
							setTimeout(getPix,5 * 1000);
							}

function showPictures() {
     var tempText = document.
createElement("div");
     var allLinks = new Array;
     if (xhr.readyState == 4) {
        if (xhr.status == 200) {
           var allImages = xhr.responseXML.getElementsByTagName("content");

           for (var i=0; i<allImages.length; i++) {
							tempText.innerHTML = allImages[i].textContent;
							allLinks[i] = tempText.getElementsByTagName("p")[1];
							}
							var randomImg = Math.floor (Math.random() * allLinks.length);
							document.getElementById("pictureBar").innerHTML = allLinks[randomImg].innerHTML;
        }
        else {
           alert("There was a problem with the request " + xhr.status);
        }
     }
}

2. 
for (var i=0; i<allImages.length; i++) {
  tempText.innerHTML = allImages[i].textContent;
  allLinks[i] = tempText.getElementsByTagName("p")[1];
}



This is almost the same loop that’s in the previous task, with one difference: instead of appending the nodes to the Web page, it adds them to a temporary array.

3. 
var randomImg = Math.floor (Math.random() * allLinks.length);
document.getElementById("pictureBar").innerHTML = allLinks[randomImg].innerHTML;



When the loop completes, we want to figure out one random image out of all of them to display. We start by calculating a random number between zero and one less than the number of images, using Math.random() and Math.floor() as we did back in Chapter 4 in “Displaying a Random Image.” And finally, we use that random number as an index into the allLinks array to grab the one image, and we put that into our Web page (Figure 13.4).

✓ Tips

  • You might wonder why this script bothers to read from the same XML file every time—after all, if the file isn’t changing, why not just keep the data in variables after the first time through? If you keep in mind the technique referred to in the previous sidebar (“Getting Your Data”), you’ll then realize that the XML file could be changing at any point. Say your server-side program grabs a new version of the XML file every few minutes—why should anyone have to wait to see the latest pictures? This way, your site’s visitors always get the latest possible version.

  • If you take the approach just mentioned, you’re likely to run into the Ajax drawback covered earlier in this chapter: caching. Different browsers (and different versions, and different platforms) all have their own unique caching peculiarities, most of which are solved by modifying the headers as discussed earlier. Another solution many recommend is to change the GET to a POST. But here’s what we’ve found that works: instead of the order they’re seen in Script 13.2, we’ve swapped the order of the open() and onreadystatechange in Script 13.9, as shown above in step 1.


Figure 13.4. The script fetches one image after another.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.116.21.229