Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
XMLHttpRequest example
/* 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);
* 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')
*/'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`).
* 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();'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);
* 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();'PATCH', 'https://databaseurl/todos/1');
editRequest.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
editRequest.send(JSON.stringify({ complete: true }));
* 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:
* "", 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();'DELETE', 'https://databaseurl/todos/1');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment