ActiveXObject try xhr new catch e if xhr

Activexobject try xhr new catch e if xhr

This preview shows page 30 - 34 out of 67 pages.

else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } if (xhr) { xhr.onreadystatechange = showPictures; xhr.open("GET", "flickrfeed.xml", true); xhr.send(null); } else { alert("Sorry, but I couldn't create an XMLHttpRequest"); } } function showPictures() { var tempDiv = document.createElement("div"); var pageDiv = document.getElementById("pictureBar"); 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) { pageDiv.appendChild(allLinks[i].cloneNode(true)); } } else { alert("There was a problem with the request " + xhr.status); } } } ShowPictures retrieves an file from flickr; The result is extracted from responseText and assigned to innerHTML property
Image of page 30
© 2007-2016 Marco Papa & Ellis Horowitz 31 Portion of Flickr XML file <?xml version= 1.0 encoding= utf-8 standalone= yes ?> <feed xmlns= Xmlns=; <title>Dori Simth s Photos</title> <link rel= self href=/> <link rel= alternate type= text/html href= /> <id>tag:flickr.com,2005:/photos/public/116078</id> <icon>; <subtitle>A feed of Dori Smith s Photos</subtitle> <updated>2006-03-22T20:12:44Z</updated> <generator uri=; <entry> <title>Mash note</title> <link rel= alternate type= text/html href=/> OTHER STUFF <p> <a href=title= Mash note ><img src= width= 75 height= 75 alt= Mash note style= border: 5px solid #ddd; /></a> </p> Each <entry> node has two links; This application uses the second link so the showPictures loop starts with 1 rather than 0 and increments by 2; each link contains the thumbnail image inside it; every thumbnail is a link back to the original photo
Image of page 31
© 2007-2016 Marco Papa & Ellis Horowitz 32 Browser Output
Image of page 32
© 2007-2016 Marco Papa & Ellis Horowitz 33 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)); }
Image of page 33
Image of page 34

You've reached the end of your free preview.

Want to read all 67 pages?

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

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture