jQuery AJAX Introduction – Beginner’s Guide (2025)

Learn how to use jQuery’s AJAX methods to send and receive data without reloading the page. Includes examples, syntax, summary, and FAQs.

What is AJAX?

AJAX (Asynchronous JavaScript and XML) is a technique that allows web pages to communicate with servers in the background without refreshing the page. It enhances user experience by enabling dynamic, real-time content updates.

Why Use jQuery for AJAX?

jQuery simplifies AJAX calls with:

• Less boilerplate code
• Cross-browser support
• Built-in error handling

Instead of writing native XMLHttpRequest, jQuery offers easy-to-use methods like $.ajax(), $.get(), and $.post().

Basic jQuery AJAX Syntax

$.ajax({
  url: "server-url",
  method: "GET", // or POST
  data: { id: 1 },
  success: function(response) {
    console.log(response);
  },
  error: function(xhr) {
    console.error("Error occurred");
  }
});

Example – Fetch Data from Server

<button id="loadBtn">Load Data</button>
<div id="result"></div>

<script>
  $('#loadBtn').click(function() {
    $.ajax({
      url: "data.json",
      method: "GET",
      success: function(data) {
        $('#result').html(data.name);
      }
    });
  });
</script>

What it does: On button click, it fetches data from data.json and displays the name in the <div>.

Using $.get() and $.post()

$.get() – Fetch data (GET request)

$.get("info.txt", function(data) {
  $('#result').html(data);
});

$.post() – Send data (POST request)

$.post("submit.php", { name: "John" }, function(response) {
  alert("Data Saved");
});

Chaining with .done(), .fail(), .always()

$.ajax({ url: "api/data" })
  .done(function(data) {
    console.log("Success:", data);
  })
  .fail(function() {
    alert("Error");
  })
  .always(function() {
    console.log("AJAX call completed");
  });

Error Handling Example

$.ajax({
  url: "invalid-url",
  method: "GET",
  error: function(xhr, status, error) {
    console.log("AJAX Error: " + status + " - " + error);
  }
});

Summary

jQuery AJAX is a powerful way to interact with backend APIs and servers without full page reloads.

FAQ – jQuery AJAX

Q1. Is jQuery AJAX outdated?

A: While Fetch API is the modern standard, jQuery AJAX is still widely used in legacy and existing projects due to its simplicity.

Q2. Can I use jQuery AJAX with JSON data?

A: Yes, use dataType: "json" in your AJAX call:

$.ajax({
  url: "user.json",
  dataType: "json",
  success: function(data) {
    console.log(data);
  }
});

Q3. How to send headers in jQuery AJAX?

A: Add a headers object:

$.ajax({
  url: "api/data",
  headers: { "Authorization": "Bearer your_token" }
});

Q4. What’s the difference between $.ajax() and $.get()?

A:

• $.ajax() = More control (method, headers, dataType, etc.)
• $.get() = Quick GET request with fewer options

Q5. How to stop an AJAX request?

A: Use .abort() on the request object:

let request = $.ajax({ url: "slow_api" });
request.abort();