ajax.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. function AjaxErrorBadStatusCode(message) { this.name = 'AjaxErrorBadStatusCode'; this.message = message; };
  2. AjaxErrorBadStatusCode.prototype = new Error();
  3. var ajax = {loaded: false};
  4. ajax.create = function() {
  5. if(typeof XMLHttpRequest !== 'undefined') {
  6. return new XMLHttpRequest();
  7. };
  8. var versions = [
  9. "MSXML2.XmlHttp.6.0",
  10. "MSXML2.XmlHttp.5.0",
  11. "MSXML2.XmlHttp.4.0",
  12. "MSXML2.XmlHttp.3.0",
  13. "MSXML2.XmlHttp.2.0",
  14. "Microsoft.XmlHttp"
  15. ];
  16. var xhr;
  17. for(var i = 0; i < versions.length; i++) {
  18. try {
  19. xhr = new ActiveXObject(versions[i]);
  20. break;
  21. } catch(e) {
  22. // Silent
  23. };
  24. };
  25. return xhr;
  26. };
  27. ajax.send = function(url, callback, method, data, async) {
  28. if(async === undefined) {
  29. async = true;
  30. };
  31. var a = ajax.create();
  32. a.open(method, url, async);
  33. a.onreadystatechange = function() {
  34. // a.readyState:
  35. // 0 - UNSENT
  36. // 1 - OPENED
  37. // 2 - HEADERS_RECEIVED
  38. // 3 - LOADING
  39. // 4 - DONE
  40. callback(method, data, a.readyState, a.status, a.responseText);
  41. };
  42. if(method == 'POST') {
  43. a.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  44. };
  45. a.send(data);
  46. };
  47. ajax.delete = function(url, data, callback, async) {
  48. var query = [];
  49. for(var key in data) {
  50. query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
  51. };
  52. ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'DELETE', null, async);
  53. };
  54. ajax.deleteJSON = function(url, data, callbackSuccess, callbackError, async) {
  55. ajax.delete(url, data, function(method, data, readyState, status, responseText) {
  56. if(readyState == 4) {
  57. if(status == 200) {
  58. try {
  59. var r = JSON.parse(responseText);
  60. if(callbackSuccess) {
  61. callbackSuccess(method, data, readyState, status, r);
  62. };
  63. } catch(e) {
  64. if(callbackError) {
  65. callbackError(method, data, readyState, status, e);
  66. };
  67. };
  68. } else {
  69. if(callbackError) {
  70. var e = new AjaxErrorBadStatusCode('Bad status code '+status);
  71. callbackError(method, data, readyState, status, e);
  72. };
  73. };
  74. };
  75. }, async);
  76. };
  77. ajax.get = function(url, data, callback, async) {
  78. var query = [];
  79. for(var key in data) {
  80. query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
  81. };
  82. ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async);
  83. };
  84. ajax.getJSON = function(url, data, callbackSuccess, callbackError, async) {
  85. ajax.get(url, data, function(method, data, readyState, status, responseText) {
  86. if(readyState == 4) {
  87. if(status == 200) {
  88. try {
  89. var r = JSON.parse(responseText);
  90. if(callbackSuccess) {
  91. callbackSuccess(method, data, readyState, status, r);
  92. };
  93. } catch(e) {
  94. if(callbackError) {
  95. callbackError(method, data, readyState, status, e);
  96. };
  97. };
  98. } else {
  99. if(callbackError) {
  100. var e = new AjaxErrorBadStatusCode('Bad status code '+status);
  101. callbackError(method, data, readyState, status, e);
  102. };
  103. };
  104. };
  105. }, async);
  106. };
  107. ajax.post = function(url, data, callback, async) {
  108. var query = [];
  109. for (var key in data) {
  110. query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
  111. };
  112. ajax.send(url, callback, 'POST', query.join('&'), async);
  113. };
  114. ajax.postJSON = function(url, data, callbackSuccess, callbackError, async) {
  115. ajax.post(url, data, function(method, data, readyState, status, responseText) {
  116. if(readyState == 4) {
  117. if(status == 200) {
  118. try {
  119. var r = JSON.parse(responseText);
  120. if(callbackSuccess) {
  121. callbackSuccess(method, data, readyState, status, r);
  122. };
  123. } catch(e) {
  124. if(callbackError) {
  125. callbackError(method, data, readyState, status, e);
  126. };
  127. };
  128. } else {
  129. if(callbackError) {
  130. var e = new AjaxErrorBadStatusCode('Bad status code '+status);
  131. callbackError(method, data, readyState, status, e);
  132. };
  133. };
  134. };
  135. }, async);
  136. };
  137. ajax.loadTag = function(tag, url, func, field) {
  138. if((typeof window[func] === 'function') || field != null) {
  139. if(!!!tag.className.match(new RegExp('(\\s|^)loading(\\s|$)'))) {
  140. tag.className += " loading";
  141. ajax.getJSON(url, {}, function(method, data, readyState, status, responseData) {
  142. try {
  143. if(typeof window[func] === 'function') {
  144. var html = window[func](tag, responseData);
  145. tag.innerHTML = html;
  146. } else if(field != null) {
  147. tag.innerHTML = responseData[field];
  148. };
  149. } catch(e) {
  150. console.log('ajax.loadTag', 'e', e);
  151. };
  152. tag.className = tag.className.replace(new RegExp('(\\s|^)loading(\\s|$)'), ' ').trim();
  153. }, function(method, data, readyState, status, responseData) {
  154. tag.className = tag.className.replace(new RegExp('(\\s|^)loading(\\s|$)'), ' ').trim();
  155. });
  156. };
  157. };
  158. };
  159. ajax.processTag = function(tag) {
  160. var get = tag.getAttribute('data-ajax-get');
  161. var func = tag.getAttribute('data-ajax-func');
  162. var field = tag.getAttribute('data-ajax-field');
  163. var delay = tag.getAttribute('data-ajax-delay');
  164. if((get && get != null) && ((func && func != null) || (field && field != null))) {
  165. if(delay == null) {
  166. ajax.loadTag(tag, get, func, field);
  167. } else {
  168. setTimeout(function() {
  169. ajax.loadTag(tag, get, func, field);
  170. }, delay);
  171. };
  172. };
  173. };
  174. ajax.processTags = function() {
  175. var tags = document.querySelectorAll('[data-ajax-get]');
  176. for(var key in tags) if(tags.hasOwnProperty(key)) {
  177. var tag = tags[key];
  178. ajax.processTag(tag);
  179. };
  180. };
  181. ajax.reloadTag = function(tag) {
  182. ajax.processTag(tag);
  183. };
  184. ajax.reloadTagById = function(id) {
  185. var tag = document.getElementById(id)
  186. if(tag != null) {
  187. ajax.reloadTag(tag);
  188. };
  189. };
  190. ajax.processFormSubmit = function(event) {
  191. if(!event) var event = window.event;
  192. event.preventDefault();
  193. var form = event.target;
  194. var func = form.getAttribute('data-ajax-func');
  195. if(func && func != null && typeof window[func] === 'function') {
  196. if(!!!form.className.match(new RegExp('(\\s|^)loading(\\s|$)'))) {
  197. form.className += " loading";
  198. var data = {};
  199. var inputs = form.querySelectorAll("input,select,textarea");
  200. for(var i=0,m=inputs.length-1; i<=m; i++) {
  201. data[inputs[i].name] = inputs[i].value;
  202. };
  203. var ajaxFunc = ajax.get;
  204. if(form.method == "post") { ajaxFunc = ajax.post; };
  205. ajaxFunc(form.action, data, function(method, data, readyState, status, responseText) {
  206. if(readyState == 4) {
  207. var error = (status == 200);
  208. var responseData = responseText;
  209. try {
  210. var responseData = JSON.parse(responseText);
  211. } catch(e) {
  212. console.log('ajax.processFormSubmit', 'e', e);
  213. };
  214. try {
  215. window[func](form, responseData, error, status);
  216. } catch(e) {
  217. console.log('ajax.processFormSubmit', 'e', e);
  218. };
  219. form.className = form.className.replace(new RegExp('(\\s|^)loading(\\s|$)'), ' ').trim();
  220. };
  221. });
  222. };
  223. };
  224. };
  225. ajax.processForm = function(form) {
  226. var is = form.getAttribute('data-ajax-form');
  227. var func = form.getAttribute('data-ajax-func');
  228. if((is && is != null && is == "true") && (func && func != null)) {
  229. if(window.attachEvent) {
  230. form.attachEvent('onsubmit', ajax.processFormSubmit);
  231. } else if(window.addEventListener) {
  232. form.addEventListener('submit', ajax.processFormSubmit, false);
  233. };
  234. };
  235. };
  236. ajax.processForms = function() {
  237. var forms = document.querySelectorAll('[data-ajax-form]');
  238. for(var key in forms) if(forms.hasOwnProperty(key)) {
  239. var form = forms[key];
  240. ajax.processForm(form);
  241. };
  242. };
  243. ajax.processCheckboxClick = function(event) {
  244. if(!event) var event = window.event;
  245. event.preventDefault();
  246. var checkbox = event.target;
  247. var on = checkbox.getAttribute('data-ajax-on');
  248. var off = checkbox.getAttribute('data-ajax-off');
  249. var func = checkbox.getAttribute('data-ajax-func');
  250. var box = checkbox.parentNode;
  251. if(!!box.className.match(new RegExp('(\\s|^)loading(\\s|$)'))) {
  252. event.preventDefault();
  253. event.stopPropagation();
  254. return false;
  255. };
  256. box.className += " loading";
  257. ajax.post(checkbox.checked ? on : off, {}, function(method, data, readyState, status, responseText) {
  258. if(readyState == 4) {
  259. var error = (status == 200);
  260. var responseData = responseText;
  261. try {
  262. var responseData = JSON.parse(responseText);
  263. } catch(e) {
  264. console.log('ajax.processCheckboxClick', 'e', e);
  265. };
  266. try {
  267. window[func](checkbox, responseData, error, status);
  268. } catch(e) {
  269. console.log('ajax.processCheckboxClick', 'e', e);
  270. };
  271. box.className = box.className.replace(new RegExp('(\\s|^)loading(\\s|$)'), ' ').trim();
  272. };
  273. });
  274. return true;
  275. };
  276. ajax.processCheckbox = function(checkbox) {
  277. var is = checkbox.getAttribute('data-ajax-checkbox');
  278. var on = checkbox.getAttribute('data-ajax-on');
  279. var off = checkbox.getAttribute('data-ajax-off');
  280. var func = form.getAttribute('data-ajax-func');
  281. if((is && is != null && is == "true") && (on && on != null) && (off && off != null) && (func && func != null)) {
  282. if(window.attachEvent) {
  283. checkbox.attachEvent('onclick', ajax.processCheckboxClick);
  284. } else if(window.addEventListener) {
  285. checkbox.addEventListener('click', ajax.processCheckboxClick, false);
  286. };
  287. };
  288. };
  289. ajax.processCheckboxes = function() {
  290. var checkboxes = document.querySelectorAll('[data-ajax-checkbox]');
  291. for(var key in checkboxes) if(forms.hasOwnProperty(key)) {
  292. var checkbox = checkboxes[key];
  293. ajax.processCheckbox(checkbox);
  294. };
  295. };
  296. ajax.load = function() {
  297. if(!ajax.loaded) {
  298. ajax.loaded = true;
  299. ajax.processTags();
  300. ajax.processForms();
  301. ajax.processCheckboxes();
  302. };
  303. };
  304. if(window.attachEvent) {
  305. window.attachEvent('onload', ajax.load);
  306. } else if(window.addEventListener) {
  307. window.addEventListener('load', ajax.load, false);
  308. };