jQuery Deferred Objects
Distinguish a jqXHR’s deferred contract from a native Promise and read each result shape correctly.
How it works
jqXHR exposes jQuery deferred methods such as done, fail and always. $.when can coordinate several such operations, but an Ajax result includes data, status and xhr values rather than a single arbitrary object. This example combines two JSON requests and reads the first element of each result tuple. It does not use synchronous Ajax or depend on one request finishing before the other starts.
Run in a separate local browser lab
Save this complete HTML source as index.html in an empty folder. Put the pinned full jQuery 4.0.0 file beside it and preserve the MIT licence notice. The document includes its own CSS and JavaScript. Bhylu’s shared website theme does not load jQuery globally.
This example requires HTTP. Save the original loopback fixture server in the same folder. With Node 22, run node lab-server.mjs there and open http://127.0.0.1:8127. Stop it with Ctrl+C. The fixed endpoints use fictional data and never save requests. File URLs do not reproduce this contract.
jQuery examples do not run in Bhylu’s current playground: it blocks external libraries and network access. No Apache, MySQL or website configuration change is needed. Review the full-build setup before using Ajax, effects or plugins.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
jQuery Coordinate Asynchronous Results Without Assuming Immediate Order
</title>
<style>
:root {
font:
18px/1.6 system-ui,
sans-serif;
color: #16304e;
background: #fff;
color-scheme: light;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
max-width: 50rem;
margin: auto;
padding: 1.25rem;
}
h1 {
font-size: 1.8rem;
line-height: 1.2;
}
h2 {
font-size: 1.3rem;
}
button,
input,
select,
textarea {
font: inherit;
max-width: 100%;
}
button {
margin: 0.2rem;
padding: 0.4rem 0.7rem;
background: #034fa0;
color: white;
border: 1px solid #034fa0;
border-radius: 0.3rem;
}
button:disabled {
opacity: 0.6;
}
label {
display: block;
margin: 0.5rem 0;
}
input:not([type='checkbox']),
select,
textarea {
display: block;
padding: 0.3rem;
}
a {
color: #034fa0;
}
output {
display: block;
}
article,
section,
fieldset {
padding: 0.75rem;
margin-block: 0.75rem;
border: 1px solid #a9bcd1;
}
ul {
padding-left: 1.5rem;
}
:focus-visible {
outline: 3px solid #0078d4;
outline-offset: 3px;
}
.chosen {
border: 3px solid #0078d4;
}
.highlight {
font-weight: 700;
}
.muted {
opacity: 0.7;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
:root[data-theme='dark'] {
color: #d6e7fb;
background: #061d30;
color-scheme: dark;
}
:root[data-theme='dark'] a {
color: #8ecbff;
}
</style>
</head>
<body>
<main>
<h1>Neighbourhood book swap</h1>
<button id="combine">Load both shelf counts</button><output></output>
</main>
<script src="jquery.min.js"></script>
<script>
jQuery(function ($) {
$('#combine').on('click', function () {
$.when($.getJSON('/api/books'), $.getJSON('/api/books', { kind: 'garden' }))
.done(function (first, second) {
$('output').text(
'Combined local rows: ' + (first[0].length + second[0].length),
);
})
.fail(function () {
$('output').text('One shelf failed');
});
});
});
</script>
</body>
</html>
Expected result
The two fixture results contain three rows in total.
Full jQuery is required for these deferred APIs in the pinned baseline. Native Promise and async/await offer another coordination model, but their value and cancellation contracts should be understood before mixing them casually with jqXHR. Rejecting the combined operation does not automatically cancel every other request. A real screen should define whether partial results are useful or whether all responses are required.
Use jQuery’s official API documentation for exact method and return contracts.