JavaScript HTML PUT with callback function

I've been a computer programmer for over 40 years but a few years ago when I first learned how to do JavaScript HTML programming using callback functions, it nearly fried my brain. There was a paradigm shift that took me a while to understand. I was always taught that when you execute a programming function, it starts with the first line of code and executes them in sequence top to bottom with possibly conditional statements and/or loops thrown in the middle. But because JavaScript is interpreted and not precompiled, things work bit differently. When dealing with HTML communication you pass information to the remote device about what you want it to do. But then you also pass it what is called a "callback function". This is a piece of code that will be executed only after the remote device responds to your request. You have no idea when that response is going to come. So even though the function definition is included in your code at a particular point in the source code, it is not going to get executed immediately.

It helps to think of a callback function somewhat like an interrupt handler. There's nowhere in your in your code that explicitly calls this function. Rather the function gets called when a certain event occurs. In this case when the response comes back from the HTML device to which you have sent a request.

We said that we made a call to the function "getRest(url,cb)". The first parameter is rather simple. It would look something like "http://196.168.1.105/irsend/2/12345/20/". The second parameter "cb" is the callback function.

This function DOES NOT get executed when you call "getRest". It looks like it does but it doesn't. It only gets called when your device acknowledges that it has received the REST command. In this case the function takes the response text returned by your device, converts it into a JSON formatted string and uses the innerText command to display it on your webpage. Each time you click a button on the remote you can see the text that is returned.

For example the webpage might display something like this

{"status":200,"statusText":"OK","data":{"command":"irsend","protocol":1,"code":16609423,"bits":0}}

The contents of the "data" field was created by the Arduino sketch in the "processIR" function using "client.print()" commands.

Inside the getRest() function is where we do the actual HTML PUT command. The heart of the command is the "XMLHttpRequest()" object which we create in the variable "Request". We use various methods and variables of that object to set up the request and then eventually transmit it. The first variable we set is the "Request.onreadystatechange". Again this variable is a callback function definition. This code does not yet executed where we have defined it. Rather we have created batch of code that will get called every time the ready state of our request changes. Inside this function we check for the ready state to be equal to 4 which means that the request has been completed.

The "Request.open("PUT", url, true)" method tells it that this is a HTML PUT command and passes it the REST URL we want to put. Finally we "Request.send()".

For more information about XMLHttpRequest we suggest the following resource https://www.w3schools.com/xml/xml_http.asp

We haven't intended to make this a complete tutorial on how to use JavaScript and callback functions and all the other intricacies of this implementation but we didn't want to give you a peek under the hood, it works. We suggest you use some of the links we have provided if you want to explore these topics further.

This guide was first published on Mar 12, 2018. It was last updated on Mar 12, 2018. This page (JavaScript HTML PUT with callback function) was last updated on Sep 22, 2019.