Complete AJAX Tutorial in Hindi (2021)

Introduction

This tutorial provides a comprehensive guide to AJAX, its functionalities, and its applications, especially in conjunction with PHP and MySQL. By the end of this tutorial, you'll understand what AJAX is, how it works, and how to implement it for CRUD operations and APIs.

Step 1: Understanding AJAX

• What is AJAX: AJAX (Asynchronous JavaScript and XML) allows web pages to update asynchronously by exchanging data with a server behind the scenes.
• Importance of AJAX: It enhances user experience by allowing web pages to load and refresh without requiring a full page reload.

Step 2: How AJAX Works

• Asynchronous Communication: AJAX enables asynchronous data exchange between the client and server, which means that a user can continue interacting with the web page while data is being fetched or sent.
• Data Formats: Although XML was originally used, JSON (JavaScript Object Notation) is now more commonly used due to its lightweight nature and ease of use.

Step 3: XMLHttpRequest Overview

• What is XMLHttpRequest: This is a JavaScript object that allows you to make HTTP requests to fetch data from a server.
• Methods of XMLHttpRequest:
  • open(method, url): Initializes the request.
  • send(): Sends the request to the server.

Practical Tip

Always use GET for fetching data and POST for sending data.

Step 4: XMLHttpRequest Object Methods

• Commonly Used Methods:
  • setRequestHeader(header, value): Sets the value of an HTTP request header.
  • abort(): Cancels the current request.

Common Pitfall

Failing to set the correct request headers can lead to issues with data transmission.

Step 5: AJAX with JavaScript

• Basic Example:

  var xhr = new XMLHttpRequest();
  xhr.open("GET", "your-url-here", true);
  xhr.onload = function () {
      if (xhr.status === 200) {
          console.log(xhr.responseText);
      }
  };
  xhr.send();
  

Step 6: AJAX with JSON

• Using JSON: JSON is preferred for data interchange due to its simplicity. You can convert JavaScript objects to JSON with JSON.stringify() and parse JSON strings back to objects with JSON.parse().

Step 7: AJAX with PHP and MySQL

• Performing CRUD Operations:
  • Create: Use INSERT statements to add new records.
  • Read: Use SELECT statements to retrieve records.
  • Update: Use UPDATE statements to modify existing records.
  • Delete: Use DELETE statements to remove records.

Example Code for PHP CRUD

// Example of a PHP script for handling AJAX requests
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Handle Create / Update / Delete
}

Step 8: AJAX with APIs

• Making API Requests: Similar to other AJAX requests, you can fetch data from APIs using GET or POST methods.

Example of Fetching Data from an API

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

Conclusion

In this tutorial, you learned about AJAX, its importance, and how to implement it for various operations with PHP and MySQL. You also explored how to handle JSON and work with APIs. As a next step, consider building a small project utilizing these concepts, such as a hotel booking application or a simple CRUD interface.