Headline

Web programming based on the Language:HTML5 ecosystem using Ajax style

Motivation

This web application provides an optimized data exchange between the client and the server. It is achieved by the use of the Ajax principle. Optimized data exchange with Ajax means, that only necessary parts of the current page are reloaded and only necessary data are transmitted from the server to the client. This web application uses the Technology:XMLHttpRequest API included in Language:HTML5 and is developed without any supporting Language:JavaScript framework.

Illustration

This implementation is MVC and client-server based. In order to create a reasonable illustration of the different layers of this application, this section is geared to this layers. The view, controller and some parts of the model are located on the client side.

Client

The view is mainly Language:HTML based, even though there are Language:JavaScript parts. The following example shows a table row in the Language:HTML5 company.html document, which creates the textfield for the companies' total output and the cut button:

<table>
           
	...

	<tr>
		<td>Total:</td>
		<td><input type="text" name="total" class="text" readonly="readonly"/></td>
		<td><input type="button" class="button" value="cut" onClick="controller.cut()"/></td> 
	</tr>
          
	...

</table>

If the user presses the cut button, the corresponding JavaScript method located in the client side model companyModel.js is invoked through the controller.js. The initCompany method, used in cut, initializes an object with all necessary data to identify the company on the server side:

// cut company
model.cut = function(strategy) {
	model.initCompany();
	model.company.action = "cut";
    
	model.sendRequest(strategy, model.company);
}

The sent request contains a strategy, which defines the reaction after receiving the response. In case of a non error response the strategy refreshes the total field of the company.

The use of Language:JSON instead of Language:XML for request and response messages has a major advantage: The messages are created in an OO programming style and can easily be transformed into JSON strings. There is no additional effort for creating and interpreting complex Language:XML messages. The JSON message for the specific cut request contains the necessary information about the action and the entity:

Invalid Language supplied

The message is received by the server, which cuts the company with the identifier 1.

Server

After receiving the cut request, the server performs the corresponding action within the Language:PHP script companyServer.php. After that, it returns the new information for the company to the client:

// ---------------------------------------- cut company
function cut($jsonObject) {
	$id = $jsonObject->id;
	$request = "UPDATE employee SET salary = salary / 2 WHERE cid = $id";
	mysql query($request);
       
	return loadCompany($jsonObject);
}

The answer is a stringified company object containing all necessary information about the company (and nothing more):

Invalid Language supplied

This application implements the Feature:Editing feature. Hence, there is also validation. The client side validation is performed within the client side part of the model, while the server side validation is performed within the PHP scripts. If there is a client side input error, no request will be created and the error is displayed directly. If there is a server side error, the PHP script responds with an appropriate JSON message.

Architecture

The architecture is based upon the MVC pattern. While the view (example: company.html, companyView.js) and the controller (controller.js) are parts of the client, the model is part of the server and the client.

Usage

You need a web and sql server to use this application. In this tutorial both will be taken care of by XAMPP: http://www.apachefriends.org/en/xampp.html

This tutorial adopts some parts of Contribution:mySqlMany. The company.sql and sampleCompany.sql are modified for this project. They are located in the "sqlScripts" folder.

  • Download and install XAMPP
  • Open the "XAMPP Control Panel" and start "Apache" and "MySQL"
  • Use the guideline of Contribution:mySqlMany up to "Populate tables..." with the modified sql scripts.
Once the database is running, follow the next steps:

  • To start the application, you need to download all project files
  • Put the files into the htdocs directory of your XAMPP (a new sub-directory in "htdocs" is recommended)
  • Run index.html
The project is provided as a netbeans project. If you want to change the code, you have to:

  • Download (http://netbeans.org/) and install Technology:NetBeans
  • "Open project" and select the html5ajax folder

There are no revisions for this page.

User contributions

    This user never has never made submissions.

    User edits

    Syntax for editing wiki

    For you are available next options:

    will make text bold.

    will make text italic.

    will make text underlined.

    will make text striked.

    will allow you to paste code headline into the page.

    will allow you to link into the page.

    will allow you to paste code with syntax highlight into the page. You will need to define used programming language.

    will allow you to paste image into the page.

    is list with bullets.

    is list with numbers.

    will allow your to insert slideshare presentation into the page. You need to copy link to presentation and insert it as parameter in this tag.

    will allow your to insert youtube video into the page. You need to copy link to youtube page with video and insert it as parameter in this tag.

    will allow your to insert code snippets from @worker.

    Syntax for editing wiki

    For you are available next options:

    will make text bold.

    will make text italic.

    will make text underlined.

    will make text striked.

    will allow you to paste code headline into the page.

    will allow you to link into the page.

    will allow you to paste code with syntax highlight into the page. You will need to define used programming language.

    will allow you to paste image into the page.

    is list with bullets.

    is list with numbers.

    will allow your to insert slideshare presentation into the page. You need to copy link to presentation and insert it as parameter in this tag.

    will allow your to insert youtube video into the page. You need to copy link to youtube page with video and insert it as parameter in this tag.

    will allow your to insert code snippets from @worker.