Some experiments with web applications
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

198 lines
6.6 KiB

  1. // variable to en-/disable debug
  2. // set to 1 to enable debug log
  3. var DEBUG = 1;
  4. // xmlhttp object function
  5. function getHTTPObject() {
  6. // debug log
  7. if (DEBUG === 1) {console.log("xml http object function");}
  8. // variable definitions
  9. var xhr;
  10. // check for availibility if xmlhttprequest object
  11. if(window.XMLHttpRequest) {
  12. xhr = new XMLHttpRequest();
  13. } else if(window.ActiveXObject) {
  14. xhr = new ActiveXObject("Msxml2.XMLHTTP");
  15. }
  16. return xhr;
  17. }
  18. // ajax call function
  19. function ajaxCall(dataUrl, outputElement, callback, responseType) {
  20. // debug log
  21. if (DEBUG === 1) {console.log("ajax function");}
  22. // variable definitions
  23. var response,
  24. request = getHTTPObject(); // get the xmlhttp object which is supported
  25. outputElement.innerHTML = "Lade Daten ...";
  26. request.onreadystatechange = function() {
  27. if(request.readyState === 4 && request.status === 200) {
  28. //save ajax response
  29. if (responseType === "json") {
  30. response = JSON.parse(request.responseText);
  31. } else if (responseType === "xml") {
  32. response = request.responseXML;
  33. } else {
  34. response = request.responseText;
  35. }
  36. // check if callback is a function
  37. if(typeof callback === "function") {
  38. callback(response);
  39. }
  40. }
  41. };
  42. request.open("get", dataUrl, true);
  43. request.send(null);
  44. }
  45. // wrap all in anonymous function to get out of global scope
  46. (function() {
  47. //variable definitions
  48. var serverUrl, // this will hold the url we call with the ajaxCall() function
  49. target = document.getElementById("output"), // get the html area where we print out the data
  50. searchForm = document.getElementById("search-form"), // get the search form
  51. haltestelle; // object with methods to get and process the data
  52. // debug log
  53. if (DEBUG === 1) {console.log("anonymous function");}
  54. // parse actual url and parse for protocol type (http/https)
  55. // set the ajax server url dependent on the protocol
  56. // for strato ssl-proxy, we have to insert the 1st part of the url path
  57. serverUrl = window.location.protocol + "//" + window.location.hostname;
  58. if (serverUrl.indexOf("https") === -1) {
  59. serverUrl += "/cgi-bin/";
  60. } else {
  61. serverUrl += "/" + window.location.pathname.split("/")[1] + "/cgi-bin/";
  62. }
  63. // haltestelle object
  64. haltestelle = {
  65. getAbfahrten : function (event) {
  66. // debug log
  67. if (DEBUG === 1) {console.log("getAbfahrten() method");}
  68. // prevent submit default behaviour
  69. event.preventDefault();
  70. // construct ajax url
  71. var hstName = document.getElementById("q").value,
  72. hstUrl = encodeURI(serverUrl + "abfahrtsmonitor.py?query=abfahrten.do&ort=dresden&hst=" + hstName);
  73. // get the data from the server with an ajax call
  74. ajaxCall(hstUrl, target, haltestelle.processAbfahrten, "text");
  75. },
  76. processAbfahrten : function (data) {
  77. // debug log
  78. if (DEBUG === 1) {console.log("processAbfahrten() method");}
  79. if (DEBUG === 1) {console.log("received data: " + data);}
  80. //variable definitions
  81. var i,
  82. y,
  83. htmlOutput,
  84. entry,
  85. dataLength;
  86. // process of response only if it's not empty
  87. if (data.indexOf("[]") === -1) {
  88. // replace useless chars & split string into array
  89. data = data.replace(/\],\[/gi, '#'); // insert a special char to mark internal array boundaries
  90. data = data.replace(/\(.+?\)/gi, ''); // remove all content in round parentheses
  91. data = data.replace('ß', 'ss'); // remove some special characters
  92. data = data.replace(/<(.+?)>/gi, '$1'); // remove tag parentheses to prevent code injection
  93. data = data.slice(3,-3).split("#"); // split on the inserted char to get an array of arrays
  94. // debug log
  95. if (DEBUG === 1) {console.log("parsed data: " + data);}
  96. dataLength = data.length;
  97. // generate table header
  98. htmlOutput = "<table>";
  99. htmlOutput += "<tr>";
  100. htmlOutput += "<th>Linie</th>";
  101. htmlOutput += "<th>Richtung</th>";
  102. htmlOutput += "<th>Abfahrt</th>";
  103. htmlOutput += "</tr>";
  104. // generate table entries
  105. for (i = 0; i < dataLength; i++) {
  106. htmlOutput += "<tr>";
  107. entry = data[i].split(",");
  108. // debug log
  109. if (DEBUG === 1) {console.log("part " + i + " of parsed data: " + entry);}
  110. for (y = 0; y < 3; y++) {
  111. // debug log
  112. if (DEBUG === 1) {console.log("part " + y + ": " + entry[y]);}
  113. htmlOutput += "<td>" + entry[y].slice(1,-1) + "</td>";
  114. }
  115. htmlOutput += "</tr>";
  116. }
  117. // close table
  118. htmlOutput += "</table>";
  119. } else { // there was an empty response
  120. htmlOutput = "<p>Haltestelleneingabe nicht eindeutig</p>";
  121. }
  122. // print content into web page
  123. target.innerHTML = htmlOutput;
  124. },
  125. getHaltestellen : function (event) {
  126. // debug log
  127. if (DEBUG === 1) {console.log("getHaltestellen() method");}
  128. // prevent submit default behaviour
  129. event.preventDefault();
  130. // construct ajax url
  131. var hstName = document.getElementById("q").value,
  132. hstUrl = encodeURI(serverUrl + "abfahrtsmonitor.py?query=haltestelle.do&ort=dresden&hst=" + hstName);
  133. // get the data from the server with an ajax call
  134. ajaxCall(hstUrl, target, haltestelle.processHaltestellen, "text");
  135. },
  136. processHaltestellen : function (data) {
  137. // debug log
  138. if (DEBUG === 1) {console.log("processHaltestellen() method");}
  139. if (DEBUG === 1) {console.log("received data: " + data);}
  140. }
  141. };
  142. //event listeners
  143. searchForm.addEventListener("submit", haltestelle.getAbfahrten, false);
  144. searchForm.addEventListener("submit", haltestelle.getHaltestellen, false);
  145. }()); // end of anonymous function