Skip to content

Instantly share code, notes, and snippets.

@jesperorb
Created February 22, 2018 12:33
Show Gist options
  • Save jesperorb/c889de6195ee036724b6263148308c86 to your computer and use it in GitHub Desktop.
Save jesperorb/c889de6195ee036724b6263148308c86 to your computer and use it in GitHub Desktop.
XMLHttpRequest example
/****************
* GET REQUEST *
****************/
/* We create a new request-object that will handle the transaction between the server/database
* and the client (me/us/the browser). */
var request = new XMLHttpRequest();
/*
* We add a listener to the request which will listen to when the state changes,
* aka when we get back data from the server. So instead of listening to a onlick
* we are listening for a response from the server. IMPORTANT: everything related to
* the data, like displaying it on the website, must be handled inside of this function.
* only in the `if`-statement below do we truly know that the data has been recieved. This
* is the core of asynchronous actions in JavaScript, always wait for a response.
*/
request.onreadystatechange = function() {
if (request.readyState === 4) {
// A status of 4 means a completed transfer of data. We can then get the data
// by saying `request.responseText` which in this case (and most cases) is JSON-format
var data = JSON.parse(request.responseText);
console.log(data);
}
};
/*
* To actully send the request we need to first specify type of request ('GET')
* and to which URL we want to make this request ('https://databaseurl/todos')
*/
request.open('GET', 'https://databaseurl/todos');
/* After this is done we can send the request. We are only GETTING information from the
* database not storing anything so we just need to send the request and wait for the response.
* The waiting for response happens in the function above (`request.onreadystatechange`).
*/
request.send();
/****************
* POST REQUEST *
****************/
/*
* If we want to store a new resource in the database we must send a POST request, telling
* the database what to store and where to store it. Notice that we are sending a POST-request
* to the same URL as above. A URL can recive a GET-request AND a POST-request at the same URL.
* To do a post we need to specify 'POST'. We also have to send along the data we want to store
* inside of the method `send()`. In this database (like MySQL) the ID is auto incremented so each
* new TODO will get a unique ID and we can then reference it via `https://databaseurl/todos/:id`
*/
var postRequest = new XMLHttpRequest();
postRequest.open('POST', 'https://databaseurl/todos');
postRequest.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
postRequest.send(JSON.stringify({ text: 'Buy House', complete: false }));
/*
* Every request can listen for a response ('GET','POST','PATCH', 'DELETE')
* If we post something we can get the resource sent to us in the same way like we
* did with a 'GET'-request. This can be useful when we want to update the page
* with the newly created value in the database without doing another 'GET'-request. Not
* all APIs work this way tho, but most of them send back the created response
*/
postRequest.onreadystatechange = function() {
if (postRequest.readyState === 4) {
var data = JSON.parse(postRequest.responseText);
console.log(data);
}
};
/*****************
* PATCH REQUEST *
*****************/
/*
* When we want to edit a resource we need to specify which
* todo we want to change, this is done in the URL. We specify that we want to change
* the resource with the ID of 1 and use the verb 'PATCH'.
* We don't want to change every value (just toggle the completed) so we send along just
* that property with the new value (`true`). Every other property of the object will remain
* the same if we use `PATCH`.
*/
var editRequest = new XMLHttpRequest();
editRequest.open('PATCH', 'https://databaseurl/todos/1');
editRequest.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
editRequest.send(JSON.stringify({ complete: true }));
/******************
* DELETE REQUEST *
******************/
/*
* Delete requests doesn't need to send any data inside of the `send()`-method. We are
* removing data so we just need to specify WHAT we want to remove. What we want to remove
* is specified in the URL. So we are sending a DELETE-request to the URL:
* "https://fed17.herokuapp.com/todos/1", this means that we want to remove the todo with an ID
* of 1. It is important to specify the method 'DELETE' inside of `open()`
*/
var deleteRequest = new XMLHttpRequest();
deleteRequest.open('DELETE', 'https://databaseurl/todos/1');
deleteRequest.setRequestHeader(
'Content-Type',
'application/json;charset=UTF-8'
);
deleteRequest.send();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment