← Back to jQuery Course | Chapter 10: Advanced AJAX | Lesson 1 of 4

Low-Level AJAX with ajax()

The ajax() method gives you detailed control over an AJAX request. You can set the URL, method, data, and callbacks yourself.

In this page:

  1. 1. What is ajax()?
  2. 2. GET Requests
  3. 3. POST Requests
  4. 4. Request Options
  5. 5. Handling Errors
Syntax
javascript 
$.ajax({
  url: "url",
  type: "GET",
  data: { key: "value" },
  dataType: "json",
  success: function (response) { /* ... */ },
  error: function (xhr, status, error) { /* ... */ }
});

1. What is ajax()?

$.ajax() is the low-level method every jQuery AJAX shortcut ($.get, $.post, $.getJSON) is actually built on top of internally. Using it directly gives you full control over the request's options — method, headers, timeouts, and callbacks — when the shortcuts aren't flexible enough for what you need.

Example: 1. What is ajax()?

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..."));
      $.ajax({url: "data.php", success: function(data) {
        $("#output").text(JSON.stringify(data));
      }});
    });

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

2. GET Requests

Use GET when you only need to read data from the server, such as fetching a list of products or a user's profile. The response arrives in the success callback (or the done() handler on the returned promise), ready to use once it comes back.

Example: 2. GET Requests

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..."));
      $.ajax({url: "data.php", method: "GET", success: function(data) {
        $("#output").text(JSON.stringify(data));
      }});
    });

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

3. POST Requests

Use POST when you're sending data to the server to create or update something, like submitting a form or saving a comment. The data option holds the values to send, and jQuery serializes them into the request body for you.

Example: 3. POST Requests

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..."));
      $.ajax({url: "data.php", method: "POST", data: {name: "Alice"}, success: function(response) {
        $("#output").text(JSON.stringify(response));
      }});
    });

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

4. Request Options

The ajax() method accepts many configuration options beyond the URL and data. timeout limits how long to wait before giving up, dataType tells jQuery how to parse the response, contentType describes what you're sending, and beforeSend lets you modify the request just before it goes out (for example, to add an auth header).

Example: 4. Request Options

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..."));
      $.ajax({
        url: "data.php",
        timeout: 5000,
        dataType: "json",
        success: function(data) { $("#output").text(JSON.stringify(data)); }
      });
    });

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

5. Handling Errors

The error callback fires whenever the request fails — a network problem, a timeout, or a server error status. It receives the jqXHR object, a status text, and an error message, which together are usually enough to diagnose what went wrong without guessing.

Example: 5. 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..."));
      $.ajax({
        url: "data.php",
        error: function(jqXHR, statusText, errorMsg) {
          $("#output").text(String(statusText) + " " + errorMsg);
        }
      });
    });

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

Global AJAX Hook Listeners · Introduction to AJAX · jQuery AJAX vs Fetch API · Processing Headers and Status Codes

{# 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. Forgetting to set method or type, so the request defaults to GET when a POST was intended.
  2. Sending an object with data but the server expects JSON, when it needs contentType: "application/json" and JSON.stringify(...).
  3. Setting dataType: "json" when the server returns something else, which triggers the error callback even though the request succeeded.
🔒

Chapter Quiz — Complete all 4 topics to unlock

0/4 topics done

Complete these topics first:

← Previous Lesson Serializing Form Data Next Lesson → Processing Headers and Status Codes

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.