2007 2020 Marco Papa Ellis Horowitz 35 Third Ajax Example Refreshing Server

2007 2020 marco papa ellis horowitz 35 third ajax

This preview shows page 35 - 40 out of 57 pages.

© 2007-2020 Marco Papa & Ellis Horowitz 35 Third Ajax Example - Refreshing Server Data This extension retrieves a new version of the data from the server, refreshing the page; here is the html accessing javascript <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html><head><title>My Third Ajax Script</title> <script src="script03.js" type="text/javascript" language="Javascript"></script></head> <body><div id="pictureBar"> </div></body></html> And here is the source for script03.js window.onload = initAll; var xhr = false; function initAll() { same as previously except it calls getPix } function getPix() { xhr.open("GET", "flickrfeed.xml", true); xhr.onreadystatechange = showPictures; xhr.send(null);setTimeout("getPix()",5 * 1000); } function showPictures() { var tempDiv = document.createElement("div"); var tempDiv2 = document.createElement("div"); if (xhr.readyState == 4) { if (xhr.status == 200) { tempDiv.innerHTML = xhr.responseText; var allLinks = tempDiv.getElementsByTagName("a"); for (var i=1; i<allLinks.length; i+=2) { tempDiv2.appendChild(allLinks[i].cloneNode(true)); } allLinks = tempDiv2.getElementsByTagName("a"); 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); } } } The call to getPix is placed in setTimeout which causes repeated execution, every 5 seconds; An array of links of photographs is created, a random number computed, and use it as an index into the array
Image of page 35
© 2007-2020 Marco Papa & Ellis Horowitz 36 Browser Output Three consecutive outputs
Image of page 36
© 2007-2020 Marco Papa & Ellis Horowitz 37 Fourth Ajax Example - Previewing Links <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html><head> <title>My Fourth Ajax Script</title> <link rel="stylesheet" rev="stylesheet" href="script04.css" /> <script src="script04.js" type="text/javascript" language="Javascript"> </script> </head><body> <h2>A Gentle Introduction to JavaScript</h2><ul> <li><a href="jsintro/2000-08.html">August column</a></li> <li><a href="jsintro/2000-09.html">September column</a></li> <li><a href="jsintro/2000-10.html">October column</a></li> <li><a href="jsintro/2000-11.html">November column</a></li> </ul> <div id="previewWin"> </div> </body> </html>
Image of page 37
© 2007-2020 Marco Papa & Ellis Horowitz 38 The stylesheet #previewWin { background-color: #FF9; width: 400px; height: 100px; font: .8em arial, helvetica, sans-serif; padding: 5px; position: absolute; visibility: hidden; top: 10px; left: 10px; border: 1px #CC0 solid; clip: auto; overflow: hidden; } #previewWin h1, #previewWin h2 { font-size: 1.0em; }
Image of page 38
© 2007-2020 Marco Papa & Ellis Horowitz 39 The javascript source window.onload = initAll; var xhr = false; var xPos, yPos; function initAll() { var allLinks = document.getElementsByTagName("a"); for (var i=0; i< allLinks.length; i++) { allLinks[i].onmouseover = showPreview; } } function showPreview(evt) { getPreview(evt); return false; } function hidePreview() { document.getElementById("previewWin").style.visibility = "hidden"; } function getPreview(evt) { if (evt) { var url = evt.target; } else { evt = window.event; var url = evt.srcElement; } xPos = evt.clientX; yPos = evt.clientY; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
Image of page 39
Image of page 40

You've reached the end of your free preview.

Want to read all 57 pages?

  • Fall '07
  • Papa
  • Ajax, Ellis Horowitz, Marco Papa

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture