AJAX allows for updating portions of a web page without reloading the entire page. It uses a combination of technologies including HTML, CSS, XML, JavaScript, and the XMLHttpRequest object. This improves responsiveness by reducing unnecessary data transfer and allowing asynchronous data retrieval and updating of specific elements after page load. Some benefits are more desktop-like interfaces, reduced bandwidth usage, and improved productivity by eliminating full page reloads between user actions. Potential disadvantages include increased development complexity and debugging challenges.

1. A presentation
By Abdul Ghaffar Khan
(7/13/2007)

2. Introduction to AJAX
•
• How Is Ajax Different? The AJAX Model
• Why AJAX? The Benefits ..
• Examples of AJAX
• Benefit to Business
• Big Picture . The Scope…
• Disadvantages of AJAX
• Conclusion
Note: This presentation has two parts, the other part contains a real demo
of AJAX application with it implementation details.

3. AJAX, which stands for Asynchronous JavaScript And XML,
is a programming technique that combines different
technologies. It includes a standard user interface using
(X)HTML and CSS, dynamic elements and interaction via
the DOM (Document Object Model) and asynchronous data
exchange using the XMLHttpRequest object. JavaScript is
used to tie these elements together, adding logic and
dynamically updating the user interface as needed.
. . ?..ok,
Sounds more technical In other words, Ajax is a
set of programming techniques or a particular approach to
Web programming. These programming techniques involve
being able to seamlessly update a Web page or a section of a
Web application with input from the server, but without the
need for an immediate page refresh.

4. WEB MODEL
DESKTOP
Server
Application +
Network
Application + User Interface Data
• Less responsive
Client
• Click and wait situation for
• Instantaneous processing and response the user interacting with user User Interface
• no delay . interface the response from
• More interactive application running on a
different location
• No processing on client side
, no spontaneous response
•On every user query /action there is a huge un-necessary data transfer on network to get the
result from server.
•In an application that requires a lot of interactivity with the business layer sitting on the
server, the user must reload the entire page many times. This has implications for the
efficiency of workflow, the load placed on the server hosting the application, and the
productivity of users.

5. Dynamic content on a Web page without a page
o
refresh
Eliminates the traditional quot;Click-and-Waitquot; Web-
o
application architecture of yesterday, making it
possible to provide the responsiveness and
interactivity (dynamic contents)users expect from
desktop applications.
Ability to pull data from the server after the page
o
is loaded in browser. contrasts with what is now
referred as the quot;traditional architecture.quot; In which
the user must wait for the entire Web page to
reload to see new results from the server.

6. TRADATIONAL MODEL AJAX MODEL
AJAX can update smaller portions of a web page's content.
Reloading the entire web page to display The page uses JavaScript to request new content from the
updated content in response to some user server and place that content into a designated area on the
action page.
A sample Traditional vs. Ajax The Results
Traditional Performance Performance
Ajax (Average)
(Average) Increase Increase (%)
Bytes
1,737,607 460,799 1,276,809 73%
Transferred:
Time (seconds): 115 78 36 32%

7. The main reason to use AJAX is to enhance the
o
interactivity of a web application. With AJAX, users receive feedback from programs much faster.
The normal cycle of quot;click-and-waitquot; is broken, and the interface acts and feels more like a native,
client-side desktop application
AJAX application, can send asynchronous requests to the web server to
o
retrieve only the data that is needed. Using an extra layer of JavaScript, the application does not
slow down the user interface.
It makes the application more responsive, because the amount of data
o
exchanged between browser and server is vastly reduced.
Use of client Less processing to be done on the
o
server side, because a lot of the tasks of the application are performed by the client.
are available that aid the AJAX development process and reduce the
o
amount of JavaScript code
If a page section encounters an error, other sections are not affected
o
Traffic to and from the server is reduced considerably
o
– because you do not have to send the entire page content (CSS, images, static sections), the
bandwidth usage is most likely to decrease.

8. Here I am presenting a real example to demonstrate the advantages AJAX and a comparison.
For this purpose I have created two similar application with and without AJAX. These
applications have four data controls for user interaction, most of these controls are
dependent on the data in other control to get it own data. Means, to complete this form a user
must transfer this whole page ten times between server and client. It relates to a simple sales
business, based on the famous North Wind database. Here is the list of events that take place
on server and client side to complete this simple task.
First it presents a form with the list of employee, user selects an employee and submits
1.
the for.
Server returns the form with a list of customers of the selected employee.
2.
User selects a customer and submits the same form.
3.
Server returns the same form with a new list of order from that customer to that employee.
4.
User selects an order and submits the form again.
5.
Server returns the form with a list of detail orders of that order.
6.
User selects a detail order and submits it again.
7.
Server accepts the form and process the selected detail order and resent the form with
8.
some final results.

9. I have developed another application to perform the same task plus
to demonstrate other AJAX features that includes…
Enhanced user interface
1.
Dynamic and more interactive layout.
2.
Continuous, real time desktop like response to the user actions.
3.
An application portal to demonstrate the behavior of Desktop
4.
MDI application to run in a web browser
Demonstration the flexibility of designing desktop like custom
5.
components for web application to.
Lets check it …

10. Time is money. Over many repetitions, the time

employees spend waiting for the page to load can add up to significant costs.
Increased efficiency in the user interface can often mean that time is

saved at the task level, offering opportunities for concrete cost savings there.
The cost of bandwidth does not increase linearly, but does increase as

the company invests in larger-capacity Internet connections and new hardware to accommodate greater server loads. A firm's cost
structure for bandwidth depends on the scale of their operation and these capital investment needs. That being said, the cost of
bandwidth can be measured if this cost structure is known. If repetitious tasks consume a lot of bandwidth, these costs can escalate
dramatically. The amount of bandwidth consumed also has implications for time savings.
Reducing the number of steps has implications for the amount of time consumed but also for

the number of opportunities for error. Fewer errors mean cost savings down the road when these errors would have to be manually
corrected.
Quite often these days, Web-based applications are used to replace desktop applications that had

superior user interfaces. The benefits of offering users a similar or even just a familiar user interface to what they use on the desktop
means lower training costs, fewer errors, and greater initial productivity.
: More responsive applications can improve productivity not just by

reducing quot;wait,quot; but by promoting a more fluid, uninterrupted workflow. In a responsive application, users can move rapidly from
one action to another as quickly as they can visualize the workflow. Less responsive applications can defeat the user's workflow
visualization by forcing them to continually wait for program information.

Ajax Cost Savings = Hourly Labor Rate X (Seconds Saved per Transaction X Number of Transactions per year) / 3600
Looking at a conservative potential time savings of 36 seconds per transaction, if a business performs 50,000 of these transactions per year, and a
labor cost of $20/hour, we see a total labor savings of $10,000 per year, or 500 man hours, on this transaction type alone.

11. Sophisticated user interface controls and effects: Controls such as trees, menus, data tables, rich

text editors, calendars, and progress bars allow for better user interaction and interaction with HTML pages, generally
without requiring the user to reload the page.

A specific portion of form data such as an email address, name, or city name may be auto

completed as the user types.
and server push


An HTML page can obtain data using a server-side proxy or by including an external

script to mix external data with your application's or your service's data. For example, you can mix content or data from
a third-party application such as Google Maps with your own application.
Ajax techniques can be made to create single-page applications that look and feel much

like a desktop application.

12. Application involves heavy server requests, with multiple web forms that submit

data to the server.
Want to display large amounts of data in a sequential manner without refreshing

the entire page.
Users interact frequently with the application through forms to decide what to

display, rather then submitting data.
Application response time is a concern.

Loading times have to be as short as possible.


13. can increase development time and costs.

frameworks and components still need to completely mature.

browser history and bookmarks will not be able to restore the exact page

state
Complexity: Server-side developers will need to understand that

presentation logic will be required in the HTML client pages as well as in
the server-side logic to generate the XML content needed by the client
HTML pages. HTML page developers need to have a basic understanding
of JavaScript technology to create new Ajax functionality. Other options
such as Project jMaki and Project Dynamic Faces provide a way for Java
developers to better use Ajax functionality without requiring deep
knowledge of JavaScript technology.
Debugging: Ajax applications are also difficult to debug because the

processing logic is embedded both in the client and on the server.
Browser add-ons such as Mozilla Firebug have emerged to make
debuging easier. Frameworks such as the Google Web Toolkit have
emerged to allow for client and server round-trip debugging.

14. What is evident is that prominent web
applications are increasingly becoming more
interactive.