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.

174 lines
5.4 KiB

  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. var 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;
  49. var target = document.getElementById("output");
  50. // debug log
  51. if (DEBUG === 1) {console.log("anonymous function");}
  52. // parse actual url and parse for protocol type (http/https)
  53. // set the ajax server url dependent on the protocol
  54. // for strato ssl-proxy, we have to insert the 1st part of the url path
  55. serverUrl = window.location.protocol + "//" + window.location.hostname;
  56. if (serverUrl.indexOf("https") === -1) {
  57. serverUrl += "/cgi-bin/";
  58. } else {
  59. var path = "/" + window.location.pathname.split("/")[1];
  60. serverUrl += path + "/cgi-bin/";
  61. }
  62. // get the search form
  63. var searchForm = document.getElementById("search-form");
  64. // haltestelle object
  65. var haltestelle = {
  66. getAbfahrten : function(event) {
  67. // debug log
  68. if (DEBUG === 1) {console.log("getAbfahrten() method");}
  69. // prevent submit default behaviour
  70. event.preventDefault();
  71. // construct ajax url
  72. var hstName = document.getElementById("q").value;
  73. var hstUrl = encodeURI(serverUrl + "abfahrtsmonitor.py?ort=dresden&hst=" + hstName);
  74. // get the data from the server with an ajax call
  75. ajaxCall(hstUrl, target, haltestelle.processAbfahrten, "text");
  76. },
  77. processAbfahrten : function (data) {
  78. // debug log
  79. if (DEBUG === 1) {console.log("processAbfahrten() method");}
  80. if (DEBUG === 1) {console.log("received data: " + data);}
  81. //variable definitions
  82. var i;
  83. var y;
  84. var htmlOutput;
  85. var entry;
  86. var dataLength;
  87. // process of response only if it's not empty
  88. if (data.indexOf("[]") === -1) {
  89. // replace useless chars & split string into array
  90. data = data.replace(/\],\[/gi, '#'); // insert a special char to mark internal array boundaries
  91. data = data.replace(/\(.+?\)/gi, ''); // remove all content in round parentheses
  92. data = data.replace('ß', 'ss'); // remove some special characters
  93. data = data.replace(/<(.+?)>/gi, '$1'); // remove tag parentheses to prevent code injection
  94. data = data.slice(3,-3).split("#"); // split on the inserted char to get an array of arrays
  95. // debug log
  96. if (DEBUG === 1) {console.log("parsed data: " + data);}
  97. dataLength = data.length;
  98. // generate table header
  99. htmlOutput = "<table>";
  100. htmlOutput += "<tr>";
  101. htmlOutput += "<th>Linie</th>";
  102. htmlOutput += "<th>Richtung</th>";
  103. htmlOutput += "<th>Abfahrt</th>";
  104. htmlOutput += "</tr>";
  105. // generate table entries
  106. for (i = 0; i < dataLength; i++) {
  107. htmlOutput += "<tr>";
  108. entry = data[i].split(",");
  109. // debug log
  110. if (DEBUG === 1) {console.log("part " + i + " of parsed data: " + entry);}
  111. for (y = 0; y < 3; y++) {
  112. // debug log
  113. if (DEBUG === 1) {console.log("part " + y + ": " + entry[y]);}
  114. htmlOutput += "<td>" + entry[y].slice(1,-1) + "</td>";
  115. }
  116. htmlOutput += "</tr>";
  117. }
  118. // close table
  119. htmlOutput += "</table>";
  120. } else { // there was an empty response
  121. htmlOutput = "<p>Haltestelleneingabe nicht eindeutig</p>";
  122. }
  123. // print content into web page
  124. target.innerHTML = htmlOutput;
  125. }
  126. };
  127. //event listeners
  128. searchForm.addEventListener("submit", haltestelle.getAbfahrten, false);
  129. })(); // end of anonymous function