sjat-ex2

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">

<!--
    example attempting synchronous javascript and plain text
    (sjat? 8-) ) (now seeing if an error occurred)

    adapted from example in Chapter 12 of "Web Programming Step by
    Step", 2nd edition

    by: Sharon Tuttle
    last modified: 2016-04-27
-->

<head>
    <title> "Sjat" example 2 </title>
    <meta charset="utf-8" />

    <link href="http://users.humboldt.edu/smtuttle/styles/normalize.css" 
          type="text/css" rel="stylesheet" />

    <script type="text/javascript">

        // when button w/ id = "load" is clicked,
        //     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
        //     a textarea with id = "output" with the contents
        //     of local file notes.txt (else is fills
	//     this textarea with error info,
	//     hopefully)

        function loadClick()
        {
            var ajaxReq = new XMLHttpRequest();
            ajaxReq.open("GET", "notes.txt", false);
            ajaxReq.send(null);

            // when request is completed
            
            var outputTextArea = document.getElementById("output");

            // figure out WHAT textarea's text should be

            if (ajaxReq.status != 200)
            {
                outputTextArea.value = "Error fetching text "
                    + "of notes.txt: \n" +
                    ajaxReq.status + "-" + ajaxReq.statusText;
            }
            else
            {
                outputTextArea.value = ajaxReq.responseText;
            }
        }
    </script>

</head>

<body>

   <p> <strong> [warning: this page will not behave as it should if
       JavaScript is disabled] </strong> 
   </p>

    <h1> "Sjat" 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="20" id="output">
        </textarea>
    </p>

    <p>
    <button id="load"> Load </button>
    </p>

<?php
    require_once("328footer-better.html");
?>