AJAX Tutorial

AJAX Tutorial

AJAX is not a new language, but just a new way to use existing standards.

With AJAX you can create better, faster, and more user friendly web applications.

AJAX is based on JavaScript and HTTP requests.

AJAX = Asynchronous JavaScript and XML

AJAX is an acronym for Asynchronous JavaScript And XML.>

AJAX is not a new programming language, but simply a new technique for creating better, faster, and more interactive web applications.

AJAX uses JavaScript to send and receive data between a web browser and a web server.

The AJAX technique makes web pages more responsive by exchanging data with the web server behind the scenes, instead of reloading an entire web page each time a user makes a change.

AJAX Is a Browser Technology

AJAX is a technology that runs in your browser. It uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

The technology makes Internet applications smaller, faster and more users friendly.

AJAX is a web browser technology independent of web server software.

AJAX Is Based On Open Standards

AJAX is based on the following open standards:

• JavaScript
• XML
• HTML
• CSS

The open standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent. (Cross-Platform, Cross-Browser technology)

AJAX Uses XML and HTTP Requests

A traditional web application will submit input (using an HTML form) to a web server. After the web server has processed the data, it will return a completely new web page to the user.

Because the server returns a new web page each time the user submits input, traditional web applications often run slowly and tend to be less user friendly.

With AJAX, web applications can send and retrieve data without reloading the whole web page. This is done by sending HTTP requests to the server (behind the scenes), and by modifying only parts of the web page using JavaScript when the server returns data.

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

AJAX Browser Support

AJAX applications can only run in web browsers with complete XML support.

Only two web browsers available today - Internet Explorer (IE) and Mozilla Firefox.- have complete enough support for XML to run AJAX applications.

Since other browsers like Safari and Opera have limited, incomplete or incorrect XML support, this tutorial will focus on IE and Firefox examples.

The XMLHttpRequest object

Var xmlHttp = new XMLHttpRequest ();

This is the object that handles all your server communication. 

It’s the JavaScript technology through the XMLHttpRequest object that talks to the server.

Ajax essentially puts JavaScript technology and the XMLHttpRequest object between your Web form and the server. When users fill out forms, that data is sent to some JavaScript code and not directly to the server. Instead, the JavaScript code grabs the form data and sends a request to the server. While this is happening, the form on the users screen doesn't flash, blink, disappear, or stall. In other words, the JavaScript code sends the request behind the scenes; the user doesn't even realize that the request is being made. Even better, the request is sent asynchronously, which means that your JavaScript code (and the user) doesn't wait around on the server to respond. So users can continue entering data, scrolling around, and using the application.

Then, the server sends data back to your JavaScript code (still standing in for the Web form) which decides what to do with that data. It can update form fields on the fly, giving that immediate feeling to your application -- users are getting new data without their form being submitted or refreshed. The JavaScript code could even get the data, perform some calculations, and send another request, all without user intervention! This is the power of XMLHttpRequest. It can talk back and forth with a server all it wants, without the user ever knowing about what's really going on. The result is a dynamic, responsive, highly-interactive experience like a desktop application, but with all the power of the Internet behind it.

Adding in some JavaScript

In fact, you'll use JavaScript code for just a few basic tasks:

• Get form data: JavaScript code makes it simple to pull data out of your HTML form and send it to the server.
• Change values on the form: It's also simple to update a form, from setting field values to replacing images on the fly.
• Parse HTML and XML: You'll use JavaScript code to manipulate the DOM and to work with the structure of your HTML form and any XML data that the server returns.