<!DOCTYPE html> <html> <!-- example 2 attempting Asynchronous javascript and *XML* (ajax, finally? 8-) ) - still giving error info if cannot connect, but also trying to grab an attribute value for note element adapted from examples in Chapter 12 of "Web Programming Step by Step", 1st edition, pp. 445, 447, 449, 464, 467 by: Sharon Tuttle last modified: 5-6-13 --> <head> <title> "Ajax" example 2 </title> <meta charset="utf-8" /> <script type="text/javascript"> // when button w/ id = "load" is clicked, // hope to Asynchronously fill a textarea window.onload = function() { var loadButton = document.getElementById("load"); loadButton.onclick = loadClick; }; // signature: function: loadClick: void -> void // purpose: expects nothing, and returns nothing, // but hopefully has the side-effect of filling // a textarea with id = "output" with the contents // of local file notes.xml (else it fills it with // error info, hopefully...) function loadClick() { var ajax = new XMLHttpRequest(); var outputTextArea = document.getElementById("output"); // set up anonymous function to be called when the // request is completed ajax.onreadystatechange = function() { if (ajax.readyState == 4) { // let the output textarea contain either // the error info or notes.xml's // contents if (ajax.status != 200) { outputTextArea.value = "Error fetching contents of notes.xml: \n" + ajax.status + " - " + ajax.statusText; } else { var textAreaValue = ""; // get note elements var notes = ajax.responseXML.getElementsByTagName("note"); // get desired "parts" of each note element for (var i=0; i < notes.length; i++) { // get the text (simple) content of the // current note element var noteText = notes[i].firstChild.nodeValue; // also get the value of the current // note element's priority attribute var priority = notes[i].getAttribute("priority"); // if there was a priority attribute, // add its value to the note-to-display var noteDisplay = noteText; if (priority != null) { noteDisplay = "(" + priority + ") " + noteDisplay; } textAreaValue += "* " + noteDisplay + "\n"; } outputTextArea.value = textAreaValue; } } }; // notice the true for the 3rd argument in the open call! // ...that's what makes the send call return immediately // before completing... ajax.open("GET", "notes.xml", true); ajax.send(null); } </script> </head> <body> <noscript> <p> Your browser does not support JavaScript, or has it disabled; this page will not behave as it should. </p> <hr /> </noscript> <h1> "Ajax" example 2 </h1> <!-- it feels weird not having a form here - shouldn't for this particular little example, right?? --> <p> <textarea name="notes" rows="5" cols="30" id="output"> </textarea> </p> <p> <button id="load"> Load </button> </p> <hr /> <p> <a href="http://validator.w3.org/check/referer"> Validate this HTML5 page </a> </p> <p> For full credit, this page must also pass the tests at <a href="http://lint.brihten.com/html/"> http://lint.brihten.com/html/ </a> when its URL is entered (and without modifying the default options). </p> <p> <a href= "http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS3!" height="31" width="88" /> </a> </p> </body> </html>