JMU
ECMAScript/JavaScript Communications
An Introduction


Prof. David Bernstein
James Madison University

Computer Science Department
bernstdh@jmu.edu


Overview
Some Details
Some Details (cont.)
A Simple Example

A Weight Retriever Click here for a demonstration.

ecmascriptexamples/http/alice.xml
        <person>
  <weight>103</weight>
  <height>61</height>
</person>
        
ecmascriptexamples/http/weight-retriever.html
        <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="../clientsidebasics/bmi-calculator.css" />  
    <title>Weight Retriever</title>

    <script src="weight-retriever.js" type="text/javascript"></script>
  </head>

  <body>
    <input id="url" type="text" value="alice.xml"/><button id="ok">OK</button>
    <section>
    <p class="output">
      <label>Weight (pounds):</label>
      <span id="weight">&nbsp;</span>
    </p>
    <p class="output">
      <label>Height (inches):</label>
      <span id="height">&nbsp;</span>
    </p>
    </section>
    <script type="text/javascript">registerHandlers();</script>
  </body>
</html>
        
ecmascriptexamples/http/weight-retriever.js
        /**
 * Register the event handlers
 */
function registerHandlers()
{
   "use strict";   
   var okButton;

   okButton = document.getElementById("ok");
   okButton.addEventListener("click", displayResults, true);   
}


/**
 * Display the results
 */
function displayResults()
{
   "use strict";
   var http, response, url, height, heightDisplay, heights, text, weight, weightDisplay, weights;
   

   // Get the file name
   url = document.getElementById("url").value;
   
   // Retrieve the XML document   
   http = new XMLHttpRequest();
   http.open("GET", url,false);
   http.send();
   response = http.responseXML;
   
   // Parse the XML document
   weights = response.getElementsByTagName("weight");
   weight  = weights[0].childNodes[0].nodeValue;

   heights = response.getElementsByTagName("height");
   height  = heights[0].childNodes[0].nodeValue;

   // Get the output elements in the HTML document
   weightDisplay   = document.getElementById("weight");
   heightDisplay   = document.getElementById("height");

   // Display the height and weight
   text = weightDisplay.firstChild;
   text.data = weight;
   
   text = heightDisplay.firstChild;
   text.data = height;
}


        
A More Interesting Example
A More Interesting Example (cont.)

A Slideshow App Click here for a demonstration.

ecmascriptexamples/http/slideshow.html
        <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"> 
    <title>Slideshow</title>

    <link rel="stylesheet" type="text/css" href="slideshow.css"/>
    <script src="SlidePresenter.js" type="text/javascript"></script>
    <script src="slideshow.js" type="text/javascript"></script>
  </head>

  <body>
    <header>
      The slides on this page will change about every 3 seconds.
    </header>

    <section id="holder">
    </section>

    <footer>
      The slideshow will stop after the last slide is shown.
    </footer>
    <script type="text/javascript">init();</script>
  </body>
</html>
        
ecmascriptexamples/http/slideshow.css
        body {
    background-image: url("background.gif");
    background-repeat: no-repeat;
    height: 440px;
    width:  420px;
}

footer {
    margin-top: 20px;
    text-align: center;
}

header {
    margin-top: 100px;
    text-align: center;
}

section {
    color: white;
    font-family: sans-serif;
    font-size: 14pt;
}

        
ecmascriptexamples/http/slides.xml
        <slideshow>
  <slide>
    <![CDATA[
    <p>
    This slide has some important text before an image.
    </p>

    <img src="jmu_cupola.gif" />

    <p>
    Then it has some text after the image.
    </p>
    ]]>
  </slide>

  <slide>
    <![CDATA[
    <p>
    This is another sample slide. It has a list.
    </p>

    <ul>
      <li>One important point</li>
      <li>Another important point</li>
    </ul>
    ]]>
  </slide>

  <slide>
    <![CDATA[
    <p>
    This is a third sample slide. It is very boring!
    </p>
    ]]>
  </slide>

  <slide>
    <![CDATA[
    <p>
    This fourth slide, on the other hand, is awesome.
    </p>
    ]]>
  </slide>
</slideshow>        
ecmascriptexamples/http/SlidePresenter.js
        /**
 * An object that can be used to display the slides in a slideshow
 *
 * Note: The slideshow does not start itself. The app needs to do something
 * like the following to start the slideshow:
 *
 *   var sp   = new SlidePresenter("slides.xml", "holder");
 *   sp.timer = window.setInterval(function(){sp.showNextSlide();}, 3000);
 */

/**
 * Explicit Value Constructor
 *
 * @param file {string}      The name of the XML file containing the slides
 * @param elementID {string} The ID of the HTML element containing the slides
 */
function SlidePresenter(file, elementID)
{
   "use strict";
   var  http, i, nodes, response;   
   

   // Load the slides
   http = new XMLHttpRequest();
   http.open("GET",file, false);
   http.send();
   response = http.responseXML;
   nodes    = response.getElementsByTagName("slide");
   this.slides  = new Array();
   for (i=0; i<nodes.length; i++)
   {
      this.slides[i] = nodes[i].textContent;
   }

   // Get the containing element in the HTML document
   this.container = document.getElementById(elementID);

   // Initialize the slide counter
   this.current = 0;
}

/**
 * Show the next slide
 */
SlidePresenter.prototype.showNextSlide = function()
{
   "use strict";

   // Update the content content
   this.container.innerHTML = this.slides[this.current];

   // See if we're done
   this.current++;
   if (this.current >= this.slides.length){window.clearInterval(this.timer);}
};

   
        
ecmascriptexamples/http/slideshow.js
        /**
 * Initialize this app
 */
function init()
{
   "use strict";
   var   sp;
   

   sp       = new SlidePresenter("slides.xml", "holder");
   sp.timer = window.setInterval(function(){sp.showNextSlide();}, 3000);
}
        
A More Interesting Example (cont.)