Analysis and Testing of Ajax-based Single-page Web Applications

A.6 Submitting Data
The new state contains a form which we use as a simple calculator. The user
fills in the first and second digits along with one of the four supported operations
for addition (add), subtraction (sub), multiplication (mul), and division
(div). Upon clicking on the button labeled Calculate, an event is fired which
calls the submitData JavaScript function (see lines 36–41 in Figure A.3), with
calculate.php as URL and result as the target element ID. This function simply
retrieves the input values filled in by the user on the form and calls the
loadFragment function with relevant parameter, i.e., ‘POST’ as method, and the
input values as params.
Figure A.6 shows the server-side PHP code that is responsible for the calculation.
Based on the value of the three request parameters (val1, val2, calc),
a response in returned to the browser.
1
Figure A.6 Server-side PHP calculator.
The response is then injected into the DIV element with ID result. Figure A.7
shows the request/response, focusing on the response returned by the server
as a delta fragment. It also shows the updated browser user interface, in
which the result of the calculation can be seen. Note that all the user interface
updates have taken place on a single page. This is evident by the fact that the
address-bar of the browser is still pointing to the same index HTML page.
168 A.6. Submitting Data