Else alertthere

This preview shows page 33 - 39 out of 67 pages.

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 33
© 2007-2013 Marco Papa & Ellis Horowitz 34 Browser Output Three consecutive outputs
Image of page 34
© 2007-2013 Marco Papa & Ellis Horowitz 35 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 35
© 2007-2013 Marco Papa & Ellis Horowitz 36 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 36
© 2007-2013 Marco Papa & Ellis Horowitz 37 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"); } catch (e) { } } } if (xhr) { xhr.onreadystatechange = showContents; xhr.open("GET", url, true); xhr.send(null); } else { alert("Sorry, but I couldn't create an XMLHttpRequest"); } }
Image of page 37
© 2007-2013 Marco Papa & Ellis Horowitz 38 The javascript source cont d function showContents() { var prevWin = document.getElementById("previewWin"); if (xhr.readyState == 4) { prevWin.innerHTML = (xhr.status == 200) ? xhr.responseText : "There was a problem with the request " + xhr.status; prevWin.style.top = parseInt(yPos)+2 + "px"; prevWin.style.left = parseInt(xPos)+2 + "px"; prevWin.style.visibility = "visible"; prevWin.onmouseout = hidePreview; }} Notes: initall goes through all of the links and adds an onmouseover event; showPreview( ) and hidePreview( ) are both needed; the latter sets the preview window back to hidden; In getPreview( ), depending upon the browser, the URL is in either evt.target or in window.event.srcElement; the (x,y) position is extracted; In showContents( ) the data is placed in prevWin.innerHTML from responseText; The preview window is placed just below and to the right of the cursor position that triggered the call
Image of page 38
Image of page 39

You've reached the end of your free preview.

Want to read all 67 pages?

  • Fall '07
  • Papa
  • Ajax, Marco Papa

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture