ThunderScripting aka Ajax

Check us out! View our portfolio

ThunderScripting is our name for common web and programming concepts that create Windows-like interaction on the web. Our name hasn't caught fire like the term Ajax--one of the latest buzzwords in web development. AJAX is said to stand for Asynchronous Javascript And Xml. Whatever the term, this web development technology allows developers to create interactive and dynamic user interfaces using a combination of HTML, CSS, Javascript and DOM properties. The combination's power lies in instant data retrieval and display on the browser without rendering the entire page over again. This unique feature makes the application look like it resides on the client’s machine instead of on the web server.

AJAX in Action

Click on the Show Example below to create your own business card. Several fields will allow you to enter your business name, title, and other information. As you enter each field, you will notice that as you move to the next text box, your entered text will automatically appear on the business card. This is the power of the scripting in action--the immediate data transfer of information from browser to database and back for display without the need to refresh your page. Once you are done entering the information you can choose the design for the card by selecting one of three thumbnail images. While it it looks like a printable business card, it is being dynamically generated text which has been placed over a business card image; you cannot save that business card image on your computer. If you would like to save this card for your use, clicking on the function, Generate Card Image, which will trigger a programmed script written in PHP. This script combines the dynamically generated text and business card image into a single combination image, which can be saved on your computer by right clicking on the card and selecting "Save Picture As".

Show Example
(Note: This example opens in a new window. Make sure your browser allows pop-up windows.)

So, ThunderScripting or AJAX quickly collects, transfers, receives, or displays data in a way that mimics the software we use on our desktop. This data interaction paves the way for excellent software development where access anywhere functionality is critical to an application's success. The page refreshes of old have given way to instantaneous feedback making speed a non-issue.

If you are interested in learning more about how ThunderScripting can help you achieve your application needs, call us toll free at 877-883-6464. And if you are interested in learning how to implement these concepts into your own application, read on below for a programmatic overview of how the pieces fit together.

ThunderScripting or AJAX Technical Overview

The information below is geared towards programmers or those with a working level of HTML, XML, Javascript, and PHP.

How does it work?

AJAX uses an XMLHttp object in conjunction with Javascript to send and receive XML or any other type of data to and from a web server using HTTP request. User interaction with the element in the document triggers the Javascript function, which calls the server side script for an example php script. The server side script queries the web server transparently to get the data from the server and returns it to the Javascript function. Once the Javascript receives the data, it uses standard DOM properties and DHTML to change or update the element within the document.

To communicate the HTTP request to the web server, we have to create an instance for the class to provide this ability. The code to create an instance to such a class might read:

     var xmlhttp;
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")//for IE
             //for Mozilla, Safari etc.
     	     xmlhttp = new XMLHttpRequest();

After an instance is created, you will make the actual request to the server using open () and send () methods that are available in the HTTP request class. The code to make a request to the web server will look like:'GET', 'your_php_script.php', true);

The first input parameter for the open() function is the method (GET / POST), which you are using for HTTP request. The second parameter is the path to the server side script, which you are requesting. The third parameter decides whether the request is asynchronous or not. If the parameter is set to true, the Javascript function will continue to execute even if the server response has not yet arrived. This explains the word asynchronous in AJAX.

The parameter for the send() function can be any data which you want to send the server if you are using the POST method for HTTP request.

Once you receive the server response to the request, you need to tell xmlhttp object which Javascript function to call. This can be done by using the onreadystatechange property of the xmlhttp object. So, the next step is assigning this property to a Javascript function as shown below:

     xmlhttp.onreadystatechange = function()
	     //your Javascript function code here.

This Javascript function makes the decision about what needs to happen after user interacts with particular element in the document based on the received response from the server. The first step in this function is to check the state of the request and check the HTTP status code of the response. For this purpose we can use the readyState property and status property of the xmlhttp object. When we receive a full server response the readyState property returns a value of 4. A description of all the possible response codes can be found here. The status property returns the response code 200 when the request is succeeded. Explanation about the possible status codes can be found here. The code to accomplish these steps can be written as:

     if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
	     //your Javascript code

After we are done with checking the state of the request and HTTP server response code, we can use the responseText property of the xmlhttp object to receive the data as a text string and then manipulate that data using Javascript and DHTML to update the properties of the element in the document.

Posted by:
Manish Ranade
Applications Programmer

Occasionally, we add educational or interesting articles like this one to our site. If you are interested in learning more about effective website marketing and design, please subscribe to our mailing list through the link below our menu.


Magnetic Card Swipe Parsing

By Dawn Green, October 13, 2010
A step-by-step tutorial on how to parse data from a USB card reader in PHP using preg_match.
Read the Tutorial


Website Design Shouldn't Hurt! We specialize in web development from database programming to design. Painless web development and handholding is the core of our business. You go about your work, and we'll quietly help grow your business alongside you.