ThunderScripting aka Ajax

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.

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:

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:

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:

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:

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.