AJAX Request Types GET, POST, PUT, DELETE is an important AJAX topic because it appears in real projects, debugging sessions, and interviews. Learn the meaning first, then connect it to a small working example so the rule does not stay abstract.
For this page, focus on what problem AJAX Request Types GET, POST, PUT, DELETE solves, where developers usually make mistakes, and how to verify the result. The audit note for this lesson was: under 650 content words; limited checklist/practice/mistake/FAQ notes .
A strong understanding of AJAX Request Types GET, POST, PUT, DELETE should include syntax, behavior, one realistic use case, one failure case, and one quick way to check your work with tools or output.
AJAX Request Types GET POST PUT DELETE should be studied as a practical AJAX lesson, not as a label. Start by naming the input, the rule that changes the input, and the result a learner should be able to predict after reading the page.
In the ajax > ajax-request-types page, the notes should connect the definition with a working scenario, a mistake that beginners actually make, and the exact check that proves the fix. That makes the topic useful for coding, debugging, and interview revision.
AJAX requests use standard HTTP methods. Choosing the right method is important for RESTful API design and correct server-side handling.
| Method | Purpose | Has Body? | Idempotent? |
|---|---|---|---|
| GET | Retrieve data | No | Yes |
| POST | Create a resource | Yes | No |
| PUT | Replace a resource entirely | Yes | Yes |
| PATCH | Partially update a resource | Yes | No |
| DELETE | Remove a resource | Optional | Yes |
| HEAD | Like GET but no response body | No | Yes |
// ---- GET Request ----
// Query parameters are appended to the URL
const params = new URLSearchParams({ search: 'javascript', page: 1 });
const xhrGet = new XMLHttpRequest();
xhrGet.open('GET', `/api/posts?${params}`, true);
xhrGet.onload = () => console.log(JSON.parse(xhrGet.responseText));
xhrGet.send(); // GET has no body
// ---- POST Request ----
// Data is sent in the request body
const xhrPost = new XMLHttpRequest();
xhrPost.open('POST', '/api/posts', true);
// Tell the server we're sending JSON
xhrPost.setRequestHeader('Content-Type', 'application/json');
xhrPost.onload = function () {
if (xhrPost.status === 201) {
console.log('Created:', JSON.parse(xhrPost.responseText));
}
};
// Serialize data to JSON and send in the body
xhrPost.send(JSON.stringify({
title: 'My New Post',
body: 'Post content here',
userId: 1
}));const headers = { 'Content-Type': 'application/json' };
// ---- PUT - replace entire resource ----
fetch('/api/posts/1', {
method: 'PUT',
headers,
body: JSON.stringify({ title: 'Updated Title', body: 'Updated body', userId: 1 })
}).then(res => res.json()).then(console.log);
// ---- PATCH - update specific fields only ----
fetch('/api/posts/1', {
method: 'PATCH',
headers,
body: JSON.stringify({ title: 'Only Title Changed' })
}).then(res => res.json()).then(console.log);
// ---- DELETE - remove a resource ----
fetch('/api/posts/1', {
method: 'DELETE'
}).then(res => {
if (res.ok) console.log('Post deleted successfully');
});
// ---- HEAD - check if resource exists without downloading body ----
fetch('/api/posts/1', { method: 'HEAD' }).then(res => {
console.log('Status:', res.status);
console.log('Content-Type:', res.headers.get('Content-Type'));
});Request headers provide additional information to the server - such as the content type, authentication tokens, or custom metadata. Use setRequestHeader() with XHR or the headers option with fetch().
// ---- XHR: setRequestHeader() ----
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/secure-endpoint', true);
// Must be called AFTER open() and BEFORE send()
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer eyJhbGciOiJIUzI1NiJ9...');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); // common AJAX identifier
xhr.setRequestHeader('Accept', 'application/json');
xhr.onload = () => console.log(xhr.responseText);
xhr.send(JSON.stringify({ action: 'getData' }));
// ---- Fetch: headers option ----
fetch('/api/secure-endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer eyJhbGciOiJIUzI1NiJ9...',
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json'
},
body: JSON.stringify({ action: 'getData' })
}).then(res => res.json()).then(console.log);When studying AJAX Request Types GET, POST, PUT, DELETE, separate three things: the concept, the syntax, and the situation where it is useful. This prevents the lesson from becoming a list of commands with no practical meaning.
In AJAX, AJAX Request Types GET, POST, PUT, DELETE becomes easier when you build a tiny example first, then increase complexity. Add one realistic input, one invalid or boundary input, and one explanation of why the result changes.
const state = { topic: "AJAX Request Types GET POST PUT DELETE", ready: true };
if (state.ready) {
console.log(state.topic + ": render or run the normal path");
}const response = null;
const message = response?.message ?? "AJAX Request Types GET POST PUT DELETE: show a clear fallback";
console.log(message);Memorizing AJAX Request Types GET POST PUT DELETE without the situation where it is useful.
Connect AJAX Request Types GET POST PUT DELETE to a concrete AJAX task.
Testing AJAX Request Types GET POST PUT DELETE only with the perfect input.
Include empty, missing, duplicate, incompatible, or failed cases when relevant.
Changing code before reading the visible symptom or error message.
Inspect the output, state, configuration, or stack trace connected to AJAX Request Types GET POST PUT DELETE.
Memorizing AJAX Request Types GET POST PUT DELETE without the situation where it is useful.
Connect AJAX Request Types GET POST PUT DELETE to a concrete AJAX task.
The common mistake is memorizing syntax without understanding when the behavior changes or fails.
Remember the problem it solves in AJAX, then attach the syntax or steps to that problem.
You can predict the result of a small example, explain a failure case, and choose it over a nearby alternative for a clear reason.
They often copy the syntax but skip the state, input, dependency, selector, route, type, or configuration that controls the behavior.
Explore 500+ free tutorials across 20+ languages and frameworks.