The examples in this repo use the same user interface:
- There is a button you can press to initiate an XMLHttpRequest to the Nobel Prize API.
- There is an input field. It is not used by the JavaScript code but trying to type in it while a synchronous XMLHttpRequest is pending will fail.
- There is a
<pre>tag in the<body>where the response JSON of the XMLHttpRequest will be displayed.
To exacerbate the response time of the requests, open the Chrome Developer Tools, select the Network tab and change the Network Throttling menu to 'Slow 3G'.
This folder shows the unchanging part of the code by way of introduction. Pressing the button just produces a console.log.
This folder demonstrates how a synchronous XMLHttpRequest makes the UI unresponsive while the XMLHttpRequest is pending.
- The timer is temporarily stopped.
- The GO button remains highlighted.
- The input field cannot be focussed, let alone typed in.
This version makes two asynchronous requests using callbacks. The second request depends on data from the first request.
The code from 2-xhr-callback refactored to use promises.
The code from 3-xhr-promise refactored to use promises with async/await.