AJAX – an Introduction

Session Objectives

• • • •

Introduction to AJAX Explore the technologies behind AJAX Advantages and disadvantages in AJAX Why AJAX important to us

What is AJAX ?

• • • •

Asynchronous JavaScript and XML A W3C Consortium Standard Group of Technologies like LAMP Consists of

• • • •


AJAX – Few Examples

• • • •

Gmail Google Suggest Google Maps and Google Earth www.meebo.com

Asynchronous Vs Synchronous

Traditional Web Application Model Vs AJAX


• •

Java Script Object 0 - Uninitialized zero means XMLHttpRequest object has not been initialized and not ready for been used. Not ready for work and so if the readystate property is zero and you are not going to work out XMLHttpRequest object and hence it is properly initialized. 1 - Loading one means xmlHttpRequest object is loading the data that you have requested from the server.

2 - Loaded two means your data has been loaded the requested data that if you acquired of the server that is been loaded and its not yet complete but it been loaded the processing almost has finished 3 - Interactive Three means that the XMLHttpRequest object it is so called in interactive state which means that the data has been downloaded by the which still you can interact with it and ask it what s type of the readystate property is. So the interactive state means the data has not yet been downloaded it is in processing in downloading so you can interact with XMLHttpRequest object

4 - Complete Four means the download is complete and we remembered that ajax is for the asynchronous javascript and xml. Asynchronized part means that we are going to use XMLHttpRequest object to ask server send data to us and we are going to wait until that data is complete we are not pause the browser so this is the way you check data request is complete in XMLHttpRequest object readyState property and when the property value holds for 4 that means asynchronous download of your data is complete

Lets Say Hello World In AJAX


• • •

Any HTML Editor (NVU) Apache Web Server IE / Firefox

Lets Write a Traditional Web App First (Client Side)
<html> <head> <title>Log in</title> </head> <body> <form> <input type=“text” name=“user”/> <input type=“text” name=“pass”/> <input type=“submit” name=“submit”/> </form> </body> </html>

Server Side (PHP)
<?php echo "Your User Name is : ".$_GET["user"]; echo "Your password is : ".$_GET["pass"];


Adding AJAX

AJAX Benefits

• •

Usability Improvements Bandwidth

AJAX Drawbacks

• • •

If JavaScript is not activated, Ajax •can't Remote Calls work.. search engines The asynchronous mode may change the page with delays


• •

OPROARTS 2.0 Online Report Designer

IS AJAX this much boring ?

• •

No . We have frameworks Enough Frameworks to select from

• •

Client Side Server Side

Sign up to vote on this title
UsefulNot useful