AJAX Tool for Web Application Development ก ก : 11p14c561 : กก ( กก) : 1. : 084-159-2906 E-mail : [email protected] 2. ก กก : 086-771-6076 E-mail : [email protected] ก : .. : 081-831-4945 E-mail : [email protected] ก/ก : ก ก ก
AJAX Tool for Web Application Development
�������������� ก"#$%&'�()*(+,&�- )��.*/0��1(,
�'($2���ก&� : 11p14c561 .�4�56 : ��ก ��������ก������������������ !�"#��$���"�%
(#��'���� ��ก�(ก)�) 67�*(+,& : 1. ���,�-���! � ����!�".�
�� : 084-159-2906 E-mail : [email protected]
2. ���,�-กB" �C��Dก� �กB" �� : 086-771-6076 E-mail : [email protected]
�&�&�8#67�.�9ก:& : �.�.I������! �B�,��� ! �� : 081-831-4945 E-mail : [email protected]
$(�ก(;/$=&,>9ก:& : $,#����ก ��� ! L�$��M�����ก $� ���� �! NBO�"�ก,! P������"��
i
)6�(;8?�
Q�RNNB'����$���"�%��S'���"��$M��T���.�� � %'�'���C�$�UQ����� V��W �ก �� ���� ������)-ก�N ����ก� �� V������� �"# ����ก��(ก)� X(��$�� ���ก��P"V��%YT������ �ก.(Y������W ��S'���"��$M�� V��WกS %$�� ����� �%�N#��ก�''QP� ����S' %$�� ����� �"# %#���I�L���Z� ����� �'����$�� ���ก�.��[Z�QM� ��Y��%Y��$���"�%�%��C� �QM� %��ZV �ก ���"#�"%����"���V�����S� �C�QP��N��.����S'���"��$M�� ���"��B���V���Z�ก�'ก��"%����"���$���"�% �����Y���I%�%�N#�� �\�ก�T.RUP����ก"V��$�� ก������$���� ���%��C�ก��"%����"���S'���"��$M�����ก��C���$���"�%QP V�.�� �QM�
��$���"�% ���NSกX! (AJAX ` Asynchronous JavaScript and XML) [1] �h�Z�''P�(��Q�ก��������S'���"��$M�� �����MV��QP��� �\� � �'ก�'[Z�QM�T���%.(Y� ���ก��'�V�.�� Z"��Y�N#�C�Q�i�กP"�� �C�QP�T VNC��h� ����P"���Y�P���QP V�Bก$�Y��%� %ก��"%����"� MV������ ก� �'���� $�� ���S� �"#ก�QM�������� QP��%����.(Y�
��Y��%Y Q�RNNB'��N#�PS��V���$���"�%���NSกX! T���.�� � %'�'��ก�'��S'���"��$M������ �ก.(Y������W �V��ก��%�N#�"�� V"#��S'���"��$M�� T�h�ก��M��� ����''���NSกX!��Y� \��N# ����"�����%"#��S' กS��N�C�T��T V�#��ก��ก �"#������������S'���"��$M���V��QPUV��Y� %Z�''ก�������%�$"���ก�� �����Y� �$�����%YN(� %���$�� $���%�N#������$���� �� �%�QM�Q�ก��"���S'���"��$M���''��Y���� T�h���S'���"��$M���%� %ก��M��� ����''���NSกX!.(Y� � X(���h��������%�N#MV��QP�ก��"��%Y �� �\�C�T���V���"#�#��ก.(Y� MV��"�$V�QM�NV���"#��"�Q�ก��C���� � ��Y��h�ก��V���� QP� %ก��C���$���"�%���NSกX! �QM�Q�ก��������S'���"��$M��QP��%.(Y��%ก����
ii
Abstract At the present, the web application technology has important roles in many areas such as
economics, communication, and education which their demand has greatly increased. The web application has been designed to be more beautiful and more efficient in order to respond user's requirements. However, there are many technologies and they're changing rapidly, the web owner must highly invest in the modification. The method, solving this problem, is to build the tool that can change the old web application by using the new technology. AJAX (Asynchronous JavaScript and XML)[1] technology is very useful for developers who want to build the web application, interacting with the user smoothly and nicely. The old web application must work as sending request to a server and waiting for respond but AJAX work as exchanging data in the background. Using this technology, the web is not to be reloaded a new page every time and is friendly to the user.
Today, AJAX strongly participates in the web development. There are 2 reasons about why to build a new tool. First, the using AJAX to change the old web application isn't convenient because the owner must to program in each file. Another reason is that the most web applications have a same development form, so this work is iterative. This project's idea is to develop and build a new tool that can change the old web application to the web application using AJAX. This concept will make the development be effective such as reducing the expense, reducing working hours, and supporting the using AJAX technology in the web application development.
iii
ก0AA0ก���.�4ก&> �$�����%Y�C��SN"B"V��T�������%����$�� กB,�N�ก �.�.I������! �B�,��� !
��N��!�%�(ก)��$���� � T\(� �.����)w! ���!��T" �"#�.��%����! �L���������! ��N��!�%�(ก)�V� �$���� X(��$���Z�" QP�$C���#�C������� QP�.�� Z"���� � � �%��h�#��M�! �"#T��QP�.��$���PS� V��W Q�ก�������$���� "�� �
.�.�'$B,�$�ก� NSC �%�QP��������'��B�Q�ก������
.�.�'$B,L�$��M�����ก $� ���� �! $,#����ก ��� ! NBO�"�ก,! P������"���%�#���I�z#���$�� Z� �"##�'ก�,!�����M�M%� "����"��%�{�%�[V�� �
.�.�'$B, $B,$Z ��N��!�Bก�V���%�QP�$�� Z� $�� �.��QNQ�����M� �' �������$B,I QP��h�$��%.�����$
.�'$B,������W �%�W����WL�$����ก $� ���� �! �"#������W�Bก$��%�QP�����Y �"#��%��P����# ������ � กC�"��QN "��#�#��"��%�[V�� �
�����%��B� [Z�N���C��$����Q$V.�ก�'.�'�#$B, '��� ��� [Z� %�#$B,�%��C�QP���ก���Bก$�#�'$�� �C��SN�"# %�Bก����%YT��
,�-���! � ����!�".� ,�-กB" �C��Dก� �กB"
iv
$&�)(B
)6�(;8?� ....................................................................................................................................................................I
ABSTRACT ........................................................................................................................................................... II
ก0AA0ก���.�4ก&>................................................................................................................................................. III
$&�)(B....................................................................................................................................................................IV
$&�)(B5&* ............................................................................................................................................................VI
)667� 1 )6,%& ............................................................................................................................................................ 1
1.1 RUP��"#$�� �C�$�U.��RUP� ............................................................................................................... 1 1.2 �� \B#��$!.���$���� .......................................................................................................................... 1 1.3 .�'�. .���$����.................................................................................................................................. 2 1.4 �Bก,!�"#�$���� ���%�QM�Q�ก������...................................................................................................... 2 1.5 ������ก��C��������................................................................................................................................ 3 1.6 .�Y� ���"##�#��"�ก��C��������.......................................................................................................... 3 1.7 #��M�!�%�$���V�N#T���'.......................................................................................................................... 5
)667� 2 6L:M7�/4�&,-0�(867��ก7�8-NO��...................................................................................................................... 6
2.1 ���NSกX! (AJAX - ASYNCHRONOUS JAVASCRIPT AND XML) [1]................................................................. 6 2.2 HTML, XHTML, CSS [2] ........................................................................................................................... 8 2.3 ECMASCRIPT [3]......................................................................................................................................... 8 2.4 XMLHTTPREQUEST [4] ............................................................................................................................... 8 2.5 XML [5]....................................................................................................................................................... 8 2.6 �����N������� �MIGRATING MULTI-PAGE WEB APPLICATIONS TO SINGLE-PAGE AJAX INTERFACES� ���
MESBAH & VAN DEURSEN [6] ............................................................................................................................ 9 2.7 JQUERY [7] ................................................................................................................................................... 9 2.8 JDOM [8]..................................................................................................................................................... 9 2.9 HTMLPARSER [9]........................................................................................................................................ 9
)667� 3 ก&�-0���&4'#�/4ก&���ก�)).................................................................................................................... 10
3.1 $�� �� �\�"#P"�กก��C����.����ก ...................................................................................... 10 3.1.1 ������� �������������ก����� ������� � �ก!" ................................................................... 10
3.2 .��กC�P�������C��.��/ �C���ก (INPUT/OUTPUT SPECIFICATIONS) ................................................................ 14 3.2.1 %����&�'�� (Input) .............................................................................................................................. 14 3.2.2 %����&� ก (Output).......................................................................................................................... 14
v
3.3 .��กC�P��P����%�ก��C���� (FUNCTIONAL SPECIFICATIONS).................................................................... 14 3.3.1 12�ก"���ก���ก��ก��������� �������������ก����� ������� � �ก!" ................................... 14 3.3.2 ก���%3�����4���� (Help) ..................................................................................................... 15
3.4 �\�R �ก X�� !��! (SOFTWARE ARCHITECTURE) ............................................................................ 15 3.5 ก�'Z,�ก�["� L�,�! (PRODUCT INTEGRATION) ................................................................................... 18
)667� 4 ก&�6;$�)................................................................................................................................................. 19
4.1 ก�����'��ก ................................................................................................................................ 19 4.2 ["ก�����'��ก ........................................................................................................................... 21
)667� 5 )6$�V. ....................................................................................................................................................... 25
5.1 .���B�"#.��������#........................................................................................................................... 25 5.2 RUP� �B�$ �"#�������ก�T............................................................................................................ 25
5.2.1 �29��3���ก�� �3ก�� JavaScript �����"! �" (Browser) E4��F................................................. 25 5.2.2 �29����ก������'� �G� �ก HTML �K� XML ............................................................................. 25 5.2.3 �29����ก��M&�������� ��� ������4��E4 ก��������.................................................................... 26 5.2.4 �29��' �ก����� AJAX 3P�'� �G���Q�4��� ................................................................................... 26
5.3 ������Q�ก�������"##�Bก ! ........................................................................................................... 26
�&8ก&��O&��0� ......................................................................................................................................................... 27
5&�X,-ก (APPENDIX)....................................................................................................................................... 28
ก. $ZV ��ก� �� �Y���V��"#��%�� ......................................................................................................................... 28 .. $ZV ��ก�QM������V��"#��%��........................................................................................................................ 29
ก��������� �������������ก����� ������� � �ก!"...................................................................... 29 ก���%3�����4���� (Help) .............................................................................................................. 37
vi
$&�)(B5&* Z�%� 1-1 �[�L�� ���#�#��"�ก��C��������................................................................................................... 4 Z�%� 2-1 ��"#��%��.��ก��C�����''���NSกX! �%�'��%�'ก�'ก��C����'���S'.............................................. 6 ���"��$M������T [1] ............................................................................................................................................. 6 Z�%� 2-2 ก�# �"[".��ก����.��"#�V�.�� Z"�''���NSกX! �%�'��%�'ก�'ก��C����'���S'���"��$
M������T [1]................................................................................................................................................ 7 Z�%� 3-1 �[�L���Z��$�#''ก��C����.���$���� ���"���S'���"��$M���h�ก��M��� ����''���NSกX!.. 10 Z�%� 3-2 �[�L��ก�Nก .���Z��$��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! ............................. 13 Z�%� 3-3 �[�L�������$�����.����ก ................................................................................................. 17 Z�%� 4-1 ��S'���"��$M�� ����V���%� 1.................................................................................................................... 19 Z�%� 4-2 ��S'���"��$M�� ����V���%� 2.................................................................................................................... 20 Z�%� 4-3 ��S'���"��$M�� ����V���%� 3.................................................................................................................... 21 Z�%� 4-4 [".��ก��C���S'���"��$M���%�T��N�กก��"� ����V���%� 2 QP��h��''���NSกX! �����'� FIREFOX
.................................................................................................................................................................. 22 Z�%� 4-5 ["ก��C����.����S'���"��$M�� ����V���%� 3 �%�T V %ก��กS' SESSION.................................................. 23 Z�%� 4-6 ["ก��C����.����S'���"��$M�� ����V���%� 3 P"��N�ก[V��ก��"��h��''���NSกX!������ก �%Y
.................................................................................................................................................................. 24 Z�%� ก-1 FOLDER �AJAX TOOL� ............................................................................................................................ 28 Z�%� ก-2 SUBFOLDERS �"# FILES L��Q� FOLDER �AJAX TOOL� .......................................................................... 28 Z�%� .-1 FILE �AJAXTOOL.JAR� ............................................................................................................................ 29 Z�%� .-2 �V�� V�#���[Z�QM�.����ก �AJAX TOOL�................................................................................ 29 Z�%� .-3 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 1 ................................................. 30 Z�%� .-4 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 2 ................................................. 30 Z�%� .-5 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 3 ................................................. 31 Z�%� .-6 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 4 ................................................. 31 Z�%� .-7 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 5 ................................................. 32 Z�%� .-8 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 6 ................................................. 32 Z�%� .-9 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 7 ................................................. 33 Z�%� .-10 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 8 ............................................... 33 Z�%� .-11 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 9 ............................................... 34 Z�%� .-12 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 10 ............................................. 34 Z�%� .-13 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 11 ............................................. 35 Z�%� .-14 �\' PROGRESS BAR �%�.(Y� � P"��N�กก�B� OK................................................................................... 35 Z�%� .-15 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 12 ............................................. 36 Z�%� .-16 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 13 ............................................. 36
vii
Z�%� .-17 �"��ก HELP > MANUAL ���������Z��ก��#ก�'ก�QM������ก .............................................. 37 Z�%� .-18 P��� ABOUT ����.�� Z".����ก ................................................................................................ 37
1
)667� 1 )6,%&
1.1 ._B'&�/4�-&�$%&�(BN��._B'&
Q�RNNB'����$���"�%��S'���"��$M��T���.�� � %'�'���C�$�UQ����� V��W �ก �� ���� ������)-ก�N ����ก� �� V������� �"# ����ก��(ก)� X(��$�� ���ก��P"V��%YT������ �ก.(Y������W ��S'���"��$M�� V��WกS %$�� ����� �%�N#��ก�''QP� ����S' %$�� ����� �"# %#���I�L���Z� ����� �'����$�� ���ก�.��[Z�QM� ��Y��%Y��$���"�%�%��C� �QM� %��ZV �ก ���"#�"%����"���V�����S� �C�QP��N��.����S'���"��$M�� ���"��B���V���Z�ก�'ก��"%����"���$���"�% �����Y���I%�%�N#�� �\�ก�T.RUP����ก"V��$�� ก������$���� ���%��C�ก��"%����"���S'���"��$M�����ก��C���$���"�%QP V�.�� �QM�
��$���"�% ���NSกX! (AJAX ` Asynchronous JavaScript and XML) [1] �h�Z�''P�(��Q�ก��������S'���"��$M�� �����MV��QP��� �\� � �'ก�'[Z�QM�T���%.(Y� ���ก��'�V�.�� Z"��Y�N#�C�Q�i�กP"�� �C�QP�T VNC��h� ����P"���Y�P���QP V�Bก$�Y��%� %ก��"%����"� MV������ ก� �'���� $�� ���S� �"#ก�QM�������� QP��%����.(Y�
��Y��%Y Q�RNNB'��N#�PS��V���$���"�%���NSกX! T���.�� � %'�'��ก�'��S'���"��$M������ �ก.(Y������W �V��ก��%�N#�"�� V"#��S'���"��$M�� T�h�ก��M��� ����''���NSกX!��Y� \��N# ����"�����%"#��S' กS��N�C�T��T V�#��ก��ก �"#������������S'���"��$M���V��QPUV��Y� %Z�''ก�������%�$"���ก�� �����Y� �$�����%YN(� %���$�� $���%�N#������$���� �� �%�QM�Q�ก��"���S'���"��$M���''��Y���� T�h���S'���"��$M���%� %ก��M��� ����''���NSกX!.(Y� � X(���h��������%�N#MV��QP�ก��"��%Y �� �\�C�T���V���"#�#��ก.(Y� MV��"�$V�QM�NV���"#��"�Q�ก��C���� � ��Y��h�ก��V���� QP� %ก��C���$���"�%���NSกX! �QM�Q�ก��������S'���"��$M��QP��%.(Y��%ก����
1.2 -(A=V.�4$��#N��2����&,
1. �����กC�P�������'� �Q�ก��"%�����S'���"��$M�� �%� %ก��M��� ����''����T�h�ก�ก��M��� ����''���NSกX!
2. �����������$���� ���%�QM�Q�ก��"%�����S'���"��$M�� � Z�''�%�����.(Y�T��
2
1.3 N�)�NAN��2����&,
1. ก������P"�กก�N#��ZV'���Y�-��.��ก����� ���P"�P�����S'���"��$M���%� ���ก��"�� �"�.�� Z"�%� ���ก� ��h� XML ������V� ����T$"��� !
2. ����� �\�"%���ก��M��� ���.��� �Z�%��h��''T��� �ก"��$!�h�ก��M��� ����''���NSกX!T��
3. �$�����%YN#�(ก)�\(�ก��"%����"�ก��M��� �������T�h�ก��M��� ����''���NSกX!�"#N#�����$���� ���%�QM�Q�ก��"%����"��%Y
4. �V��.��.�� Z"�%�N#�"%����h�ก��M��� ����h��''���NSกX! ��� %ก�#'B���[Z�QM� 5. '���,����[".��.�� Z"�%��P"� �N�ก���NSกX! ��� %ก�#'B���[Z�QM� 6. �$���� ���%�QM�Q�ก��"%����"��%YN#\Zก���������N���
1.4 �V.ก� #̀�/4����������67�a1Oa,ก&�*(+,&
X�� !��!�%�QM�Q�ก�������$�� ���'' (Mold/Engine) %��� V�T�%Y - Eclipse ���QM� Java, JSP �h�L�)�Q�ก������ - Notepad++ ���QM� Javascript, HTML, XML �h�L�)�Q�ก������ - Apache Tomcat 6.0.14 - Window XP - Mozilla Firefox - jQuery - JDOM - HTMLParser
X�� !��!�%�QM�Q�ก�������$���� �� AjaxTool %��� V�T�%Y
- Eclipse ���QM� Java �h�L�)�Q�ก������ - Apache Tomcat 6.0.14 - Window XP - Swing-layout-1.0.3 - SWT plug-in .�� eclipse
3
Q��V��.���$���� �� �Bก,!�"#��ก�� %��� V�T�%Y
- Personal Computer P�� Notebook - Microsoft Word Documents, PDF files, Microsoft PowerPoint Files - Mouse, Keyboard
1.5 �,-6&�ก&�;%&�,0,�&,
1. �(ก)��$�����'�Y�� �� 1.1 �(ก)�Z�''ก��.%����S'���"��$M���''����T 1.2 �(ก)�ก��C����.�����NSกX! 1.3 �(ก)������N���%��ก%���.���
2. ���$�#P!$�� ���ก�.��#'' 2.1 �(ก)�Z�'' �"#������T. V��WQ�ก��"%�����S'���"��$M���h��''���NSกX!
3. ��ก�''#'' 3.1 กC�P��Z�''�"#������T.P"�กQ�ก��"%�����S'���"��$M���h��''���NSกX! 3.2 ��ก�''�$���� ���%�QM�Q�ก��"���S'���"��$M�� � Z�''�"#.��กC�P��
�%����T�� 4. �����#''
4.1 ������$���� ���%�QM�Q�ก��"���S'���"��$M�� � Z�''�"#.��กC�P���%����T��
5. ����'#'' 5.1 �C���S'���"��$M��P"��WZ�'' �����'ก�'�$���� ���%�T�������.(Y�
6. �B["�$���� �"#�.%�������
1.6 N(b,A�,�/4�484�-/&ก&�;%&�,0,�&,
#�#��"�Q�ก��C��������.���$�����$���� �����NSกX!�C�P�'�������S'���"��$M���� �\����T�����Z�%� 1-1
4
Z�%� 1-1 �[�L�� ���#�#��"�ก��C��������
5
1.7 .�4281,#67��&;-?&�4c;O�()
1. T�������'� � �"#�$���� ���%��� �\�"���S'���"��$M���''��Y���� T�h���S'���"��$M���%� %ก��M��� ����''���NSกX! ������C�TQM�Q�ก��������S'���"��$M��QP��%.(Y�
2. ������V���� QP� %ก��C���$���"�%QP VW �#�Bก !QM�Q�ก��������S'���"��$M��������h���["�ก���QP��N��.����S'���"��$M�� P�� �QM���$���"�%���NSกX!���� �ก.(Y�
3. �����"�$V�QM�NV���"#���� $�� �#��ก Q�ก��"%�����S'���"��$M������T �h�ก��M��� ����''���NSกX!
4. ������C�$�� Z������������ก X�� !��! �#�Bก !QM�Q�ก�������$���� ���ก%���ก�'��S'���"��$M��
5. �� �\�C��$���� ��ก��"���S'���"��$M��T�h�ก��M��� ����''���NSกX!�%Y �#�Bก !QM����ก�'X�� !��!����W�%��ก%���.���T��
6
)667� 2 6L:M7�/4�&,-0�(867��ก7�8-NO��
2.1 ���� ก"# (AJAX - Asynchronous JavaScript And XML) [1]
���NSกX!�h���$���"�%�%�QM�Q���S'���"��$M�� ����h���$��$P�(���%�QM�Q�ก��P"�.�� Z" V��W �N�ก�X�!����!��� %.���%ก�V�ก��P"��''��S'���"��$M������T �MV� $�� �S�Q�ก��P"��"#.���.��.�� Z"�%��P"�
Z�%� 2-1 ��"#��%��.��ก��C�����''���NSกX! �%�'��%�'ก�'ก��C����'���S'
���"��$M������T [1]
N�กZ�%� 2-1 classic web application model �h�ก�����ก��"ก�"%���.�� Z"�''
��S'TX !����T �%� %ก��V� HTTP Request �����.�.�� Z"ก�'��S'�X�!����!P"��N�ก��Y���S'�X�!����!กSN#�V�.�� Z"�%��h� Html TQP����T$"��� ! �V�� Ajax web application model �h�ก�����ก�
7
�C�����''���NSกX! ��� %ก��V� HTTP Request ��� Ajax engine N�ก�R��T$"��� ! ������S'�X�!����! P"��N�ก��Y���S'�X�!����!กSN#�V�.�� Z"TQ�Z�'' XML ก"�'T���T$"��� !
Z�%� 2-2 ก�# �"[".��ก����.��"#�V�.�� Z"�''���NSกX! �%�'��%�'ก�'ก��C����'���S'���"��$
M������T [1]
N�กZ�%� 2-2 ก��C����.�� classic web application model �%�'��%�'ก�'��"� N#�PS��V�
%ก����.�.�� Z".��T$"��� !T����X�!����! �"���N�ก#�����X�!����!# �"[".�� Z"��SN�"��N(��V�ก"�' ����T$"��� ! �V��ก��C����.�� Ajax web application model N#�PS��V� %ก����.�[V�� Ajax engine �"��กS���.� V�T����X�!����! ����%��R��T$"��� !T V ����QP��X�!����!# �"["N���SN � V� ����X�!����!# �"["��SNกSN#�� �\�C� �����'�T$"��� !T��
8
2.2 HTML, XHTML, CSS [2]
HTML �h�L�)� �!ก���%�\Zก����.(Y����������["�"#Z�''.��.�� Z"[V�� ������S'�'��!�X�! ����h� � �-��P�(��.�� ISO X(��N��ก���� World Wide Web Consortium (W3C)
XHTML �h�L�)� �!ก���MV���%��ก�' HTML � V V�� ��%� %$�� �.� ���Q�Z�''.����! �กก�V� �"# % � -�� �กก�V� L�)� HTML
CSS (Cascading Style Sheets) [3] �h�L�)��%�QM�กC�P��Z�''ก�����[" �MV� ���ก�.��� ����ก)��V�TPV �''TP� N#\ZกกC�P����� CSS
2.3 ECMAScript [3]
�h�L�)��$� !�%��C������ZV'���S'�'��!�X�! �MV� JavaScript ������.��\(�.�� Z" V��WQ���S'���"��$M�� �"#Q��%��%YกSN#QM� JavaScript �h�P"�ก JavaScript �h�L�)��$� !�%�\ZกQM�'��R��T$"��� ! ������.��\(� Document Object Model (DOM) �"#�����QM�����.�� Z"�%� %ก��"%����"�P��� � �'ก�'[Z�QM� ��� JavaScript \Zก����� �N�ก ECMAScript X(���h� � -��N�ก Ecma International Ecma International
2.4 XMLHttpRequest [4]
�h����%T��%��� �\�%�กQM�N�กL�)��$� ! V��W ������C�ก��"ก�"%����"#�'Z�'' XML N�ก��S'�X�!����! ���QM� HTTP X(������ก��M��� V�#P�V����S'�'��!�X�!����R��T$"��� ! (Client-Side) ก�' ��S'�X�!����!����R���X�!����! (Server-Side) X(��N#�C�ก��"ก�"%���[V��i�กP"���C�QP�[Z�QM�T V ����P"�P�����S'���"��$M��QP V��Y�P �
2.5 XML [5]
XML (Extensible Markup Language) X(���h�L�)� �!ก���C�P�'ก�QM��������T �������� W3C ��� %NB�#��$!������h� �����%����T�� �� V�ก��Q�#''�%� %$�� � ก V��ก��(�MV�QM�$� ���� �! %� % #''��'� �ก�$�"# �� P����NN#�h�$�"#��ก #�Bก !�%� %$�� ���ก�������.�� Z"\(�ก��) ��กN�ก�%Y���������h���Y�-��Q�ก�����L�)� �!ก���i��#����%ก.�Y�P�(�� XML QM�Q�ก��"ก�"%���.�� Z"#P�V���$����$� ���� �!�%�� ก V��ก�� �"#����ก��"ก�"%���.�� Z"[V��������!��S
9
2.6 �&,-0�(8������ pMigrating Multi-page Web Applications to Single-page AJAX
Interfacesr 2;8 Mesbah & van Deursen [6]
�h������N���%��ก%���.���ก�'ก��"%����"#�(ก)��$�����.����S'��N ��� %ก��'V�#�L�.����S'��N�"#$� ����� ! V��W��ก�h�� V"#M����"���"���ก �QP���ZVQ�Z���NSกX!���"��$M��
�����N��.�� Mesbah & van Deursen T���(ก)�Z�''Q�ก��"%����"�$� ����� ! V��WQP��h�Z�''���NSกX! ����%��(ก)��'V���ก�h�$� ����� ! V��W ���Z�%� 3 X(��T��� ก V��ก�'�$�����%Y$�� �$�����%YN#����T�%�Z�''ก��"%���ก��M��� �����V���Y� ���N#�����$���� ���%�QM�Q�ก��"%���ก��M��� �����������%��$�����%YT VT������T�%���S'����"��$M���Bก�'' � VN# %�''��! .����S'����"��$M���%��� �\�"%���T��
2.7 jQuery [7]
�h� library .�� javascript �%� %ก�QM���V����VP"���"# % � -��ก�QM� X(���� �\QM�V� ก�' library javascript ����WT�� ����C� �QM��(�.�� Z"[V�� XMLHttpRequest
2.8 JDOM [8]
�h� open source �%�QM�Q�ก����� html document ���N#���� � � -�� W3C
2.9 HTMLParser [9]
�h� ���V�� html �"�������h� tree �����QM� �N��'P�.�� Z" V��W.��� V"# node ���� P��.���P��(id), .�� Z".���P��
10
)667� 3 ก&�-0���&4'#�/4ก&���ก�))
��ก �$���� �����NSกX!�C�P�'�������S'���"��$M�� �%�T�������.(Y�Q��$�ก��%Y �h��$���� ���%�QM�Q�ก��"���S'���"��$M���%� %������T. � �%�กC�P�� T�h���S'���"��$M���%� %ก��M��� ����''���NSกX!T����V���#��ก�"#���S� ��� %.��กC�P�����X�� !��!�"#ก���ก�'' ����%Y
3.1 �-&�$&�&�=�/4'/(กก&�6%&�&,N��2.��ก��
��ก �%Y %ก��C����P"�ก $��
3.1.1 �./��- )��.*/0��1(,a'O�7ก&��1����28��))���� ก"#
P����%��%Y�h�P����%�P"�ก.�� ����ก X(��N#�C�ก��"���S'���"��$M������T�%� %������T. � �%�กC�P�� T�h���S'���"��$M���%� %ก��M��� ����''���NSกX! X(���� �\����T������[�L���Z��$� ���Z�%� 3-1
Z�%� 3-1 �[�L���Z��$�#''ก��C����.���$���� ���"���S'���"��$M���h�ก��M��� ����''���NSกX!
N�ก�[�L���Z��$� �� �\�C� ��I�'����"#��%��.���Z��$� �"#.�Y� ��Q�ก�QM�
��ก ������"���S'���"��$M��QP��h�ก��M��� ����''���NSกX! T������$C��I�'���Z��$� (Use Case Narrative) ����%Y
11
Use Case#AJ001 �"���S'���"��$M��QP� %ก��M��� ����''���NSกX!
Goal in Context [Z�QM��� �\�"���S'���"��$M��QP� %ก��M��� ����''���NSกX!���QM��$���� ���%������.(Y�
Primary Actor [Z�QM�
Stakeholder Interests Stakeholders and
Interests [Z�QM� ���ก��"���S'���"��$M���%� ���ก�QP� %ก��M��� ����''���NSกX!
Precondition [Z�QM� �V���S'���"��$M�� �%� ���ก��"�ก��M��� ����h��''���NSกX! ��� ��Y� C��P�V� tag .��.�� Z"�%� ���ก��C� �����[" �����$���� ���%�T�������.(Y� ������C�ก��"�QP� %ก��M��� ����''���NSกX!
Postconditions \����S'���"��$M���%�[Z�QM� ���ก��"�QP� %ก��M��� ����''���NSกX! %Z�'' � � ������T..��#'' �"#[Z�QM�Q�V����B �.�� �\Zก ���$'\��� N#�� �\�"���S'���"��$M���%� ���ก�QP� %ก��M��� ����''���NSกX!T��
Trigger [Z�QM� ���ก�QM��$���� ���%�T�������.(Y�Q�ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX!
Step Action
1 [Z�QM�กC�P��� �Z�%� ���ก�N#�"%����h�ก��M��� ����''���NSกX!
2
[Z�QM�กC�P��.�� Z"�%�N#�C� �����N�กP�����S'��N�%��"��ก
3 [Z�QM�กC�P�� C��P�V�.�� tag �%�N#�C�.�� Z"T����["
4
#'' �N��'����B �%��'�.�� � T���กVP���� �Z�%� ���ก�N#�"%����h�ก��M��� ����''���NSกX!, C��P�V�.��.�� Z"�%�N#�C� �����N�กP�����S'��N�%��"��ก �"# C��P�V�.�� tag �%�N#�C�.�� Z"T����["
5 #''�����V��.�� engine �%��C�P����%��(�.�� Z"N�กP�����S'��N �'V� � tag .��.�� Z"�%�[Z�QM� ���ก�
6 #''���� engine ������(�.�� Z" �"���C� ��"�QP���ก ���ZVQ�Z.�� XML 7 #''���� �V��.�� javascript �%�QM�Q�ก��(� XML �N�ก engine ��ก"�TQ�
P���� �Z�%�[Z�QM��"��ก
Description
8 #''�C�ก��"%����"�ก��M��� ������ �h�ก��P"�.�� Z"[V�� function javascript
Extensions Step Branching Action
12
5a ก,%\��[Z�QM�Q�V����B �%�#''T V���' [Z�QM�N# ����C�ก�Q�V����B QP V�%ก$�Y�
Remarks
N�ก$C��I�'���Z��$� �� �\�C�.�Y� ��Q�ก�QM��$���� ���"���S'���"��$M���h�
�''���NSกX! L��Q��Z��$� ������h��[�L��ก�Nก ���������QP��PS�L�� �ก����.(Y� ���Z�%� 3-2
13
Z�%� 3-2 �[�L��ก�Nก .���Z��$��"���S'���"��$M��QP� %ก��M��� ����''���NSกX!
14
3.2 NO�ก%&',;$0��,%&�NO&/ ,%&��ก (Input/Output Specifications)
3.2.1 $0��,%&�NO& (Input)
1. ��S'���"��$M������T (directory path .����S'���"��$M��) �%�[Z�QM� ���ก�N#�"%���ก��M��� ����h��''���NSกX! ���N# ����h���S'���"��$M���%� %������T.��� V�T�%Y
- \Zก��������� jsp ��V���Y� 2. P�����S'��N.��� �ZP��"��ก! �%�[Z�QM� ���ก�N#�"%���ก��M��� ����h��''���NSกX! (�h�
file �� �กB" .jsp ��V���Y�) 3. ��� ��� .���X�!����! �%�[Z�QM� ���ก�N#�C���S'���"��$M��[""��I!T�� 4. $ZV"��ก!�"# tag ID �%�[Z�QM� ���ก�N#�"%���ก��M��� ����h��''���NSกX! ���N# ��� %
������T.����%Y - tag ID X(���h�'���,����[".��.�� Z"�%�T��N�ก"��ก!�%��"��ก ����h�$V���%��ก��ก�'
tag ID .�� C��P�V�.�� Z"�%�"��ก!��Y�N#T�P"� � ( ����h� tag M�����%��ก������)
3.2.2 $0��,%&��ก (Output)
1. ��S'���"��$M��[""��I! �%�T��N�กก��"�QP� %ก��M��� ����h��''���NSกX! ���N#�กS'��ZVQ� directory �output� .����ก
3.3 NO�ก%&',;',O&67�ก&�6%&�&, (Functional Specifications)
N�ก$�� �� �\.����ก .��� �� �� �\�'V�ก��C�����h��R�ก!M�� V��WT����� V�T�%Y
3.3.1 }_�ก#1(,�ก7�8-ก()ก&��./��- )��.*/0��1(,a'O�7ก&��1����28��))���� ก"#
�������ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX!��Y� ��ก �� �\ 1. �N��'.�� Z".��.���%�[Z�QM�����.�� T���กV ก� �N��' file ��S'��N.��� �ZP��"��ก!�%�
[Z�QM� ���ก�N#�"%���ก��M��� ����h��''���NSกX! $��N# ����h� file .jsp ��V���Y� 2. �C�ก�$��"�ก��S'���"��$M�� ���''�%� ���ก�N#�"%���ก��M��� ����h��''���NSกX!
��กS'T��Q���ก ������ก� �� �Y� mold P�� engine "�T QP��� �\�"%���ก��M��� ����h��''���NSกX!T��
15
3. �C�ก��� tomcat server �%�\Zก �� �Y� �ก�' ����ก 4. %P����'��!�X�!���.(Y� � T��QM�����["��S'���"��$M�� ���''�%�$��"�ก � �����QP�
[Z�QM��C�ก��"��ก� �ZP��"��ก!�%� ���ก�N#�"%���ก��M��� ����h��''���NSกX! ��� ��Y�กC�P�� tag Id �%�$ZVก�'"��ก!��Y�W����
5. ����NC����$ZV"��ก!�"# tag ID �%�[Z�QM� ���ก�N#�"%���ก��M��� ����h��''���NSกX! 6. ��ก��C����.�� tomcat server "� � ���[Z�QM��C�ก��"��ก$ZV"��ก!�"# tag ID ��SN�%�'���
�"�� 7. %ก� �N��'Q� ������ �V�[Z�QM����.�� Z".��.��$'P��T V กV���%�N#�C�����ก�
�"���S'���"��$M��QP� %ก��M��� ����''���NSกX! 8. �C�ก����� �"# �� �Y� mold P�� engine "�Q���S'���"��$M�� ���''�%�$��"�ก � �����
�C�ก��"���S'���"��$M�����ก"V��QP� %ก��M��� ����''���NSกX!T�� 9. �C���S'���"��$M��[""��I!�%�T���C�ก��"��h��''���NSกX!�%�'����"�� �กS'T��Q�
directory �output� .����ก
3.3.2 ก&��$;��-&�1?-8�'/�� (Help)
�� �\�����ก��#ก�'ก�QM���� � ��Y�����Z.�� Z"�ก%���ก�'��ก T��
3.4 $=&._A8ก���"�}A#�-�# (Software Architecture)
ก���ก�''�$�����.��X�� !��!T���'V��V�� V��W.����ก ��ก�h� 3 #��' (Layers) T���กV
1. �V�� V�#��� (Interface) �h��V��.����ก �C�P�' �� V�ก�'[Z�QM���� #ก�'����
- Main Page P���P"�ก.����ก
2. �V��$�'$B (Controller) �h��V���%� �� V�#P�V���V�� V�#���ก�'�V��.�� Z" ������C�.�� Z" �# �"[" #ก�'����
- MainProcess �h��V��$�'$B ก��C����P"�ก.����ก - ValidateInputModule �h�� �Z"�%��C�ก��'.�� Z".��.��N�ก[Z�QM� � �N��' ���
�N��'�V���S'��N�%��'�.�� � %Z�''\Zก ��� �ก�'������T..����ก P��T V �"# �N��'�V�[Z�QM�T�����.�� Z".��.�� �$'\���P��T V \�� �N��'$�� \Zก ����%�'����"�� กSN#�C�ก��V�$ZV"��ก! �"# tag id X(���h�.�� Z".��.���%�[Z�QM�กC�P�� T��� MoldBuilderModule V�T
16
- MoldBuilderModule �h�� �Z"�%�QM�Q�ก����� Mold P�� Engine ���N#�'$ZV"��ก! �"# tag id N�ก ValidateInputModule �"���C�T���� Mold N�ก��Y� N#�V� Mold �%�����T��� MoldInstallerModule V�T
- MoldInstallerModule �h�� �Z"�%�N#�C�ก��' Mold N�ก MoldBuilderModule ������%�N#�C� Mold T �� �Y�T��Q���S'����"��$M�� �%� ���ก�N#�"%���ก��M��� ����h����NSกX!
3. �V��.�� Z"(Data) �h��V��.��.�� Z"�%��ก%���.���ก�'��ก ��Y�.��.���"#.���ก��Y�P �
#ก�'���� - WebAppPath (input) �h� directory path .����S'���"��$M���%�[Z�QM� ���ก�N#
�"%���ก��M��� ����h��''���NSกX! - WebPage (input) �h�P�����S'��N.��� �ZP��"��ก! �%�[Z�QM� ���ก�N#�"%���ก�
�M��� ����h��''���NSกX! - DomainName (input) �h���� ��� .���X�!����! �%�[Z�QM� ���ก�N#�C���S'���"��$
M��[""��I!T�� - LinksAndTagID (input) �h�$ZV"��ก!�"# tag ID �%�[Z�QM� ���ก�N#�"%���ก��M��� ���
�h��''���NSกX! - WebAppObject (output) �h���S'���"��$M��[""��I! �%�T��N�กก��"�QP� %ก�
�M��� ����h��''���NSกX! ���N#�กS'��ZVQ� directory �output� .����ก - Mold / Engine �h�� V�� �!�%�\Zก����.(Y���� MoldBuilderModule T��QM� �� �Y�"�T
Q���S'���"��$M���%� ���ก�N#�"%����h�ก��M��� ����''���NSกX! ����V��.�� Mold T���กV o Text file �%��กS' code function javascript �%�N��ก��ก%���ก�'ก��M��� ����''��
�NSกX! X(��N#QM���ก"�Q�P�����S'��N�%� %"��ก!�%��� ���ก��"%����h����NSกX!��ZV
o File jsp �%�N��ก�� %� �'$C����.� (request) N�ก javascript �"��$��.�� Z"TQP�Q�Z�''.�� XML
o jQuery.js �h� library .�� javascript �''QP V QM�N��ก�ก�'�V�� content .�� HTML [V�� javascript �%��C�$�U ��� %$�� �� �\Q�ก�N��ก�ก��C�����'' AJAX T����V���V������%ก����
o JDOM.jar �h� library .�� JAVA QM�Q�ก�N��ก�ก�' DOM element V��WQ�P�����S'��N
17
o htmlParser.jar �h� library .�� JAVA QM�Q�ก�N��ก��V�� content V��W.�� HTML
�$�����.����ก ��Y��� �V���%Y %�V��#ก�'�"# %ก��M��� V�.�� Z"#P�V��ก��
���Z�%� 3-3
Z�%� 3-3 �[�L�������$�����.����ก
18
3.5 ก&�)��`&ก&�X/0A5(`�# (Product Integration)
��ก �%�T�������.(Y�#ก�'����P�� ����� (source code) �C�$�U�%��% ���T�������.(Y��������%Y
- �V�� V�#��� (Interface) �%�QM��C�P�' �� V�ก�'[Z�QM� - �V��$�'$B (Controller) .����ก ��Y�P � - �V��.�� Z" (Data) T���กV Mold �ก���� �V���%��C� �N�ก Open Sources �"#
Component ����W �V��.����ก �%������.(Y� ����C� �N�ก Open Sources �"# Component ����W �
#�Bก !QM� T���กV �V��.�� Mold ��� V�T�%Y - jQuery.js - JDOM.jar - htmlParser.jar