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.

274 lines
8.5 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. // variable to en-/disable debug
  2. // set to 1 to enable debug log
  3. var DEBUG;
  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. // decode special characters with their utf-8 representation
  46. function decodeHtml(token) {
  47. var i,
  48. y,
  49. start = [33, 58, 91, 123, 161],
  50. stop = [47, 64, 96, 126, 255],
  51. startLength = start.length;
  52. for (y = 0; y < startLength; y++) {
  53. for (i = start[y]; i <= stop[y]; i++) {
  54. token = token.replace("&#" + i +";", String.fromCharCode(255));
  55. }
  56. }
  57. return token;
  58. }
  59. // wrap all in anonymous function to get out of global scope
  60. (function() {
  61. //variable definitions
  62. var serverUrl, // this will hold the url we call with the ajaxCall() function
  63. target = document.getElementById("output"), // get the html area where we print out the data
  64. searchForm = document.getElementById("search-form"), // get the search form
  65. haltestelle; // object with methods to get and process the data
  66. // debug log
  67. if (DEBUG === 1) {console.log("anonymous function");}
  68. // parse actual url and parse for protocol type (http/https)
  69. // set the ajax server url dependent on the protocol
  70. // for strato ssl-proxy, we have to insert the 1st part of the url path
  71. serverUrl = window.location.protocol + "//" + window.location.hostname;
  72. if (serverUrl.indexOf("https") === -1) {
  73. serverUrl += "/cgi-bin/";
  74. } else {
  75. serverUrl += "/" + window.location.pathname.split("/")[1] + "/cgi-bin/";
  76. }
  77. // haltestelle object
  78. haltestelle = {
  79. getAbfahrten : function (event) {
  80. // debug log
  81. if (DEBUG === 1) {console.log("getAbfahrten() method");}
  82. // prevent submit default behaviour
  83. event.preventDefault();
  84. // construct ajax url
  85. var hstName = document.getElementById("q").value,
  86. hstUrl = encodeURI(serverUrl + "abfahrtsmonitor.py?query=abfahrten.do&ort=dresden&hst=" + hstName);
  87. // get the data from the server with an ajax call
  88. ajaxCall(hstUrl, target, haltestelle.processAbfahrten, "text");
  89. },
  90. processAbfahrten : function (data) {
  91. // debug log
  92. if (DEBUG === 1) {console.log("processAbfahrten() method");}
  93. if (DEBUG === 1) {console.log("received data: " + data);}
  94. //variable definitions
  95. var i,
  96. y,
  97. htmlOutput,
  98. entry,
  99. dataLength;
  100. // process of response only if it's not empty
  101. if (data.indexOf("[]") !== -1) { // there was an empty response
  102. haltestelle.getHaltestellen();
  103. } else {
  104. // replace useless chars & split string into array
  105. data = data.replace(/\(.+?\)/gi, ''); // remove all content in round parentheses
  106. data = data.replace(/<(.+?)>/gi, '$1'); // remove tag parentheses to prevent code injection
  107. data = data.slice(3, -3).split("],["); // split at array boundaries to get an array of arrays
  108. // debug log
  109. if (DEBUG === 1) {console.log("parsed data: " + data);}
  110. dataLength = data.length;
  111. // generate table header
  112. htmlOutput = "<table>";
  113. htmlOutput += "<tr>";
  114. htmlOutput += "<th>Linie</th>";
  115. htmlOutput += "<th>Richtung</th>";
  116. htmlOutput += "<th>Abfahrt</th>";
  117. htmlOutput += "</tr>";
  118. // generate table entries
  119. for (i = 0; i < dataLength; i++) {
  120. htmlOutput += "<tr>";
  121. entry = data[i].split(",");
  122. // debug log
  123. if (DEBUG === 1) {console.log("part " + i + " of parsed data: " + entry);}
  124. for (y = 0; y < 3; y++) {
  125. // debug log
  126. if (DEBUG === 1) {console.log("part " + y + ": " + entry[y]);}
  127. htmlOutput += "<td>" + entry[y].slice(1, -1) + "</td>";
  128. }
  129. htmlOutput += "</tr>";
  130. }
  131. // close table
  132. htmlOutput += "</table>";
  133. // print content into web page
  134. target.innerHTML = htmlOutput;
  135. }
  136. },
  137. getHaltestellen : function () {
  138. // debug log
  139. if (DEBUG === 1) {console.log("getHaltestellen() method");}
  140. // prevent submit default behaviour
  141. //event.preventDefault();
  142. // construct ajax url
  143. var hstName = document.getElementById("q").value,
  144. hstUrl = encodeURI(serverUrl + "abfahrtsmonitor.py?query=haltestelle.do&ort=dresden&hst=" + hstName);
  145. // get the data from the server with an ajax call
  146. ajaxCall(hstUrl, target, haltestelle.processHaltestellen, "text");
  147. },
  148. processHaltestellen : function (data) {
  149. // debug log
  150. if (DEBUG === 1) {console.log("processHaltestellen() method");}
  151. if (DEBUG === 1) {console.log("received data: " + data);}
  152. //variable definitions
  153. var i,
  154. entry,
  155. dataLength,
  156. htmlOutput;
  157. // process of response only if it's not empty
  158. if (data.indexOf("[]") !== -1) {
  159. htmlOutput = "<p>unbekannte Haltstelle, bitte erneut versuchen</p>";
  160. } else {
  161. // replace useless chars & split string into array
  162. data = data.replace(/\[\[\[.+?\]\],/gi, '['); // remove useless first city entry
  163. data = data.replace(/\(.+?\)/gi, ''); // remove all content in round parentheses
  164. data = data.replace(/<(.+?)>/gi, '$1'); // remove tag parentheses to prevent code injection
  165. data = data.slice(4, -4).split("],["); // split at array boundaries to get an array of arrays
  166. // debug log
  167. if (DEBUG === 1) {console.log("parsed data: " + data);}
  168. dataLength = data.length;
  169. // generate table header
  170. htmlOutput = "<table>";
  171. // generate table entries
  172. for (i = 0; i < dataLength; i++) {
  173. htmlOutput += "<tr>";
  174. entry = data[i].split(",");
  175. // debug log
  176. if (DEBUG === 1) {console.log("part " + i + " of parsed data: " + entry);}
  177. htmlOutput += "<td>" + entry[0].slice(1, -1) + "</td>";
  178. htmlOutput += "</tr>";
  179. }
  180. // close table
  181. htmlOutput += "</table>";
  182. }
  183. // print content into web page
  184. target.innerHTML = htmlOutput;
  185. }
  186. };
  187. //event listeners
  188. searchForm.addEventListener("submit", haltestelle.getAbfahrten, false);
  189. //searchForm.addEventListener("submit", haltestelle.getHaltestellen, false);
  190. }()); // end of anonymous function