This page needs a newer browser to run its tools. You can still read everything here.

jQuery 4 (legacy code and migration to DOM APIs) Module 4

Ajax, Deferreds and forms interview questions

Interview questions on ajax, Deferreds and forms: short warm-ups, then what each harder question tests, the first step of a good answer and its follow-ups.

15 questions: 5 warm-ups and 10 with model answers · Levels: Fresher to staff

Warm-up questions

Short questions with short answers, each answered in full.

Fresher to mid

How do $.get(), $.post() and $.ajax() differ?

Answered in the lesson Ajax with jQuery: $.ajax, get, post and load
Mid

How do done() and then() on a jQuery Deferred differ?

Answered in the lesson Deferreds, jqXHR, promises and async/await
Fresher to mid

Name the four Ajax changes of jQuery 4.

Answered in the lesson What changed in jQuery 4 Ajax: JSONP, scripts
Fresher to mid

Why does fetch() not reject on a 404?

Answered in the lesson Replacing $.ajax with fetch without breaking servers
Fresher to mid

How do you read the chosen radio button and a checkbox's state with jQuery?

Answered in the lesson Forms: val(), serialize() and jQuery Validation

Questions with model answers

What each question tests, the first step of a good answer and the follow-ups to expect.

Fresher to senior

After a refactor, a PHP endpoint that saved enquiries finds $_POST['name'] missing, although the browser shows the request answered with 200. The new code sends the enquiry with $.ajax(). How do you find the cause, and how do you fix it without breaking the endpoint's other callers?
What it tests

Reading a request's Content-Type and body, knowing how jQuery encodes objects and strings and how PHP fills $_POST, and choosing between a form body and a JSON endpoint on purpose.

First step

Open the request in the browser's network panel and compare its Content-Type and body with what the endpoint reads. JSON text under the form Content-Type, the text [object Object] or a multipart body without its boundary each point to one setting: data, contentType or processData.
Follow-ups
- Why did the server answer 200 instead of an error?
- Which fix keeps the other callers working, a form body again or an endpoint that reads JSON?
- How would a test catch this before a release?
From the lesson Ajax with jQuery: $.ajax, get, post and load
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.
Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
Pro pass · 1 week₹79$2.99
30 days₹179$5.99
1 year₹1,699$45
One payment; a pass never renews. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
Choose a pass I have a licence key
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

A team adds $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': token } }) so that every form post carries Laravel's CSRF token. The next day a currency widget, which calls another company's API, shows no rates, and the console reports a CORS error. Explain what happened and how you would fix it.
What it tests

Knowing that global settings reach every request, that a custom header makes a cross-origin request need a preflight, and how to send a CSRF token to one's own origin only.

First step

Look at the failing call in the network panel: an OPTIONS request with Access-Control-Request-Headers naming x-csrf-token, answered without permission for that header, and no GET after it. That ties the new header to the failure.
Follow-ups
- Why does one extra header need a preflight when the plain GET did not?
- Would it be fine if the API allowed the header?
- How do you add the token to your own requests only?
From the lesson Ajax with jQuery: $.ajax, get, post and load
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

A dashboard loads three panels with $.when(sales, stock, tickets).done(render). When the tickets service fails, the whole dashboard stays empty and the console shows nothing. Explain why, and change the code so that the other panels still appear and the failure is reported.
What it tests

Knowing that $.when() and Promise.all() fail at the first rejection, what their callbacks receive, and how Promise.allSettled() or handling each request keeps independent parts of a page working.

First step

Check whether the chain has a fail() or a catch(). $.when() rejected with the jqXHR of the tickets request, so done() never ran, and with no handler nothing reported it. Then ask whether the three panels depend on each other; here they do not.
Follow-ups
- What do the done() arguments look like, and what changes with Promise.all()?
- How do you report the failed panel without hiding the others?
- Would you keep $.when() anywhere in this code?
From the lesson Deferreds, jqXHR, promises and async/await
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to staff

A team converted a product page from Deferred then() chains to async/await. The tests pass and the same requests go out, but in production the price box sometimes keeps showing its loading placeholder. What could the conversion have changed, and how would you find and prove it?
What it tests

Knowing how jQuery's then() and done(), native promises and timers are scheduled, and testing the order of page updates rather than only the requests.

First step

List everything else that writes to the price box and when it runs. A placeholder set from setTimeout() runs in a timer task: with jQuery's then() the render ran after it, with await on a native promise the render runs before it, and the timer then overwrites the price.
Follow-ups
- Why did await on the old jQuery promise keep the old order?
- How would a test catch this before production?
- What is the right fix, the timer or the render?
From the lesson Deferreds, jqXHR, promises and async/await
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

After an upgrade to jQuery 4, an exchange-rates widget that calls $.getJSON('https://api.partner.example/rates?callback=?') shows nothing, and the console reports a CORS error. It worked for years on jQuery 3. What changed, and what do you do, both now and properly?
What it tests

Knowing that jQuery 4 dropped JSON-to-JSONP promotion, why JSONP is a risk, and how to move to CORS with an allowlist on the server, or to a proxy when the server cannot change.

First step

Compare the request on both versions in the network panel. On jQuery 3 it went from a script element with a jQuery<number>_<number> callback; on jQuery 4 it is an XMLHttpRequest with callback=? and an Origin header, and the partner's answer carries no Access-Control-Allow-Origin.
Follow-ups
- What is the quickest change that restores the widget, and what does it cost?
- What should the partner's API send instead?
- What if the partner cannot change their server?
From the lesson What changed in jQuery 4 Ajax: JSONP, scripts
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

A team turns on Content-Security-Policy: script-src 'self' after upgrading to jQuery 4. Most widgets load, but the map widget, loaded with $.ajax({ url: '/widgets/map.js', dataType: 'script', headers: { 'X-Widget': 'map' } }), is blocked. Why this one, and how do you fix it without weakening the policy?
What it tests

Knowing how jQuery 4 chooses between a script element and XMLHttpRequest with inline code, what a strict policy allows, and how scriptAttrs or dropping the headers keeps the policy strict.

First step

Read the policy report or the console: an inline script was refused. Then find what sends this request through XMLHttpRequest: a script element cannot send headers, so the headers setting makes jQuery fetch the code and run it inline.
Follow-ups
- Why did the same widget load before the policy was turned on?
- What if the server really needs to know which widget asked?
- Why not add 'unsafe-inline' to the policy?
From the lesson What changed in jQuery 4 Ajax: JSONP, scripts
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

A Laravel app's enquiry form moved from $.post() to fetch(). Valid enquiries still save, but when validation fails the page shows nothing, and the console has a SyntaxError from response.json(). The network panel shows a 302 and then a 200. Explain the chain of events and fix it.
What it tests

Knowing that fetch() sends no X-Requested-With, how Laravel's expectsJson() chooses between a 422 and a redirect, that fetch() follows redirects, and fixing it in the client or the server without hiding failures.

First step

Read the failing request's headers: the CSRF token is there, but X-Requested-With is not and Accept is /. For Laravel that is not a request that expects JSON, so a validation failure redirects back to the form instead of answering 422.
Follow-ups
- Why did the valid enquiries keep working?
- Which fix belongs in the client, and which in the server?
- How would a test have caught it before the release?
From the lesson Replacing $.ajax with fetch without breaking servers
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Senior to staff

A codebase has about 400 $.ajax() calls against a PHP back end, and the team wants to remove jQuery. Design the fetch() wrapper the calls will move to, and the plan that proves each converted call still sends what the server expects.
What it tests

Turning $.ajax() behaviour into an explicit contract: errors, parsing, timeouts, cancellation, headers, encoding and uploads, and a migration plan that compares requests before and after instead of trusting a reading of the code.

First step

List what the calls rely on today: fail() for HTTP errors, parsed JSON, timeouts, abort(), the CSRF header and X-Requested-With, bracket-encoded arrays, FormData uploads and any progress bars. Each one becomes a rule of the wrapper or a reason to keep XMLHttpRequest.
Follow-ups
- What does the wrapper return and throw, exactly?
- How do you prove that a converted call sends the same request?
- Which calls should not move to fetch() at all?
From the lesson Replacing $.ajax with fetch without breaking servers
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

A bug report says that typing <b>4110</b> into a registration form's PIN field makes its error message bold. The form uses jQuery Validation 1.22.1 with a message function that repeats the value. Explain why this happens, why it is a security issue, and how you fix it and make sure it stays fixed.
What it tests

Knowing how jQuery Validation inserts messages, what CVE-2025-3573 and the escapeHtml option are, why text from users must not reach the page as HTML, and writing a check that fails on the weak setting.

First step

Reproduce it and inspect the message element: it holds a real <b> element, so the message was inserted as HTML. Then check the plugin's settings: without escapeHtml: true, jQuery Validation inserts every message with .html(), even on 1.22.1.
Follow-ups
- Why did updating to 1.22.1 not fix it?
- Is escapeHtml enough, or should the message change too?
- What test keeps it fixed?
From the lesson Forms: val(), serialize() and jQuery Validation
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Senior to staff

A site has 40 forms validated by jQuery Validation, several with equalTo and remote rules, some with RegExp patterns, and screen reader users have reported that errors are hard to find. Plan the move to the browser's constraint validation without a release in which any form accepts what it refused before.
What it tests

Mapping plugin rules to attributes and setCustomValidity(), the anchoring of patterns, the minlength rule for scripted values, accessible messages with aria-describedby and focus, and a migration order backed by tests.

First step

Inventory every form's rules and sort them: those with an attribute (required, email, lengths, min, max, anchored patterns), those that compare fields (equalTo), those that ask the server (remote), and RegExp patterns without anchors, which need a decision because they accept more than they seem to.
Follow-ups
- In which order do you move the rules, and why does the plugin not have to go first?
- How do you make the errors easy to find for screen reader users?
- What do the tests of each form check?
From the lesson Forms: val(), serialize() and jQuery Validation
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes

The lessons of this module

Ajax with jQuery: $.ajax, get, post and load Free lesson, Pro answers: 25 minutes
Deferreds, jqXHR, promises and async/await Free lesson, Pro answers: 20 minutes
What changed in jQuery 4 Ajax: JSONP, scripts Free lesson, Pro answers: 20 minutes
Replacing $.ajax with fetch without breaking servers Free lesson, Pro answers: 20 minutes
Forms: val(), serialize() and jQuery Validation Free lesson, Pro answers: 20 minutes

All jQuery 4 (legacy code and migration to DOM APIs) interview questions · The jQuery 4 (legacy code and migration to DOM APIs) track

Warm-up questions

How do $.get(), $.post() and $.ajax() differ?

How do done() and then() on a jQuery Deferred differ?

Name the four Ajax changes of jQuery 4.

Why does fetch() not reject on a 404?

How do you read the chosen radio button and a checkbox's state with jQuery?

Questions with model answers

After a refactor, a PHP endpoint that saved enquiries finds $_POST['name'] missing, although the browser shows the request answered with 200. The new code sends the enquiry with $.ajax(). How do you find the cause, and how do you fix it without breaking the endpoint's other callers?

A team adds $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': token } }) so that every form post carries Laravel's CSRF token. The next day a currency widget, which calls another company's API, shows no rates, and the console reports a CORS error. Explain what happened and how you would fix it.

A dashboard loads three panels with $.when(sales, stock, tickets).done(render). When the tickets service fails, the whole dashboard stays empty and the console shows nothing. Explain why, and change the code so that the other panels still appear and the failure is reported.

A team converted a product page from Deferred then() chains to async/await. The tests pass and the same requests go out, but in production the price box sometimes keeps showing its loading placeholder. What could the conversion have changed, and how would you find and prove it?

After an upgrade to jQuery 4, an exchange-rates widget that calls $.getJSON('https://api.partner.example/rates?callback=?') shows nothing, and the console reports a CORS error. It worked for years on jQuery 3. What changed, and what do you do, both now and properly?

A Laravel app's enquiry form moved from $.post() to fetch(). Valid enquiries still save, but when validation fails the page shows nothing, and the console has a SyntaxError from response.json(). The network panel shows a 302 and then a 200. Explain the chain of events and fix it.

A codebase has about 400 $.ajax() calls against a PHP back end, and the team wants to remove jQuery. Design the fetch() wrapper the calls will move to, and the plan that proves each converted call still sends what the server expects.

A bug report says that typing <b>4110</b> into a registration form's PIN field makes its error message bold. The form uses jQuery Validation 1.22.1 with a message function that repeats the value. Explain why this happens, why it is a security issue, and how you fix it and make sure it stays fixed.