jQuery AJAX Basics

AJAX stands for Asynchronous JavaScript and XML. It is a technique that allows a web page to communicate with a server and update specific parts of the page — without reloading the entire page. This creates a much smoother user experience.

What is AJAX?

In a traditional web page, every interaction that needs new data from the server causes a full page reload. With AJAX, data can be fetched quietly in the background and only the relevant part of the page is updated.

A real-world example: When searching on Google and suggestions appear instantly as letters are typed — that is AJAX in action.

How AJAX Works (Step by Step)

1. An event occurs on the page (e.g., a button click)
2. jQuery sends a request to the server in the background
3. The server processes the request and sends back a response
4. jQuery receives the response and updates the page

$.load() Method

The load() method is the simplest jQuery AJAX method. It loads HTML content from a URL and inserts it directly into a selected element.

$(selector).load(url, data, callback);

Basic Example

$("#newsSection").load("news.html");

Loading Only Part of a File

// Load only the #headlines section from news.html
$("#newsSection").load("news.html #headlines");

Example with Callback

$("#content").load("about.html", function(responseText, status, xhr) {
  if (status === "error") {
    $("#content").html("Failed to load content.");
  }
});

$.get() Method

Sends an HTTP GET request to a server URL and retrieves data. GET requests are used to fetch or read data.

// Fetch a text file
$.get("quote.txt", function(data) {
  $("#quoteBox").text(data);
});

// Send parameters
$.get("weather.php", { city: "London" }, function(data) {
  $("#weatherResult").html(data);
});

The second argument is an object that gets appended to the URL (e.g., weather.php?city=London).

$.post() Method

Sends an HTTP POST request. POST is used when sending data to a server (such as form submissions) because the data goes in the request body, not the URL.

<form id="contactForm">
  <input type="text" id="userName" placeholder="Your name">
  <button type="submit">Send</button>
</form>
<div id="response"></div>

<script>
$(function() {
  $("#contactForm").submit(function(e) {
    e.preventDefault();
    var name = $("#userName").val();

    $.post("submit.php", { name: name }, function(data) {
      $("#response").html(data);
    });
  });
});
</script>

Handling Responses

AJAX responses can come back as plain text, HTML, or JSON. The most common modern format is JSON.

$.get("user.php", { id: 5 }, function(data) {
  // data is a JavaScript object if the server returned JSON
  $("#userName").text(data.name);
  $("#userEmail").text(data.email);
}, "json");

Sample JSON response:

{ "name": "Sarah", "email": "sarah@example.com" }

GET vs POST — Quick Comparison

• GET: Data sent via URL parameters. Good for fetching data. Not suitable for sensitive information.
• POST: Data sent in the request body. Good for submitting forms and sensitive information.

Key Points

• AJAX allows fetching and sending data without reloading the entire page.
• $.load() is the simplest method — inserts HTML from a URL into an element.
• $.get() sends a GET request to retrieve data.
• $.post() sends a POST request to send data to a server.
• Callbacks handle the response after the server replies.
• JSON is the most popular data format for AJAX responses in modern web development.