HTML CSS Bootstrap JavaScript jQuery MySQL PHP Data Mining

Introduction to jQuery AJAX

AJAX is short for **Asynchronous JavaScript and XML**. It is the most powerful technique in modern web development because it allows you to update parts of a web page **without reloading the entire page**. This creates a seamless, "App-like" experience for your users.


What is AJAX?

Normally, when you click a link or submit a form, the browser reloads. With AJAX, your JavaScript code sends a request to the server "in the background." When the server replies, you can use jQuery to update just the part of the page that needs to change.

1
Event: A user clicks a button or types something.
2
Request: jQuery sends a background request to a server.
3
Response: The server sends back data (HTML, JSON, or Text).
4
Update: jQuery updates the DOM with the new content instantly.

Why use jQuery for AJAX?

Writing raw AJAX in plain JavaScript is notoriously difficult because different browsers (especially older ones) have different ways of handling it. You would have to write dozens of lines of code just to handle simple errors.

jQuery reduces all that complexity into single-line methods.

Common Use Cases:
  • Google Search: Suggestions appear as you type.
  • Facebook/X: New posts appear as you scroll down.
  • E-commerce: Adding an item to a cart without leaving the product page.
  • Voting: "Liking" a comment updates the counter instantly.

jQuery AJAX Methods

In the following lessons, you will learn the three main ways jQuery handles AJAX:

Method Best Used For...
load() The simplest way. it loads data from a server and puts it directly into an element.
$.get() / $.post() The standard way. it sends or receives data from a server using HTTP requests.
$.ajax() The expert way. Total control over headers, timeouts, and specific logic.
Asynchronous Means: While the server is processing your request, the user can still interact with the rest of your site. It is "non-blocking" and keeps the site feeling fast.

Key Points to Remember

  • AJAX is about exchanging data with a server without a page reload.
  • It uses the browser's built-in XMLHttpRequest object behind the scenes.
  • jQuery makes AJAX cross-browser compatible and easy to write.
  • Data can be sent in formats like HTML, Text, XML, or JSON.
  • Most modern web apps (React, Vue, etc.) rely heavily on AJAX principles.