<!--

ajax7.html

Gets stock quote (plus day's low and high) from quote4.php via Ajax,
embedding result in page itself after indicating progress with an
animated GIF.

David J. Malan
Computer Science S-75
Harvard Summer School

-->

<!DOCTYPE html>

<html>
  <head>
    <script>

        // an XMLHttpRequest
        var xhr = null;

        /*
         * void
         * quote()
         *
         * Gets a quote.
         */
        function quote()
        {
            // instantiate XMLHttpRequest object
            try
            {
                xhr = new XMLHttpRequest();
            }
            catch (e)
            {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // handle old browsers
            if (xhr == null)
            {
                alert("Ajax not supported by your browser!");
                return;
            }

            // construct URL
            var url = "quote4.php?symbol=" + document.getElementById("symbol").value;

            // show progress
            document.getElementById("progress").style.display = "block";

            // get quote
            xhr.onreadystatechange = handler;
            xhr.open("GET", url, true);
            xhr.send(null);
        }


        /*
         * void
         * handler()
         *
         * Handles the Ajax response.
         */
        function handler()
        {
            // only handle requests in "loaded" state
            if (xhr.readyState == 4)
            {
                // hide progress
                document.getElementById("progress").style.display = "none";

                if (xhr.status == 200)
                    document.getElementById("quote").innerHTML = xhr.responseText;
                else
                    alert("Error with Ajax call!");
            }
        }

    </script>
    <title></title>
  </head>
  <body>
    <form onsubmit="quote(); return false;">
      Symbol: <input id="symbol" type="text">
      <br><br>
      <div id="progress" style="display: none;">
        <img alt="Please Wait" src="19-0.gif">
        <br><br>
      </div>
      <div id="quote"></div>
      <br><br>
      <input type="submit" value="Get Quote">
    </form>
  </body>
</html>