Analysis and Testing of Ajax-based Single-page Web Applications
Analysis and Testing of Ajax-based Single-page Web Applications
Analysis and Testing of Ajax-based Single-page Web Applications
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
A <strong>Single</strong>-<strong>page</strong> <strong>Ajax</strong> Example<br />
Application<br />
his appendix contains a very simple example to present the underlying<br />
T concepts behind <strong>Ajax</strong>, which are described in Chapters 1 <strong>and</strong> 2.<br />
A.1 The HTML <strong>Single</strong>-<strong>page</strong><br />
Figure A.1 shows the main (<strong>and</strong> only) HTML <strong>page</strong> <strong>of</strong> the example site. This<br />
is the <strong>page</strong> that is retrieved by the browser on the initial request to the server.<br />
The <strong>page</strong> contains a number <strong>of</strong> elements. The HEADER includes links to a Java-<br />
Script file <strong>and</strong> a style sheet for presentation. The BODY consists <strong>of</strong> a heading<br />
(H3) <strong>and</strong> a container (DIV). As can be seen, the DIV container encompasses<br />
some plain text as well as a clickable element (A).<br />
Appendix<br />
A<br />
1 <br />
2 <br />
3 <br />
4 <br />
5 <strong>Single</strong> -<strong>page</strong> <strong>Ajax</strong> Site<br />
6 <br />
7 <br />
8 <br />
9 Welcome to the <strong>Ajax</strong> demo site!<br />
10 <br />
11 This is where the remote content is injected.<br />
12 Click<br />
13 <br />
14 <br />
15 <br />
16 <br />
Figure A.1 The Index HTML <strong>page</strong>.<br />
A.2 The Run-time DOM<br />
After the HTML content is received from the server, the browser parses the<br />
<strong>page</strong> <strong>and</strong> creates a Document Object Model (DOM) instance, which can be<br />
seen as a tree representing the run-time elements <strong>and</strong> their properties, as<br />
shown in Figure A.2. This DOM-tree is then used to build the browser user<br />
interface. Figure A.2 also shows the rendered <strong>page</strong> after the initial load by the<br />
browser.