|
Introducing Asynchronous JavaScript Technology and XML (AJAX)
1. AJAX stands for Asynchronous JavaScript And XML.
2. AJAX is a type of programming made popular in 2005 by Google (with Google Suggest).
3. AJAX is not a new programming language, but a new way to use existing standards.
4. With AJAX you can create better, faster, and more user-friendly web applications.
5. AJAX is based on JavaScript and HTTP requests
Using JavaScript technology, an HTML page can asynchronously make calls to the server from which it was loaded and fetch content that may be formatted as XML documents, HTML content, plain text, or JavaScript Object Notation (JSON). The JavaScript technology may then use the content to update or modify the Document Object Model (DOM) of the HTML page. The term Asynchronous JavaScript Technology and XML (AJAX) has emerged recently to describe this interaction model.
AJAX is not new. These techniques have been available to developers targeting Internet Explorer on the Windows platform for many years. Until recently, the technology was known as web remoting or remote scripting. Web developers have also used a combination of plug-ins, Java applets, and hidden frames to emulate this interaction model for some time. What has changed recently is the inclusion of support for the XMLHttpRequest object in the JavaScript runtimes of the mainstream browsers. The real magic is the result of the JavaScript technology's XMLHttpRequest object. Although this object is not specified in the formal JavaScript technology specification, all of today's mainstream browsers support it. The subtle differences with the JavaScript technology and CSS support among current generation browsers such as Mozilla Firefox, Internet Explorer, and Safari are manageable.
What makes AJAX-based clients unique is that the client contains page-specific control logic embedded as JavaScript technology. The page interacts with the JavaScript technology based on events such as the loading of a document, a mouse click, focus changes, or even a timer. AJAX interactions allow for a clear separation of presentation logic from the data. An HTML page can pull in bite-size pieces to be displayed. AJAX will require a different server-side architecture to support this interaction model. Traditionally, server-side web applications have focused on generating HTML documents for every client event resulting in a call to the server. The clients would then refresh and re-render the complete HTML page for each response. Rich web applications focus on a client fetching an HTML document that acts as a template or container into which to inject content, based on client events using XML data retrieved from a server-side component.
Anatomy
The following items represent the setups of an AJAX interaction as they appear in Figure
1. A client event occurs.
2. An XMLHttpRequest object is created and configured.
3. The XMLHttpRequest object makes a call.
4. The request is processed by the ValidateServlet.
5. The ValidateServlet returns an XML document containing the result.
6. The XMLHttpRequest object calls the callback() function and processes the result.
Example for AJAX
(Enter something and click outside the textbox ,today's date will display below)
HTML content
JAVASCRIPT
PHP file (cat.php)
You copy and paste the script , html, and php file into your root path and check the flow
1) whenever you enter text in textbox ,the onchange event calls a javascript function called listSubcategory() .
2) An object for XMLHttpRequest or ActiveXObject("Microsoft.XMLHTTP") is created depends upon the browser .If Mozilla or Opera(XMLHttpRequest) etc., and ActiveXObject("Microsoft.XMLHTTP") for IE .
3) AJAX - Sending a Request to the Server:To send off a request to the server, we use the open() method and the send() method.The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server. If we assume that the HTML and PHP file are in the same directory.
4) AJAX - More About the XMLHttpRequest Object: Before sending data to the server, we have to explain three important properties of the XMLHttpRequest object.The onreadystatechange Property:After a request to the server, we need a function that can receive the data that is returned by the server.The onreadystatechange property stores the function that will process the response from a server. The readyState property holds the status of the server's response. Each time the readyState changes, the onreadystatechange function will be executed.Here are the possible values for the readyState propery:
0 --> The request is not initialized
1 --> The request has been set up
2 --> The request has been sent
3 --> The request is in process
4 --> The request is complete
We are going to add an If statement to the onreadystatechange function to test if our response is complete (this means that we can get our data):
5) The responseText Property:The data sent back from the server can be retrieved with the responseText property.In our code, we will Display today's date
6) Using div id the result information displayed on the web page
|
