<!DOCTYPE html> <html> <!-- example 1 attempting Asynchronous javascript and *XML* (ajax, finally? 8-) ) - still giving error info if cannot connect adapted from examples in Chapter 12 of "Web Programming Step by Step", 2nd edition, pp. 445, 447, 449, 4644 by: Sharon Tuttle last modified: 5-6-13 --> <head> <title> "Ajax" example 1 </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 = ""; var notes = ajax.responseXML.getElementsByTagName("note"); for (var i=0; i < notes.length; i++) { var noteText = notes[i].firstChild.nodeValue; textAreaValue += "* " + noteText + "\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 1 </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>