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

params a string representing the request content. Used with the POST method
to send form parameters to the server.
target element id the ID of the DOM element where the response content should
be injected into.
callbackFunction handles the response content.
Using these parameters, the loadFragment function sends a request to the
server and calls the callback function when a valid response is obtained from
the server.
The getData function is a wrapper function which calls the loadFragment
function with the correct parameters.
The getData function is attached to the onclick attribute of the clickable element,
as can be seen in line 12 of Figure A.1. This function is called with two
parameters, namely server.php as the URL, and container as the target element
ID. This gives us the desired behavior that when the element is clicked
by the user, the getData method is called, which in turn calls the loadFragment
function to get data from the server.php URL on the server.
A.4 The Server-side Code
Figure A.4 show the contents of our server.php which simply returns the code
for a HTML form.
1
Figure A.4 server.php source code.
A.5 DOM Injection
Once the response of the server is successfully arrived at the browser, the
callback function is called. The insertIntoDOMElement function takes the ID
of the target element and the response data, as parameters. It uses the ID to
find a reference to the corresponding run-time element in the DOM instance
(line 28 in Figure A.3). Once a reference has been found, the response data is
injected into the inner part of that element. As soon as the content is injected
166 A.4. The Server-side Code