Ajax Documentation Seminar
Ajax Documentation Seminar
on
In partial fulfillment for the requirement for the award of the degree of
BACHELOR OF TECHNOLOGY
in
A.Anitha
(2019-2023)
I
VAAGDEVI COLLEGE OF ENGINEERING
CERTIFICATE
This is to certify that the technical seminar document entitled “AJAX TECHNOLOGY :
REVOLUTIONIZING WEB DEVELOPMENT“ is submitted by TAHURA HARMAIN 19641A0580 in
partial fulfillment of the requirements for the award of the Degree in Bachelor of Technology
in Computer Science and Engineering during the academic year 2022-2023.
External Examiner
II
ACKNOWLEDGEMENT
We wish to take this opportunity to express my sincere gratitude and deep sense of
respect to beloved Dr.K.Prakash, Principal, Vaagdevi College of Engineering for making
me available all the required assistance and for his support and inspiration to carry out this
industry Oriented Major Project in the institute.
We are thankful to all other faculty members for their encouragement. We convey our
heartfelt thanks to the lab staff for allowing me to use the required equipment whenever
needed.
Finally, we would like to take this opportunity to thank our family for their support
through the work. We sincerely acknowledge and thank all those who gave directly or
indirectly their support in completion of this work.
BY
III
DECLARATION
The report has not been submitted either in part or full for degree earlier to this University.
BY
IV
CONTENTS
Topic
Chapter – 1 Abstract……………………………………………………... 1
Chapter – 2 Introduction………………………………………………… 2
Chapter-10 References………………………………………………… 20
V
CHAPTER-1: ABSTRACT
The Internet site now is on the way to open, writeable, multimedia interactive platform, so as
to adapt to the individual users' requirements of gradual high interaction. In order to meet this
demand, AJAX (Asynchronous Javascript and XML) as a Web presentation layer technology,
can build quick, flexible and dynamic Web applications. AJAX combines the techniques on
CSS, javascript XHTML, XMLHTTP, DOM and so on, meets the construction techniques of
the application based on Web, and solves the problem of server load heavy and slow pages
load, creates more efficient and dynamic Web user interface close to the local desktop
application. The paper introduces the Web application structure framework based on AJAX,
describes the basic work mechanism of AJAX, with the record on system development of
AJAX network model of state power plant boiler parts, provides a good solution for
1
CHAPTER-2: INTRODUCTION
To create custom dynamic web applications a programmer must utilize Ajax. Ajax is a group
of technologies that provide asynchronous two-way communication between a server and the
web browser. Asynchronous communication allows the user to continue to browse the web
page as sections of it are being loaded. This also allows the page to display new and updated
information with out refreshing the page.Ajax development has exploded in recent years as
companies have found customers prefer pages developed with it. ESPN uses Ajax extensively
on their website to refresh scores and provide news headlines without the user having to
update the page.
Creating an Ajax request requires three sections of code, the first section is
writing in HTML, the second writing in JavaScript and the third is a server script writing
PHP. Each section of code provides a different portion of the Ajax request, if the request is
missing any of the sections it will fail. While Ajax is good for many scenarios a programmer
must carefully examine its use to prevent problems from arising.
2
The technologies powering the internet are changing at an accelerated rate; one of
these technologies is Ajax. Ajax or Asynchronous JavaScript and XML are a group of
technologies that provide a rich web development platform. Jesse James Garrett introduced
the term Ajax in February of 2005 to describe a new method of programming using readily
available technologies. Ajax requires four distinct components to provide a rich user
interface. The components are JavaScript, XML, HTML, and CSS.
Ajax is unique because it allows for the creation of desktop like applications in a web
environment. Typically a “desktop” application is very responsive and can have sections of
the program change without refreshing the entire screen. This occurs because the program is
running on the local machine. Web applications usually run thru an internet browser like
Microsoft Internet Explorer or Mozilla Firefox. These applications are usually slower
because they require the server to process each request. Most web applications require the
entire webpage to be processed at once. This means when a user clicks on a link in a webpage
the whole page will be changed. With Ajax a user can click on a link and have a section of
the page recreated for them without changing the whole page. This removes a portion of the
load from the server because it only has to parse a section of the page rather than the whole
page.
3
2.1 What is AJAX and what does it do?
4
As opposed to traditional form-based interaction, in an AJAX application, JavaScript
provides a lot of the interaction. While elements of web-forms are often used, in well-
designed AJAX, JavaScript becomes the medium for interaction and the web page only
provides the layout for the data and the way it will be displayed. JavaScript is in charge of
the input and output events and displaying the data associated with those events. This allows
one web page to display and manipulate a lot of data without having to be reloaded.
While JavaScript can manage the user interface, it cannot communicate with the
server. This is where XML comes into play. This paper will discuss XML but any method of
conveying data can be used if the situation requires it. XML serves as the communication
between the web page and the server. This makes a compact response object because the
server only has to send an XML object representing the data that will be displayed in the web
page already in the browser. By creating a smaller response object and putting some of the
processing associated with display on the client computer, resources from the server are
saved. Finally, since the client doesn’t need to load a new page, the data is displayed much
quicker, creating a much faster interface that is much more enriching for the user.
It’s not hard to see how many applications this would have. A great example would
be a form that allows users to look at their email. In the traditional web form model, a user
would have to view a new web page every time they wanted to cycle to a new email. Using
an AJAX web application, the user could cycle through emails without ever having to load a
new web page. This is an example of a simple AJAX application although it could go so far
as to implement a menu to select which email to view, a way to create and send emails, and a
method of instantly notifying a user of new emails into the same web page, never having to
be refreshed. Obviously, this would create a faster and more responsive web experience.
5
(fig: Comparision between classic and Ajax web application model)
6
2.2 EXISTING SYSTEMS:
Before the advent of AJAX (Asynchronous JavaScript and XML), the classic model for web
applications primarily relied on full page reloads to update content or interact with the server.
1. Limited User Experience: Full page reloads disrupted the user experience as the
entire page would refresh, leading to a noticeable delay and interruption in browsing.
Users had to wait for the page to reload even for minor updates, resulting in a less
2. Increased Bandwidth Usage: With the classic model, every interaction required
reloading the entire page, including content that hadn't changed. This resulted in
higher bandwidth usage, especially for larger pages or frequent updates, consuming
more server resources and potentially slowing down the browsing experience.
3. Slower Response Times: Full page reloads added latency to the user's interaction
with the application. Users had to wait for the server to process the request, generate a
new page, and send it back to the browser, causing slower response times compared to
4. Server Load: With full page reloads, the server had to handle a higher load since it
needed to regenerate and serve the entire page for each request. This limited
scalability, especially for applications with a large user base or high traffic, as it put
5. Inefficient Data Transfer: Reloading the entire page meant that all the page's
content, including HTML, CSS, and JavaScript, had to be transferred over the
network for each request. This resulted in redundant data transfer, especially for static
7
content that remained unchanged, leading to inefficient use of bandwidth and slower
updates or interactive features. Users had to manually trigger actions or wait for full
page reloads to see updated content, which limited the ability to create dynamic and
interactive applications.
Overall, the classic model's drawbacks included slower response times, increased bandwidth
usage, limited interactivity, and a less seamless user experience. AJAX technology addressed
8
2.3 PROPOSED SYSTEMS:
When compared to the classic web application model that relied on full page reloads,
AJAX (Asynchronous JavaScript and XML) technology provides several advantages: AJAX
provides is a method of synchronizing and transferring data on request from the user and then
manipulating it into the display, it shouldn’t be used for everything. While it may be
tempting to create a web site that uses AJAX to provide on-the-fly search functionality and
customizable navigation, AJAX development takes a lot of time, and the charm it provides
will quickly wear off. Here are some situations where the development of an AJAX solution
will provide the maximum return from development costs.
1. Improved User Experience: AJAX allows for partial updates of web content
without refreshing the entire page. This provides a smoother and more interactive
user experience as users can see real-time updates and perform actions without
experiencing disruptive page reloads.
2. Enhanced Performance: With AJAX, only the necessary data is transmitted
between the client and server, reducing bandwidth usage and improving overall
performance. This results in faster response times and a more responsive
application.
3. Reduced Server Load: AJAX enables selective updates, meaning the server only
needs to process and send the specific data required for an update, rather than
regenerating and transmitting the entire page. This reduces the server load and
improves scalability, allowing more users to be served efficiently.
4. Bandwidth Efficiency: AJAX allows for incremental updates, sending only the
changes or new data rather than the entire page. This reduces the amount of data
transferred over the network, resulting in more efficient use of bandwidth,
especially for large or frequently updated pages.
5. Increased Interactivity: AJAX enables dynamic content updates and client-side
manipulation, providing a more interactive user experience. Users can perform
actions and see immediate results without waiting for a full page reload, making
the application feel more responsive and interactive.
9
6. Seamless Asynchronous Communication: AJAX enables asynchronous
communication between the client and server, allowing for non-blocking requests
and responses. This means users can continue interacting with the application
while data is being fetched or processed in the background, resulting in a more
seamless and uninterrupted experience.
7. Integration with Server-Side Technologies: AJAX allows for seamless
integration with server-side technologies, such as scripts, databases, and APIs. It
enables real-time data retrieval and manipulation, opening up possibilities for
interactive features and dynamic content updates.
8. Flexibility in Data Exchange Formats: AJAX supports various data exchange
formats, such as XML, JSON, HTML, and plain text. This provides flexibility in
how data is transmitted between the client and server, enabling seamless
integration with different systems and APIs.
Overall, AJAX technology improves user experience, performance, server load, and
interactivity compared to the classic web application model. It enables more efficient data
transfer, real-time updates, and smoother interactions, making web applications feel more
responsive and dynamic..
10
CHAPTER-3: SYSTEM DESIGN
The system design of AJAX (Asynchronous JavaScript and XML) technology involves
various components and considerations. Here is an overview of the key elements in the
1. Client-Side Components:
HTML/CSS: The client-side components include the HTML markup and CSS styles
make asynchronous requests, manipulate the DOM (Document Object Model), and
2. Server-Side Components:
languages like PHP, Python, Java, or .NET, which handle AJAX requests, process
APIs: If the AJAX application interacts with external systems or services, server-side
APIs may be used to communicate with those systems and retrieve or update data.
3. Asynchronous Communication:
requests from the web browser to the server and receive responses. XHR is the
client and server in the background without blocking the user interface.
11
4. Data Exchange Formats:
XML or JSON: AJAX supports various data exchange formats like XML (eXtensible
Markup Language) or JSON (JavaScript Object Notation). XML and JSON provide
structured data formats that facilitate efficient data transmission between the client
and server.
Event Handling: JavaScript uses event handlers to respond to user interactions, such
as button clicks or form submissions. These events trigger AJAX requests to the
Callback Functions: AJAX utilizes callback functions that are executed once a
response is received from the server. Callback functions handle the processing of the
server response, updating the page content or performing other actions based on the
received data.
6. Security Considerations:
Cross-Site Scripting (XSS) Protection: Proper input validation and output encoding
protected against CSRF attacks using techniques like CSRF tokens or same-origin
policies.
sensitive data.
12
7. Error Handling and Validation:
timeouts, errors, and successful responses. Tools like browser developer tools and
applications.
considerations. It aims to create interactive and responsive web applications that provide a
13
CHAPTER-4: UML DIAGRAMS
Web iFrame
Form
Web page built
XML Server
Client JavaScript using DOM, DHTML
and CSS
Interactive XMLHTTP
User Request
Interface
14
(fig: An example of the Sequence Diagram of Ajax Web application Model for travel
15
CHAPTER-5: IMPLEMENTATIONS
AJAX (Asynchronous JavaScript and XML) technology is widely used in various real-life
Social Media Platforms: Social media platforms heavily utilize AJAX to provide real-time
updates, notifications, and dynamic content loading. Activities such as liking posts,
commenting, and updating feeds occur without the need for full page reloads, creating a
Online Shopping Websites: E-commerce platforms use AJAX to enhance the shopping
experience. Features like adding items to the cart, updating quantities, applying coupon
codes, and dynamically updating the shopping cart without refreshing the page are made
Web-based Email Clients: AJAX is commonly used in web-based email clients such as
Gmail, Yahoo Mail, and Outlook.com. It allows for real-time email updates, message
composition, and folder management without the need to reload the entire page.
Mapping and Location Services: AJAX powers interactive maps and location-based
services such as Google Maps. Users can zoom in/out, pan, search for locations, and get
driving directions seamlessly, with AJAX handling the dynamic updates of map data.
Collaboration Tools: AJAX is used in collaboration tools like project management software,
document editors, and real-time chat applications. Users can work together on shared
documents, see updates in real-time, and communicate without disrupting the overall
workflow.
16
Weather and News Updates: Websites providing weather forecasts and news updates often
use AJAX to provide real-time information without requiring page reloads. Users can view
live updates, switch between different locations, and receive dynamic content based on their
preferences.
Online Forms and Validation: AJAX is used to provide real-time form validation,
improving the user experience when filling out online forms. It allows for instant feedback on
input errors, availability checks, and validation without submitting the form and reloading the
page.
enable dynamic document previews, searching, and content navigation. Users can interact
with the documents, scroll through pages, and perform actions without interrupting the
Online Polls and Surveys: AJAX technology allows for the creation of interactive polls and
surveys on websites. Users can submit their responses, see real-time results, and participate
multiplayer functionality, leaderboards, and game state updates. Users can play games,
compete with others, and see instant updates without leaving or reloading the game page.
These are just a few examples of how AJAX technology is applied in real-life applications
across different industries. AJAX's ability to provide dynamic updates, improve interactivity,
and create seamless user experiences has made it a valuable technology for modern web
development.
17
CHAPTER-5: CONCLUSION AND FUTURE SCOPE
In conclusion, While AJAX provides the most compatible solution to the problem of
how to provide fast and flexible interaction with the user, it is not the only solution available.
Macromedia’s Flash plug-in allows a lot of freedom in user interface creation. So do Java
applets. Java applets also allow for complex server communications. Comparing AJAX to
other solutions, which this section attempts to do, shows the major strength of AJAX is
compatibility, but it isn’t as flexible as other solutions.
The first solution typically used to create an enhanced user interface is Macromedia
Flash. Flash requires a browser plug-in distributed by Macromedia who is now a subsidiary
of Adobe and is in the process of re-branding. The fact a plug-in needs to be installed
immediately creates some distrust from a substantial amount of users. Coupled with the very
distinct look Flash sites have, it has lead to Flash being almost taboo to use in corporate web
design. Some users also describe it as tacky or cliché. Asking whether or not to use Flash is
bound to elicit a strong opinion from nearly any web designer.
A good Flash designer is usually hard to find. While it is easy to learn to create Flash
sites, it isn’t always an intuitive process. It takes a big skill set, consisting of animation,
graphics design, web editing, object, artistic creativity and script programming in a
proprietary language. To add to the grab-bag of skills required, Flash can be used in tandem
with XML in a technique known as AFLAX. This provides the same server communication
advantage that AJAX provides, but also allows the expanded user interface of Flash. The
new Flash development suite, Flex, should allow for this to be done more easily. Ultimately,
Flash is a good product that some would say is good at lights and smoke, while others would
say is great at providing the stage to perform on. It is up to the designer to decide if it’s right
for the job.
Another solution that certainly provides all the functionality AJAX does is Java
applets. Java applets provide desktop functionality in a web page. They are basically an
executable that is ran and displayed in a web page container. While making them is similar
to creating a desktop application, there are some differences. The program is ultimately an
application on the client machine but much of the data comes from the server. It requires a
weighty framework to operate and it cannot readily access many of the client system’s
18
resources. Java applets are slow to load usually, but once they are running they’re very fast.
They are probably overkill in situations where AJAX can be used, but they provide one-of-a-
kind functionality for programs that display a lot of variables in real-time. They are also
often used in creating interactive games on the web. Java applets also are a security concern
to most IT professionals therefore they are not allowed on a significant number of
workstations, making compatibility a large concern.
Those are the two major existing alternatives to AJAX. There are several alternatives
that aren’t in wide-implementation yet, because of browser dependence or because they are
still in development.
XUL is Mozilla’s attempt to create a highly functional markup language. It allows for
fairly sophisticated user interfaces, but its lack of flexibility has some developers finding
insurmountable obstacles in designing complex web applications. It only operates on Mozilla
based browsers.
SVG stands for Scalable Vector Graphics. The standard for SVG is being developed
by the W3C but is very slowly being integrated into browsers. SVG uses XML to describe 2-
dimensional vector graphics. If SVG becomes integrated like other W3C technologies have,
then it will provide a default standard for complex graphics in web browsers and in tandem
with JavaScript it will provide all of the functionality that Flash does. Since it is an addition
to the DOM it will be more of a partner to AJAX than a replacement, but is important to look
at regardless.
That gives a lot of options for expanded user interfaces in web applications.
Choosing the method used isn’t usually a tough decision. It’s often based on the preference
of the designer. However, some critical thinking should be made before a decision is made
based simply on the preference of the designer.
19
AJAX requires a lot of time to develop however the skills used to develop AJAX are
common place amongst web developers. Learning to apply JavaScript and XML together
doesn’t take a tremendous amount of time to learn. Java Applets and Flash require
specialized developers but developing the solution in them can be cheaper. XUL, XAML and
SVG require an even rarer skill set, but XUL and XAML provide the fastest development
time. After considering development costs, compatibility becomes the main concern.
It is likely that AJAX is going to be with us for a while. While alternatives exist
today, nothing can really do what it does. Developing for AJAX now is a good idea. Flash is
currently the most viable alternative, but with new, promising technologies being released,
Flash stands to see some of its market share cut. Java applets are becoming less and less
common place. Out of the newest crop of alternatives, XUL, XAML and SVG, XAML
appears to be the most promising in functionality and will likely have the broadest user base,
but as SVG is implemented into major browsers, its potential is being show. XUL, only
being compatible with a small share of browsers and lacking any significant development
base in web applications, falls behind and shouldn’t be used in the development of web
applications under normal circumstances.
20
CHAPTER-6: REFERENCES
21