html5XMLHttpRequest

Intent

basic use of Technology:XMLHttpRequest with Language:HTML5

Motivation

This implementation provides simple server side Language:XML based data storage. Therefor, it introduces Technology:XMLHttpRequest in a very simple way of use. This helps to understand the asynchronous mechanisms of the XMLHttpRequest API. In order to keep it simple, there is no greater Ajax support in this implementation. If you want to see an Ajax based implementation, please visit Contribution:html5ajax.

Illustration

This section illustrates, how the data moves from an Language:XML file to a Technology:DOM based Web application and back. The first section shows the structure of the initial XML file, the second part shows the load mechanism with Technology:XMLHttpRequest, the third part shows some data manipulation according to the Feature:Cut and the last part shows the save mechanism with XMLHttpRequest. Please visit Contribution:html5local for the aspect of GUI generation.

Language:XML document structure

The this!!company.xml file represents the company. It models the company structure in typical XML manner: Each entity is represented by a node, at which its parameters or appended entities are represented by subnodes. Each department and employee contains an aditional parameter node for the id.

<Company>
	<name>Meganalysis</name>
	<departments>

		...

	</departments>
</company>

This example shows the

company

name

departments

departments

Load company

We are able to access this this!!company.xml file by using a simple XMLHttpRequest. The request itself needs three informations:

• The request method is GET, because we only want to load the file,
• the filename is company.xml,
• and we want to perform an asynchronous request, announced by the last boolean parameter true.

company.loadData = function() {

	var xhr = new XMLHttpRequest();
	
	// This statement creates a new request with the parameters:
	// - "GET": only load
	// - "company.xml": filename of the requested xml doc
	// - "true": asynchronous request
	xhr.open('GET', 'company.xml', true);

	// This method is triggered after the response reaches the client.
	xhr.onload = function(e) {
		if (this.status == 200) {
			// This line guarantess, that the result has xml format.
			company.response = xhr.responseXML;
			controller.loadInner();
		}
	};

	// This call starts the request.
	xhr.send();

}

The

loadData

open

onload

xhr.responseXML

Feature implementation

We use the DOM API to retrieve all salary nodes of the company:

model.cut = function() {
	// This call retrieves all salary nodes.
	var salaryNodes = company.response.documentElement.getElementsByTagName("Salary");

	// This loop cuts the salary values by two and saves the value to the specific nodes.
	for (var i = 0; i < salaryNodes.length; i++) {
		salaryNodes[i].childNodes[0].nodeValue = parseFloat(salaryNodes[i].childNodes[0].nodeValue) / 2;
	}

	// This function saves the company to the xml file.
	company.saveData(company.response);
	// The new total value has to be determined after the cut.
	model.total();
}

The

getElementsByTagName("Salary")

Save company

The save mechanism is as simple as the load mechanism. The difference is, that some parameters of the

open

• The request method is now POST, because we want to have write access
• and the filename is update.php, refering to the Language:PHP script, which accepts the changed content for the this!!company.xml.

company.saveData = function(data) {
	var serializer = new XMLSerializer();
	var xml = serializer.serializeToString(data);

	var xhr = new XMLHttpRequest();
	xhr.open('POST', 'upload.php', true);
	xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
	xhr.setRequestHeader("X-File-Name", "company.xml");
	xhr.setRequestHeader("Content-Type", "application/octet-stream");
	xhr.send(xml);
}

There are some additional parameters, which are used to define the following proceeding on the server sides Language:PHP script. The three elements of the request header show, that the request is an XMLHttpRequest, that the concerning file has its relative path company.xml and the content is a stream. The this!!upload.php script handles the stream and saves it as XML file with the given name:

<?php
	$uploaddir = "";

	if($ SERVER['HTTP X FILE NAME']!="") {

		$nomefile=$ SERVER['HTTP X FILE NAME'];

		$fh = fopen($uploaddir.$nomefile, 'w') or die("<h1 style='color:red;'>Upload failed</h1>");

		fwrite($fh, $HTTP RAW POST DATA);

		fclose($fh);

		echo "<h1>success uploaded</h1>.\n";
	}
?>

The first if control structure proofs, that the filename is not empty. After that, the script opens the file with the given filename and write access. If it is successfully opened, the stream can be written to the file handled by the function

fwrite

$fh

$HTTP RAW POST DATA

Architecture

All necessary files are located in the base folder. The architecture is based on MVC:

• All Language:HTML files in combination with the Language:JavaScript (.js) files with the suffix View represent the view.
• The controller is implemented within the JavaScript (.js) files with the suffix Controller.
• The model files have the suffix Model.

Usage

• Please check out all files in the repository.
• Open the index.html with your web-browser (check HTML5 for the HTML5-support of your browser).

• Download XAMPP from http://www.apachefriends.org/en/xampp.html.
• Install XAMPP.
• Deploy all files to your htdocs-directory (for example: E:/xampp/htdocs/xhr/).
• Start the XAMPP-Control Panel and activate Apache.
• Start your web-browser.
• Call http://localhost/xhr/index.html.