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

1 if(navigator.appName == "Microsoft Internet Explorer") {
2 var xmlHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
3 } else {
4 var xmlHttpRequestObject = new XMLHttpRequest ();
5 }
6
7 var COMPLETED = 4;
8 var SUCCESS = 200;
9
10 function loadFragment(method , url , params , target_element_id , callbackFunction) {
11 xmlHttpRequestObject.open(method , url , true);
12 xmlHttpRequestObject.onreadystatechange = function() {
13 if (xmlHttpRequestObject.readyState == COMPLETED
14 && xmlHttpRequestObject.status == SUCCESS) {
15 callbackFunction(target_element_id , xmlHttpRequestObject.responseText);
16 }
17 }
18
19 if (method == "POST") {
20 xmlHttpRequestObject.setRequestHeader("Content -type",
21 "application/x-www -form -urlencoded");
22 } else {
23 xmlHttpRequestObject.setRequestHeader("Content -type",
24 "text/plain");
25 }
26
27 xmlHttpRequestObject.send(params);
28 }
29
30 function insertIntoDOMElement(target_element_id , data) {
31 var element = document.getElementById(target_element_id);
32 element.innerHTML = data;
33 }
34
35 function getData(url , target_element_id) {
36 loadFragment(’GET ’, url , null , target_element_id , insertIntoDOMElement);
37 }
38
39 function submitData(url , target_element_id) {
40 var params = "val1=" + document.getElementById(’val1 ’).value +
41 "&val2=" + document.getElementById(’val2 ’).value +
42 "&calc=" + document.getElementById(’calc ’).value;
43
44 loadFragment(’POST ’, url , params , target_element_id , insertIntoDOMElement);
45 }
Figure A.3 The JAVASCRIPT code. XMLHttpRequest is used to asynchronously
transfer data between the web server and the browser.
Appendix A. A Single-page Ajax Example Application 165