Transmitting Data - HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)

HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)

29 - Transmitting Data

Creating robust interactive applications requires the ability to send and receive data.

For this to happen, mobile applications and HTML Web pages have to communicate with servers where data is stored.

A user’s computer is commonly called a “client”.

JavaScript makes the creation of such programs possible.

One of the most essential techniques for data transfer involves the XMLHttpRequest API (sometimes abbreviated as XHR). XMLHttpRequest enables you to use JavaScript to pass data in the form of text strings between a client and a server. The general syntax might look like the following:

function load(url, data, callback) {

var xhr = new XMLHttpRequest();

xhr.open("GET", url, true);

xhr.onload = function () {

callback(xhr.responseText);

}

xhr.send(data);

}

The XMLHttpRequest object creates a call to the server. The open method specifies the HTTP method for contacting the server and provides the server’s Web address. The callback function gets a response from the server. Finally, xhr.send(data) sends the data.

<!doctype html>

<html>

<head>

<title>JavaScript accesses data</title>

<script type="text/javascript">

function init() {

var paragraph_object =

document.getElementById('paragraph');

message = "Notice that the title of this page is'" + document.title + "'.";

paragraph_object.innerHTML = message;

}

</script>

</head>

<body onload="init();">

<h1>JavaScript accesses data</h1>

<p id="paragraph"></p>

</body>

</html>

In real-world programming, JavaScript can handle highly complicated operations. One might, for instance, receive an involved report on gasoline prices at a long list of retail outlets and need the ability to isolate just one of those figures.

Parsing is a term used to describe analysis of complex information into constituent parts.

<!doctype html>

<html>

<head>

<title>Parsing complex data</title>

<script type="text/javascript">

// The next statement needs to appear on a single line.

sample_data = "Mobil-17: 3.49; Kroger-03: 3.36; Exxon-01: 3.59; Kroger-04: 3.49; Valero-A: 3.41; Chevron-01: 3.52";

of_interest = "Kroger-04";

function init() {

var paragraph_object =

document.getElementById("paragraph");

var data_list = sample_data.split(';');

for (j = 0; j < data_list.length; j++) {

parts = data_list[j].split(':');

var site = parts[0].trim()

if (site == of_interest) {

var message = "Given the sample data '" + sample_data + "', this program parsed out the price $" + parts[1].trim() + " for the " + site + " site.";

paragraph_object.innerHTML = message;

}

}

}

</script>

</head>

<body onload="init();">

<h1>Parsing complex data</h1>

<p id="paragraph">Welcome.</p>

</body>

</html>

JavaScript and freely available JavaScript libraries supply a wealth of parsing facilities.

Extraction of data from a human-readable external Web page is only one instance among many of how JavaScript can parse data.

For example, you can also use a subset of JavaScript calledJSON(JavaScript Object Notation) to exchange JavaScript objects with a server.

It features two APIs: JSON.parse and JSON.stringify. When data is received from a server, the .parse API is used to read the data. When data is sent by a client, the .stringify API is used to turn data into text strings.

JSON is built on two structures:

- A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.

- An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.