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

Headers और Status Codes Process करना

Response headers में server द्वारा भेजी गई extra information होती है। jQuery आपको jqXHR object से उन्हें पढ़ने देता है।

In this page:

  1. 1. Response Headers पढ़ना
  2. 2. Status Codes Check करना
  3. 3. beforeSend और Request Headers
  4. 4. statusCode Option
  5. 5. Headers और Status को Combine करना
Syntax
javascript 
$.ajax({
  url: "url",
  statusCode: {
    404: function () { /* not found */ }
  }
});

1. Response Headers पढ़ना

एक AJAX call से return किया गया jqXHR object आपको server द्वारा भेजे गए raw HTTP response headers inspect करने देता है, जैसे Content-Type या कोई custom API header।

उदाहरण: 1. Reading Response Headers

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, status, jqXHR) {
        $("#output").text(String(jqXHR.getResponseHeader("Content-Type")));
      }});
    });

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

2. Status Codes Check करना

HTTP status codes आपको बताते हैं कि request का असल में क्या हुआ, इससे independent कि jQuery का success या error callback fire हुआ या नहीं। एक 200 response आमतौर पर।

उदाहरण: 2. Checking Status Codes

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, status, jqXHR) {
        $("#output").text("Status code: " + jqXHR.status);
      }});
    });

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

3. beforeSend और Request Headers

beforeSend इस्तेमाल करें किसी request को भेजे जाने से ठीक पहले inspect या modify करने के लिए, जो एक authentication token जैसी चीज़ attach करने की standard जगह है।

उदाहरण: 3. beforeSend and Request Headers

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",
        beforeSend: function(jqXHR) {
          jqXHR.setRequestHeader("Authorization", "Bearer token123");
        }
      });
    });

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

4. statusCode Option

statusCode option आपको specific HTTP status codes के लिए अलग handler functions define करने देता है, जैसे 404 या 403, एक बड़ा error handler लिखने के बजाय।

उदाहरण: 4. statusCode Option

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",
        statusCode: {
          404: function() { $("#output").append($("<div>").text("Not found")); },
          403: function() { $("#output").append($("<div>").text("Forbidden")); }
        }
      });
    });

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

5. Headers और Status को Combine करना

आप headers और status codes को साथ inspect करके request का fuller picture बना सकते हैं — उदाहरण के लिए, status code और दोनों को log करना।

उदाहरण: 5. Combining Headers and Status

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, status, jqXHR) {
        $("#output").text("Status: " + jqXHR.status + "Type: " + jqXHR.getResponseHeader("Content-Type"));
      }});
    });

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

ajax() से Low-Level AJAX · ग्लोबल AJAX Hook Listeners · Cross-Domain Requests: JSONP और CORS · Form Data को Serialize करना

{# 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. #}
आम गलतियां
  1. एक cross-domain request पर xhr.getResponseHeader("x-token") से headers पढ़ना और null मिलना, क्योंकि server को उन्हें Access-Control-Expose-Headers में list करना ज़रूरी है।
  2. 404 या 500 जैसे non-200 status को success मानना, जबकि jQuery उनके लिए error callback call करता है और code को jqXHR.status check करना चाहिए।
  3. request भेजे जाने के बाद request headers set करना, जबकि beforeSend (या headers option) वह जगह है जहाँ उन्हें set किया जाना चाहिए।
🔒

Chapter Quiz — Complete all 4 topics to unlock

0/4 topics done

Complete these topics first:

← Previous Lesson Low-Level AJAX with ajax() Next Lesson → Global AJAX Hook Listeners

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.