This blog briefly outlines one Ajax pitfall that can lead to inconsistency between user input and the rendered ajax response. I encountered this problem when developing a network management application where user can click a network node from browser then to see its statistical data. In the application, clicking a node would highlight the node and fire an Ajax call to fetch the device status data. Then the data is rendered once browser receives the response. At the end, it is expected to see the staticstics matching the highlighted node. However things sometimes can go wrong due to the asynchronization nature of the Ajax.
To illustrate the problem, I here wrote a very simple web page that contains a on/off switch. When the switch is pressed, an Ajax call is fired to fetch the data related to this state. You can simply download the files and open the index.html file in a browser and quickly click the switch a few times. You will notice you may end up in a state where the switch is “ON” but the server says “OFF”.
This is caused by unpredictable delay from the network or server when fulfilling the asynchronization request illustrated by the diagram below.
To void of such problems, you should carefully design your UI and ajax invocations. Depending on your application, you may also include some request information in the response so UI can decide how to render the response by checking the embedded request information.