ajat-ex1

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

<!--
    example attempting Asynchronous javascript and plain text
    (ajat? 8-) ) 

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

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

<head>
    <title> "Ajat" example 1 </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();
            var outputTextArea = document.getElementById("output");        
            // set up anonymous function to be called
	    //    when the function is completed

            ajaxReq.onreadystatechange =
                function()
                {
                    if (ajaxReq.readyState == 4)
                    {
 
                        if (ajaxReq.status != 200)
                        {
                            outputTextArea.value = 
                                "Error fetching text "
                                + "of notes.txt: \n" +
                                ajaxReq.status + "-" + 
                                ajaxReq.statusText;
                        }
                        else
                        {
                            outputTextArea.value = 
                                ajaxReq.responseText;
                        }
                    }
               };
 
            ajaxReq.open("GET", "notes.txt", true);
            ajaxReq.send(null);
        }
    </script>

</head>

<body>

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

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

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

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