<!DOCTYPE html> <html> <!-- Our first AJAT example...that is asynchronous, and also checks to see if its request succeeded --> <!-- by: Sharon Tuttle (based on example in Ch. 12 of course text) last modified: 5-6-13 --> <head> <title> AJAT Example 1 </title> <meta charset="utf-8" /> <script type="text/javascript"> // when button with id of "load" is clicked, // I hope to synchronously 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 the textarea with // id of "output" with the contents // of the local file notes.txt // OR with error information if it // cannot 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) { // fill output textarea either with // the contents of notes.txt OR // with error info // (status of 200 is success!) if (ajax.status != 200) { outputTextArea.value = "Error fetching text of " + "notes.txt:\n" + ajax.status + " - " + ajax.statusText; } else { outputTextArea.value = ajax.responseText; } } }; // notice the 3rd argument is now ajax.open("GET", "notes.txt", 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> </noscript> <h1> AJAT Example 1 </h1> <!-- feels odd -- but there's NOT a form here! --> <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>