Page 1 of 6               1  2  3  4  5  6  Next >>

 

AJAX (Asynchronous JavaScript And XML) Tutorial

This tutorial covers the basics of AJAX. Before reading this tutorial you should already be familiar with JavaScript, HTML, XML, and XHTML. You may want to read my XML and XHTML tutorials first.

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML.

AJAX is a type of programming used to provide better and faster web applications. It is not a new technology but is based on existing XML and JavaScript technologies and HTTP requests.

Because AJAX is based on existing, established technologies, it is supported by all major browsers including Internet Explorer, Opera, FireFox, etc. Also, AJAX applications are not dependent on specific web server software. Thus, AJAX applications are browser and server independent!

Overview

Typically, in a web page to get data from a database or server based file, or to send data to the server, the web page has to contain an HTML Form. When a user clicks a command button on the page to get data from the server or to send data to the server, a Post or Get command is issued to the web server. The server then responds by performing the requested action, re-creates the entire page and sends it back to the browser in its entirety.

All this is done while the user waits. This incurs a performance hit and, even in the best case, the user sees his web page flash as it gets rendered on the post back.

With AJAX, JavaScript code in your web page talks directly to the web server in an asynchronous manner. It does this using the JavaScript XMLHttpRequest object. This object is not a W3C (World Wide Web Consortium) standard, however, most browsers have implemented it.

The XMLHttpRequest object lets the JavaScript exchange data with the web server using HTTP requests. With an HTTP request the web page can make a request to, and get a response from, the server without reloading the entire page!

As a result, only a small amount of data is being exchanged. Because this is done asynchronously in the background, the user remains on the page and this happens transparently to him after the page has initially loaded.

AJAX Advantages

  • AJAX the increases the responsiveness of web pages.
  • It reduces network traffic on the web server because there will be no post back to the server so the server doesn't need to render a complete HTML page.

AJAX Disadvantages

  • AJAX requires the user's browser to have JavaScript enabled. It's a good idea, to always have a non-AJAX alternative page for users with JavaScript disabled.
  • AJAX typically breaks the browser's Back button. When a page is updated dynamically, returning to the previous page may not be possible. Browsers usually record only complete page requests in their history lists.
  • Not all browsers fully comply with W3C standards so an AJAX application must be tested under all browsers.

Page 1 of 6               1  2  3  4  5  6  Next >>




About TheScarms
About TheScarms


Sample code
version info

If you use this code, please mention "www.TheScarms.com"

Email this page


© Copyright 2024 TheScarms
Goto top of page