ajax-ex1

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

<!--
    example attempting Asynchronous javascript and XML
    (ajax! 8-) ) 

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

    by: Sharon Tuttle
    last modified: 2016-05-01
-->

<head>
    <title> "Ajax" 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.xml (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 XML response is received

            ajaxReq.onreadystatechange =
                function()
                {
                    if (ajaxReq.readyState == 4)
                    {
 
                        if (ajaxReq.status != 200)
                        {
                            outputTextArea.value = 
                                "Error fetching text "
                                + "of notes.xml: \n" +
                                ajaxReq.status + "-" + 
                                ajaxReq.statusText;
                        }
                        else
                        {
                            var textAreaValue = "";

                            // get all the note elements from the gotten XML

                            var notes =
                                ajaxReq.responseXML.getElementsByTagName("note");
                            
                            for (var i=0; i < notes.length; i++)
                            {
                                var noteText = notes[i].firstChild.nodeValue;
                                var priority = notes[i].getAttribute("priority");

                                if (priority)
                                {
                                    textAreaValue += ("(" + priority + ") ");
                                }
                                textAreaValue += (noteText + "\n");
                            }

                            outputTextArea.value = textAreaValue;
                        }
                    }
               };
 
            ajaxReq.open("GET", "notes.xml", 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> "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="20" id="output">
        </textarea>
    </p>

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

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