ECMAScript/JavaScript Communications
An Introduction |
Prof. David Bernstein |
Computer Science Department |
bernstdh@jmu.edu |
XMLHttpRequest
XMLDOM
XMLHttpRequest
objectopen()
methodsend()
methodXMLDOM
object from the response
XMLDOM
object
open()
Method:
"GET"
or "POST"
)
false
for synchronous, true
for asynchronoussend()
Method:
setRequestHeader(header,value)
method can be used to add HTTP headers to the requestXMLHttpRequest
object will contain
the responseresponseXML
attribute
responseText
attribute
onreadstatechange
attribute must contain the function to call
<person> <weight>103</weight> <height>61</height> </person>
<!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"> </span> </p> <p class="output"> <label>Height (inches):</label> <span id="height"> </span> </p> </section> <script type="text/javascript">registerHandlers();</script> </body> </html>
/** * 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; }
<!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>
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; }
<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>
/** * 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);} };
/** * Initialize this app */ function init() { "use strict"; var sp; sp = new SlidePresenter("slides.xml", "holder"); sp.timer = window.setInterval(function(){sp.showNextSlide();}, 3000); }
document.URL
(part of the DOM)window.location
(non-standard but supported)decodeURI()
and encodeURI()
functions can be used to convert from/to the standard encoding
(e.g., no spaces)lastIndexOf()
and
split()
methods that can be used to tokenize the
URL