XMLHttpRequest RESTful (GET, POST, PUT, DELETE)

user.js

// Get all users
var url  = "http://localhost:8080/api/v1/users";
var xhr  = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.onload = function () {
	var users = JSON.parse(xhr.responseText);
	if (xhr.readyState == 4 && xhr.status == "200") {
		console.table(users);
	} else {
		console.error(users);
	}
}
xhr.send(null);


// Get a user
var url  = "http://localhost:8080/api/v1/users";
var xhr  = new XMLHttpRequest()
xhr.open('GET', url+'/1', true)
xhr.onload = function () {
	var users = JSON.parse(xhr.responseText);
	if (xhr.readyState == 4 && xhr.status == "200") {
		console.table(users);
	} else {
		console.error(users);
	}
}
xhr.send(null);


// Post a user
var url = "http://localhost:8080/api/v1/users";

var data = {};
data.firstname = "John";
data.lastname  = "Snow";
var json = JSON.stringify(data);

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
xhr.onload = function () {
	var users = JSON.parse(xhr.responseText);
	if (xhr.readyState == 4 && xhr.status == "201") {
		console.table(users);
	} else {
		console.error(users);
	}
}
xhr.send(json);


// Update a user
var url = "http://localhost:8080/api/v1/users";

var data = {};
data.firstname = "John2";
data.lastname  = "Snow2";
var json = JSON.stringify(data);

var xhr = new XMLHttpRequest();
xhr.open("PUT", url+'/12', true);
xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
xhr.onload = function () {
	var users = JSON.parse(xhr.responseText);
	if (xhr.readyState == 4 && xhr.status == "200") {
		console.table(users);
	} else {
		console.error(users);
	}
}
xhr.send(json);


// Delete a user
var url = "http://localhost:8080/api/v1/users";
var xhr = new XMLHttpRequest();
xhr.open("DELETE", url+'/12', true);
xhr.onload = function () {
	var users = JSON.parse(xhr.responseText);
	if (xhr.readyState == 4 && xhr.status == "200") {
		console.table(users);
	} else {
		console.error(users);
	}
}
xhr.send(null);

Hey Etienne i have question if you dont mind, been working on something for awhile and im quite stuck, i have a stackoverflow post has in details if you dont mind taking a look its concerning request on a rails app :) thanks

https://stackoverflow.com/questions/49677190/post-payload-data-to-database-using-xmlhttprequest-rails?noredirect=1#

thank 👍

thanks a lot

Merci! Je ne pouvais pas trouver comment envoyer les données pour le PUT / POST (Il arrivait toujours vide au serveur)

Update request not working for me. It goes to OPTIONS request method.

@theachyutkadam PATCH is same for me. Did you find the solution?

Can anyone tell me what sort of file is "users" in the Post requests ?

Someone found the solution for the Update request ?

At line 44 why 201 instead of 200? Is it a mistake or intentional???

Thank you for this!

Muitíssimo Obrigado! Esta muito "precisado" de um exemplo tão prático!

Thankyou for this sir..

At line 44 why 201 instead of 200? Is it a mistake or intentional???

When um post a file, the answer is 201 (created). It means the file was created successfully in the server.

thank you

Hi team,
from LN: 31 to 50 i.e. for Post a user, at xhr.onload = function () {} there is asynchronous call so might be control is not reaching at var users = JSON.parse(xhr.responseText); line.
Please guide me here..
Thank You!

Surbhi Rathi

Thanks a lot! It was quite helpful to me:)

You are the best. God bless you :))

Great! thank you.

Thank you :)

This is a great reference. Thanks very much for posting.

Excellent!