EAF(Eolin.Application.Framework)을 활용한 AJAX 실습(1)-기본

AJAX기술은 거창한 기술이 아니다. 민감한 사용자가 아닌경우(또는 개발자가 좀 더 섬세하게 웹환경을 구성했었다면) 기존 방식의 웹 화면과 달라지는 것을 거의 찾을 수 없다.
하지만 서버와의 데이터통신량의 감소(mobile환경을 고려한다면 이 또한 중요하다), 비동기식 송/수신 기능 확장을 통한 기존 웹에서 구현하기 힘들던 다양한 기능들을 생각한다면 개발자의 입장에서는 결코 무시할 수 없는 기술임에 틀림없다.
이런 생각으로 AJAX에 대해 공부를 시작하다보면 쉽게 좌절감에 빠지게 되는데, 그 원인을 대충 살펴보면
1. javascript에 대한 사용이 너무 복잡하다.
2. 막상 어디다 적용할지를 모르겠다.
등이 있다.

2번 문제를 고심하던 중에 평소 사용하고 있는 블로그(tistory)에도 AJAX기능이 사용됨을 확인하고 사용중인 기능분석을 통해 AJAX 기술에 대한 친밀도와 체계적인 정리를 해보기위해 문서작성을 시작했다.

** 저작권에 위배되지 않으리라고 생각되지만 혹시라도 저작권 위반이라면 자삭(?)하겠습니다..

tistory는 Tatter & Company에서 만든 블로그 툴을 다음에서 서비스하는 형태다.
이 블로그 툴의 AJAX호출모듈은 EAF2.js라는 이름으로 사용되고 있는데 이는 Eolin.Application.Framework의 약자다.

이제 EAF2.js를 하나씩 분석해보자.

EAF2는 크게 Standardizer,PageMaster,HTTPRequest,FileUploadRequest,PageHolder,KeyCode로 구성되어 있다. 이 중 HTTPRequest는 서버와의 AJAX호출 모듈을 담당하며, PageMaster는 페이지에 메시지 표시, Standardizer는 페이지의 기본정보관리,  FileUploadRequest는 파일 upload관리? 등을 담당한다.

일단 전체 소스를 살펴보자.

view plaincopy to clipboardprint?

1.     
2. function getObject(target) {  
3.     try {  
4.         switch (typeof(target)) {  
5.         case "undefined":  
6.             return null;  
7.         case "object":  
8.             return target;  
9.         default:  
10.             return document.getElementById(target);  
11.         };  
12.     } catch(e) {  
13.         return null;  
14.     };  
15. };  
16. Standardizer.prototype.namespace = "Eolin.Application.Framework";  
17. Standardizer.prototype.name = "Eolin Standardizer";  
18. Standardizer.prototype.verion = "1.0";  
19. Standardizer.prototype.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved.";  
20. function Standardizer() {};  
21. Standardizer.prototype.isIE = (navigator.userAgent.indexOf("MSIE") >= 0);  
22. Standardizer.prototype.isFirefox = (navigator.userAgent.indexOf("Firefox") >= 0);  
23. Standardizer.prototype.isSafari = (navigator.userAgent.indexOf("Safari") >= 0);  
24. Standardizer.prototype.isOpera = (!Standardizer.prototype.isIE && (navigator.userAgent.indexOf("Opera") >= 0));  
25. Standardizer.prototype.isMozilla = (!Standardizer.prototype.isIE && !Standardizer.prototype.isFirefox && !Standardizer.prototype.isSafari && !Standardizer.prototype.isOpera && (navigator.userAgent.indexOf("Mozilla") >= 0));  
26. Standardizer.prototype.addEventListener = function(object) {  
27.     if (object.addEventListener) return;  
28.     object.addEventListener = function addEventListener(type, listener, useCapture) {  
29.         this.attachEvent("on" + type, listener);  
30.     };  
31. };  
32. Standardizer.prototype.removeEventListener = function(object) {  
33.     if (object.removeEventListener) return;  
34.     object.removeEventListener = function removeEventListener(type, listener, useCapture) {  
35.         this.detachEvent("on" + type, listener);  
36.     };  
37. };  
38. Standardizer.prototype.event = function(event) {  
39.     if (window.event) {  
40.         event = window.event;  
41.         if (event.target) return event;  
42.         if (event.srcElement) event.target = event.srcElement;  
43.         if (event.preventDefault == undefined) event.preventDefault = function() {  
44.             this.returnValue = false;  
45.         };  
46.     };  
47.     return event;  
48. };  
49. Standardizer.prototype.getScrollTop = function() {  
50.     return (this.isSafari ? document.body.scrollTop: document.documentElement.scrollTop);  
51. };  
52. Standardizer.prototype.getScrollLeft = function() {  
53.     return (this.isSafari ? document.body.scrollLeft: document.documentElement.scrollLeft);  
54. };  
55. var STD = new Standardizer();  
56. STD.addEventListener(window);  
57. var KeyCode = new  
58. function() {  
59.     this.framework = "Eolin AJAX Framework";  
60.     this.name = "Eolin LogViewer";  
61.     this.verion = "1.0";  
62.     this.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved.";  
63.     this.A = 65;  
64.     this.B = 66;  
65.     this.C = 67;  
66.     this.D = 68;  
67.     this.E = 69;  
68.     this.F = 70;  
69.     this.G = 71;  
70.     this.H = 72;  
71.     this.I = 73;  
72.     this.J = 74;  
73.     this.K = 75;  
74.     this.L = 76;  
75.     this.M = 77;  
76.     this.N = 78;  
77.     this.O = 79;  
78.     this.P = 80;  
79.     this.Q = 81;  
80.     this.R = 82;  
81.     this.S = 83;  
82.     this.T = 84;  
83.     this.U = 85;  
84.     this.V = 86;  
85.     this.W = 87;  
86.     this.X = 88;  
87.     this.Y = 89;  
88.     this.Z = 90;  
89.     this.Down = 40;  
90.     this.Up = 38;  
91.     this.Left = 37;  
92.     this.Right = 39;  
93. };  
94. PageMaster.prototype.namespace = "Eolin.Application.Framework";  
95. PageMaster.prototype.name = "Eolin Page Master";  
96. PageMaster.prototype.verion = "1.0";  
97. PageMaster.prototype.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved.";  
98. PageMaster.prototype.message = "아직 처리중인 작업이 있습니다.";  
99. function PageMaster() {  
100.     this._status = null;  
101.     this._messages = new Array();  
102.     this._requests = new Array();  
103.     this._holders = new Array();  
104.     this._timer = null;  
105.     window.addEventListener("load", PageMaster.prototype._onLoad, false);  
106.     window.addEventListener("beforeunload", PageMaster.prototype._onBeforeUnload, false);  
107. };  
108. PageMaster.prototype._onLoad = function(event) {  
109.     PM._status = document.createElement("div");  
110.     PM._status.style.position = "absolute";  
111.     PM._status.style.color = "white";  
112.     PM._status.style.backgroundColor = "navy";  
113.     PM._status.style.margin = "0px";  
114.     PM._status.style.paddingLeft = "10px";  
115.     PM._status.style.paddingRight = "10px";  
116.     STD.addEventListener(window);  
117.     window.addEventListener("scroll", PageMaster.prototype._updateStatus, false);  
118.     window.addEventListener("resize", PageMaster.prototype._updateStatus, false);  
119. };  
120. PageMaster.prototype._showStatus = function() {  
121.     if (PM._status.parentNode == document.body) return;  
122.     document.body.appendChild(this._status);  
123.     this._updateStatus();  
124. };  
125. PageMaster.prototype._hideStatus = function() {  
126.     if (PM._status.parentNode == document.body) document.body.removeChild(PM._status);  
127. };  
128. PageMaster.prototype._updateStatus = function() {  
129.     if (PM._status.parentNode == document.body) {  
130.         PM._status.style.top = (!STD.isSafari ? document.documentElement.scrollTop: document.body.scrollTop) + "px";  
131.         PM._status.style.left = ((!STD.isSafari ? document.documentElement.scrollLeft: document.body.scrollLeft) + document.documentElement.clientWidth - PM._status.offsetWidth) + "px";  
132.     };  
133.     PM.updateMessages();  
134. };  
135. PageMaster.prototype.showMessage = function(message, align, valign, timeout) {  
136.     if ((typeof(message) != "string") || (message.length == 0)) return - 1;  
137.     if (align == undefined) align = "center";  
138.     if (valign == undefined) valign = "middle";  
139.     if (timeout == undefined) timeout = 3000;  
140.     var oMessage = document.createElement("div");  
141.     oMessage.innerHTML = message;  
142.     oMessage.style.position = "absolute";  
143.     oMessage.style.color = "white";  
144.     oMessage.style.backgroundColor = "green";  
145.     oMessage.style.margin = "0px";  
146.     oMessage.style.paddingLeft = "10px";  
147.     oMessage.style.paddingRight = "10px";  
148.     oMessage._align = align;  
149.     oMessage._valign = valign;  
150.     document.body.appendChild(oMessage);  
151.     var index = this._messages.push(oMessage) - 1;  
152.     this.updateMessages();  
153.     window.setTimeout("PM._hideMessage(" + index + ")", timeout);  
154.     return index;  
155. };  
156. PageMaster.prototype._hideMessage = function(index) {  
157.     document.body.removeChild(this._messages[index]);  
158.     this._messages.splice(index, 1, null);  
159.     while ((this._messages.length > 0) && (this._messages[this._messages.length - 1] == null)) this._messages.pop();  
160. };  
161. PageMaster.prototype.updateMessages = function() {  
162.     for (var i = 0; i < this._messages.length; i++) {  
163.         if (this._messages[i] == null) continue;  
164.         switch (this._messages[i]._align) {  
165.         case "left":  
166.             this._messages[i].style.left = STD.getScrollLeft() + "px";  
167.             break;  
168.         case "center":  
169.             this._messages[i].style.left = (STD.getScrollLeft() + (document.documentElement.clientWidth - this._messages[i].offsetWidth) / 2) + "px";  
170.             break;  
171.         case "right":  
172.             this._messages[i].style.left = (STD.getScrollLeft() + document.documentElement.clientWidth - this._messages[i].offsetWidth) + "px";  
173.             break;  
174.         };  
175.         switch (this._messages[i]._valign) {  
176.         case "top":  
177.             this._messages[i].style.top = STD.getScrollTop() + "px";  
178.             break;  
179.         case "middle":  
180.             this._messages[i].style.top = (STD.getScrollTop() + (document.documentElement.clientHeight - this._messages[i].offsetHeight) / 2) + "px";  
181.             break;  
182.         case "bottom":  
183.             this._messages[i].style.top = (STD.getScrollTop() + document.documentElement.clientHeight - this._messages[i].offsetHeight) + "px";  
184.             break;  
185.         };  
186.     };  
187. };  
188. PageMaster.prototype.addRequest = function(request, message) {  
189.     this._requests.push(new Array(request, message));  
190.     if (this._status) {  
191.         if (message != undefined) {  
192.             this._status.innerHTML += message;  
193.             this._showStatus();  
194.         }  
195.     }  
196. };  
197. PageMaster.prototype.removeRequest = function(request) {  
198.     for (var i = 0; i < this._requests.length; i++) {  
199.         if (this._requests[i][0] == request) {  
200.             this._requests.splice(i, 1);  
201.             break;  
202.         };  
203.     };  
204.     var message = "";  
205.     for (var i = 0; i < this._requests.length; i++) {  
206.         if (this._requests[i][1] != undefined) message += this._requests[i][1];  
207.     };  
208.     if (this._status) {  
209.         this._status.innerHTML = message;  
210.         if (message.length == 0) this._hideStatus();  
211.         else this._updateStatus();  
212.     }  
213. };  
214. PageMaster.prototype.addHolder = function(holder) {  
215.     this._holders.push(holder);  
216. };  
217. PageMaster.prototype.removeHolder = function(holder) {  
218.     for (var i = 0; i < this._holders.length; i++) {  
219.         if (this._holders[i] == holder) {  
220.             this._holders.splice(i, 1);  
221.             return;  
222.         };  
223.     };  
224. };  
225. PageMaster.prototype.showPanel = function(panel, halign, valign) {  
226.     try {  
227.         if (typeof(panel) == "string") panel = document.getElementById(panel);  
228.         if (typeof(panel) != "object") return;  
229.         var clientHeight = STD.isOpera ? document.body.clientHeight: document.documentElement.clientHeight;  
230.         panel.style.position = "absolute";  
231.         panel.style.display = "block";  
232.         switch (halign) {  
233.         case "left":  
234.             panel.style.left = STD.getScrollLeft() + "px";  
235.             break;  
236.         default:  
237.         case "center":  
238.             panel.style.left = (STD.getScrollLeft() + (document.documentElement.clientWidth - panel.offsetWidth) / 2) + "px";  
239.             break;  
240.         case "right":  
241.             panel.style.left = (STD.getScrollLeft() + document.documentElement.clientWidth - panel.offsetWidth) + "px";  
242.             break;  
243.         };  
244.         switch (valign) {  
245.         case "top":  
246.             panel.style.top = STD.getScrollTop() + "px";  
247.             break;  
248.         default:  
249.         case "middle":  
250.             panel.style.top = (STD.getScrollTop() + (clientHeight - panel.offsetHeight) / 2) + "px";  
251.             break;  
252.         case "bottom":  
253.             panel.style.top = (STD.getScrollTop() + clientHeight - panel.offsetHeight) + "px";  
254.             break;  
255.         };  
256.     } catch(e) {};  
257. };  
258. PageMaster.prototype._onBeforeUnload = function(event) {  
259.     event = STD.event(event);  
260.     if (PM._requests.length > 0) {  
261.         event.returnValue = PM.message;  
262.         return;  
263.     };  
264.     for (var i = 0; i < PM._holders.length; i++) {  
265.         if (PM._holders[i].isHolding()) {  
266.             event.returnValue = PM._holders[i].message;  
267.             return;  
268.         };  
269.     };  
270. };  
271. var PM = new PageMaster();  
272. HTTPRequest.prototype.namespace = "Eolin.Application.Framework";  
273. HTTPRequest.prototype.name = "Eolin HTTPXMLRequest Processor";  
274. HTTPRequest.prototype.verion = "1.0";  
275. HTTPRequest.prototype.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved.";  
276. HTTPRequest.prototype.method = "GET";  
277. HTTPRequest.prototype.url = null;  
278. HTTPRequest.prototype.contentType = "application/x-www-form-urlencoded";  
279. HTTPRequest.prototype.content = "";  
280. HTTPRequest.prototype.async = true;  
281. HTTPRequest.prototype.cache = false;  
282. HTTPRequest.prototype.persistent = true;  
283. HTTPRequest.prototype.message = "Requesting...";  
284. HTTPRequest.prototype.onVerify = function() {  
285.     return (this.getText("/response/error") == 0)  
286. };  
287. HTTPRequest.prototype.onExecute = function() {};  
288. HTTPRequest.prototype.onSuccess = function() {};  
289. HTTPRequest.prototype.onError = function() {};  
290. function HTTPRequest() {  
291.     switch (arguments.length) {  
292.     case 0:  
293.         break;  
294.     case 1:  
295.         this.url = arguments[0];  
296.         break;  
297.     default:  
298.     case 3:  
299.         this.async = arguments[2];  
300.     case 2:  
301.         this.method = arguments[0];  
302.         this.url = arguments[1];  
303.         break;  
304.     };  
305.     try {  
306.         this._request = new XMLHttpRequest();  
307.     } catch(e) {  
308.         var objectNames = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];  
309.         for (var i = 0; i < objectNames.length; i++) {  
310.             try {  
311.                 this._request = new ActiveXObject(objectNames[i]);  
312.                 break;  
313.             } catch(e) {};  
314.         };  
315.         if (this._request == null) {  
316.             return null;  
317.         };  
318.     };  
319.     this._properties = new Array();  
320.     this._attributes = new Array();  
321.     this._userData = new Array();  
322. };  
323. HTTPRequest.prototype.presetProperty = function(object, property, success, error) {  
324.     if (error == undefined) {  
325.         error = object[property];  
326.         if (success == error) return;  
327.     };  
328.     object[property] = success;  
329.     if (success == error) return;  
330.     this._properties.push(new Array(object, property, error));  
331. };  
332. HTTPRequest.prototype.presetAttribute = function(object, attribute, success, error) {  
333.     if (error == undefined) {  
334.         error = object.getAttribute(attribute);  
335.         if (success == error) return;  
336.     };  
337.     object.setAttribute(attribute, success);  
338.     if (success == error) return;  
339.     this._attributes.push(new Array(object, attribute, error));  
340. };  
341. HTTPRequest.prototype.send = function() {  
342.     if (this.persistent) PM.addRequest(this);  
343.     if (this.async) {  
344.         var instance = this;  
345.         this._request.onreadystatechange = function() {  
346.             if (instance._request.readyState == 4) {  
347.                 if (instance.persistent) PM.removeRequest(instance);  
348.                 if (instance.onVerify()) instance.onSuccess();  
349.                 else {  
350.                     for (var i = 0; i < instance._properties.length; i++) instance._properties[i][0][instance._properties[i][1]] = instance._properties[i][2];  
351.                     for (var i = 0; i < instance._attributes.length; i++) instance._attributes[i][0].setAttribute(instance._attributes[i][1], instance._attributes[i][2]);  
352.                     instance.onError();  
353.                 };  
354.             };  
355.         };  
356.     };  
357.     if (this.cache) this._request.open(this.method, this.url, this.async);  
358.     else if (this.url.lastIndexOf("?") >= 0) this._request.open(this.method, this.url + "&__T__=" + (new Date()).getTime(), this.async);  
359.     else this._request.open(this.method, this.url + "?__T__=" + (new Date()).getTime(), this.async);  
360.     if (STD.isFirefox) this._request.setRequestHeader("Referer", location.href);  
361.     if (arguments.length > 0) this.content = arguments[0];  
362.     if (this.content.length > 0) this._request.setRequestHeader("Content-Type", this.contentType);  
363.     this._request.send(this.content);  
364.     if (!this.async) {  
365.         if (this.persistent) PM.removeRequest(this);  
366.         if (this.onVerify()) this.onSuccess();  
367.         else {  
368.             for (var i = 0; i < this._properties.length; i++) this._properties[i][0][this._properties[i][1]] = this._properties[i][2];  
369.             for (var i = 0; i < this._attributes.length; i++) this._attributes[i][0].setAttribute(this._attributes[i][1], this._attributes[i][2]);  
370.             this.onError();  
371.         };  
372.     };  
373. };  
374. HTTPRequest.prototype.getText = function(path) {  
375.     try {  
376.         if (path == undefined) return this._request.responseText;  
377.         var directives = path.split("/");  
378.         if (directives[0] != "") return null;  
379.         var cursor = this._request.responseXML.documentElement;  
380.         if (cursor.nodeName != directives[1]) return null;  
381.         for (var i = 2; i < directives.length; i++) {  
382.             for (var j = 0; j < cursor.childNodes.length; j++) {  
383.                 if (cursor.childNodes[j].nodeName == directives[i]) {  
384.                     cursor = cursor.childNodes[j];  
385.                     j = -1;  
386.                     break;  
387.                 };  
388.             };  
389.             if (j != -1) return null;  
390.         };  
391.         if (cursor.text) return cursor.text;  
392.         return this._getText(cursor);  
393.     } catch(e) {  
394.         return null;  
395.     };  
396. };  
397. HTTPRequest.prototype._getText = function(node) {  
398.     var text = "";  
399.     if (node.nodeValue) text += node.nodeValue;  
400.     for (var i = 0; i < node.childNodes.length; i++) text += this._getText(node.childNodes[i]);  
401.     return text;  
402. };  
403. FileUploadRequest.prototype.namespace = "Eolin.Application.Framework";  
404. FileUploadRequest.prototype.name = "Eolin File Upload Request";  
405. FileUploadRequest.prototype.verion = "1.0";  
406. FileUploadRequest.prototype.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved.";  
407. FileUploadRequest.prototype.message = "Uploading...";  
408. FileUploadRequest.prototype.autoDelete = false;  
409. function FileUploadRequest() {};  
410. FileUploadRequest.prototype.reset = function() {  
411.     if (typeof(this._form) == "object") {  
412.         STD.removeEventListener(this._form);  
413.         this._form.removeEventListener("submit", FileUploadRequest.prototype._onsubmit, false);  
414.     };  
415.     if (typeof(this._target) == "object") {  
416.         STD.removeEventListener(this._target);  
417.         this._target.removeEventListener("load", FileUploadRequest.prototype._onload, false);  
418.     };  
419. };  
420. FileUploadRequest.prototype.bind = function(form, target) {  
421.     this.reset();  
422.     switch (typeof(form)) {  
423.     case "object":  
424.         this._form = form;  
425.         break;  
426.     case "string":  
427.         this._form = document.getElementById(form);  
428.         if (this._form) break;  
429.     default:  
430.         return false;  
431.     };  
432.     switch (typeof(target)) {  
433.     case "object":  
434.         this._target = target;  
435.         break;  
436.     case "string":  
437.         this._target = document.getElementById(target);  
438.         if (this._target) break;  
439.     default:  
440.         return false;  
441.     };  
442.     if (this._form.target != this._target.name) this._form.target = this._target.name;  
443.     STD.addEventListener(this._form);  
444.     this._form.addEventListener("submit", FileUploadRequest.prototype._onsubmit, false);  
445.     STD.addEventListener(this._target);  
446.     this._form.upload = function() {  
447.         PM.addRequest(this._instance, "Uploading...");  
448.         this.submit();  
449.     };  
450.     this._target.addEventListener("load", FileUploadRequest.prototype._onload, false);  
451.     this._form._instance = this;  
452.     this._target._instance = this;  
453.     return true;  
454. };  
455. FileUploadRequest.prototype._onsubmit = function(event) {  
456.     event = STD.event(event);  
457.     event.target._instance.setRunning(true);  
458. };  
459. FileUploadRequest.prototype._onload = function(event) {  
460.     event = STD.event(event);  
461.     var instance = event.target ? event.target._instance: this._instance;  
462.     PM.removeRequest(instance);  
463. };  
464. PageHolder.prototype.namespace = "Eolin.Application.Framework";  
465. PageHolder.prototype.name = "Eolin Page Holder";  
466. PageHolder.prototype.verion = "1.0";  
467. PageHolder.prototype.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved.";  
468. PageHolder.prototype.message = "Wait..";  
469. PageHolder.prototype.autoDelete = false;  
470. function PageHolder(hold, message) {  
471.     PM.addHolder(this);  
472.     switch (arguments.length) {  
473.     default:  
474.     case 2:  
475.         this.message = message;  
476.     case 1:  
477.         this._holding = hold;  
478.         break;  
479.     case 0:  
480.         this._holding = true;  
481.         break;  
482.     };  
483. };  
484. PageHolder.prototype.isHolding = function() {  
485.     return this._holding;  
486. };  
487. PageHolder.prototype.hold = function() {  
488.     this._holding = true;  
489. };  
490. PageHolder.prototype.release = function() {  
491.     this._holding = false;  
492. };<br />  

function getObject(target) { try { switch (typeof(target)) { case "undefined": return null; case "object": return target; default: return document.getElementById(target); }; } catch(e) { return null; }; }; Standardizer.prototype.namespace = "Eolin.Application.Framework"; Standardizer.prototype.name = "Eolin Standardizer"; Standardizer.prototype.verion = "1.0"; Standardizer.prototype.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved."; function Standardizer() {}; Standardizer.prototype.isIE = (navigator.userAgent.indexOf("MSIE") >= 0); Standardizer.prototype.isFirefox = (navigator.userAgent.indexOf("Firefox") >= 0); Standardizer.prototype.isSafari = (navigator.userAgent.indexOf("Safari") >= 0); Standardizer.prototype.isOpera = (!Standardizer.prototype.isIE && (navigator.userAgent.indexOf("Opera") >= 0)); Standardizer.prototype.isMozilla = (!Standardizer.prototype.isIE && !Standardizer.prototype.isFirefox && !Standardizer.prototype.isSafari && !Standardizer.prototype.isOpera && (navigator.userAgent.indexOf("Mozilla") >= 0)); Standardizer.prototype.addEventListener = function(object) { if (object.addEventListener) return; object.addEventListener = function addEventListener(type, listener, useCapture) { this.attachEvent("on" + type, listener); }; }; Standardizer.prototype.removeEventListener = function(object) { if (object.removeEventListener) return; object.removeEventListener = function removeEventListener(type, listener, useCapture) { this.detachEvent("on" + type, listener); }; }; Standardizer.prototype.event = function(event) { if (window.event) { event = window.event; if (event.target) return event; if (event.srcElement) event.target = event.srcElement; if (event.preventDefault == undefined) event.preventDefault = function() { this.returnValue = false; }; }; return event; }; Standardizer.prototype.getScrollTop = function() { return (this.isSafari ? document.body.scrollTop: document.documentElement.scrollTop); }; Standardizer.prototype.getScrollLeft = function() { return (this.isSafari ? document.body.scrollLeft: document.documentElement.scrollLeft); }; var STD = new Standardizer(); STD.addEventListener(window); var KeyCode = new function() { this.framework = "Eolin AJAX Framework"; this.name = "Eolin LogViewer"; this.verion = "1.0"; this.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved."; this.A = 65; this.B = 66; this.C = 67; this.D = 68; this.E = 69; this.F = 70; this.G = 71; this.H = 72; this.I = 73; this.J = 74; this.K = 75; this.L = 76; this.M = 77; this.N = 78; this.O = 79; this.P = 80; this.Q = 81; this.R = 82; this.S = 83; this.T = 84; this.U = 85; this.V = 86; this.W = 87; this.X = 88; this.Y = 89; this.Z = 90; this.Down = 40; this.Up = 38; this.Left = 37; this.Right = 39; }; PageMaster.prototype.namespace = "Eolin.Application.Framework"; PageMaster.prototype.name = "Eolin Page Master"; PageMaster.prototype.verion = "1.0"; PageMaster.prototype.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved."; PageMaster.prototype.message = "아직 처리중인 작업이 있습니다."; function PageMaster() { this._status = null; this._messages = new Array(); this._requests = new Array(); this._holders = new Array(); this._timer = null; window.addEventListener("load", PageMaster.prototype._onLoad, false); window.addEventListener("beforeunload", PageMaster.prototype._onBeforeUnload, false); }; PageMaster.prototype._onLoad = function(event) { PM._status = document.createElement("div"); PM._status.style.position = "absolute"; PM._status.style.color = "white"; PM._status.style.backgroundColor = "navy"; PM._status.style.margin = "0px"; PM._status.style.paddingLeft = "10px"; PM._status.style.paddingRight = "10px"; STD.addEventListener(window); window.addEventListener("scroll", PageMaster.prototype._updateStatus, false); window.addEventListener("resize", PageMaster.prototype._updateStatus, false); }; PageMaster.prototype._showStatus = function() { if (PM._status.parentNode == document.body) return; document.body.appendChild(this._status); this._updateStatus(); }; PageMaster.prototype._hideStatus = function() { if (PM._status.parentNode == document.body) document.body.removeChild(PM._status); }; PageMaster.prototype._updateStatus = function() { if (PM._status.parentNode == document.body) { PM._status.style.top = (!STD.isSafari ? document.documentElement.scrollTop: document.body.scrollTop) + "px"; PM._status.style.left = ((!STD.isSafari ? document.documentElement.scrollLeft: document.body.scrollLeft) + document.documentElement.clientWidth - PM._status.offsetWidth) + "px"; }; PM.updateMessages(); }; PageMaster.prototype.showMessage = function(message, align, valign, timeout) { if ((typeof(message) != "string") || (message.length == 0)) return - 1; if (align == undefined) align = "center"; if (valign == undefined) valign = "middle"; if (timeout == undefined) timeout = 3000; var oMessage = document.createElement("div"); oMessage.innerHTML = message; oMessage.style.position = "absolute"; oMessage.style.color = "white"; oMessage.style.backgroundColor = "green"; oMessage.style.margin = "0px"; oMessage.style.paddingLeft = "10px"; oMessage.style.paddingRight = "10px"; oMessage._align = align; oMessage._valign = valign; document.body.appendChild(oMessage); var index = this._messages.push(oMessage) - 1; this.updateMessages(); window.setTimeout("PM._hideMessage(" + index + ")", timeout); return index; }; PageMaster.prototype._hideMessage = function(index) { document.body.removeChild(this._messages[index]); this._messages.splice(index, 1, null); while ((this._messages.length > 0) && (this._messages[this._messages.length - 1] == null)) this._messages.pop(); }; PageMaster.prototype.updateMessages = function() { for (var i = 0; i < this._messages.length; i++) { if (this._messages[i] == null) continue; switch (this._messages[i]._align) { case "left": this._messages[i].style.left = STD.getScrollLeft() + "px"; break; case "center": this._messages[i].style.left = (STD.getScrollLeft() + (document.documentElement.clientWidth - this._messages[i].offsetWidth) / 2) + "px"; break; case "right": this._messages[i].style.left = (STD.getScrollLeft() + document.documentElement.clientWidth - this._messages[i].offsetWidth) + "px"; break; }; switch (this._messages[i]._valign) { case "top": this._messages[i].style.top = STD.getScrollTop() + "px"; break; case "middle": this._messages[i].style.top = (STD.getScrollTop() + (document.documentElement.clientHeight - this._messages[i].offsetHeight) / 2) + "px"; break; case "bottom": this._messages[i].style.top = (STD.getScrollTop() + document.documentElement.clientHeight - this._messages[i].offsetHeight) + "px"; break; }; }; }; PageMaster.prototype.addRequest = function(request, message) { this._requests.push(new Array(request, message)); if (this._status) { if (message != undefined) { this._status.innerHTML += message; this._showStatus(); } } }; PageMaster.prototype.removeRequest = function(request) { for (var i = 0; i < this._requests.length; i++) { if (this._requests[i][0] == request) { this._requests.splice(i, 1); break; }; }; var message = ""; for (var i = 0; i < this._requests.length; i++) { if (this._requests[i][1] != undefined) message += this._requests[i][1]; }; if (this._status) { this._status.innerHTML = message; if (message.length == 0) this._hideStatus(); else this._updateStatus(); } }; PageMaster.prototype.addHolder = function(holder) { this._holders.push(holder); }; PageMaster.prototype.removeHolder = function(holder) { for (var i = 0; i < this._holders.length; i++) { if (this._holders[i] == holder) { this._holders.splice(i, 1); return; }; }; }; PageMaster.prototype.showPanel = function(panel, halign, valign) { try { if (typeof(panel) == "string") panel = document.getElementById(panel); if (typeof(panel) != "object") return; var clientHeight = STD.isOpera ? document.body.clientHeight: document.documentElement.clientHeight; panel.style.position = "absolute"; panel.style.display = "block"; switch (halign) { case "left": panel.style.left = STD.getScrollLeft() + "px"; break; default: case "center": panel.style.left = (STD.getScrollLeft() + (document.documentElement.clientWidth - panel.offsetWidth) / 2) + "px"; break; case "right": panel.style.left = (STD.getScrollLeft() + document.documentElement.clientWidth - panel.offsetWidth) + "px"; break; }; switch (valign) { case "top": panel.style.top = STD.getScrollTop() + "px"; break; default: case "middle": panel.style.top = (STD.getScrollTop() + (clientHeight - panel.offsetHeight) / 2) + "px"; break; case "bottom": panel.style.top = (STD.getScrollTop() + clientHeight - panel.offsetHeight) + "px"; break; }; } catch(e) {}; }; PageMaster.prototype._onBeforeUnload = function(event) { event = STD.event(event); if (PM._requests.length > 0) { event.returnValue = PM.message; return; }; for (var i = 0; i < PM._holders.length; i++) { if (PM._holders[i].isHolding()) { event.returnValue = PM._holders[i].message; return; }; }; }; var PM = new PageMaster(); HTTPRequest.prototype.namespace = "Eolin.Application.Framework"; HTTPRequest.prototype.name = "Eolin HTTPXMLRequest Processor"; HTTPRequest.prototype.verion = "1.0"; HTTPRequest.prototype.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved."; HTTPRequest.prototype.method = "GET"; HTTPRequest.prototype.url = null; HTTPRequest.prototype.contentType = "application/x-www-form-urlencoded"; HTTPRequest.prototype.content = ""; HTTPRequest.prototype.async = true; HTTPRequest.prototype.cache = false; HTTPRequest.prototype.persistent = true; HTTPRequest.prototype.message = "Requesting..."; HTTPRequest.prototype.onVerify = function() { return (this.getText("/response/error") == 0) }; HTTPRequest.prototype.onExecute = function() {}; HTTPRequest.prototype.onSuccess = function() {}; HTTPRequest.prototype.onError = function() {}; function HTTPRequest() { switch (arguments.length) { case 0: break; case 1: this.url = arguments[0]; break; default: case 3: this.async = arguments[2]; case 2: this.method = arguments[0]; this.url = arguments[1]; break; }; try { this._request = new XMLHttpRequest(); } catch(e) { var objectNames = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < objectNames.length; i++) { try { this._request = new ActiveXObject(objectNames[i]); break; } catch(e) {}; }; if (this._request == null) { return null; }; }; this._properties = new Array(); this._attributes = new Array(); this._userData = new Array(); }; HTTPRequest.prototype.presetProperty = function(object, property, success, error) { if (error == undefined) { error = object[property]; if (success == error) return; }; object[property] = success; if (success == error) return; this._properties.push(new Array(object, property, error)); }; HTTPRequest.prototype.presetAttribute = function(object, attribute, success, error) { if (error == undefined) { error = object.getAttribute(attribute); if (success == error) return; }; object.setAttribute(attribute, success); if (success == error) return; this._attributes.push(new Array(object, attribute, error)); }; HTTPRequest.prototype.send = function() { if (this.persistent) PM.addRequest(this); if (this.async) { var instance = this; this._request.onreadystatechange = function() { if (instance._request.readyState == 4) { if (instance.persistent) PM.removeRequest(instance); if (instance.onVerify()) instance.onSuccess(); else { for (var i = 0; i < instance._properties.length; i++) instance._properties[i][0][instance._properties[i][1]] = instance._properties[i][2]; for (var i = 0; i < instance._attributes.length; i++) instance._attributes[i][0].setAttribute(instance._attributes[i][1], instance._attributes[i][2]); instance.onError(); }; }; }; }; if (this.cache) this._request.open(this.method, this.url, this.async); else if (this.url.lastIndexOf("?") >= 0) this._request.open(this.method, this.url + "&__T__=" + (new Date()).getTime(), this.async); else this._request.open(this.method, this.url + "?__T__=" + (new Date()).getTime(), this.async); if (STD.isFirefox) this._request.setRequestHeader("Referer", location.href); if (arguments.length > 0) this.content = arguments[0]; if (this.content.length > 0) this._request.setRequestHeader("Content-Type", this.contentType); this._request.send(this.content); if (!this.async) { if (this.persistent) PM.removeRequest(this); if (this.onVerify()) this.onSuccess(); else { for (var i = 0; i < this._properties.length; i++) this._properties[i][0][this._properties[i][1]] = this._properties[i][2]; for (var i = 0; i < this._attributes.length; i++) this._attributes[i][0].setAttribute(this._attributes[i][1], this._attributes[i][2]); this.onError(); }; }; }; HTTPRequest.prototype.getText = function(path) { try { if (path == undefined) return this._request.responseText; var directives = path.split("/"); if (directives[0] != "") return null; var cursor = this._request.responseXML.documentElement; if (cursor.nodeName != directives[1]) return null; for (var i = 2; i < directives.length; i++) { for (var j = 0; j < cursor.childNodes.length; j++) { if (cursor.childNodes[j].nodeName == directives[i]) { cursor = cursor.childNodes[j]; j = -1; break; }; }; if (j != -1) return null; }; if (cursor.text) return cursor.text; return this._getText(cursor); } catch(e) { return null; }; }; HTTPRequest.prototype._getText = function(node) { var text = ""; if (node.nodeValue) text += node.nodeValue; for (var i = 0; i < node.childNodes.length; i++) text += this._getText(node.childNodes[i]); return text; }; FileUploadRequest.prototype.namespace = "Eolin.Application.Framework"; FileUploadRequest.prototype.name = "Eolin File Upload Request"; FileUploadRequest.prototype.verion = "1.0"; FileUploadRequest.prototype.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved."; FileUploadRequest.prototype.message = "Uploading..."; FileUploadRequest.prototype.autoDelete = false; function FileUploadRequest() {}; FileUploadRequest.prototype.reset = function() { if (typeof(this._form) == "object") { STD.removeEventListener(this._form); this._form.removeEventListener("submit", FileUploadRequest.prototype._onsubmit, false); }; if (typeof(this._target) == "object") { STD.removeEventListener(this._target); this._target.removeEventListener("load", FileUploadRequest.prototype._onload, false); }; }; FileUploadRequest.prototype.bind = function(form, target) { this.reset(); switch (typeof(form)) { case "object": this._form = form; break; case "string": this._form = document.getElementById(form); if (this._form) break; default: return false; }; switch (typeof(target)) { case "object": this._target = target; break; case "string": this._target = document.getElementById(target); if (this._target) break; default: return false; }; if (this._form.target != this._target.name) this._form.target = this._target.name; STD.addEventListener(this._form); this._form.addEventListener("submit", FileUploadRequest.prototype._onsubmit, false); STD.addEventListener(this._target); this._form.upload = function() { PM.addRequest(this._instance, "Uploading..."); this.submit(); }; this._target.addEventListener("load", FileUploadRequest.prototype._onload, false); this._form._instance = this; this._target._instance = this; return true; }; FileUploadRequest.prototype._onsubmit = function(event) { event = STD.event(event); event.target._instance.setRunning(true); }; FileUploadRequest.prototype._onload = function(event) { event = STD.event(event); var instance = event.target ? event.target._instance: this._instance; PM.removeRequest(instance); }; PageHolder.prototype.namespace = "Eolin.Application.Framework"; PageHolder.prototype.name = "Eolin Page Holder"; PageHolder.prototype.verion = "1.0"; PageHolder.prototype.copyright = "Copyright (c) 2005, Tatter & Company. All rights reserved."; PageHolder.prototype.message = "Wait.."; PageHolder.prototype.autoDelete = false; function PageHolder(hold, message) { PM.addHolder(this); switch (arguments.length) { default: case 2: this.message = message; case 1: this._holding = hold; break; case 0: this._holding = true; break; }; }; PageHolder.prototype.isHolding = function() { return this._holding; }; PageHolder.prototype.hold = function() { this._holding = true; }; PageHolder.prototype.release = function() { this._holding = false; };<br />

일단 소스를 하나씩 보기 전에 자바스크립트의 기본에 대해 알아보자.
소스를 확인해 보면 method 확장을 prototype이란 것을 사용해서 하고 있는 모습니다...
prototype이 뭘까? 다음 블로그에 자세한 개념이 설명되어 있다.

javascript에 prototype은 무엇인가? 1부
javascript에 prototype은 무엇인가? 2부

요약해 보면 생성객체에 메소드를 정의하면 새로운 객체가 생성될때마다 동일한 메소드가 계속 생성되어 문제가 되므로 function 함수에 존재하는  Prototype 객체를 가르키는 prototype 이란 프로퍼티를 사용하여
이 Prototype 객체에 공유되어있는 프로퍼티와 메소드가 객체 생성시 해당 생성자 function으로 생성한 모든 인스턴스에서 공유되게 사용하는 것이다.^^;
즉, prototype을 사용하면 객체생성시 마다 메소드, 프로퍼티가 하나씩 생기는게 아니라 모든 생성자가 하나의 메소드, 프로퍼티를 공유해서 사용하게 된다.
이를 통하여 메소드 관리를 체계적으로 처리할 수 있다.
javascript에서 객체에서 추가되는 메소드, 프로퍼티, 프로퍼티밑의 메소드, 프로퍼티밑의 메소드 밑에 프로퍼티 그 어느것도 결국에 객체에서는 array형태로 관리한다는 개념을 인식하도록 하자!!

소스에서 하나 더 알고 넘어가야 할 부분이 있다.
바로 자바스크립트의 이벤트 종류!!

다음 블로그에 자세한 내용을 확인할수 있다.

자바스트립트 이벤트 종류

요약을 해보면(^^;)
DOM 레벨 0으로 불리우는 dom 이 정의 되기 이전에 각종 브라우저 에서 사용하던 방식에서는
document.id명.onclick = clickEvent; 을 이용하여 이벤트에 메소드를 정의할 수 있었고,
DOM 레벨 2의 이벤트(IE 를 제외한 대부분의 브라우저가 지원)에서는
addEventListener, removeEventListener 라는 메소드를 사용하는데
인자로는 이벤트명(DOM0에서 on을 뺀다), 이벤트시 처리할메소드,이벤트전파캡쳐단계(?) 등을 정의하게 된다.
인터넷익스플로어는 특이하게도 attachEvent, detachEvent 를 사용하며
인자는 이벤트명(DOM0의 이벤트명), 이벤트시 처리할 메소드 만을 사용한다.

즉, 같은 javasctipt 코드를 실행했을때

function connectTest()
{
          alert(window.addEventListener);
}

파이어폭스에서는
function addEventListener() {
    [native code]
}
라는 alert이 뜨고

explore에서는
undefined 라는 메시지가 뜨게 된다.

attachEvent를 alert 해보면 반대의 현상이 발생된다.

이벤트에 대해서도 알아보자.
브라우저에서는 키보드나 마우스입력같은 외부의 입력에 대해 이벤트를 인식하게 되는데 이 또한 익스플로어와 파이어폭스의 사용이 다르다.
간단히 확인해 보면
파이어폭스에서는 event라는 값을 사용하며,
인터넷익스플로어에서는 window.event라는 값을 사용하게 된다.
이에대한 사용법은 예제를 살펴보면 다시 확인하겠다.
event에 대한 property도 뒤에서 살펴보자!!!

참고로 event명은 다음과 같은것들이 있다.

onkeydown - 모든 키를 눌렀을때
onkeyup - 모든 키를 눌렀다 땠을때
onkeypress - 실제로 글자가 써질때 (shift, enter 같은 키는 인식하지 못한다)

다음 블로그에 자세한 내용이 기술되어 있다.
브라우저별 이벤트 처리


자... 이정도 공부를 했으니 이제 소스를 하나씩 살펴보기로 하자.