25.07.2014 Views

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

SHOW MORE
SHOW LESS

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.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!