Skip to content

Instantly share code, notes, and snippets.

@EtienneR
Created January 7, 2016 23:39
Show Gist options
  • Save EtienneR/2f3ab345df502bd3d13e to your computer and use it in GitHub Desktop.
Save EtienneR/2f3ab345df502bd3d13e to your computer and use it in GitHub Desktop.
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);
@ashuGulati
Copy link

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

@AnichinTaras
Copy link

You are the best. God bless you :))

@Risyandi
Copy link

Risyandi commented May 2, 2021

Great! thank you.

Copy link

ghost commented Jul 30, 2021

Thank you :)

@oC-n
Copy link

oC-n commented Dec 20, 2022

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

@useyourillusions
Copy link

Excellent!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment