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.

144 lines
4.1 KiB

  1. // variable to en-/disable debug
  2. // set to 1 to enable debug log
  3. var DEBUG;
  4. // server url
  5. var serverUrl = "http://widgets.vvo-online.de/abfahrtsmonitor/";
  6. // xmlhttp object function
  7. function getHTTPObject() {
  8. // debug log
  9. if (DEBUG === 1) {console.log("xml http object function");}
  10. var xhr;
  11. // check for availibility if xmlhttprequest object
  12. if(window.XMLHttpRequest) {
  13. xhr = new XMLHttpRequest();
  14. } else if(window.ActiveXObject) {
  15. xhr = new ActiveXObject("Msxml2.XMLHTTP");
  16. }
  17. return xhr;
  18. }
  19. // ajax call function
  20. function ajaxCall(dataUrl, outputElement, callback, responseType) {
  21. // debug log
  22. if (DEBUG === 1) {console.log("ajax function");}
  23. // get the xmlhttp object which is supported
  24. var request = getHTTPObject();
  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. var response = JSON.parse(request.responseText);
  31. } else if (responseType === "xml") {
  32. var response = request.responseXML;
  33. } else {
  34. var 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. // debug log
  48. if (DEBUG === 1) {console.log("anonymous function");}
  49. // get the search form
  50. var searchForm = document.getElementById("search-form");
  51. // haltestelle object
  52. var haltestelle = {
  53. getInfo : function(event) {
  54. // debug log
  55. if (DEBUG === 1) {console.log("getInfo function");}
  56. // prevent submit default behaviour
  57. event.preventDefault();
  58. // get output area
  59. var target = document.getElementById("output");
  60. var hstName = document.getElementById("q").value;
  61. var hstUrl = serverUrl + "Abfahrten.do?ort=dresden&hst=" + hstName;
  62. ajaxCall(hstUrl, target, function(data) {
  63. // debug log
  64. if (DEBUG === 1) {console.log("received data: " + data);}
  65. data = data.replace(/\],\[/gi, '#');
  66. data = data.replace(/\(.+?\)/gi, '');
  67. data = data.replace('ß', 'ss');
  68. data = data.slice(2,-2).split("#");
  69. // debug log
  70. if (DEBUG === 1) {console.log("parsed data: " + data);}
  71. var i;
  72. var y;
  73. var htmlOutput;
  74. var dataLength = data.length;
  75. // generate table header
  76. htmlOutput = "<table>";
  77. htmlOutput += "<tr>";
  78. htmlOutput += "<th>Linie</th>";
  79. htmlOutput += "<th>Richtung</th>";
  80. htmlOutput += "<th>Abfahrt</th>";
  81. htmlOutput += "</tr>";
  82. // generate table entries
  83. for (i = 0; i < dataLength; i++) {
  84. htmlOutput += "<tr>";
  85. var entry = data[i].split(",");
  86. // debug log
  87. if (DEBUG === 1) {console.log("part " + i + " of parsed data: " + entry);}
  88. for (y = 0; y < 3; y++) {
  89. // debug log
  90. if (DEBUG === 1) {console.log("part " + y + ": " + entry[y]);}
  91. htmlOutput += "<td>" + entry[y].slice(1,-1) + "</td>";
  92. }
  93. htmlOutput += "</tr>";
  94. }
  95. // close table
  96. htmlOutput += "</table>";
  97. // print table into web page
  98. target.innerHTML = htmlOutput;
  99. }, "text");
  100. }
  101. };
  102. //event listeners
  103. searchForm.addEventListener("submit", haltestelle.getInfo, false);
  104. })(); // end of anonymous function