← Back to jQuery Course | Chapter 16: jQuery vs Modern JS & Interview Prep | Lesson 3 of 6

jQuery AJAX vs Fetch API

jQuery get provides a short way to request data. Fetch is a modern browser API that returns a Promise.

In this page:

  1. GET Request
  2. POST Request
  3. Handling Errors
  4. When Each API Fits
  5. Small AJAX Project
Syntax
javascript 
$.ajax({ url: url, success: callback });

fetch(url)
  .then((response) => response.json())
  .then((data) => { /* ... */ });

GET Request

jQuery's $.get() sends a GET request and hands the response to a callback function once it arrives, while the native fetch() API performs the same basic job but returns a Promise instead of using jQuery's Deferred-based callbacks. Modern code often prefers fetch's Promise interface since it composes naturally with async/await.

Example: GET Request

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>
    $(document).ajaxError(function(event, xhr, settings) {
      $("#output").append($("<div>").text("Request failed: " + settings.url));
    });

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.get("data.php", function(data) { $("#output").append($("<div>").text("jQuery: " + JSON.stringify(data))); });
      fetch("data.php").then(function(res) { return res.json(); }).then(function(data) { $("#output").append($("<div>").text("fetch: " + JSON.stringify(data))); });
    });

    $("#resetBtn").click(function() {
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

POST Request

Both APIs can send data to a server with a POST request. Fetch requires you to configure the request more explicitly — setting the method, headers, and body options yourself — while $.post() bundles those details into a single, simpler function call.

Example: POST Request

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>
    var $initial = $("body").children();
    $(document).ajaxError(function(event, xhr, settings) {
      $("#output").append($("<div>").text("Request failed: " + settings.url));
    });

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.post("data.php", {name: "Alice"}, function(data) { $("#output").append($("<div>").text("jQuery: " + JSON.stringify(data))); });
      fetch("data.php", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({name: "Alice"})
      }).then(function(res) { return res.json(); }).then(function(data) { $("#output").append($("<div>").text("fetch: " + JSON.stringify(data))); });
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

Handling Errors

jQuery surfaces failures through a fail() callback (or a rejected promise on $.ajax()), while fetch uses a rejected promise handled with .catch(). One important difference: fetch only rejects on a genuine network failure, so an HTTP error response like a 404 still resolves successfully and needs an explicit response.ok check.

Example: Handling Errors

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.get("data.php").fail(function() { $("#output").append($("<div>").text("jQuery: request failed")); });
      fetch("data.php").catch(function() { $("#output").append($("<div>").text("fetch: network failure")); });
    });

    $("#resetBtn").click(function() {
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

When Each API Fits

jQuery AJAX remains convenient and familiar in codebases that already depend on jQuery for other things, since it's just one more method on a library that's already loaded. fetch is built directly into every modern browser and pairs naturally with Promise-based and async/await code, without needing jQuery loaded at all.

Example: When Each API Fits

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      // jQuery AJAX fits an existing jQuery project; fetch fits a new dependency-free one
      $("#output").text(typeof $.get + " " + typeof fetch);
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Small AJAX Project

The core skill that transfers between both is understanding asynchronous requests generally — when to reach for jQuery AJAX in an existing jQuery-based project, and when to prefer fetch for new, modern browser-only code with no other jQuery dependency.

Example: Small AJAX Project

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      fetch("data.php").then(function(res) { return res.json(); }).then(function(data) {
        $("#output").text(data.message);
      });
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Global AJAX Hook Listeners · Low-Level AJAX with ajax() · Introduction to AJAX · Vanilla JS Alternatives to jQuery DOM

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Assuming fetch() rejects on a 404 or 500 like jQuery's fail(), when it only rejects on network errors and you must check response.ok.
  2. Forgetting to call response.json() and then using response as the data itself.
  3. Sending a POST with fetch using body: { name: "Ann" }, when the body must be a string like JSON.stringify(...) with a Content-Type header.
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson Vanilla JS Alternatives to jQuery DOM Next Lesson → When to Use jQuery in Modern Web

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.