ECMAScript/JavaScript Communications

ECMAScript/JavaScript Communications
An Introduction

Prof. David Bernstein
James Madison University

Computer Science Department

bernstdh@jmu.edu

Overview

The Application-Layer Protocol:
- Hypertext Transfer Protocol
The Important Classes:
- XMLHttpRequest
- XMLDOM
The Process:
- Create an XMLHttpRequest object
- Call the open() method
- Call the send() method
- Either synchronously or asynchronoulsy, wait for the response
- Construct an XMLDOM object from the response
- Work with the XMLDOM object

Some Details

Parameters of the open() Method:
- The request type ("GET" or "POST")
- The URL
- false for synchronous, true for asynchronous
Parameters of the send() Method:
- The optional parameter can be used to include ampersand-delimited name=value lines in a POST request
Another Useful Method:
- The setRequestHeader(header,value) method can be used to add HTTP headers to the request

Some Details (cont.)

After the Call Returns:
- The XMLHttpRequest object will contain the response
Accessing the Response:
- An XML response will be in the responseXML attribute
- A text response will be in the responseText attribute
For Asynchronous Requests:
- The XMLHttpRequest object's onreadstatechange attribute must contain the function to call

A Simple Example

A Weight Retriever

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

Purpose:
- A generic slideshow "web app" that retrieves the slides
Some Obervations:
- An XML file contains the slides
- The easiest way to structure the slides is to use HTML
The Implication:
- To make sure the HTML in the HTML file isn't parsed, we need to make it "data"

A More Interesting Example (cont.)

A Slideshow App

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.)

Suppose:
- You want to include the name of the file containing the slides in the query string of the URL
Getting the URL:
- document.URL (part of the DOM)
- window.location (non-standard but supported)
Working with the URL:
- The global decodeURI() and encodeURI() functions can be used to convert from/to the standard encoding (e.g., no spaces)
- Strings have lastIndexOf() and split() methods that can be used to tokenize the URL