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?
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.
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.
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
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.
- 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]
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:
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:
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):
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:
© Image Copyright of W3schools.com
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://188.8.131.52/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).