Processing Headers and Status Codes
In this page:
1. Reading Response Headers
The jqXHR object returned from an AJAX call lets you inspect the raw HTTP response headers the server sent back, such as Content-Type or a custom API header. This is useful when a server communicates extra metadata outside the response body itself, like pagination info or a rate-limit count.
Example: 1. Reading Response Headers
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({url: "data.php", success: function(data, status, jqXHR) {
console.log(jqXHR.getResponseHeader("Content-Type"));
}});
</script>
</body>
</html>2. Checking Status Codes
HTTP status codes tell you what actually happened to the request, independent of whether jQuery's success or error callback fired. A 200 response usually means success, a 404 means the resource wasn't found, and a 500 means the server itself failed — checking the code lets your code react differently to each case.
Example: 2. Checking Status Codes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({url: "data.php", success: function(data, status, jqXHR) {
console.log("Status code:", jqXHR.status);
}});
</script>
</body>
</html>3. beforeSend and Request Headers
Use beforeSend to inspect or modify a request right before it's sent, which is the standard place to attach things like an authentication token. The setRequestHeader method on the jqXHR object passed into beforeSend is what actually adds a custom header to the outgoing request.
Example: 3. beforeSend and Request Headers
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "data.php",
beforeSend: function(jqXHR) {
jqXHR.setRequestHeader("Authorization", "Bearer token123");
}
});
</script>
</body>
</html>4. statusCode Option
The statusCode option lets you define separate handler functions for specific HTTP status codes, like 404 or 403, instead of writing one big error handler with if-statements. This keeps status-specific handling clear and makes each case easy to read on its own.
Example: 4. statusCode Option
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "data.php",
statusCode: {
404: function() { console.log("Not found"); },
403: function() { console.log("Forbidden"); }
}
});
</script>
</body>
</html>5. Combining Headers and Status
You can inspect headers and status codes together to build a fuller picture of what happened to a request — for example, logging both the status code and a custom header when debugging why an API call behaved unexpectedly. This combination is especially useful when working against third-party APIs you don't control.
Example: 5. Combining Headers and Status
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({url: "data.php", success: function(data, status, jqXHR) {
console.log("Status:", jqXHR.status, "Type:", jqXHR.getResponseHeader("Content-Type"));
}});
</script>
</body>
</html>Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: