- AJAX Tutorial
- AJAX - Home
- AJAX - What is AJAX?
- AJAX - History
- AJAX - Dynamic Versus Static Sites
- AJAX - Technologies
- AJAX - Action
- AJAX - XMLHttpRequest
- AJAX - Sending Request
- AJAX - Types of requests
- AJAX - Handling Responses
- AJAX - Handling Binary Data
- AJAX - Submitting Forms
- AJAX - File Uploading
- AJAX - FormData Object
- AJAX - Send POST Requests
- AJAX - Send PUT Requests
- AJAX - Send JSON Data
- AJAX - Send Data Objects
- AJAX - Monitoring Progress
- AJAX - Status Codes
- AJAX - Applications
- AJAX - Browser Compatibility
- AJAX - Examples
- AJAX - Browser Support
- AJAX - XMLHttpRequest
- AJAX - Database Operations
- AJAX - Security
- AJAX - Issues
- Fetch API Basics
- Fetch API - Basics
- Fetch API Vs XMLHttpRequest
- Fetch API - Browser Compatibility
- Fetch API - Headers
- Fetch API - Request
- Fetch API - Response
- Fetch API - Body Data
- Fetch API - Credentials
- Fetch API - Send GET Requests
- Fetch API - Send POST Requests
- Fetch API - Send PUT Requests
- Fetch API - Send JSON Data
- Fetch API - Send Data Objects
- Fetch API - Custom Request Object
- Fetch API - Uploading Files
- Fetch API - Handling Binary Data
- Fetch API - Status Codes
- Stream API Basics
- Stream API - Basics
- Stream API - Readable Streams
- Stream API - Writeable Streams
- Stream API - Transform Streams
- Stream API - Request Object
- Stream API - Response Body
- Stream API - Error Handling
- AJAX Useful Resources
- AJAX - Quick Guide
- AJAX - Useful Resources
- AJAX - Discussion
AJAX Tutorial | Learn Ajax
AJAX is a web development technique for creating interactive web applications. If you know JavaScript, HTML, CSS, and XML, then you need to spend just one hour to start with AJAX.
Why to Learn Ajax?
AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.
Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.
Conventional web applications transmit information to and from the sever using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server.
With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.
XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
AJAX is a web browser technology independent of web server software.
A user can continue to use the application while the client program requests information from the server in the background.
Intuitive and natural user interaction. Clicking is not required, mouse movement is a sufficient event trigger.
Data-driven as opposed to page-driven.
Rich Internet Application Technology
AJAX is the most viable Rich Internet Application (RIA) technology so far. It is getting tremendous industry momentum and several tool kit and frameworks are emerging. But at the same time, AJAX has browser incompatibility and it is supported by JavaScript, which is hard to maintain and debug.
AJAX is Based on Open Standards
AJAX is based on the following open standards −
- Browser-based presentation using HTML and Cascading Style Sheets (CSS).
- Data is stored in XML format and fetched from the server.
- Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.
- JavaScript to make everything happen.
Audience
This tutorial will be useful for web developers who want to learn how to create interactive webpages as well as improve their speed and usability using AJAX.
Prerequisites
It is highly recommended that you are familiar with HTML and JavaScript before attempting this tutorial.
Frequently Asked Questions about AJAX
There are some very Frequently Asked Questions(FAQ) about AJAX, this section tries to answer them briefly.
AJAX is an abbreviation that stands for Asynchronous JavaScript And XML. It enables interaction with a web page without the need for page reloading. Hence, it is used to enhance user experience.
The idea of AJAX was proposed by Jesse James Garrett in 2005.
Almost all modern browsers have built-in support for AJAX. The list includes Google Chrome, Mozilla Firefox, Safari, Microsoft Edge and Opera.
The following steps explain the working of AJAX −
- It starts with the occurrence of an event.
- Then, an XMLHttpRequest object is called, which sends a request to the server.
- The server receives and processes the request.
- The server sends the response back.
- In the end, the response is displayed on the screen.
The different ways to test AJAX code are as follows −
- End to end testing
- Manual testing
- Unit testing
- Using the browser's built-in developer tools.
- Using testing frameworks
To upload a file in AJAX, we use FormData object.
Companies like Boeing, Dell, JPM Global, Amazon, Microsoft and many more use AJAX in different phases of the software development life cycle.
Following are the key components of AJAX are as follows −
- XMLHttpRequest object
- JavaScript
- HTML DOM
AJAX does not have any data types.
The AJAX objects are created using the XMLHttpRequest constructor of JavaScript.