AJAX stands for Asynchronous JavaScript And XML. It is not a programming language. It is a technology for developing better, faster and interactive Web Applications using HTML, CSS, JavaScript and XML.
HTML : Hypertext Markup Language (HTML) is used for defining the structure of a Web Application.
CSS : Cascading Style Sheet (CSS) is used to provide look and style to a Web Application.
JavaScript : JavaScript is used for making a Web Application interactive, interesting and user friendly.
XML : Extensible Markup Language (XML) is a format to store and transport data from the Web Server.
AJAX cannot work independently. It is used in combination with other technologies to create interactive webpages.
a. JavaScript
Loosely typed scripting language.
JavaScript function is called when an event occurs in a page.
Glue for the whole AJAX operation.
b. DOM
API for accessing and manipulating structured documents.
Represents the structure of XML and HTML documents.
c. CSS
Allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript
d. XMLHttpRequest
JavaScript object that performs asynchronous interaction with the server.
How it works?
Ajax communicates with the server by using XMLHttpRequest Object. User send request from User Interface and JavaScript call goes to the XMLHttpRequest Object after that XMLHttp request is sent to the XMLHttpRequest Object. At that time server interacts with the database using php, servelet, ASP.net etc. The data is retrieved then the server sends data in the form of XML or Jason data to the XMLHttpRequest Callback function. Then HTML and CSS displayed the Data on the browser. These all above process we discuss in point by point format for better understanding.
User sends a request from the UI and a javascript call goes to XMLHttpRequest object.
HTTP Request is sent to the server by XMLHttpRequest object.
Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
Data is retrieved.
Server sends XML data or JSON data to the XMLHttpRequest callback function.
HTML and CSS data is displayed on the browser.
In Ajax model, there is an Ajax engine involved in between the user and the server, which eliminates the to and fro from the user to the server and back. This Ajax engine is written in JavaScript and is in a hidden frame. It handles the user front by communicating to the user as well as handles the server front by itself. This way, the end user barely faces a waiting period.
Difference Between AJAX and Conventional Model
AJAX Conventional Model
When an event occurs, the browser defines a JavaScript call, activating XMLHttpRequest. | The browser passes an HTTP request to the server in the conventional model. |
The created object then sends an HTTP request to the server in the background. | The data is received and then retrieved by the server. |
The request is received, required data is retrieved, and sent back to the web browser. | The web browser accepts the server response. |
The fetched data is sent back to the browser and displayed directly on the page. In the AJAX model, no page reload operation is performed meanwhile. | The browser reloads the page for updating it. During this operation, users have to wait until the page gets reloaded. This action is time-consuming and puts extra loads on the server. |
AJAX Applications
There are many web applications running on the web that are using ajax technology like;
Gmail
Facebook
Twitter
Google
Youtube
Advantages of AJAX
Reduces the server traffic and increases the speed
It is responsive, and the time taken is also less
Form validation
Bandwidth usage can be reduced
Asynchronous calls can be made; this reduces the time for data arrival.
Disadvantages of AJAX
Open-source
Active x request is created only in internet explorer and a newly created web browser.
For security reasons, you can only access information from the web host that serves pages. Fetching information from other servers is not possible with Ajax.
The Tech Platform