HTML5 for Beginners – Simple AJAX client

This article is the eighth post in the series that introduces HTML5 to beginners. We’ll design a simple HTML page, that will use AJAX to get a UTC date and time and some other details from a PHP file that will act as a server-side script.

 

Introduction to Ajax

What is AJAX?

AJAX is an abbreviation for the Asynchronous JavaScript and XML and it is a new way of creating more interactive web applications that work with HTML and JavaScript.

The typical web page needs to reload every time there is a server-side request. It needs first to transmit information to and then from the server using a request that has to redirect to a new page, which shows the information from the server.

However, AJAX can display such dynamic web content without reloading of a web page.

How does AJAX work?

The primary underpinning function of AJAX is the XMLHttpRequest object that is implemented by all the major web browsers today. “XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server” (XMLHttpRequest, 2016) and it’s used by AJAX to initialize an asynchronous data retrieval.

So how does it work? Well, first JavaScript makes a request to the server using XMLHttpRequest. Then it interprets the results/response from the server-side, and once the response is retrieved, JavaScript manipulates the DOM to update the web page.

This makes Ajax a very useful and truly unique tool for web developers, mainly because it allows them to design rich and responsive web interaction, which looks more like those we’re used to see when working with a desktop software.

We can see many examples of AJAX on the internet today. For example, we can see AJAX at work on Google Maps, where we can zoom in and out, or grab the map and drag it around, all without refreshing the Google Maps web page.

 

AJAX Project

Following is what I’ve implemented. The below screenshot is the output of this project:

You can see the finalized project running at: http://www.joe0.com/tools/ajax/

Here is an actual output:

Step by Step Walkthrough

Structure

I decided to take the usual approach and a new, clean and easy to understand, visually proper project structure.

This is what I did:

  • All styling goes into ‘CSS’ folder into a file called ‘main.css’ file.
  • All JavaScript code has been placed within a ‘JS’ folder inside the file called ‘main.js‘.
  • PHP file that implements server side is inside ‘service.php’ and placed it into its own ‘PHP directory.
  • In the root of the project directory, I’ve created ‘index.html,’ so the web server knows that this is the main file to load.

This is the screenshot of the structure of our Ajax web project:

Now, let’s go over each of the files in detail.

HTML File [index.hml]

 

  • As you can see, inside the head tag I load css and JavaScript
  • The next thing was to add a clickable button that will call the JavaScript Ajax function. I’ve done it using following code:

As you can see, it’s a simple button, which on click calls a JavaScript function AJAXdetails().

I wanted to style it a little, so for the id=button, I’ve added following CSS:

Note: all CSS is in the css/main.css file

Here I’ve used a fancier border-radius CSS property to make the button look a bit cooler :)

Once rendered in the browser, entire top section looks like this:

JavaScript (main.js)

The main.js file contains a single function AJAXdetails(), that instantiate XMLHttpRequest object:

Then opens and configures an XMLHttpRequest object so it points to php/service.php file, which provides the response from server-side:

And then once the PHP response is ready, JavaScript outputs the content to innerHTML of DOM element <p> with id=result:

The JavaScript function in its entirety looks like this:

PHP Server Side Script (service.php)

This is the content of service.php file:

As you can see, I’ve done a couple of things in here. First I’ve defined a table, then a two-dimensional array of features that I want to appear on the page and later I circle through the array using PHP foreach loop.

As I decided that the primary function of the PHP file is to output the UTC date and time, but do so in a larger font size and with red color. I left that line outside the foreach loop, and did the color and font selection with CSS. This whole part is done on line 5-6:

In CSS there is a table cell id ‘bigRed’, that has the following styling:

This achieves the following output, example:

I’ve decided to use CSS text-shadow property, to make the red text little more styled and also use something new we can learn from CSS.

Rest of the PHP file outputs some other details from the service.php into an index.html file using AJAX.

I’ve decided to use a $_SERVER PHP function that gets a Server and execution environment information details for me and also phpversion() which gets me PHP version information.

So, I’ve added following list of features:

Hard coded value:

  • Author of the page = my name (that’s the only value that is hard coded)

Using $_SERVER PHP Function:

  • $_SERVER[‘REQUEST_TIME’] – The timestamp of the start of the request.
  • $_SERVER[‘SERVER_SOFTWARE’] – Server identification string, given in the headers.
  • $_SERVER[‘SERVER_ADDR’] – IP address of the server under which script is executing.
  • $_SERVER[‘SERVER_PORT’] – The port on the server machine being used by the web server.
  • $_SERVER[‘SERVER_ADMIN’] – The admin contact value from the web server configuration file.
  • $_SERVER[‘SERVER_PROTOCOL’] – Name & revision of the protocol that requested page.
  • $_SERVER[‘DOCUMENT_ROOT’] – The document root directory under which script is executing.
  • $_SERVER[‘SCRIPT_FILENAME’] – The absolute pathname of the executing script.
  • $_SERVER[‘REMOTE_ADDR’] – The IP Address from which the user is viewing the page.
  • $_SERVER[‘HTTP_USER_AGENT’] – The string denoting the user agent accessing the page.

Using PHP phpversion() function:

  • phpversion() – Server identification string, given in the headers.

All of this creates the following output:

Cascading Style Sheet (main.css)

This is the last part. In the CSS, I took care of the setting width of the body tag and centering it:

Then the color of the headings was styled:

Date and time color, size and text shadow, which I’ve already explained:

The table and cells were colored and spaced out using following CSS:

And button and its rounding effect was done here (also explained earlier):

Conclusion

I would like to conclude this exercise by saying that by now, you should know what the AJAX is and how it can be used. And you should have a pretty good idea conceptually of the way it works.

By now, you should completely understand the Ajax concept outlined in this diagram:

AJAX

© Image Copyright of W3schools.com

 

This is the 8th course I’ve done on my side, in which I’ve introduces all of the foundational technologies such as HTML5, CSS, JavaScript, PHP, MySQL and also Ajax that allows us to work seamlessly with server-side. As many of you can see, it’s not hard to code in web technologies and use HTML5 and JavaScript in order to create modern looking, interactive websites.

To conclude, this part about Ajax, we’ve learned that there is an ultimate difference between regular HTML web applications and AJAX applications and that is, that AJAX application never needs to forward to new HTML pages to get the information. As you surely realize, this means, that it’s entirely possible to create components that come in and out of a view using JavaScript and do the server calls using AJAX. The effect of this realization is tremendous in my opinion. It means that JavaScript and AJAX opened the door for HTML to a whole new development possibility. The realm in which a single page can run the entire application. So, it’s no wonder, that SPA type of applications are getting ever so popular. AJAX applications are already making the web so interactive that it’s hard to distinguish them from the desktop applications.

 

References

Garrett, J.J., 2005. Ajax: A new approach to web applications. (Accessed: 16 December 2016).

Knudsen, C., 1999. PHP version 4. Linux Journal, 1999(67es), p.8. (Accessed: 17 December 2016).

Stobart, S. and Vassileiou, M., 2004. Predefined PHP Variables. In PHP and MySQL Manual (pp. 61-69). Springer London. (Accessed: 17 December 2016).

What is AJAX? (2016) Available at: https://www.tutorialspoint.com/ajax/what_is_ajax.htm (Accessed: 16 December 2016).

XMLHttpRequest (2016) Available at: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest (Accessed: 16 December 2016).

Jackson, D. (2006) The XMLHttpRequest object. Available at: http://190.151.12.194/software/documentacion/WEB/The%20XMLHttpRequest%20Object.pdf (Accessed: 16 December 2016).

Group, T.P. (2001) PHP: $_SERVER – manual. Available at: http://php.net/manual/en/reserved.variables.server.php (Accessed: 17 December 2016).

GWT project (no date) Available at: http://www.gwtproject.org/doc/latest/DevGuideServerCommunication.html (Accessed: 17 December 2016).

AJAX introduction (2016) Available at: http://www.w3schools.com/php/php_ajax_intro.asp (Accessed: 17 December 2016).

(Visited 14 times in last 30 days)

Comments

comments