The five states and four transitions in the AJAX process are:
- request not initialized
- server connection established
- request received
- processing request
- request finished and response is ready
If we don’t care about trying to trap process errors, assume we’ll always get to state 4, and don’t implement a timeout we can change the code from last time so it only updates when the process completes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
echo " function startSliceAjax() {"; echo " var xmlhttp = new XMLHttpRequest();"; echo " var handle = document.getElementById('startButton');"; echo " var parentHandle = handle.parentNode;"; echo " xmlhttp.onreadystatechange = function() {"; echo " if (this.readyState == 4) {"; echo " if (this.status == 200) {"; echo " parentHandle.innerHTML = this.responseText;"; echo " parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSlice()'>End</button>`;"; echo " sliceIndex = parentHandle.previousElementSibling.innerHTML;"; echo " } else {"; echo " alert('error encountered');"; echo " }"; echo " }"; echo " };"; echo " xmlhttp.open('GET','UpdateStartTime.php?q='+$ToDoID, true);"; echo " xmlhttp.send();"; echo " }"; |
This way we only do something when the process completes. Note that setting up the End button only happens if and when a successful AJAX operation is completed. If the two lines were left at the bottom of the function there could be timing issues, so one has to be mindful of the asynchronous nature of the operations at all times.