Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
XMLHttpRequest RESTful (GET, POST, PUT, DELETE)
// 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);
@devrsantos

This comment has been minimized.

Copy link

commented Aug 8, 2017

Muito bom, sofri muito até achar..
Obg por compartilhar conosco.

@juulhao

This comment has been minimized.

Copy link

commented Aug 8, 2017

caraaaacaaa! era tudo o que eu precisava no momento! <3

@oliveratgithub

This comment has been minimized.

Copy link

commented Nov 12, 2017

THANK YOU! 👍 👍 👍

@andremxmx

This comment has been minimized.

Copy link

commented Nov 14, 2017

thanks this helps me so much in my study :)

@anantharamsrikanth

This comment has been minimized.

Copy link

commented Nov 30, 2017

it's working...

@Quigut

This comment has been minimized.

Copy link

commented Feb 20, 2018

Hello,
Id Like to know how to get some numerical values with one API, do some arithmetic ope
rations and with the result modify one of the returned values.
I have done some test but i dont know how to reuse the variables. Please, help me or tell me where can I do some examples.
Thank you.

@heardofdezz

This comment has been minimized.

Copy link

commented Apr 17, 2018

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

@iamravimane

This comment has been minimized.

Copy link

commented Apr 19, 2018

thank 👍

@KailunHuang

This comment has been minimized.

Copy link

commented May 4, 2018

thanks a lot

@elmasbestia

This comment has been minimized.

Copy link

commented Jun 18, 2018

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

@theachyutkadam

This comment has been minimized.

Copy link

commented Jun 24, 2018

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

@ufukomer

This comment has been minimized.

Copy link

commented Jul 18, 2018

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

@Rahulsekhardas

This comment has been minimized.

Copy link

commented Jan 5, 2019

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

@k-herwin

This comment has been minimized.

Copy link

commented Mar 7, 2019

Someone found the solution for the Update request ?

@yokristiawan-gmail-com

This comment has been minimized.

Copy link

commented Jun 1, 2019

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

@alfarog1

This comment has been minimized.

Copy link

commented Jun 9, 2019

Thank you for this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.