‫‪ ‬‬

‫‪ ‬‬

‫ﺗﺎﺑﺴﺘﺎن ‪  1386‬‬

‫‪ ‬ﺷﺮوﻋﻲ ﺑﺮ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ‪Ajax ‬‬

‫‪ ‬ﺗﺎﻟﻴﻒ و ﺗﺮﺟﻤﻪ‪:‬‬

‫ﻣﺤﻤﺪ ﺗﻮﻛﻠﻲ ﻫﺸﺠﻴﻦ‬

‫‪M.Tavakoli.h@Gmail.com ‬‬
‫‪ ‬ﻣﺤﻤﺪﻫﺎدي ﻗﻮﻣﻨﺠﺎﻧﻲ‬

‫‪HadiGhomanjani@Gmail.com ‬‬
‫ﻓﺼﻞ اول‪ :‬ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪1.............................................................................................................. Ajax‬‬
‫راه ﺣﻞ ‪1 ................................................................................................................................................................................‬‬
‫دﻳﺪﮔﺎه ﻛﺎرﺑﺮان ‪2 ..................................................................................................................................................................‬‬
‫دﻳﺪﮔﺎه ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﺎن ‪3 .......................................................................................................................................................‬‬
‫ﻧﮕﺎﻫﻲ ﻛﻠﻲ ﺑﻪ ﻣﺮاﺣﻞ اﺳﺘﻔﺎده از ‪ Ajax‬در ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺗﺤﺖ وب ‪5 ......................................................................‬‬
‫ﭼﻪ ﻛﺎرﻫﺎي را ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺎ ‪ Ajax‬اﻧﺠﺎم دﻫﻴﺪ ‪6..........................................................................................................‬‬
‫ﻣﺰاﻳﺎي ‪9 ................................................................................................................................................................... Ajax‬‬
‫ﭼﺎﻟﺶ ﻫﺎي ﻓﻦ آوري ‪10 ...................................................................................................................................... Ajax‬‬

‫ﻓﺼﻞ دوم‪ :‬ﺟﺎوااﺳﻜﺮﻳﭙﺖ ‪11 ....................................................................................................................‬‬

‫ﺗﮓ >‪12 ......................................................................................................................................................... <script‬‬
‫ﻧﻮﺷﺘﻦ اﺳﻜﺮﻳﭙﺖ در ﻗﺴﻤﺖ ‪13 .......................................................................................................................... head‬‬
‫ﻧﻮﺷﺘﻦ اﺳﻜﺮﻳﭙﺖ در ﻗﺴﻤﺖ ‪14 .......................................................................................................................... body‬‬
‫ﻓﺎﻳﻞ ﺧﺎرﺟﻲ ﺟﺎوااﺳﻜﺮﻳﭙﺖ‪14 ..........................................................................................................................................‬‬
‫ﻣﺪﻳﺮﻳﺖ روﻳﺪاد ‪15 ...............................................................................................................................................................‬‬
‫ﻣﺸﺎﻫﺪه ﺧﻄﺎﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ ‪17 .................................................................................................................................‬‬
‫ﻣﺘﻐﻴﺮﻫﺎ و اﻧﻮاع آن ﻫﺎ‪17 ....................................................................................................................................................‬‬
‫ﺗﺒﺪﻳﻞ ﻧﻮع‪19 ........................................................................................................................................................................‬‬
‫ﻋﻤﻠﮕﺮ ‪20 ...............................................................................................................................................................................‬‬
‫دﺳﺘﻮرات ﻛﻨﺘﺮﻟﻲ ‪23 ...........................................................................................................................................................‬‬
‫ﺗﺎﺑﻊ ‪24 ...................................................................................................................................................................................‬‬
‫ﺷﻲ ﭼﻴﺴﺖ؟‪27 ...................................................................................................................................................................‬‬
‫ﺗﻌﺮﻳﻒ ‪29 .................................................................................................................................................................... DOM‬‬
‫ﺷﻲ ‪35 .........................................................................................................................................................document‬‬

‫ﻓﺼﻞ ﺳﻮم‪ :‬ﺷﺮوع ﻛﺎر ﺑﺎ ‪41 ........................................................................................................ Ajax‬‬

‫ﺷﺮوع ﺑﺎ ‪41 .............................................................................................................................................................. HTTP‬‬
‫درﺧﻮاﺳﺖ ‪45 ................................................................................................................................................ XMLHttp‬‬
‫اوﻟﻴﻦ ﺑﺮﻧﺎﻣﻪ ﺳﺎده ‪52 ............................................................................................................................................ Ajax‬‬
‫ﻣﺘﺪ ‪ GET‬در ‪59 ........................................................................................................................................... XMLHTTP‬‬
‫ﻣﺘﺪ ‪ POST‬در ‪62......................................................................................................................................... XMLHTTP‬‬
‫ﻓﺼﻞ ﭼﻬﺎرم‪ :‬ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪69 ........................... Asp.Net‬‬
‫ﻛﻨﺘﺮل ﻫﺎ ‪69..............................................‬‬
‫‪ Ajax‬در ‪69....................................... ASP.Net‬‬
‫‪85 ....................................... ASP.NET AJAX‬‬
‫ﻣﻌﻤﺎري ‪85 ................................... ASP.NET AJAX‬‬
‫ﻓﺮﻳﻢ ورك ﺳﺮور ‪88 .........................................‬‬
‫ﻣﺪل ﺗﻮﺳﻌﻪ ي ﻛﻼﻳﻨﺖ ﻣﺤﻮري )‪89 ..... (Client-centric development model‬‬
‫ﻣﺪل ﺳﺮور ﻣﺤﻮري ﺗﻮﺳﻌﻪ ‪89 .....................................‬‬
‫اﻫﺪاف ‪90 .................................... ASP.NET AJAX‬‬
‫ﻳﻚ ﺑﺮﻧﺎﻣﻪ ﺳﻤﺖ ﺳﺮور ‪91 ......................................‬‬
‫ﻳﻚ ﺑﺮﻧﺎﻣﻪ ﺳﺎده ﺑﺮ ﻣﺤﻮر ﻛﻼﻳﻨﺖ ‪96..................................‬‬

‫ﻓﺼﻞ ﭘﻨﺠﻢ‪ :‬ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪101 ............................. Ajax‬‬

‫‪101 ............................................FireBug‬‬
‫دﻳﺒﺎگ ﺳﻤﺖ ﺳﺮور ‪123 ........................................‬‬
‫اﺳﺘﻔﺎده از ﭘﻨﺠﺮه ‪131 ..................................... Watch‬‬
‫اﺳﺘﻔﺎده از ﭘﻨﺠﺮه ‪133 ................................... Command‬‬

‫ﻓﺼﻞ ﺷﺸﻢ‪ :‬ﺑﺮﻧﺎﻣﻪ ‪135 ..................................................................................................... ChatRoom‬‬

‫ﺟﺪاول ﻣﻮﺟﻮد در ﺑﺮﻧﺎﻣﻪ ‪135.................................................................................................................. ChatRoom‬‬
‫ﭼﮕﻮﻧﮕﻲ ﭘﻴﺎده ﺳﺎزي ‪137........................................................................................................................ChatRoom‬‬
‫ﻓﺼﻞ ﻫﻔﺘﻢ‪ :‬ﺑﺮﻧﺎﻣﻪ ‪155................................................................................................... BookStore‬‬
‫ﭘﻴﻮﺳﺖ‪ :‬ﻃﺮﻳﻘﻪ ﻛﺎر ﺑﺎ ﻧﺮم اﻓﺰار ‪191 ..................................................................................... EsayPHP‬‬
‫ﻓﺼﻞ ‪1  1‬‬ ‫ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪Ajax‬‬

‫ﻓﺼﻞ اول‪ :‬ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪Ajax‬‬

‫زﻣﺎﻧﻴﻜﻪ ﻧﺮم اﻓﺰارﻫﺎي ﺗﺤﺖ وب )‪ (Web Applications‬ﺑﻪ دﻧﻴﺎي ﻧﺮم اﻓﺰار وارد ﺷﺪﻧﺪ‪ ،‬ﻣﻮﺟﺐ ﻧﮕﺮﺷﻲ‬
‫ﺟﺪﻳﺪ در ﺗﻮﻟﻴﺪ ﻧﺮم اﻓﺰار ﺷﺪ‪ .‬وﻳﮋﮔﻲ ﻫﺎي ﻛﻪ ﻣﻮﺟﺐ اﻳﺠﺎد اﻳﻦ روﻳﻜﺮد ﺟﺪﻳﺪ ﺷﺪ ﻋﺒﺎرﺗﻨﺪ از‪:‬‬
‫‪ -‬ﻧﺮم اﻓﺰارﻫﺎي ﺗﺤﺖ وب ﺑﺮاي اﺟﺮا ﻧﻴﺎز ﺑﻪ ﺳﻴﺴﺘﻢ ﻋﺎﻣﻞ ﺧﺎﺻﻲ ﻧﺪارﻧﺪ‪.‬‬
‫ﺗﺎ آن روز اﺟﺮاي ﻳﻚ ﺑﺮﻧﺎﻣﻪ ﺑﺮ روي ﺳﻴﺴﺘﻢ ﻋﺎﻣﻞ ﻫﺎي ﻣﺘﻔﺎوت ﻣﺴﺎﻟﻪ ﺑﺰرﮔﻲ ﺑﻮد وﻟﻲ ﻧﺮم اﻓﺰارﻫﺎي ﺗﺤﺖ وب‬
‫اﻳﻦ ﻣﺸﻜﻞ را ﻧﺪاﺷﺘﻨﺪ‪.‬‬
‫‪ -‬ﻧﻴﺎز ﺑﻪ ﻧﺼﺐ ﺑﺮﻧﺎﻣﻪ ﻫﺎي دﻳﮕﺮي ﺑﺮاي اﺟﺮا ﻧﺪارﻧﺪ‪ ،‬ﺗﻨﻬﺎ ﺑﺎ ﻳﻚ ﻣﺮورﮔﺮ ﺻﻔﺤﺎت وب ﻣﻲ ﺗﻮان از ﻧﺮم اﻓﺰار‪ ،‬ﺑﺮ‬
‫روي ﻫﺮ ﺳﻴﺴﺘﻤﻲ اﺳﺘﻔﺎده ﻛﺮد‪.‬‬
‫‪ -‬ﻧﻴﺎز ﺑﻪ اﻣﻜﺎﻧﺎت ﺧﺎص ﺳﺨﺖ اﻓﺰاري ﻧﺪارﻧﺪ و ﻓﻀﺎﻳﻲ از ﺳﻴﺴﺘﻢ ﻛﺎرﺑﺮان را ﻧﻴﺰ اﺷﻐﺎل ﻧﻤﻲ ﻛﻨﻨﺪ‪.‬‬
‫‪ -‬ﺑﺮاﺣﺘﻲ ﺑﺮ روي اﻧﻮاع ﺷﺒﻜﻪ ﻫﺎي ﻣﺤﻠﻲ و ﺷﺒﻜﻪ اﻳﻨﺘﺮﻧﺖ ﻗﺎﺑﻞ اﺟﺮا ﻫﺴﺘﻨﺪ‪.‬‬
‫اﻣﺎ ﺑﺎ اﻳﻦ وﺟﻮد ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب)‪(Web Applications‬ﻧﺘﻮاﻧﺴﺘﻨﺪ اﻳﻦ ﺟﺎﻳﮕﺎه را اﺳﺘﺤﻜﺎم ﺑﺨﺸﻨﺪ‪ ،‬اﻣﺎ ﭼﺮا‬
‫‪ ...‬؟‬
‫ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ اﻳﻨﻜﻪ ﻣﺎﻫﻴﺖ اﻳﻨﺘﺮﻧﺖ ﺑﺼﻮرت ‪ synchronous request / response‬ﻣﻲ ﺑﺎﺷﺪ‬
‫ﻣﺤﺘﻮاي ﺻﻔﺤﺎت وب داﺋﻤﺎ در ﺣﺎل ﺗﻐﻴﻴﺮ )‪ (refresh‬ﻣﻲ ﺑﺎﺷﺪ‪ ،‬در واﻗﻊ ﻣﺤﻴﻂ ﻛﺎر ﻛﺎرﺑﺮ در ﺣﺎل ﺗﻐﻴﻴﺮ‬
‫اﺳﺖ در ﻧﺘﻴﺠﻪ ﻛﺎرﺑﺮان ﺗﻤﺎﻳﻠﻲ ﺑﻪ اﻳﻦ ﮔﻮﻧﻪ از ﻧﺮم اﻓﺰارﻫﺎ ﻧﺪارﻧﺪ‪.‬‬
‫ﻣﻌﻤﻮﻻ ﻛﺎرﺑﺮان ﻧﺮم اﻓﺰارﻫﺎ‪ ،‬ﻋﻼﻗﻪ ي ﻧﺪارﻧﺪ ﻛﻪ ﺑﺎ ﻛﻠﻴﻚ ﻛﺮدن ﻳﻚ دﻛﻤﻪ زﻣﺎن اﻧﺘﻈﺎرﺷﺎن ﺑﺮاي اﻧﺠﺎم ﻋﻤﻠﻴﺎﺗﻲ‬
‫زﻳﺎد ﺑﺎﺷﺪ‪ .‬اﻳﻦ ﻣﺴﺎﻟﻪ در ﻧﺮم اﻓﺰارﻫﺎي ﺗﺤﺖ وب ﻧﻤﻮد ﺑﻴﺸﺘﺮي دارد‪ .‬زﻣﺎﻧﻴﻜﻪ از ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﺪ‬
‫اﺣﺘﻤﺎﻻ اﻳﻦ ﻣﺴﺎﻟﻪ ﺑﺮاي ﺷﻤﺎ ﺧﺴﺘﻪ ﻛﻨﻨﺪه اﺳﺖ ﻛﻪ ﺑﺎ ﻫﺮ ﻛﻠﻴﻚ در ﺻﻔﺤﻪ ﺷﻤﺎ ﺑﺎﻳﺪ ﻣﻨﺘﻈﺮ ﻧﻤﺎﻳﺶ ﺻﻔﺤﻪ ي دﻳﮕﺮ‬
‫ﻳﺎ ﻧﻤﺎﻳﺶ ﻣﺠﺪد ﻫﻤﺎن ﺻﻔﺤﻪ ﺑﺎ ﺗﻐﻴﻴﺮاﺗﻲ ﺷﻮﻳﺪ‪ .‬اﻳﻦ ﻣﺴﺎﻟﻪ ﻣﻬﻤﺘﺮﻳﻦ ﻣﻮﺿﻮﻋﻲ ﺑﻮد ﻛﻪ ﻣﻮﺟﺐ ﻛﻢ ﻓﺮوﻏﻲ ‪Web‬‬
‫ﻣﻲ ﺷﺪ‪ .‬از آن زﻣﺎن ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺗﺤﺖ وب‬ ‫‪ Application‬در ﺑﺮاﺑﺮ ‪Desktop Application‬‬
‫ﻣﻌﺮوف ﺑﻪ ‪ word wide wait‬ﺷﺪﻧﺪ‪.‬‬
‫راه ﺣﻞ‬
‫ﻳﻚ راه ﺣﻞ ﺳﺎده ﺑﺮاي اﻳﻦ ﻣﺴﺎﻟﻪ اﻳﻦ اﺳﺖ ﻛﻪ اﻓﺮاد در ﻳﻚ ﺻﻔﺤﻪ ﺑﺎﺷﻨﺪ و ﺑﺘﻮاﻧﻨﺪ ﻋﻤﻠﻴﺎت ﻣﻮرد ﻧﻈﺮ ﺧﻮد را در‬
‫ﻫﻤﺎن ﺻﻔﺤﻪ اﻧﺠﺎم دﻫﻨﺪ‪ .‬ﺑﻄﻮر ﻣﺜﺎل در ﻳﻚ وب ﺳﺎﻳﺖ ﺧﺮﻳﺪ ﺑﺘﻮان ﺑﺎ ﻛﻠﻴﻚ ﻛﺮدن ﺑﺮ روي ﻫﺮ ﻳﻚ از ﻛﺎﻻﻫﺎي‬
‫ﻣﻮرد ﻧﻈﺮ آن را ﺑﻪ ﺳﺒﺪ ﺧﺮﻳﺪ ﺧﻮد اﺿﺎﻓﻪ ﻛﺮد‪ ،‬ﺑﺪون اﻳﻨﻜﻪ ﻧﻴﺎز ﺑﻪ ‪ refresh‬ﺷﺪن ﺻﻔﺤﻪ ﺑﺎﺷﺪ‪.‬‬
‫اﻳﻦ اﻳﺪه ﻫﻤﺎن ﭼﻴﺰي اﺳﺖ ﻛﻪ ﺑﻌﻨﻮان ‪ Ajax‬ﺷﻨﺎﺧﺘﻪ ﺷﺪه اﺳﺖ‪.‬‬
‫‪ Ajax‬ﺗﻜﻨﻮﻟﻮژي اﺳﺖ ﻛﻪ اﻳﻦ اﻣﻜﺎن را ﻓﺮاﻫﻢ ﻣﻲ آورد ﻛﻪ ‪ Web Application‬ﻣﺎﻧﻨﺪ ‪Desktop‬‬
‫‪ Application‬ﻋﻤﻞ ﻛﻨﺪ‪ .‬ﻫﻤﺎن ﻃﻮر ﻛﻪ ﮔﻔﺘﻪ ﺷﺪ‪ ،‬اﻳﻨﻜﻪ ﻛﺎرﺑﺮ‪ ،‬ﺑﺎر ﺷﺪن )‪ (load‬ﺻﻔﺤﻪ ﺟﺪﻳﺪ را در‬
 ‫ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪Ajax‬‬ ‫‪  2‬ﻓﺼﻞ ‪1‬‬

‫ﻣﺮورﮔﺮ ﺧﻮد ﻣﻲ ﺑﻴﻨﺪ ﻣﺸﻜﻞ ﺑﺰرﮔﻲ در ﺻﻔﺤﺎت وب اﺳﺖ‪ Ajax ،‬ﺗﻮاﻧﺎﻳﻲ درﻳﺎﻓﺖ اﻃﻼﻋﺎت از ﺳﻤﺖ ﺳﺮور‬
‫را ﺑﺪون ﻧﻴﺎز ﺑﻪ ﺑﺎر ﺷﺪن ﻣﺠﺪد )‪ (reload‬ﺻﻔﺤﻪ ﻳﺎ ﺑﺎرﺷﺪن ﺻﻔﺤﻪ ﺟﺪﻳﺪ را داراﺳﺖ‪.‬‬
‫ﺑﺎ ‪ Ajax‬ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺗﺤﺖ وب ﺑﺮاي ﻛﺎرﺑﺮان ﻣﺎﻧﻨﺪ ﻧﺮم اﻓﺰارﻫﺎي دﻳﮕﺮ ﻣﻲ ﺑﺎﺷﻨﺪ‪ Ajax .‬اﻳﻦ ﺗﻮاﻧﺎﻳﻲ را ﺑﻪ‬
‫ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب ﻣﻲ دﻫﺪ ﻛﻪ ﻋﻤﻠﻴﺎت ارﺳﺎل اﻃﻼﻋﺎت و درﻳﺎﻓﺖ ﻧﺘﺎﻳﺞ را در ﭘﺸﺖ ﺻﺤﻨﻪ اﻧﺠﺎم دﻫﺪ‪ ،‬اﻃﻼﻋﺎﺗﻲ ﻛﻪ‬
‫ﻧﻴﺎز دارد را از ﺳﻤﺖ ﺳﺮور درﻳﺎﻓﺖ و اﻃﻼﻋﺎت ﻣﺪ ﻧﻈﺮ را ﻧﻤﺎﻳﺶ دﻫﺪ‪.‬‬
‫ﺑﺮاي درك ﺑﻬﺘﺮي از ﭼﮕﻮﻧﮕﻲ ﻛﺎرﻛﺮد ‪ ،Ajax‬آن را از دو دﻳﺪﮔﺎه ﺑﺮرﺳﻲ ﻣﻲ ﻛﻨﻴﻢ‪:‬‬
‫‪ . 1‬دﻳﺪﮔﺎه ﻛﺎرﺑﺮان‬
‫‪ .2‬دﻳﺪﮔﺎه ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﺎن‬
‫دﻳﺪﮔﺎه ﻛﺎرﺑﺮان‬
‫ﺑﺮاي اﻳﻨﻜﻪ ﺑﻬﺘﺮ ﺑﺪاﻧﻴﺪ ﭼﮕﻮﻧﻪ ‪ Ajax‬ﻣﻮﺟﺐ ﻣﻲ ﺷﻮد ﻳﻚ ‪ Web Application‬ﻣﺎﻧﻨﺪ ﻳﻚ ‪Desktop‬‬
‫‪ Application‬ﻋﻤﻞ ﻛﻨﺪ‪ ،‬اﻳﻦ ﻗﺴﻤﺖ را ﺑﺎ ﻳﻚ ﻣﺜﺎل ﺗﻮﺿﻴﺢ ﻣﻲ دﻫﻴﻢ‪.‬‬
‫ﻳﻚ وب ﺳﺎﻳﺖ ﺟﺴﺘﺠﻮ را در ﻧﻈﺮ ﺑﮕﻴﺮﻳﺪ‪ .‬اﻳﻦ وب ﺳﺎﻳﺖ داراي ﻳﻚ ‪ textbox‬ﺑﺮاي ﺗﺎﻳﭗ ﻛﺮدن ﻋﺒﺎرت‬
‫ﻣﻮرد ﻧﻈﺮ ﻛﺎرﺑﺮ و ﻳﻚ دﻛﻤﻪ ﺑﺮاي آﻏﺎز ﻋﻤﻠﻴﺎت ﺟﺴﺘﺠﻮ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﻛﺎرﺑﺮ ﻳﻚ ﻋﺒﺎرﺗﻲ را ﻧﻮﺷﺘﻪ و‬
‫دﻛﻤﻪ ﺟﺴﺘﺠﻮ را ﻛﻠﻴﻚ ﻣﻲ ﻛﻨﺪ ﺻﻔﺤﻪ ﺑﺮاي ﻧﻤﺎﻳﺶ ﻧﺘﺎﻳﺞ ﺟﺴﺘﺠﻮ ‪ reload‬ﻣﻲ ﺷﻮد‪ ،‬اﻳﻦ در ﺣﺎﻟﻲ اﺳﺖ ﻛﻪ‬
‫در ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪ Desktop Applications‬ﻧﺘﺎﻳﺞ ﺟﺴﺘﺠﻮ در ﻫﻤﺎن ﻓﺮم ﺟﺴﺘﺠﻮ‪ ،‬ﺑﺪون ﺗﻐﻴﻴﺮ ﻓﺮم و ﺑﺎ‬
‫ﻛﻠﻴﻚ دﻛﻤﻪ ﺟﺴﺘﺠﻮ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬
‫ﺣﺎل ﺑﺎ ﺗﻜﻨﻮﻟﻮژي ‪ Ajax‬ﻣﻲ ﺗﻮان ﺻﻔﺤﻪ ﺟﺴﺘﺠﻮي وب ﺳﺎﻳﺖ را ﺑﻪ ﮔﻮﻧﻪ اي ﻃﺮاﺣﻲ ﻛﺮد ﺗﺎ ﻫﻨﮕﺎﻣﻲ ﻛﻪ‬
‫ﻋﺒﺎرت ﻣﻮرد ﻧﻈﺮ ﻧﻮﺷﺘﻪ و دﻛﻤﻪ ﺟﺴﺘﺠﻮ ﻛﻠﻴﻚ ﺷﻮد ﻧﺘﺎﻳﺞ ﺟﺴﺘﺠﻮ در ﻫﻤﺎن ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ داده ﺷﻮد‪) .‬ﻣﺎﻧﻨﺪ ﻳﻚ‬
‫ﻓﺮم ﺟﺴﺘﺠﻮ در ‪( Desktop Application‬‬
‫ﺑﺮاي ﻧﻤﻮﻧﻪ ﻣﻲ ﺗﻮان وب ﺳﺎﻳﺖ ﺟﺴﺘﺠﻮي ‪ http://www.A9.com‬را ﻣﺜﺎل زد‪.‬‬
‫اﻳﻦ ﺳﺎﻳﺖ ﺟﺴﺘﺠﻮ ﻣﺘﻌﻠﻖ ﺑﻪ ﺳﺎﻳﺖ ‪ Amazon.com‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬از وﻳﮋﮔﻲ ﻫﺎي اﻳﻦ ﺳﺎﻳﺖ ﻣﻲ ﺗﻮان‪ ،‬ﺟﺴﺘﺠﻮ ﺑﺎ‬
‫ﺗﻜﻨﻮﻟﻮژي ‪ Ajax‬و ﻗﺎﺑﻠﻴﺖ ﺟﺴﺘﺠﻮي ﻫﻤﺰﻣﺎن زﻣﻴﻨﻪ ﻫﺎي ﻣﺨﺘﻠﻒ‪ ،‬را ﻧﺎم ﺑﺮد‪.‬‬
‫ﻓﺼﻞ ‪3  1‬‬ ‫ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪Ajax‬‬

‫ﺷﻜﻞ ‪ 1-1‬وب ﺳﺎﻳﺖ ‪www.a9.com‬‬

‫دﻳﺪﮔﺎه ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﺎن‬

‫در ﻣﻘﺎﻟﻪ ي ﻛﻪ ﺑﺎ ﻣﻮﺿﻮع ‪Ajax :A New Approch to Web Applications‬‬
‫ﻛﻪ در آدرس زﻳﺮ ﻣﻮﺟﻮد ﻣﻲ ﺑﺎﺷﺪ‬
‫‪www.adaptivepath.com/publications/essays/archives/000385.php‬‬
‫از ‪ ،jesse james garrett‬ﻛﺴﻲ ﻛﻪ اوﻟﻴﻦ ﺑﺎر ‪ Ajax‬را ﻣﻌﺮﻓﻲ ﻛﺮد‪ ،‬آﻣﺪه اﺳﺖ‪:‬‬
‫" ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﺎن ﺻﻔﺤﺎت وب ﻓﻜﺮ ﻣﻲ ﻛﻨﻨﺪ ﺑﺴﻴﺎري از ﻗﺎﺑﻠﻴﺖ ﻫﺎي ‪ Desktop Application‬در‬
‫دﺳﺘﺮس آن ﻫﺎ ﻧﻴﺴﺖ و ﺑﻴﻦ آن ﻫﺎ ﻓﺎﺻﻠﻪ زﻳﺎدي اﺳﺖ‪ ،‬وﻟﻲ ‪ Ajax‬اﻳﻦ ﻓﺎﺻﻠﻪ را ﻛﻤﺘﺮ ﻣﻲ ﻛﻨﺪ‪".‬‬
‫‪ Ajax‬از ‪ Asynchronous JavaScript And Xml‬ﮔﺮﻓﺘﻪ ﺷﺪه اﺳﺖ و ﺗﻜﻨﻮﻟﻮژي اﺳﺖ ﻛﻪ از‬
‫ﻗﺴﻤﺖ ﻫﺎي زﻳﺮ ﺗﺸﻜﻴﻞ ﺷﺪه اﺳﺖ‪:‬‬
‫‪ -‬ﻧﻤﺎﻳﺶ اﻃﻼﻋﺎت در ﻣﺮورﮔﺮﻫﺎ در ﻗﺎﻟﺐ ‪ HTML‬و ‪.CSS‬‬
‫‪ -‬ذﺧﻴﺮه ﺳﺎزي اﻃﻼﻋﺎت در ﻗﺎﻟﺐ ‪ Text‬ﻳﺎ ‪ XML‬ﻛﻪ از ﺳﻤﺖ ﺳﺮور درﻳﺎﻓﺖ ﺷﺪه اﺳﺖ‪.‬‬
‫‪ -‬اﺳﺘﻔﺎده از داده ﻫﺎي درﻳﺎﻓﺖ ﺷﺪه از ﺳﻤﺖ ﺳﺮور در ﭘﺸﺖ ﺻﺤﻨﻪ ﺑﺎ اﺳﺘﻔﺎده از ﺷﻲ ‪XMLHttpRequest‬‬
‫در ﻣﺮورﮔﺮﻫﺎ )اﻳﻦ ﺷﻲ ﻗﺎﺑﻠﻴﺖ اﺗﺼﺎل ﺑﻪ ﺳﺮور را از ﻃﺮﻳﻖ ﭘﺮوﺗﻜﻞ ‪ HTTP‬داراﺳﺖ(‪.‬‬
‫‪JavaScript -‬‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺨﺶ اﺻﻠﻲ ‪ Ajax‬اﺳﺖ وﻟﻲ ‪ Ajax‬ﻣﺨﺘﺺ ﺑﻪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻧﻴﺴﺖ‪ .‬اﺧﻴﺮا ‪framework‬‬
‫ﻫﺎي ﺟﺪﻳﺪي ﺑﺮاي ‪ Ajax‬اراﺋﻪ ﺷﺪه اﺳﺖ ﻳﻜﻲ از آن ﻫﺎ ‪ Atlas‬و ﻧﺴﺨﻪ ﺟﺪﻳﺪﺗﺮ آن ‪Asp.Net Ajax‬‬
‫اﺳﺖ ﻛﻪ در ‪ .Net‬ﻛﺎرﺑﺮد دارد‪.‬‬
‫‪(DOM) document Object Model -‬‬
 ‫ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪Ajax‬‬ ‫‪  4‬ﻓﺼﻞ ‪1‬‬

‫‪ DOM‬ﻳﻚ ﻣﺪل ﻛﻪ ﻧﺸﺎن دﻫﻨﺪه اﻳﻦ اﺳﺖ ﻛﻪ ﻳﻚ ﺻﻔﺤﻪ وب ﻣﺎﻧﻨﺪ ﻳﻚ ﻣﺠﻤﻮﻋﻪ از اﺷﻴﺎ ﺑﻪ ﻫﻢ ﻣﺮﺗﺒﻂ ﻣﻲ ﺑﺎﺷﺪ‬
‫ﻛﻪ اﻳﻦ اﺷﻴﺎ ﺑﻄﻮر ﭘﻮﻳﺎ ﻗﺎﺑﻞ ﺗﻐﻴﻴﺮ ﻣﻲ ﺑﺎﺷﻨﺪ ﺣﺘﻲ اﮔﺮ آن ﺻﻔﺤﻪ ﺗﻮﺳﻂ ﻛﺎرﺑﺮ داﻧﻠﻮد ﺷﺪه ﺑﺎﺷﺪ‪.‬‬

‫ﺷﻜﻞ‪ 1-2‬ﺑﺨﺶ ﻫﺎي ﺗﺸﻜﻴﻞ دﻫﻨﺪه ‪Ajax‬‬

‫ﺑﺮﻋﻜﺲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب)‪ (Web Application‬ﻣﻌﻤﻮل‪ ،‬ﻛﻪ ﺧﻮد ﺑﺮﻧﺎﻣﻪ ﻫﺎ وﻇﻴﻔﻪ ي ارﺳﺎل درﺧﻮاﺳﺖ و‬
‫ﭘﺮدازش ﻧﺘﺎﻳﺞ درﺧﻮاﺳﺖ از وب ﺳﺮور را ﺑﺮ ﻋﻬﺪه دارﻧﺪ در ‪ Ajax‬ﻳﻚ ﻻﻳﻪ ي اﻳﻦ ﻋﻤﻠﻴﺎت را اﻧﺠﺎم ﻣﻲ دﻫﺪ‬
‫ﻛﻪ ﺑﻪ آن ﻣﻮﺗﻮر ‪ Ajax‬ﻣﻲ ﮔﻮﻳﻨﺪ‪ .‬ﻣﻮﺗﻮر ‪ Ajax‬ﺑﻄﻮر ﻛﻠﻲ ﻳﻚ ﺗﺎﺑﻌﻲ از ﺟﺎوااﺳﻜﺮﻳﭙﺖ اﺳﺖ ﻛﻪ زﻣﺎﻧﻴﻜﻪ‬
‫ﺑﺨﻮاﻫﻴﻢ داده ﻫﺎ را از ﺳﻤﺖ ﺳﺮور درﻳﺎﻓﺖ ﻛﻨﻴﻢ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‪ .‬ﺑﺮﻋﻜﺲ ﺻﻔﺤﺎت ﻣﻌﻤﻮل وب ﻛﻪ ﻫﺮ ﻟﻴﻨﻚ‬
‫ﻳﺎ دﻛﻤﻪ ﻳﻚ ﺻﻔﺤﻪ ﺟﺪﻳﺪ را ﻧﻤﺎﻳﺶ ﻣﻲ داد در اﻳﻨﺠﺎ ﻫﺮ ﻟﻴﻨﻚ ﻳﺎ دﻛﻤﻪ ﻓﺮاﺧﻮاﻧﻲ ﻛﻨﻨﺪه ﻣﻮﺗﻮر‪ Ajax‬ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫وﻗﺘﻲ ﻛﻪ ﻣﻮﺗﻮر ‪ Ajax‬ﭘﺎﺳﺨﻲ را از ﺳﺮور درﻳﺎﻓﺖ ﻣﻲ ﻛﻨﺪ وارد ﻋﻤﻞ ﻣﻲ ﺷﻮد و ﺑﺎ اﺳﺘﻔﺎده از داده ﻫﺎي‬
‫ﺑﺎزﮔﺸﺘﻲ‪ ،‬ﻣﺤﻴﻂ و ﺻﻔﺤﻪ اﺟﺮا ﺷﺪه را ﺗﻐﻴﻴﺮ ﻣﻲ دﻫﺪ‪ .‬ﺷﻜﻞ ‪ 1-3‬ﻧﻤﺎي از ﻋﻤﻠﻜﺮد ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﻣﻌﻤﻮل وب و‬
‫ﺷﻜﻞ ‪ 1-4‬ﻧﻤﺎي از ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪ Ajax‬ﻣﻲ ﺑﺎﺷﺪ ﺷﻤﺎ ﺑﺎ ﻣﺸﺎﻫﺪه اﻳﻦ ﺷﻜﻞ ﻫﺎ ﺑﻪ ﺗﻔﺎوت ﺑﻴﻦ ﻋﻤﻠﻜﺮد اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﻫﺎ‬
‫ﭘﻲ ﻣﻲ ﺑﺮﻳﺪ‪.‬‬

‫ﺷﻜﻞ ‪ 1-3‬ﻧﻤﺎي از ﻋﻤﻠﻜﺮد ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﻣﻌﻤﻮل وب‬

‫ﻓﺼﻞ ‪5  1‬‬ ‫ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪Ajax‬‬

‫ﻫﻤﺎن ﻃﻮر ﻛﻪ در ﺷﻜﻞ ‪ 1-3‬ﻣﺸﺎﻫﺪه ﻣﻲ ﻧﻤﺎﻳﺪ ﻫﺮ زﻣﺎن ﻛﻪ درﺧﻮاﺳﺘﻲ از ﺳﻤﺖ ﻛﺎرﺑﺮ ﺻﻮرت ﭘﺬﻳﺮد اﻃﻼﻋﺎت‬
‫درﺧﻮاﺳﺖ‪ ،‬ﺑﺼﻮرت ﻣﺴﻘﻴﻢ ﺑﻪ ﺳﻤﺖ ﺳﺮور ارﺳﺎل و در آن ﺟﺎ ﺑﻌﺪ از ﭘﺮدازش و درﺻﻮرت ﻧﻴﺎز‪ ،‬ارﺗﺒﺎط ﺑﺎ ﺑﺎﻧﻚ‬
‫اﻃﻼﻋﺎﺗﻲ در ﻗﺎﻟﺐ ﻫﺎي ‪ Html/CSS/Image/JavaScript‬ﺑﻪ ﺳﻤﺖ ﻛﻼﻳﻨﺖ ارﺳﺎل ﻣﻲ ﺷﻮد‪.‬‬

‫ﻧﻤﺎي از ﻋﻤﻠﻜﺮد ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫ﺷﻜﻞ ‪1-4‬‬

‫ﻫﻤﺎن ﻃﻮر ﻛﻪ در ﺷﻜﻞ ﺷﻤﺎره ‪ 1-4‬ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ‪ ،‬ﺑﺎ اﻳﺠﺎد ﻳﻚ روﻳﺪاد در ﻣﺤﻴﻂ ﻛﺎرﺑﺮ )ﻣﻲ ﺗﻮاﻧﺪ ﺗﻮﺳﻂ‬
‫ﻛﺎرﺑﺮ ﻳﺎ زﻣﺎن ﺳﻴﺴﺘﻢ اﻳﺠﺎد ﺷﻮد( ﻳﻚ ﺗﺎﺑﻊ از ﻛﺪﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‪ ،‬ﻛﻪ در واﻗﻊ ﻓﺮاﺧﻮان‬
‫ﻣﻮﺗﻮر ‪ Ajax‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻣﻮﺗﻮر ‪ Ajax‬درﺧﻮاﺳﺖ را ﺑﻪ ﺳﻤﺖ ﺳﺮور ارﺳﺎل ﻣﻲ ﻛﻨﺪ‪ .‬در ﺳﻤﺖ ﺳﺮور ﺑﺮاﺳﺎس‬
‫درﺧﻮاﺳﺖ درﻳﺎﻓﺖ ﺷﺪه داده ﻫﺎ از ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ ﻣﻮﺟﻮد در ﺳﺮور ﺑﺎزﻳﺎﺑﻲ ﻣﻲ ﺷﻮﻧﺪ و ﺑﻪ ﻧﺮم اﻓﺰار ﺳﺮوﻳﺲ‬
‫دﻫﻨﺪه وب در ﺳﺮور ﺗﺤﻮﻳﻞ داده ﻣﻲ ﺷﻮد اﻳﻦ ﻧﺮم اﻓﺰار اﻳﻦ داده ﻫﺎ را در ﻗﺎﻟﺐ ﻫﺎي ‪Html /CSS‬‬
‫‪ /Image/JavaScript‬ﮔﻨﺠﺎﻧﺪه و ﺑﺮاي ﻛﻼﻳﻨﺖ ارﺳﺎل ﻣﻲ ﻛﻨﺪ‪.‬‬

‫ﻧﮕﺎﻫﻲ ﻛﻠﻲ ﺑﻪ ﻣﺮاﺣﻞ اﺳﺘﻔﺎده از ‪ Ajax‬در ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺗﺤﺖ وب‬

‫‪ -‬ﻧﻮﺷﺘﻦ ﻛﺪ ‪ javascript‬ﺑﺮاي درﻳﺎﻓﺖ داده ﻫﺎي ﻣﻮرد ﻧﻴﺎز از ﺳﻤﺖ ﺳﺮور‪.‬‬
‫‪ -‬اﺳﺘﻔﺎده از ﻳﻚ ﺷﻲ ﺑﻪ ﻧﺎم ‪ XMLHttpRequest‬ﺑﺮاي ارﺳﺎل درﺧﻮاﺳﺖ ﺑﻪ ﺳﻤﺖ ﺳﺮور ﻛﻪ از ﻃﺮﻳﻖ ﻛﺪ‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ اﻧﺠﺎم ﻣﻲ ﮔﻴﺮد‪ .‬ﺟﺎوااﺳﻜﺮﻳﭙﺖ داراي وﻳﮋﮔﻲ اﺳﺖ ﻛﻪ اﺟﺮاي ﻋﻤﻠﻴﺎت را در ﻣﺮورﮔﺮ ﺑﺮاي رﺳﻴﺪن‬
‫داده ﻫﺎ از ﺳﻤﺖ ﺳﺮور‪ ،‬ﺑﻪ ﺗﻌﻮﻳﻖ ﻧﻤﻲ اﻧﺪازد و در ﭘﺸﺖ ﺻﺤﻨﻪ ي اﺟﺮا ﻣﻨﺘﻈﺮ ﭘﺎﺳﺦ از ﺳﺮور ﻣﻲ ﻣﺎﻧﺪ‪ .‬ﺑﻪ اﻳﻦ‬
‫وﻳﮋﮔﻲ ‪ asynchronous data retrieval‬ﻣﻲ ﮔﻮﻳﻨﺪ‪.‬‬
‫‪ -‬داده ﻫﺎي درﻳﺎﻓﺖ ﺷﺪه از ﺳﻤﺖ ﺳﺮور در ﻗﺎﻟﺐ ‪ XML‬ذﺧﻴﺮه ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
‫ﻛﺪ ﻫﺎي ‪ javascript‬در ﻣﺮورﮔﺮﻫﺎ ﻗﺎﺑﻠﻴﺖ ﺧﻮاﻧﺪن و ﻧﻮﺷﺘﻦ داده ﻫﺎ در اﻳﻦ ﻗﺎﻟﺐ را ﺑﺴﺮﻋﺖ دارﻧﺪ‪.‬‬
‫ﺑﻄﻮر ﻛﻠﻲ ‪ Ajax‬از ﺟﺎوااﺳﻜﺮﻳﭙﺖ و ﺷﻲ ‪ XMLHttpRequest‬ﺑﺮاي ارﺗﺒﺎط ﺑﺎ ﺳﺮور ﺑﺪون ‪Refresh‬‬
‫ﺷﺪن ﺻﻔﺤﻪ و از ﻗﺎﻟﺐ ‪ XML‬ﺑﺮاي ﻣﺪﻳﺮﻳﺖ داده ﻫﺎي درﻳﺎﻓﺘﻲ از ﺳﻤﺖ ﺳﺮور اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﺪ‪.‬‬
‫در ﻓﺼﻞ ﻫﺎي آﺗﻲ ﺑﻪ ﭼﮕﻮﻧﮕﻲ ﻛﺎرﻛﺮد اﻳﻦ ﻗﺴﻤﺖ ﻫﺎ ﺑﺎ ﻳﻜﺪﻳﮕﺮ ﺑﻴﺸﺘﺮ ﻣﻲ ﭘﺮدازﻳﻢ‪.‬‬
‫اﺣﺘﻤﺎﻻ از ﻣﻄﺎﻟﺐ ﺑﺎﻻ ﻧﻜﺎﺗﻲ ﻣﻔﻴﺪي در ﻣﻮرد ‪ Ajax‬ﻓﺮاﮔﺮﻓﺘﻴﺪ اﻛﻨﻮن ﺑﺮاي اﻳﻨﻜﻪ درك ﺑﻬﺘﺮي از ﺗﻔﺎوت ﺑﺮﻧﺎﻣﻪ‬
‫ﻫﺎي ‪ Ajax‬ﺑﺎ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﻣﻌﻤﻮل وب داﺷﺘﻪ ﺑﺎﺷﻴﺪ ﺑﻪ ﺷﻜﻞ ﻫﺎي ‪ 1-5‬و ‪ 1-6‬دﻗﺖ ﻓﺮﻣﺎﻳﻴﺪ‪.‬‬
 ‫ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪Ajax‬‬ ‫‪  6‬ﻓﺼﻞ ‪1‬‬

‫ﻫﻤﺎن ﻃﻮر ﻛﻪ در ﺷﻜﻞ ‪ 1-5‬ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ در ﻫﻨﮕﺎم اﺗﺼﺎل ﺑﻪ ﺳﺮور در ﺳﻤﺖ ﺳﺮور ﻳﻚ ‪ session‬ﺑﺮاي‬
‫ﻛﺎرﺑﺮ اﻳﺠﺎد ﺷﺪه و ﺗﺎ زﻣﺎن ﻗﻄﻊ ارﺗﺒﺎط ﻣﻮﺟﻮد ﻣﻲ ﺑﺎﺷﺪ‪ .‬زﻣﺎﻧﻴﻜﻪ ﻛﺎرﺑﺮ درﺧﻮاﺳﺖ ﺟﺪﻳﺪي را ﺑﻪ ﺳﻤﺖ ﺳﺮور‬
‫ارﺳﺎل ﻣﻲ ﻛﻨﺪ ﻳﻚ وﻗﻔﻪ ي در ﻛﺎر ﻛﺎرﺑﺮ رخ ﻣﻲ دﻫﺪ و ﻛﺎرﺑﺮ ﺑﺎﻳﺪ ﻣﻨﺘﻈﺮ ﺑﻤﺎﻧﺪ ﺗﺎ ﺻﻔﺤﻪ دﻳﮕﺮ از ﺳﻤﺖ ﺳﺮور‬
‫ارﺳﺎل ﺷﻮد‪.‬‬
‫در ﺷﻜﻞ ‪ ،1-6‬ﻫﺮ زﻣﺎن ﻛﺎرﺑﺮ درﺧﻮاﺳﺘﻲ را ﺑﻪ ﺳﻤﺖ ﺳﺮور ارﺳﺎل ﻣﻲ ﻛﻨﺪ‪ ،‬در ﺑﺮﻧﺎﻣﻪ اﺟﺮا ﺷﺪه ﻫﻴﭻ ﺧﻠﻠﻲ اﻳﺠﺎد‬
‫ﻧﻤﻲ ﺷﻮد وﻛﺎرﺑﺮ ﻣﻲ ﺗﻮاﻧﺪ ﻫﻤﺰﻣﺎن از ﺑﺮﻧﺎﻣﻪ اﺟﺮا ﺷﺪه اﺳﺘﻔﺎده ﻧﻤﺎﻳﺪ‪.‬‬
‫ﺑﺨﺶ ﻫﺎي از ‪ Ajax‬ﻛﻪ ﻣﻄﺮح ﺷﺪ‪ ،‬ﻗﺴﻤﺖ ﻫﺎي ﻫﺴﺘﻨﺪ ﻛﻪ در ﺳﻤﺖ ﻛﻼﻳﻨﺖ ﻗﺮار دارﻧﺪ اﻣﺎ ﻳﻚ ﻗﺴﻤﺖ ﻣﻬﻢ‬
‫در ‪ Ajax‬وﺟﻮد دارد ﻛﻪ در ﺳﻤﺖ ﺳﺮور ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺑﺮاي ﺑﺎزﻳﺎﺑﻲ داده ﻫﺎ در ﺳﺮور ﻧﻴﺎز ﺑﻪ ﻛﺪﻫﺎي در ﺳﻤﺖ‬
‫ﺳﺮور ﻣﻲ ﺑﺎﺷﺪ ﻣﺎﻧﻨﺪ ‪ ASP ،PHP‬و ‪ ...‬اﻟﺒﺘﻪ اﻳﻦ ﺑﺨﺶ ﺑﺮاي ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﻣﻌﻤﻮل وب ﻧﻴﺰ ﻻزم اﺳﺖ‪.‬‬

‫ﺷﻜﻞ ‪ 1-5‬ﻧﻤﺎي از ﺗﻮاﻟﻲ ﻓﻌﺎﻟﻴﺖ ﻫﺎ در ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﻣﻌﻤﻮل وب‬

‫‪.‬‬

‫ﺷﻜﻞ ‪ 1-6‬ﻧﻤﺎي از ﺗﻮاﻟﻲ ﻓﻌﺎﻟﻴﺖ ﻫﺎ در ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫ﻓﺼﻞ ‪7  1‬‬ ‫ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪Ajax‬‬

‫ﭼﻪ ﻛﺎرﻫﺎي را ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺎ ‪ Ajax‬اﻧﺠﺎم دﻫﻴﺪ‬

‫ﺗﻜﻨﻮﻟﻮژي ‪ Ajax‬ﺗﻘﺮﻳﺒﺎ از ﺳﺎل ‪ 1998‬در ﻧﺮم اﻓﺰارﻫﺎي ﻣﺎﻧﻨﺪ ‪Microsoft Outlook Web Access‬‬
‫وﺟﻮد داﺷﺖ‪ ،‬اﻣﺎ اﻳﻦ ﺗﻜﻨﻮﻟﻮژي ﺑﻄﻮر ﻛﺎﻣﻞ ﺗﺎ ﺳﺎل ‪ 2005‬ﻛﻪ در ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﻧﻈﻴﺮ ‪ Google suggest‬و‬
‫‪ Google maps‬اﺳﺘﻔﺎده ﮔﺮدﻳﺪ‪ ،‬ﺷﻨﺎﺧﺘﻪ ﻧﺸﺪ‪.‬‬
‫از ﺟﻤﻠﻪ ﻣﻮاردي ﻛﻪ ﻣﻲ ﺗﻮان ﺑﺎ ﺗﻜﻨﻮﻟﻮژي ‪ Ajax‬در ﺻﻔﺤﺎت وب ﭘﻴﺎده ﺳﺎزي ﺷﻮﻧﺪ ﻋﺒﺎرﺗﻨﺪ از‪:‬‬
‫‪ -1‬ﺟﺴﺘﺠﻮي ﻫﻤﺰﻣﺎن‬
‫ﻫﻤﺰﻣﺎن ﺑﺎ اﻳﻨﻜﻪ ﺷﻤﺎ ﻋﺒﺎرت ﻣﻮرد ﻧﻈﺮ ﺑﺮاي ﺟﺴﺘﺠﻮ را ﺗﺎﻳﭗ ﻣﻲ ﻛﻨﻴﺪ ﻧﺘﺎﻳﺞ ﻣﺮﺗﺒﻂ ﺑﺎ آن ﺑﺨﺶ از ﻋﺒﺎرت ﻧﻮﺷﺘﻪ‬
‫ﺷﺪه ﻧﻤﺎﻳﺶ داده ﺷﻮد‪.‬‬
‫ﺑﺮاي ﻣﺜﺎل ﺳﺎﻳﺖ‪:‬‬
‫‪http://www.google.com/webhp?complete=1&hl=en‬‬
‫در اﻳﻦ ﺳﺎﻳﺖ زﻣﺎﻧﻴﻜﻪ ﺷﻤﺎ ﻋﺒﺎرﺗﻲ را ﻣﻲ ﻧﻮﻳﺴﻴﺪ ﻫﻤﺰﻣﺎن ﻧﺘﺎﻳﺞ ﺟﺴﺘﺠﻮ در ﻳﻚ ﻣﻨﻮي ﻛﺸﻮﻳﻲ ﻧﻤﺎﻳﺶ داده ﻣﻲ‬
‫ﺷﻮد‪.‬‬

‫ﺷﻜﻞ ‪ 1-7‬ﻧﻤﺎي از ﺳﺎﻳﺖ ‪Google Suggest‬‬

‫‪ -2‬درﻳﺎﻓﺖ ﺟﻮاب ﺑﺎ ‪) autoComplete‬ﻳﻚ ﻓﺮﻫﻨﮓ ﻟﻐﺖ(‬

‫ﺑﻪ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﻣﺎﻧﻨﺪ ﻓﺮﻫﻨﮓ ﻟﻐﺎت‪ ،‬ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪ live Serach‬ﻳﺎ ‪ autoComplete‬ﮔﻔﺘﻪ ﻣﻲ ﺷﻮد‪ .‬اﻳﻦ‬
‫ﺑﺮﻧﺎﻣﻪ ﻫﺎ ﺳﻌﻲ ﻣﻲ ﻛﻨﻨﺪ آن ﻛﻠﻤﻪ ي ﻛﻪ ﺷﻤﺎ ﻣﻲ ﻧﻮﻳﺴﻴﺪ را ﺣﺪس ﺑﺰﻧﻨﺪ‪ .‬ﺑﻪ ﻫﻤﻴﻦ ﺧﺎﻃﺮ ﻳﻚ ﻟﻴﺴﺘﻲ از ﻛﻠﻤﺎت ﺷﺒﻴﻪ‬
‫ﺑﻪ آن را از ﺳﺮور درﻳﺎﻓﺖ و ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﻨﺪ‪.‬‬
‫ﻧﻤﻮﻧﻪ ي از اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﻫﺎ در وب ﺳﺎﻳﺖ زﻳﺮ ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫‪www.papermountain.org/demos/live‬‬
 ‫ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪Ajax‬‬ ‫‪  8‬ﻓﺼﻞ ‪1‬‬

‫‪Chat-3‬‬
‫ﺑﻪ دﻟﻴﻞ اﻳﻨﻜﻪ ‪ Ajax‬ﻧﺴﺒﺖ ﺑﻪ ﺻﻔﺤﺎت وﺑﻲ ﻛﻪ ‪ refresh‬ﻣﻲ ﺷﻮﻧﺪ ﺑﺮﺗﺮي دارد‪ ،‬اﻧﺘﺨﺎب ﻣﻨﺎﺳﺒﻲ ﺑﺮاي ﺑﺮﻧﺎﻣﻪ‬
‫ﻫﺎي ﭘﻴﺎم رﺳﺎﻧﻲ ﻓﻮري )‪ (Chat‬وب ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫ﻣﺜﺎﻟﻲ از اﻳﻦ را در ﺳﺎﻳﺖ زﻳﺮ ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ‪.‬‬
‫‪www.plasticshore.com/project/chat‬‬
‫در اﻳﻦ ﮔﻮﻧﻪ ﺑﺮﻧﺎﻣﻪ ﻫﺎ ﺷﻤﺎ ﻣﺘﻦ ﺧﻮد را ﺗﺎﻳﭗ ﻛﺮده و دﻛﻤﻪ ارﺳﺎل را ﻛﻠﻴﻚ ﻣﻲ ﻛﻨﻴﺪ‪ ،‬ﭘﻴﺎم ﺑﻪ ﺳﺮور ارﺳﺎل‬
‫ﻣﻲ ﺷﻮد و ﺑﻌﺪ ﺑﺮاي ﻣﺨﺎﻃﺐ ارﺳﺎل ﻣﻲ ﺷﻮد ﺑﺪون اﻳﻨﻜﻪ ﺻﻔﺤﻪ ﺷﻤﺎ و ﻣﺨﺎﻃﺐ ‪ refresh‬ﺷﻮد‪.‬‬
‫ﻣﺜﺎﻟﻲ دﻳﮕﺮ را ﻣﻲ ﺗﻮاﻧﻴﺪ در ﺳﺎﻳﺖ زﻳﺮ ﻣﺸﺎﻫﺪه ﻧﻤﺎﻳﺪ‪.‬‬
‫‪http://treehouse.ofb.net/chat/?long=en‬‬
‫ﻫﻤﭽﻨﻴﻦ ‪ radiusIM‬ﻳﻚ ﻧﻤﻮﻧﻪ دﻳﮕﺮ از ﺳﺎﻳﺖ ﻫﺎي ‪ chat‬اﺳﺖ ﻛﻪ درﻃﺮاﺣﻲ آن از ‪ google Map‬ﻧﻴﺰ‬
‫اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ‪.‬‬

‫ﺷﻜﻞ ‪ 1-8‬ﻧﻤﺎي از ﺳﺎﻳﺖ ‪radiusIM.com‬‬

‫‪ -4‬ﺟﺎﺑﻪ ﺟﺎ ﻛﺮدن اﺷﻴﺎ در ﺻﻔﺤﻪ ﺑﺎ ‪Ajax‬‬
‫ﺑﻄﻮر ﻣﺜﺎل در ﻳﻚ وب ﺳﺎﻳﺖ ﺧﺮﻳﺪ ﺷﻤﺎ ﺑﺎ ‪ Drag-Drop‬ﻛﺮدن ﻛﺎﻻي ﻣﻮرد ﻧﻴﺎز ﺧﻮد ﺑﻪ داﺧﻞ ﺳﺒﺪ ﺧﺮﻳﺪ‪ ،‬آن‬
‫را ﺧﺮﻳﺪاري ﻣﻲ ﻛﻨﻴﺪ و اﻃﻼﻋﺎت ﺧﺮﻳﺪ ﺑﻪ ﺳﺒﺪ ﺧﺮﻳﺪ ﺷﻤﺎ اﺿﺎﻓﻪ ﻣﻲ ﺷﻮد‪.‬‬

‫‪ -5‬ﺑﺎزي ﺑﺎ ‪Ajax‬‬
‫ﻳﻚ ﺑﺎزي ﻣﺎﻧﻨﺪ ﺷﻄﺮﻧﺞ را در ﺻﻔﺤﻪ وب در ﻧﻈﺮ ﺑﮕﻴﺮﻳﺪ‪ ،‬اﮔﺮ ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﺷﻤﺎ ﻣﻬﺮه ي را ﺣﺮﻛﺖ ﻣﻲ دﻫﻴﺪ‬
‫ﺻﻔﺤﻪ ﺑﺮاي ارﺳﺎل ﻣﻮﻗﻌﻴﺖ ﺟﺪﻳﺪ ﻣﻬﺮه ﺑﻪ ﺳﺮور دوﺑﺎر ﺑﺎرﮔﺬاري ﺷﻮد اﻳﻦ ﺑﺎزي ﺧﻴﻠﻲ ﺧﺴﺘﻪ ﻛﻨﻨﺪه ﻣﻲ ﺷﻮد‪.‬‬
‫ﺣﺎل اﮔﺮ اﻳﻦ ﺑﺎزي ﺑﺎ ‪ Ajax‬ﺑﺎﺷﺪ ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺎ ﺳﺮور ﺑﺮاﺣﺘﻲ و ﺑﺪون ﺑﺎرﮔﺬاري ﻣﺠﺪد ﺻﻔﺤﻪ‪ ،‬ﺑﺎزي ﻛﻨﻴﺪ‪.‬‬
‫ﻓﺼﻞ ‪9  1‬‬ ‫ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪Ajax‬‬

‫‪ -6‬درﻳﺎﻓﺖ ﻓﻮري ﻧﺘﻴﺠﻪ )‪(sign-in ,sign-up‬‬

‫ﻳﻜﻲ از ﺑﺨﺶ ﻫﺎي ﻛﻪ اﻏﻠﺐ ﺻﻔﺤﺎت وب دارﻧﺪ‪ ،‬ﺑﺨﺶ ‪ login‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬زﻣﺎﻧﻴﻜﻪ ﻛﺎرﺑﺮ اﻃﻼﻋﺎت ﺧﻮد را وارد‬
‫ﻛﻨﺪ و دﻛﻤﻪ ‪ login‬را ﻛﻠﻴﻚ ﻛﻨﺪ در ﺻﻮرﺗﻴﻜﻪ اﻃﻼﻋﺎت ﺻﺤﻴﺢ ﻧﺒﺎﺷﺪ ﺻﻔﺤﻪ ‪ refresh‬ﻣﻲ ﺷﻮد و ﺑﻌﺪ‬
‫ﭘﻴﻐﺎم ﻧﺎدرﺳﺖ ﺑﻮدن اﻃﻼﻋﺎت ﻛﺎرﺑﺮي ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪ .‬ﺣﺎل اﻳﻨﻜﻪ ﺑﺎ ‪ Ajax‬ﻣﻲ ﺗﻮان در ﻫﻤﺎن ﺻﻔﺤﻪ در‬
‫ﺻﻮرت ﻧﺎدرﺳﺖ ﺑﻮدن اﻃﻼﻋﺎت ﻛﺎرﺑﺮي‪ ،‬ﭘﻴﻐﺎم ﻣﺮﺑﻮﻃﻪ را ﻧﻤﺎﻳﺶ داد و دﻳﮕﺮ ﻧﻴﺎزي ﺑﻪ ﺑﺎرﮔﺬاري ﻣﺠﺪد ﺻﻔﺤﻪ‬
‫ﻧﻴﺴﺖ‪.‬‬
‫ﻧﻤﻮﻧﻪ دﻳﮕﺮ‪ ،‬ﭼﻚ ﻛﺮدن ﺗﻜﺮاري ﻧﺒﻮدن ﻧﺎم ﻛﺎرﺑﺮي)‪ (UserName‬در ﺻﻔﺤﺎت ‪ sign-up‬اﺳﺖ‪.‬‬
‫در ﺻﻔﺤﺎت ﻣﻌﻤﻮل وب ﺷﻤﺎ ﺑﻌﺪ از ﭘﺮﻛﺮدن اﻃﻼﻋﺎت ﺛﺒﺖ ﻧﺎم ﺧﻮد و زدن دﻛﻤﻪ ﺗﺎﻳﻴﺪ اﻃﻼﻋﺎت ﺧﻮد را ارﺳﺎل‬
‫ﻣﻲ ﻛﻨﻴﺪ‪ ،‬ﺣﺠﻢ ﺑﺎﻻي از اﻃﻼﻋﺎت ارﺳﺎل ﻣﻲ ﺷﻮد‪ ،‬در ﺳﺮور ﻧﺎم ﻛﺎرﺑﺮي ﭼﻚ ﻣﻲ ﺷﻮد و در ﺻﻮرت ﺗﻜﺮاري‬
‫ﺑﻮدن ﻧﺎم ﻛﺎرﺑﺮي‪ ،‬اﻃﻼﻋﺎت ﻛﺎرﺑﺮي دوﺑﺎره ﺑﺮﮔﺸﺖ داده ﺷﻮد‪ .‬ﺣﺠﻢ ﺗﺒﺎدل داده ﻫﺎ ﺑﺎﻻﺳﺖ ﺑﻪ ﻫﻤﻴﻦ ﺧﺎﻃﺮ‬
‫ﻋﻤﻠﻴﺎت ﺑﺴﻴﺎر وﻗﺖ ﮔﻴﺮ اﺳﺖ در ﺻﻮرﺗﻴﻜﻪ ﺑﺎ ‪ Ajax‬ﺗﻨﻬﺎ ﻛﺎﻓﻴﺴﺖ اﻃﻼﻋﺎت ﻧﺎم ﻛﺎرﺑﺮي ﺑﻪ ﺳﻤﺖ ﺳﺮور ارﺳﺎل و‬
‫آن ﺟﺎ ﭼﻚ ﻣﻲ ﺷﻮد در ﺻﻮرﺗﻴﻜﻪ اﻃﻼﻋﺎت ﺗﻜﺮاري ﺑﺎﺷﺪ ﻳﻚ ﭘﻴﻐﺎم ﻛﻮﺗﺎه ﺧﻄﺎ ارﺳﺎل ﻣﻲ ﺷﻮد‪.‬‬
‫‪ -7‬اﻳﺠﺎد ﻣﻨﻮ ﺑﺎ ‪Ajax‬‬
‫در ﻧﻈﺮ ﺑﮕﻴﺮﻳﺪ ﻳﻚ ﻣﻨﻮي ﻛﺸﻮﺋﻲ ﻛﻪ ﻫﺮ ردﻳﻒ آن ﻣﻮﺿﻮﻋﺎت ﺧﺎﺻﻲ از ﺟﺪول ﻫﺎي ﻣﻮﺟﻮد در ﺳﺮور ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫ﻣﺜﻼ در ﺳﺮور ﻳﻚ ﺟﺪول اﻃﻼﻋﺎت ﻛﺘﺎب دارﻳﻢ ﻛﻪ داراي ﻣﻮﺿﻮﻋﺎﺗﻲ ﻣﺸﺨﺺ اﺳﺖ از ﻗﺒﻴﻞ‪ :‬ﻛﺎﻣﭙﻴﻮﺗﺮ – زﺑﺎن –‬
‫رواﻧﺸﻨﺎﺳﻲ و‪ ...‬ﻣﻲ ﺧﻮاﻫﻴﻢ زﻣﺎﻧﻴﻜﻪ ﻣﻮس ﺑﺮ روي ﻣﻨﻮ ﻣﻲ رود‪ ،‬اﻃﻼﻋﺎت ﻣﻮﺿﻮﻋﺎت از ﺟﺪول ﻫﺎ درﻳﺎﻓﺖ و ﺑﻄﻮر‬
‫ﻣﺠﺰا در ردﻳﻒ ﻫﺎي اﻳﻦ ﻣﻨﻮ ﻗﺮار ﮔﻴﺮد‪ .‬ﺷﺎﻳﺪ اﻳﻦ ﻣﻮﺿﻮع ﺧﻴﻠﻲ ﺑﺮاي ﺷﻤﺎ ﺳﺎده ﺑﺎﺷﺪ و اﻳﻦ ﻃﻮر ﺗﺼﻮر ﻛﻨﻴﺪ ﻛﻪ‬
‫ﭼﻪ ﻧﻴﺎزي ﺑﻪ اﻳﻦ ﻋﻤﻠﻴﺎت اﺳﺖ در ﺻﻮرﺗﻴﻜﻪ ﻣﻲ ﺗﻮان در ﻫﻤﺎن اﺑﺘﺪاي ﺑﺎر ﺷﺪن ﺳﺎﻳﺖ اﻃﻼﻋﺎت ﺑﻄﻮر ﻣﻌﻤﻮل‬
‫ﺧﻮاﻧﺪه ﺷﻮد و ﻧﻤﺎﻳﺶ داده ﺷﻮد‪ .‬اﻣﺎ ﺗﻮﺟﻪ ﺑﻪ اﻳﻦ ﻧﻜﺘﻪ ﻻزم اﺳﺖ ﻛﻪ اﮔﺮ ﺗﻐﻴﻴﺮاﺗﻲ در اﻳﻦ ﺟﺪول ﻫﺎ ﻫﻤﺰﻣﺎن اﻋﻤﺎل‬
‫ﺷﻮد‪ ،‬ﻣﺜﻼ ﻣﻮﺿﻮع ﺟﺪﻳﺪي اﺿﺎﻓﻪ ﺷﻮد‪ ،‬ﺷﻤﺎ در ﻣﻨﻮ آن ﻣﻮﺿﻮع را ﻧﺨﻮاﻫﻴﺪ دﻳﺪ ﺗﺎ اﻳﻨﻜﻪ ﺻﻔﺤﻪ را دوﺑﺎره‬
‫ﺑﺎرﮔﺬاري ﻛﻨﻴﺪ‪.‬‬
‫ﻣﺰاﻳﺎي ‪Ajax‬‬
‫ﻃﻲ ﺳﺎل ﻫﺎي اﺧﻴﺮ ﺟﻬﺖ ﺻﻨﻌﺖ ﻧﺮم اﻓﺰار )در زﻣﻴﻨﻪ ي وب( ﺑﻪ ﺳﻮي ﺗﻮﻟﻴﺪ ﻧﺮم اﻓﺰارﻫﺎي اﺳﺖ ﻛﻪ ﻣﺴﺘﻘﻞ از‬
‫ﺳﻴﺴﺘﻢ ﻋﺎﻣﻞ و ﻣﺮورﮔﺮ ﺑﺎﺷﻨﺪ‪ .‬ﻧﮕﺎﻫﻲ ﺑﻪ ﺳﻴﺮ ﺗﺤﻮﻻت زﺑﺎن ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﻣﺎﻧﻨﺪ ‪ PHP‬و ‪ ASP‬از ﻃﺮﻓﻲ و‬
‫ﻛﺎﻫﺶ اﻗﺒﺎل ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﺎن ﺑﻪ ﻓﻨﺎوري ﻫﺎي ﻫﻤﭽﻮن ‪ ActiveX‬و ‪ Java Applet‬در ﺳﻤﺖ ﻛﻼﻳﻨﺖ از ﻃﺮف‬
‫دﻳﮕﺮ‪ ،‬ﺗﺎﻳﻴﺪ ﻛﻨﻨﺪه اﻳﻦ ﻣﻄﻠﺐ اﺳﺖ‪.‬‬
‫ﻳﻜﻲ دﻳﮕﺮ از دﻻﻳﻞ ﻣﻬﻢ ﺗﻮﺟﻪ دﻧﻴﺎي ﻧﺮم اﻓﺰار ﺑﻪ ‪ Ajax‬اﻳﻦ اﺳﺖ ﻛﻪ ﻫﻤﭽﻮن ﻓﻨﺎوري ﻫﺎي ﻣﺎﻧﻨﺪ‬
‫‪ Macromedia Flash‬ﻧﻴﺎزﻣﻨﺪ ﻧﺼﺐ ﻫﻴﭻ ﻧﺮم اﻓﺰار اﺿﺎﻓﻲ ﺑﺮ روي ﻣﺮورﮔﺮ ﻧﻴﺴﺖ و ﺗﻨﻬﺎ اﺗﻜﺎي آن ﺑﻪ ‪XML‬‬
‫اﺳﺖ و اﻳﻦ ﻳﻚ ﻣﺰﻳﺖ اﺳﺖ زﻳﺮا ‪ XML‬اﻧﻌﻄﺎف ﭘﺬﻳﺮي زﻳﺎدي دارد و ﻫﻢ اﻛﻨﻮن در ﻣﻘﻴﺎس ﮔﺴﺘﺮده اي در ﻧﺮم‬
‫اﻓﺰارﻫﺎي ﺗﺤﺖ وب ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮد‪.‬‬
 ‫ﻣﻘﺪﻣﻪ اي ﺑﺮ ‪Ajax‬‬ ‫‪  10‬ﻓﺼﻞ ‪1‬‬

‫ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪ Ajax‬ﺑﻪ ﻋﻠﺖ ﺗﺒﺎدل ﺣﺠﻢ داده ﻛﻢ ﺑﻴﻦ ﺳﺮور و ﻛﻼﻳﻨﺖ ﺗﺮاﻓﻴﻚ ﺷﺒﻜﻪ را ﻛﺎﻫﺶ ﻣﻲ دﻫﻨﺪ و‬
‫ﺳﺮﻋﺖ اﺟﺮا را ﺑﺎﻻ ﻣﻲ ﺑﺮدﻧﺪ‪.‬‬
‫ﻧﻜﺘﻪ ﻣﻬﻢ دﻳﮕﺮ اﻳﻦ اﺳﺖ ﻛﻪ در ﻣﻮرد ‪ Ajax‬ﺷﻤﺎ ﻧﻴﺎز ﺑﻪ ﻳﺎدﮔﻴﺮي زﺑﺎن ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﺟﺪﻳﺪي ﻧﻴﺴﺘﻴﺪ‪.‬‬
‫ﭼﺎﻟﺶ ﻫﺎي ﻓﻦ آوري ‪Ajax‬‬
‫ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﺻﻔﺤﺎت ﺑﻪ ﺳﺒﻚ ‪ Ajax‬داراي ﭼﺎﻟﺶ ﻫﺎي ﻣﺘﻌﺪدي اﺳﺖ ‪:‬‬
‫‪ -‬ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﺻﻔﺤﺎت وب ﻣﻲ ﺑﺎﻳﺴﺖ ﻣﺘﻨﺎﺳﺐ ﺑﺎ ﺷﺮاﻳﻂ ﻫﺮ ﻣﺮورﮔﺮ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﮔﺮدﻧﺪ‪ ،‬ﭼﺮاﻛﻪ ﻫﺮ‬
‫ﻣﺮورﮔﺮ ﻳﻚ ﻧﺴﺨﻪ ﻣﺘﻔﺎوت از ‪ DOM‬و ‪ DHTML‬را اراﺋﻪ ﻣﻲ ﻧﻤﺎﻳﻨﺪ)ﻫﺮ ﭼﻨﺪ اﻳﻦ ﺗﻔﺎوت ﻫﺎ اﻧﺪك ﺑﺎﺷﺪ( ‪.‬‬
‫‪ -‬ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﺳﻤﺖ ﻛﻼﻳﻨﺖ ﺻﺮﻓﺎ ﺑﺎ اﺳﺘﻔﺎده از ﺟﺎوااﺳﻜﺮﻳﭙﺖ اﻧﺠﺎم ﻣﻲ ﺷﻮد‪ .‬ﭘﻴﺎده ﺳﺎزي ﺑﺮﺧﻲ از ﺑﺨﺶ ﻫﺎي‬
‫‪ Ajax‬ﻣﻲ ﺗﻮاﻧﺪ ﺑﺮاي ﭘﻴﺎده ﻛﻨﻨﺪﮔﺎن ﺑﺴﻴﺎر ﭘﻴﭽﻴﺪه ﺑﺎﺷﺪ و ﻧﻴﺎزﻣﻨﺪ داﻧﺶ ﺑﺎﻻﺋﻲ در ﺧﺼﻮص اﺳﺘﻔﺎده از‬
‫ﺟﺎوااﺳﻜﺮﻳﺖ ﺑﺎﺷﺪ‪.‬‬
‫‪ -‬ﺟﺎوا اﺳﻜﺮﻳﭙﺖ‪ ،‬وﻳﮋﮔﻲ ﻫﺎ و اﻣﻜﺎﻧﺎت ﻣﻮرد ﻧﻴﺎز ﭘﻴﺎده ﻛﻨﻨﺪﮔﺎن ﺑﺮﻧﺎﻣﻪ ﻫﺎي دات ﻧﺖ را ﺗﺎﻣﻴﻦ ﻧﻤﻲ ﻧﻤﺎﻳﺪ ) ﻧﻈﻴﺮ‬
‫ﻳﻚ روﻳﻜﺮد ﺷﻲ ﮔﺮاء ﻛﺎﻣﻞ ( ‪ .‬ﻋﻼوه ﺑﺮ اﻳﻦ‪ ،‬در اﻳﻦ ﻓﻦ آوري از ﻛﺘﺎﺑﺨﺎﻧﻪ اي ﻧﻈﻴﺮ آﻧﭽﻪ در ﭘﻠﺖ ﻓﺮم دات ﻧﺖ‬
‫اراﺋﻪ ﺷﺪه اﺳﺖ‪ ،‬اﺳﺘﻔﺎده ﻧﻤﻲ ﮔﺮدد و ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﺎن ﻣﻲ ﺑﺎﻳﺴﺖ ﺗﻤﺎﻣﻲ ﺑﺮﻧﺎﻣﻪ را از اﺑﺘﺪا ﻛﺪ ﻧﻤﺎﻳﻨﺪ‪.‬‬
‫‪ -‬ﺟﺎوااﺳﻜﺮﻳﭙﺖ و ﭘﻴﺎده ﺳﺎزي ﺳﻤﺖ ﻛﻼﻳﻨﺖ‪ ،‬ﻋﻤﻮﻣﺎ ﺑﺨﻮﺑﻲ در ﻣﺤﻴﻂ ﻫﺎي ﻳﻜﭙﺎرﭼﻪ ﺗﻮﺳﻌﻪ)‪ (IDEs‬ﺣﻤﺎﻳﺖ‬
‫ﻧﻤﻲ ﮔﺮدﻧﺪ‪.‬‬
‫ﺑﻌﻨﻮان ﺳﺨﻦ آﺧﺮ‪ Ajax:‬ﺗﻜﻨﻮﻟﻮژي ﻧﻴﺴﺖ ﻛﻪ ﺟﺪﻳﺪ ﻛﺸﻒ ﺷﺪه ﺑﺎﺷﺪ‪ ،‬ﺷﻲ ‪ XMLHttpRequest‬از زﻣﺎن‬
‫‪ IE5‬ﻋﺮﺿﻪ ﺷﺪه ﺑﻮد وﻟﻲ ﭼﻮن دﻳﮕﺮ ﻣﺮورﮔﺮﻫﺎ از آن ﭘﺸﺘﻴﺒﺎﻧﻲ ﻧﻤﻲ ﻛﺮدﻧﺪ‪ Ajax ،‬ﻧﺎﺷﻨﺎﺧﺘﻪ ﻣﺎﻧﺪه ﺑﻮد‪.‬‬
‫ﻓﺼﻞ ‪11  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫ﻓﺼﻞ دوم‪ :‬ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫در اواﻳﻞ ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب ﺑﻴﺸﺘﺮ ﺟﻬﺖ ﻧﻤﺎﻳﺶ و اراﺋﻪ ﻣﻄﺎﻟﺐ ﺑﻮدﻧﺪ اﻣﺎ ﺑﻌﺪ از ﮔﺴﺘﺮش وب ﻃﺮاﺣـﺎن ﻣـﻲ ﺧﻮاﺳـﺘﻨﺪ‬
‫ﺑﺘﻮاﻧﻨﺪ ﺑﺮ روي ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب ﻣﺎﻧﻨﺪ ﺑﺮﻧﺎﻣﻪ ﻫﺎي دﻳﮕﺮ ﻛﻨﺘﺮل داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪ .‬اﻣﺎ ﻳﻚ ﻣﺸﻜﻞ وﺟﻮد داﺷـﺖ و آن ﻫـﻢ‬
‫اﻳﻦ ﻛﻪ در زﺑﺎن ‪ Html‬دﺳﺘﻮرات ﻛﻨﺘﺮﻟﻲ و ﺣﻠﻘﻪ ﻫﺎي ﺗﻜﺮار وﺟﻮد ﻧﺪاﺷﺖ‪ .‬ﺑﺮاي ﺣﻞ اﻳـﻦ ﻣـﺸﻜﻞ زﺑـﺎﻧﻲ ﺑـﻪ ﻧـﺎم‬
‫‪ JavaScript‬ﻋﺮﺿﻪ ﺷﺪ‪.‬‬
‫‪ Sun‬و‪Netscape‬‬ ‫زﺑـــﺎن ‪ JavaScript‬ﻣﺤـــﺼﻮﻟﻲ ﻣـــﺸﺘﺮك از دو ﺷـــﺮﻛﺖ ‪Microsystem‬‬
‫‪ Communications‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻳﻚ زﺑﺎن ﻣﻔﺴﺮي اﺳﺖ و ﻣﻔﺴﺮﻫﺎي دﺳﺘﻮري آن ﻣﺮورﮔﺮﻫـﺎي‬
‫وﺑﻲ ﻫﺴﺘﻨﺪ ﻛﻪ از ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﭘﺸﺘﻴﺒﺎﻧﻲ ﻣﻲ ﻛﻨﻨﺪ‪) .‬ﻣﻔﺴﺮ ﺑﺮﻧﺎﻣﻪ ي اﺳﺖ ﻛﻪ ﻛـﺪﻫﺎي ﻧﻮﺷـﺘﻪ ﺷـﺪه ﺗﻮﺳـﻂ ﺑﺮﻧﺎﻣـﻪ‬
‫ﻧﻮﻳﺲ را ﺑﺮاﺳﺎس ﮔﺮاﻣﺮ ﻫﻤﺎن زﺑﺎن ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﺗﺮﺟﻤﻪ ﻛﺮده و دﺳﺘﻮرات را اﺟﺮا ﻣﻲ ﻛﻨﺪ‪ (.‬ﻳﻌﻨﻲ وﻗﺘـﻲ ﻛـﺪﻫﺎي‬
‫ﻧﻮﺷﺘﻪ ﺷﺪه ﺗﻮﺳﻂ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺗﻮﺳﻂ ﻣﺮورﮔﺮ ﺧﻮاﻧﺪه ﻣﻲ ﺷﻮد‪ ،‬اﻳﻦ ﻛﺪﻫﺎ ﺗﻮﺳﻂ ﻣﻔـﺴﺮ ﺟﺎوااﺳـﻜﺮﻳﭙﺘﻲ ﻛـﻪ در‬
‫آن ﺗﻌﺒﻴﻪ ﺷﺪه‪ ،‬ﺗﺮﺟﻤﻪ ﻣﻲ ﮔﺮدد و ﺣﺎﺻﻞ اﻳﻦ ﺗﺮﺟﻤﻪ ﺑﻪ ﻛﺎرﺑﺮ اراﺋﻪ ﻣﻲ ﺷﻮد‪.‬‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻫﻤﺎن ﻃﻮرﻛﻪ از ﻧﺎﻣﺶ ﭘﻴﺪاﺳﺖ ﻳﻚ زﺑﺎن اﺳﻜﺮﻳﭙﺘﻲ اﺳﺖ‪ .‬ﻳﻌﻨﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎﻳﻲ ﻛﻪ ﺗﻮﺳـﻂ آن ﻧﻮﺷـﺘﻪ‬
‫ﻣﻲ ﺷﻮﻧﺪ ﻣﺘﻦ ﺳﺎده ﻫﺴﺘﻨﺪ )‪ ( text only documents‬و ﺗﻮﺳﻂ ﻫـﺮ وﻳﺮاﻳـﺸﮕﺮي ﻛـﻪ ﺑﺘﻮاﻧـﺪ ﻣـﺘﻦ ﺳـﺎده‬
‫اﻳﺠﺎد ﻛﻨﺪ ﻗﺎﺑﻞ وﻳﺮاﻳﺶ و ﻣﺸﺎﻫﺪه ﻫﺴﺘﻨﺪ‪ .‬ﻣﺘﺪاول ﺗﺮﻳﻦ و ﺳﺎده ﺗﺮﻳﻦ آن ﻫﺎ‪ ،‬وﻳﺮاﻳﺸﮕﺮ ‪ NotePad‬اﺳـﺖ ﻛـﻪ در‬
‫ﺗﻤﺎﻣﻲ ﻧﺴﺨﻪ ﻫﺎي وﻳﻨﺪوز وﺟﻮد دارد‪.‬‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ داراي دو ﺑﺨﺶ اﺳﺎﺳﻲ ﻣﻲ ﺑﺎﺷﺪ‪:‬‬
‫‪ -‬ﻛﺪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ در ﺳﻤﺖ ﺳﺮور‪.‬‬
‫‪ -‬ﻛﺪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ در ﺳﻤﺖ ﻛﻼﻳﻨﺖ‪.‬‬
‫ﻛﺪﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ در ﺳﻤﺖ ﻛﻼﻳﻨﺖ ﺑﻴﺸﺘﺮ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ اﻣﺎ ﭼﺮا‪...‬؟‬
‫ﺷﻤﺎ ﺑﺎ ﻛﺪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺮاﺣﺘﻲ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮ روي ﻫﺮ ﺷﻲ داﺧـﻞ ﺻـﻔﺤﻪ وب ﻛﻨﺘـﺮل داﺷـﺘﻪ ﺑﺎﺷـﻴﺪ‪ .‬ﻣـﻲ ﺗﻮاﻧﻴـﺪ‬
‫ﺑﺴﻴﺎري از ﻋﻤﻠﻴﺎت اﺟﺮاﻳﻲ ﺑﺮﻧﺎﻣﻪ ﺧﻮد در ﺳﻤﺖ ﻛﻼﻳﻨﺖ اﺟﺮا ﻛﻨﻴﺪ در اﻳﻦ ﺻﻮرت ﻫﻢ ﺳﺮﻋﺖ اﺟﺮاي ﺑﺮﻧﺎﻣﻪ ﻫـﺎي‬
‫وب ﺷﻤﺎ ﺑﻴﺸﺘﺮ ﺷﺪه و ﻫﻢ از ﺗﺒﺎدل اﻃﻼﻋﺎت ﺑﻴﻬﻮده ﻣﺎﺑﻴﻦ ﻛﻼﻳﻨﺖ و ﺳﺮور ﺟﻠﻮﮔﻴﺮي ﻣﻲ ﻛﻨﻴﺪ‪.‬‬
‫ﺑﻄﻮر ﻣﺜﺎل ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮرﺳﻲ ﺻﺤﺖ ﮔﺮاﻣﺮي اﻃﻼﻋﺎﺗﻲ ﻛﻪ ﻛﺎرﺑﺮ ﻣﻲ ﺧﻮاﻫﺪ ﺑﺮاي ﺷﻤﺎ ارﺳﺎل ﻛﻨـﺪ را در ﻛﻼﻳﻨـﺖ‬
‫ﭼﻚ ﻛﻨﻴﺪ‪) .‬اﮔـﺮ اﻃﻼﻋـﺎت ﻋـﺪدي ﺑﺎﻳـﺪ ارﺳـﺎل ﺷـﻮد دﻳﮕـﺮ اﻃﻼﻋـﺎﺗﻲ ﺑـﺎ ﻓﺮﻣـﺖ رﺷـﺘﻪ ارﺳـﺎل ﻧـﺸﻮد‪ (.‬ﻗـﺪرت‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﻪ ﻧﮕﺎه روﻳﺪادي)‪ (Event‬اﻳﻦ زﺑﺎن اﺳﺖ‪ .‬اﻳﻦ ﺧﺼﻴﺼﻪ ﻣﻮﺟﺐ ﺗﻌﺎﻣﻞ ﺑﻴﺸﺘﺮ ﺑـﻴﻦ ﺑﺮﻧﺎﻣـﻪ وﻛـﺎرﺑﺮ‬
‫ﻣﻲ ﺷﻮد‪ .‬ﺑﻪ ازاي ﻫﺮ ﻋﻤﻠﻴﺎﺗﻲ ﻛﻪ ﻛﺎرﺑﺮ در ﺑﺮﻧﺎﻣﻪ وب اﻧﺠﺎم دﻫﺪ )ﻓﺸﺮدن دﻛﻤﻪ‪ ،‬ﺣﺮﻛﺖ ﻣﻮس‪ ،‬ﺗﺎﻳـﭗ ﻣـﺘﻦ و ‪(....‬‬
‫ﺑﺮﻧﺎﻣﻪ ﻣﻲ ﺗﻮاﻧﺪ ﻋﻜﺲ اﻟﻌﻤﻞ ﻧﺸﺎن دﻫﺪ وﻋﻤﻠﻴﺎت ﺧﺎﺻﻲ را اﺟﺮا ﻛﻨﺪ‪ .‬ﺑﺮﺧﻲ دﻳﮕﺮ از ﺧﺼﻮﺻﻴﺖ ﻫـﺎي اﻳـﻦ زﺑـﺎن‬
‫ﻋﺒﺎرﺗﻨﺪ از‪:‬‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  12‬ﻓﺼﻞ ‪2‬‬

‫‪ -‬ﻧﺴﺒﺖ ﺑﻪ ﺣﺮوف ﺑﺰرگ و ﻛﻮﭼﻚ ﺣﺴﺎس اﺳﺖ‪.‬‬

‫‪ -‬ﻣﺠﻤﻮﻋﻪ دﺳﺘﻮرات ﻳﻚ ﺗﺎﺑﻊ ﺑﺎﻳﺪ داﺧﻞ ﺑﻠﻮك ﺑﺎﺷﺪ‪ .‬ﻳﻚ ﺑﻠﻮك ﺑﺎ { ﺷﺮوع و ﺑﻪ } ﺧﺎﺗﻤﻪ ﻣﻲ ﻳﺎﺑﺪ‪.‬‬
‫ﺗﮓ >‪<script‬‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﻌﻨﻮان ﺑﺨﺸﻲ از زﺑﺎن ‪ HTML‬ﻣﻲ ﺑﺎﺷﺪ و در ‪ HTML‬ﺑـﺮاي ﻧﻮﺷـﺘﻦ ﻛـﺪﻫﺎي ﺟﺎوااﺳـﻜﺮﻳﭙﺖ ﺑﺨـﺸﻲ‬
‫ﻣﺸﺨﺺ ﺗﻌﻴﻴﻦ ﺷﺪه اﺳﺖ‪ .‬زﻣﺎﻧﻴﻜﻪ ﻣﻲ ﺧﻮاﻫﻴـﺪ ﻛـﺪﻫﺎي ﺟﺎوااﺳـﻜﺮﻳﭙﺖ را ﺑﻨﻮﻳـﺴﻴﺪ ﺑﺎﻳـﺪ آن ﻫـﺎ را در ﻣﻴـﺎن ﺗـﮓ‬
‫>‪ <script‬ﻗﺮار دﻫﻴﺪ‪.‬‬
‫>‪<script‬‬
‫‪//javaScript Source Code comes here...‬‬
‫>‪</script‬‬
‫ﺗﮓ >‪ <script‬ﺑﻪ ﻣﺮورﮔﺮ اﻋﻼم ﻣﻲ ﻛﻨﺪ ﺗﺎ ﻣﻔﺴﺮ ﺟﺎوااﺳﻜﺮﻳﭙﺖ را ﺑﺮاي اﺟﺮاي دﺳﺘﻮرات ﻓﻌـﺎل ﻛﻨـﺪ و ﺗـﮓ‬
‫>‪ </script‬اﻋــﻼم ﻣــﻲ دارد ﻛــﻪ دﺳــﺘﻮرات ﺟﺎوااﺳــﻜﺮﻳﭙﺖ ﺧﺎﺗﻤــﻪ ﻳﺎﻓﺘــﻪ اﺳــﺖ‪ .‬ﺗــﮓ >‪ <script‬داراي‬
‫ﺧﺎﺻﻴﺖ ﻫﺎي اﺳﺖ ﻛﻪ ﺑﻪ ﺑﺮرﺳﻲ آن ﻫﺎ ﻣﻲ ﭘﺮدازﻳﻢ‪:‬‬
‫ﺧﺎﺻﻴﺖ ‪language‬‬
‫ﺧﺎﺻﻴﺖ ‪ language‬ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن ﻧﻮع زﺑﺎن اﺳﻜﺮﻳﭙﺘﻲ ﻣﻮرد اﺳﺘﻔﺎده در ﺻﻔﺤﻪ وب ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﻣﻘـﺪار‬
‫آن را ﺑﺮاي ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺎﻳﺪ ﺑﺮاﺑﺮ ﺑﺎ ‪ javascript‬ﻗﺮار دﻫﻴﺪ‪.‬‬
‫>"‪<script language="javascript‬‬
‫>‪</script‬‬

‫ﺑﺮاي ﻣﻘﺪار ‪ javascript‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﻧﺴﺨﻪ آن را ﻫﻢ ﺗﻌﻴـﻴﻦ ﻛﻨﻴـﺪ‪ .‬ﺟﺎوااﺳـﻜﺮﻳﭙﺖ ﻣﺎﻧﻨـﺪ ‪ HTML‬داراي ﻧـﺴﺨﻪ‬
‫ﻫﺎي ﻣﺨﺘﻠﻔﻲ اﺳﺖ ﻛﻪ ﻫﺮ ﻛﺪام آن ﻫﺎ ﺑﺎ ﻗﺎﺑﻠﻴﺘﻬﺎي ﺟﺪﻳﺪي در وب ﺗﻮﺳﻌﻪ ﻳﺎﻓﺘﻨﺪ‪ .‬ﻧﺴﺨﻪ ﻫـﺎي اﻳـﻦ زﺑـﺎن ﻋﺒـﺎرت از‬
‫‪ 1.4 ،1.3 ،1.2 ،1.1 ،1.0‬و ‪ 1.5‬اﺳﺖ‪ .‬ﻣﺮورﮔﺮ ‪ IE‬از ﻧﺴﺨﻪ ﻫﺎي ‪ 1.4‬و ‪ 1.5‬اﻳﻦ زﺑﺎن ﭘـﺸﺘﻴﺒﺎﻧﻲ ﻧﻤـﻲ‬
‫ﻛﻨﺪ‪.‬‬
‫ﺧﺎﺻﻴﺖ ‪type‬‬
‫ﺗــــﮓ >‪ <script‬ﺧﺎﺻــــﻴﺖ ‪ type‬ﻫــــﻢ دارد ﻛــــﻪ ﺑــــﺮاي ﺟﺎوااﺳــــﻜﺮﻳﭙﺖ ﺑﺎﻳــــﺪ آن را ﺑﺮاﺑــــﺮ ﺑــــﺎ‬
‫‪ text/javascript‬ﻗﺮار دﻫﻴﺪ‪ .‬ﻧﻜﺘﻪ ﻗﺎﺑﻞ ﺗﻮﺟﻪ اﻳﻦ اﺳﺖ ﻛﻪ اﮔـﺮ اﻳـﻦ ﺧﺎﺻـﻴﺖ را ﺑـﻪ ﺗـﮓ>‪<script‬‬
‫اﺿﺎﻓﻪ ﻛﻨﻴﺪ‪ ،‬ﻣﺮورﮔﺮ اﻳﻨﺘﺮﻧﺖ اﻛﺴﭙﻠﻮرر ﻧﺴﺨﻪ ‪ 1.4‬و ‪ 1.5‬اﻳﻦ زﺑﺎن را اﺟﺮا ﻣﻲ ﻛﻨﺪ‪ .‬از ﻳﻚ وﻳﺮاﻳﺸﮕﺮ ﻣﺘﻦ ﻣﺎﻧﻨﺪ‬
‫ﺑﺮﻧﺎﻣﻪ ‪ Notepad‬اﺳﺘﻔﺎده ﻛﺮده و ﻛﺪ زﻳﺮ را در آن وارد ﻛﻨﻴﺪ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title> My JavaScript </title‬‬
‫>‪</head‬‬

‫>‪<body‬‬
‫>"‪<script language="javascript1.5" type="text/javascript‬‬
‫)"‪document.write("Hello designers and developers.‬‬
‫>‪</script‬‬
‫ﻓﺼﻞ ‪13  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫>‪</body‬‬
‫>‪</html‬‬
‫اﻛﻨﻮن اﻳﻦ ﻓﺎﻳﻞ را ﺑﺎ ﭘﺴﻮﻧﺪ ‪ html‬ذﺧﻴـﺮه ﻛﻨﻴـﺪ و ﺳـﭙﺲ آن را در ﻣﺮورﮔـﺮ اﻳﻨﺘﺮﻧـﺖ اﻛـﺴﭙﻠﻮرر اﺟـﺮا ﻛﻨﻴـﺪ ﻛـﻪ‬
‫ﻣﻮﺟﺐ ﻧﻤﺎﻳﺶ ﺟﻤﻠﻪ ‪ Hello designers and developers.‬در ﺻﻔﺤﻪ ﻣﻲ ﺷﻮد‪ .‬ﺣـﺎل ﺧﺎﺻـﻴﺖ‬
‫‪ type‬را ﺣﺬف ﻛﻨﻴﺪ و دوﺑﺎره ﻓﺎﻳﻞ را ذﺧﻴﺮه و ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪ ،‬ﻫﻴﭻ ﻣﺘﻨﻲ در ﺻﻔﺤﻪ ﻣﺸﺎﻫﺪه ﻧﻤﻲ ﺷﻮد ﻛﻪ ﺑﺎ ﺗﻐﻴﻴـﺮ‬
‫ﻧﺴﺨﻪ ‪ 1.5‬ﺑﻪ ‪ 1.3‬آن ﻣﺘﻦ دوﺑﺎره ﻧﻤﺎﻳﺎن ﺧﻮاﻫﺪ ﺷﺪ‪ .‬ﻧﻮﺷﺘﻦ ﻧﺴﺨﻪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ اﺟﺒﺎري ﻧﻴﺴﺖ ﻳﻌﻨﻲ ﻣﻲ ﺗﻮاﻧﻴـﺪ‬
‫آن را ﻧﻨﻮﻳﺴﻴﺪ‪ .‬ﻫﻤﭽﻨﻴﻦ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻓﻘﻂ از ﺧﺎﺻﻴﺖ ‪ type‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ و ﺧﺎﺻﻴﺖ ‪ language‬را ﻧﻨﻮﻳﺴﻴﺪ‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title> My JavaScript </title‬‬
‫>‪</head‬‬

‫>‪<body‬‬
‫>"‪<script language="javascript‬‬
‫)"‪document.write("Hello designers and developers.‬‬
‫>‪</script‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﺧﺎﺻﻴﺖ ‪src‬‬
‫ﺗﮓ ‪ script‬ﻳﻚ ﺧﺎﺻﻴﺖ دﻳﮕﺮ ﻫﻢ دارد ﻛـﻪ ‪ src‬اﺳـﺖ‪ .‬اﻳـﻦ ﺧﺎﺻـﻴﺖ ﺑـﺮاي آدرس دﻫـﻲ اﺳـﺖ‪ .‬ﻛـﺪﻫﺎي‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ را ﻣﻲ ﺗﻮاﻧﻴﺪ در ﻳﻚ ﻓﺎﻳﻞ ﺟﺪاﮔﺎﻧﻪ ﻧﻮﺷـﺘﻪ و ﺑـﺎ ﭘـﺴﻮﻧﺪ ‪ js‬ذﺧﻴـﺮه ﻛﻨﻴـﺪ ﺳـﭙﺲ ﺑـﺎ ﺧﺎﺻـﻴﺖ ‪src‬‬
‫آدرس آن ﻓﺎﻳﻞ را ﻣﺸﺨﺺ ﻛﻨﻴﺪ‪ .‬ﺗﻮﺟﻪ داﺷـﺘﻪ ﺑﺎﺷـﻴﺪ ﻛـﻪ در آن ﻓﺎﻳـﻞ ﻧﺒﺎﻳـﺪ دﻳﮕـﺮ ﺗـﮓ ‪ script‬را ﺑﻨﻮﻳـﺴﻴﺪ‪.‬‬
‫ﻣﻌﻤﻮﻻ در اﻳﻦ ﺣﺎﻟﺖ ﺗـﮓ اﺳـﻜﺮﻳﭙﺖ در ﻗـﺴﻤﺖ ‪ head‬ﺻـﻔﺤﻪ ﮔﻨﺠﺎﻧـﺪه ﻣـﻲ ﺷـﻮد ﺗـﺎ ﺑـﺎ ﺷـﺮوع ﺻـﻔﺤﻪ ﻓﺎﻳـﻞ‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻓﺮاﺧﻮاﻧﻲ ﺷﻮد‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>"‪<script type="text/javascript" src="\example1.js‬‬
‫>‪</script‬‬
‫>‪</head‬‬
‫>‪</html‬‬
‫ﺣﺎل ﻣﻲ ﺧﻮاﻫﻴﻢ ﺑﺮرﺳﻲ ﻛﻨﻴﻢ ﻛﺪﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ را در ﻛﺪام ﻗﺴﻤﺖ از ﺻﻔﺤﻪ وب ﺑﻨﻮﻳﺴﻴﻢ؟‬
‫ﻧﻮﺷﺘﻦ اﺳﻜﺮﻳﭙﺖ در ﻗﺴﻤﺖ ‪head‬‬
‫اﮔﺮ ﻣﻲ ﺧﻮاﻫﻴﺪ ﺗﺎ ﻳﻚ ﻛﺪ اﺳﻜﺮﻳﭙﺖ ﻗﺒﻞ از ﺑﺎرﺷﺪن ﺻﻔﺤﻪ اﺟﺮا ﺷﻮد ﻳﺎ ﻛﺪﻫﺎ را ﻫﺮ زﻣـﺎن ﻧﻴـﺎز دارﻳـﺪ ﻓﺮاﺧـﻮاﻧﻲ‬
‫ﻛﻨﻴﺪ‪،‬آن ﻫﺎ را ﻣﺎﺑﻴﻦ ﺗﮓ ‪ head‬ﺑﻨﻮﻳﺴﻴﺪ‪ .‬ﺑﻄﻮر ﻣﺜﺎل ﺷﻤﺎ ﻧﻴﺎز ﺑﻪ اﻳﻦ دارﻳﺪ ﻛﻪ ﺑﻪ ﻣﺤﺾ ورود ﻛﺎرﺑﺮ ﺑﻪ ﺻـﻔﺤﻪ در‬
‫ﻫﻤﺎن اﺑﺘﺪا ﭘﻴﻐﺎﻣﻲ ﻇﺎﻫﺮ ﺷﻮد‪ .‬ﺑﻪ ﻛﺪﻫﺎي اﻳﻦ ﻣﺜﺎل ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title> My JavaScript </title‬‬
‫>"‪<script type="text/javascript‬‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  14‬ﻓﺼﻞ ‪2‬‬

‫;)"!‪alert("I told you it was simple‬‬

‫>‪</script‬‬
‫>‪</head‬‬

‫>‪<body> </body‬‬
‫>‪</html‬‬
‫ﻗﺒﻞ از ﺑﺎرﺷﺪن ﻛﺎﻣﻞ ﺻﻔﺤﻪ در ﻣﺮورﮔﺮ‪ ،‬ﭘﻴﻐﺎﻣﻲ درﻳﻚ ﺟﻌﺒﻪ ﭘﻴﻐﺎم ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬
‫‪ alert() -‬ﻳﻚ ﺗﺎﺑﻊ ﻣﻔﻴﺪ در ﺟﺎوااﺳﻜﺮﻳﭙﺖ اﺳﺖ اﻳﻦ ﺗﺎﺑﻊ ﻳـﻚ رﺷـﺘﻪ را ﺑﻌﻨـﻮان ﭘـﺎراﻣﺘﺮ درﻳﺎﻓـﺖ و آن را در‬
‫ﻳﻚ ﺟﻌﺒﻪ ﭘﻴﻐﺎم ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‪.‬‬
‫ﻧﻮﺷﺘﻦ اﺳﻜﺮﻳﭙﺖ در ﻗﺴﻤﺖ ‪body‬‬
‫اﮔﺮ ﻣﻲ ﺧﻮاﻫﻴﺪ ﺗﺎ ﻛﺪﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻫﻨﮕﺎم ﺑﺎر ﺷﺪن ﺻﻔﺤﻪ اﺟﺮا ﺷـﻮﻧﺪ آن ﻫـﺎ را در ﻗـﺴﻤﺖ ‪ body‬ﺻـﻔﺤﻪ‬
‫وارد ﻛﻨﻴﺪ‪ .‬دﻗﺖ ﻛﻨﻴﺪ ﺷﻤﺎ ﺑﺮاي اﺳﺘﻔﺎده از ﺗﮓ >‪ <script‬در ﺻﻔﺤﻪ ﻣﺤﺪودﻳﺘﻲ ﻧﺪارﻳﺪ‪.‬‬
‫>‪<html‬‬
‫>‪<head></head‬‬
‫>‪<body‬‬
‫>"‪<script type="text/javascript‬‬
‫‪// javascript codes here‬‬
‫>‪</script‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﺣﺘﻲ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺗﻮﺳﻂ ﻛﺪﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻗﺴﻤﺘﻲ از ﻳﻚ ﺻﻔﺤﻪ را اﻳﺠﺎد ﻛﻨﻴﺪ ﻳﻌﻨﻲ ﺑﺎ ﺗﺮﻛﻴﺐ ﺟﺎوااﺳـﻜﺮﻳﭙﺖ‬
‫و ﺗﮓ ﻫﺎي ‪ html‬در ‪ body‬ﻳﻚ ﻋﻨﺼﺮ در ﺻﻔﺤﻪ اﻳﺠﺎد ﻛﻨﻴﺪ‪.‬‬
‫>‪<html‬‬
‫>‪<head></head‬‬
‫>‪<body‬‬
‫>"‪<script type="text/javascript‬‬
‫'‪document.write("<input align='center' type='button‬‬
‫;)">'‪value='ok‬‬
‫>‪</script‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫در اﻳﻦ ﻣﺜﺎل ﻫﻨﮕﺎم ﺑﺎرﺷﺪن ﺻﻔﺤﻪ ﻳﻚ دﻛﻤﻪ ي ‪ ok‬ﺑﺮ روي ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬
‫ﻓﺎﻳﻞ ﺧﺎرﺟﻲ ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬
‫ﺑﺮاي ﺟﻠﻮﮔﻴﺮي از ﺗﻜﺮار ﻳﻚ ﻛﺪ اﺳﻜﺮﻳﭙﺖ در ﺻﻔﺤﺎت ﻳﻚ وب ﺳﺎﻳﺖ‪ ،‬ﻛﺪﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ را در ﻳﻚ ﻓﺎﻳﻞ‬
‫ﺟﺪاﮔﺎﻧﻪ ﻧﻮﺷﺘﻪ و ﺑﺎ ﭘﺴﻮﻧﺪ ‪ js‬آن ﻫﺎ را ذﺧﻴﺮه ﻛﻨﻴﺪ ﺳﭙﺲ در ﻫﺮ ﻗﺴﻤﺖ و ﻫﺮ ﺻﻔﺤﻪ اي ﻛـﻪ ﻻزم ﺑـﻮد‪ ،‬آن ﻫـﺎ را‬
‫اﺿﺎﻓﻪ ﻛﻨﻴﺪ‪ .‬ﺧﻂ زﻳﺮ را ﻧﻮﺷﺘﻪ و آن را در ﻓﺎﻳﻠﻲ ﺑﺎ ﻧﺎم ‪ example1.js‬ذﺧﻴﺮه ﻛﻨﻴﺪ‪:‬‬
‫;)'‪alert('my external file‬‬
‫ﺣﺎﻻ در ﻳﻚ ﺻﻔﺤﻪ ‪ Html‬ﻛﺪﻫﺎي زﻳﺮ را ﺑﻨﻮﻳﺴﻴﺪ‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>"‪<script type="text/javascript" src="example1.js‬‬
‫ﻓﺼﻞ ‪15  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫>‪</script‬‬
‫>‪</head‬‬

‫>‪<body></body‬‬
‫>‪</html‬‬
‫دﻗﺖ ﻛﻨﻴﺪ ﻛﻪ اﮔﺮ ﻓﺎﻳﻞ ﺟﺎوااﺳﻜﺮﻳﭙﺖ را در ﭘﻮﺷﻪ اي ﺟﺪا از ﻓﺎﻳﻞ ‪ html‬ﻗﺮار ﻣﻲ دﻫﻴﺪ ﺣﺘﻤﺎً در ﺧﺎﺻـﻴﺖ ‪src‬‬
‫آدرس دﻗﻴﻖ آن را ﺑﻨﻮﻳﺴﻴﺪ‪ .‬ﻫﻨﮕﺎم ﻣﺸﺎﻫﺪه ﺻﻔﺤﻪ ﺟﻌﺒﻪ ﭘﻴﻐﺎﻣﻲ ﺑﺎ ﻣﺘﻦ ﻣﺸﺨﺺ ﺷﺪه ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬
‫ﻣﺪﻳﺮﻳﺖ روﻳﺪاد‬
‫ﻛﺪﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻗﺎﺑﻠﻴﺖ ﻗﺮار ﮔﺮﻓﺘﻦ داﺧﻞ ﺷﻲ ﻫﺎي ‪ ،html‬ﺑﺮاي ﻣـﺪﻳﺮﻳﺖ روﻳـﺪاد را ﻧﻴـﺰ دارا ﻫـﺴﺘﻨﺪ‪ .‬در‬
‫اﻳﻦ ﺻﻮرت دﻳﮕﺮ ﻧﻴﺎز ﺑﻪ ﻧﻮﺷﺘﻦ ﺗﮓ >‪ <script‬ﻧﻤﻲ ﺑﺎﺷﺪ‪ .‬ﺑﻪ ﻛﺪﻫﺎي زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫'‪<input type='button' value='send‬‬
‫>';)"‪onclick='alert("message sent.‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫در اﻳﻦ ﻣﺜﺎل ﻫﻨﮕﺎم ﻓﺸﺮدن دﻛﻤﻪ ‪ ،ok‬ﭘﻴﻐﺎﻣﻲ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪ .‬ﺑﻪ ﺑﻴﺎن دﻳﮕﺮ ﺑـﺎ ﻋﻤﻠﻜـﺮدي در ﺻـﻔﺤﻪ ﺗﻮﺳـﻂ‬
‫ﻛﺎرﺑﺮ ﻳﻚ ﻋﻜﺲ اﻟﻌﻤﻞ ﺗﻮﺳﻂ ﺑﺮﻧﺎﻣﻪ اﻳﺠﺎد ﻣﻲ ﺷﻮد‪.‬‬
‫در اﻳﻦ ﺑﺨﺶ ﻟﻴﺴﺘﻲ از روﻳﺪادﻫﺎي ﻛﻪ اﻣﻜﺎن اﺗﻔﺎق اﻓﺘﺎدن ﺑﺮ روي ﻳﻚ ﻣﺮورﮔﺮ را دارﻧﺪ آورده ﺷﺪه اﺳﺖ‪:‬‬

‫‪ onClick‬ﺑﺮاي ﻛﻠﻴﻚ ﻛﺮدن دﻛﻤﻪ ﭼﭗ ﻣﻮس ﺗﻮﺳﻂ ﻛﺎرﺑﺮ‪.‬‬

‫‪ onDblClick‬روﻳﺪاد ﺑﺮاي دوﺑﺎر ﻛﻠﻴﻚ دﻛﻤﻪ ﭼﭗ ﻣﻮس‪.‬‬
‫‪ onMouseDown‬زﻣﺎﻧﻴﻜﻪ دﻛﻤﻪ ﭼﭗ ﻣﻮس را ﭘﺎﻳﻴﻦ ﻧﮕﻪ ﻣﻲ دارﻳﻢ‪.‬‬
‫‪ onMouseUp‬رﻫﺎ ﻛﺮدن دﻛﻤﻪ ﻣﻮس ﭘﺲ از ﻓﺸﺮدن آن‪.‬‬
‫‪ onMouseOver‬ﻗﺮار ﮔﺮﻓﺘﻦ اﺷﺎره ﮔﺮ ﻣﻮس ﺑﺮ روي ﻳﻚ ﺷﻲ از ﺻﻔﺤﻪ‪.‬‬
‫‪ onMouseOut‬ﺧﺎرج ﺷﺪن اﺷﺎره ﮔﺮ ﻣﻮس از روي ﻳﻚ ﺷﻲ در ﺻﻔﺤﻪ‪.‬‬
‫‪ onKeyPress‬ﻓﺸﺮدن ﻳﻚ ﻛﻠﻴﺪ‪.‬‬
‫‪ onKeyDown‬زﻣﺎﻧﻴﻜﻪ ﻛﺎرﺑﺮ ﻳﻚ ﻛﻠﻴﺪ را ﭘﺎﻳﻴﻦ ﻧﮕﻪ ﻣﻲ دارد‪.‬‬
‫‪ onKeyUp‬رﻫﺎ ﻛﺮدن ﻳﻚ ﻛﻠﻴﺪ ﭘﺎﻳﻴﻦ ﻧﮕﻪ داﺷﺘﻪ ﺷﺪه‪.‬‬
‫‪ onFocus‬ﻫﻨﮕﺎﻣﻴﻜﻪ ﺗﻮﺳﻂ ﻣﻮس و ﻳﺎ دﻛﻤﻪ ‪ Tab‬ﺑﺮ روي ﻳﻜﻲ از اﺟﺰاي ﺻﻔﺤﻪ ﻣﺘﻤﺮﻛﺰ ﺷﻮﻳﺪ‪.‬‬
‫‪ onBlur‬ﻫﻨﮕﺎﻣﻴﻜﻪ ﺗﻤﺮﻛﺰ از روي ﻳﻜﻲ از اﺟﺰاي ﺻﻔﺤﻪ ﺧﺎرج ﺷﻮد‪.‬‬
‫‪ onSelect‬اﻧﺘﺨﺎب ﻛﺮدن ﻳﻚ ﻣﺘﻦ در ﺻﻔﺤﻪ ﻳﺎ در ﻳﻚ ‪.textbox‬‬
‫‪ onChange‬ﺗﻐﻴﻴﺮ در اﺟﺰاي ﻓﺮم‪ ،‬ﻣﺎﻧﻨﺪ ﺗﻐﻴﻴﺮ ﻣﺘﻦ در ‪.textbox‬‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ 2 ‫ ﻓﺼﻞ‬ 16

.‫ ﻓﺸﺮدن دﻛﻤﻪ ﺗﺄﻳﻴﺪ ﻳﻚ ﻓﺮم‬onSubmit

.‫ ﻳﺎ ﻫﻤﺎن ﭘﺎك ﻛﺮدن اﻃﻼﻋﺎت ﻓﺮم‬reset ‫ ﻓﺸﺮدن دﻛﻤﻪ‬onReset
.‫ ﺗﻜﻤﻴﻞ ﺷﺪن ﻳﻚ ﺻﻔﺤﻪ وب ﻳﺎ ﻳﻚ ﺗﺼﻮﻳﺮ در ﻣﺮورﮔﺮ‬onLoad
.‫ ﺑﺴﺘﻦ ﻣﺮورﮔﺮ ﻳﺎ ﺧﺮوج از ﻳﻚ ﺻﻔﺤﻪ وب‬onUnload
.‫ ﺗﻐﻴﻴﺮ اﻧﺪازه ﭘﻨﺠﺮه ﻣﺮورﮔﺮ‬onResize
.‫ اﻳﻦ روﻳﺪاد زﻣﺎﻧﻲ اﺟﺮا ﻣﻲ ﺷﻮد ﻛﻪ ﺑﺎر ﮔﺬاري ﻳﻚ ﺻﻔﺤﻪ ﻳﺎ ﻳﻚ ﺗﺼﻮﻳﺮ ﺑﻪ ﻣﺸﻜﻞ ﺑﺮﺧﻮرد ﻛﻨﻴﻢ‬onError
:‫ﺑﻪ ﻣﺜﺎل زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‬
<html>
<head>
<title> JavaScript Event Example </title>
</head>
<body onmousedown=”document.bgcolor=’pink’”>
<h1>
Click this page to turn it pink!
</h1>
</body>
</html>
.‫در اﻳﻦ ﻣﺜﺎل ﺑﺎ ﻓﺸﺮدن دﻛﻤﻪ ﻣﻮس رﻧﮓ زﻣﻴﻨﻪ ﺻﻔﺤﻪ ﺗﻐﻴﻴﺮ ﻣﻲ ﻛﻨﺪ‬
.‫ﭼﮕﻮﻧﮕﻲ اﺳﺘﻔﺎده از روﻳﺪادﻫﺎي ﻣﻮس را در ﻣﺜﺎل زﻳﺮ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‬
<html>
<head></head>
<body>
<h2>
Follow the instructions: <br> (Or double-click to get
help.)</h2>
<ul>
<a href="#" onMouseOver="alert('As you move over the
spot.');"> onMouseOver </a>
<p>
<a href="#" onMouseUp="alert('You have to press Down to get
Up');"> onMouseUp </a>
<p>
<a href="#" onMouseDown="alert('You can keep it down.');">
onMouseDown </a>
<p>
<a href="#" onClick="alert('Any click will do');"> onClick
</a>
<p>
<a href="#" onMouseOut="alert('First move over and then
off');"> onMouseOut </a>
<p>
<form>

<input type=button value ="onMouseMove"

‫ﻓﺼﻞ ‪17  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫‪onMouseMove="alert('Press enter or return--don\'t‬‬

‫>")'!‪move the mouse‬‬
‫>‪<p‬‬
‫>‪</ul‬‬
‫>‪</form‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﻣﺸﺎﻫﺪه ﺧﻄﺎﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬
‫در ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﻫﻤﻮاره اﻣﻜﺎن وﺟﻮد اﺷﺘﺒﺎه از ﻃﺮف ﺑﺮﻧﺎﻣـﻪ ﻧـﻮﻳﺲ وﺟـﻮد دارد‪ .‬ﺑﻄـﻮرﻛﻠﻲ در ﺑﺮﻧﺎﻣـﻪ ﻧﻮﻳـﺴﻲ دو‬
‫ﮔﻮﻧﻪ ﺧﻄﺎ وﺟﻮد دارد‪ -1:‬ﺧﻄﺎﻫﺎي ﮔﺮاﻣﺮي)‪ -2 (Syntax‬ﺧﻄﺎﻫﺎي ﻣﻨﻄﻘﻲ )‪(Logical‬‬
‫دﺳﺘﻪ اول ﺧﻄﺎﻫﺎي ﻫﺴﺘﻨﺪ ﻛﻪ از اﺳﺘﻔﺎده ﻧﺎدرﺳـﺖ از دﺳـﺘﻮرات زﺑـﺎن ﺑﺮﻧﺎﻣـﻪ ﻧﻮﻳـﺴﻲ و ﻳـﺎ رﻋﺎﻳـﺖ ﻧﻜـﺮدن ﻗﻮاﻋـﺪ‬
‫ﮔﺮاﻣﺮي زﺑﺎن ﺗﻮﻟﻴﺪ ﻣﻲ ﺷﻮﻧﺪ ﺑﻪ ﻣﺜﺎل زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>A First Script</title‬‬
‫>”‪<script language=”javascript‬‬
‫;)”‪docment.write(“You’re using JavaScript‬‬
‫>‪</script‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1>A First Script</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫زﻣﺎﻧﻴﻜﻪ ﺻﻔﺤﻪ ﺑﺎرﮔﺬاري ﻣﻲ ﺷﻮد ﻳﻚ ﻣﺜﻠﺚ زرد ﻛﻮﭼﻚ ﺑﺎ ﻳﻚ ﻋﻼﻣﺖ ﺗﻌﺠﺐ در ﺳـﻤﺖ ﭼـﭗ ﻧـﻮار وﺿـﻌﻴﺖ‬
‫ﻣﺮورﮔﺮ ‪ IE‬ﻗﺮار ﻣﻲ ﮔﻴﺮد ﻛﻪ ﻧﺸﺎن دﻫﻨﺪه وﺟﻮد ﺧﻄﺎي ﮔﺮاﻣﺮي در ﺑﺮﻧﺎﻣﻪ اﺳﺖ‪ .‬ﻛﺎﻓﻲ اﺳﺖ ﺑﺮاي ﻣﺸﺎﻫﺪه ﻋﻠـﺖ‬
‫ﺧﻄﺎ ﺑﺮ روي آن ﻣﺜﻠﺚ دوﺑﺎر ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪ ،‬ﻳﻚ ﭘﻨﺠﺮه در وﺳﻂ ﻣﺮورﮔﺮ ﺑـﺎز ﻣـﻲ ﺷـﻮدﻛﻪ در آن ﺟﺰﺋﻴـﺎت ﺧﻄـﺎي‬
‫اﻳﺠﺎد ﺷﺪه )ﺗﻮﺿﻴﺢ ﺧﻄﺎ و ﺷﻤﺎره ﺧﻂ وﺟﻮد ﺧﻄﺎ( را ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪ .‬ﻣﺎﻧﻨﺪ ﺷﻜﻞ ‪.2-1‬‬
‫دﺳﺘﻪ دﻳﮕﺮ ﺧﻄﺎﻫﺎ زﻣﺎﻧﻲ اﺳﺖ ﻛﻪ ﻣﻨﻄﻖ دﺳﺘﻮرات ﻏﻠﻂ اﺳﺖ در ﻧﺘﻴﺠﻪ ﺑﺎ اﺟﺮاي ﺑﺮﻧﺎﻣﻪ ﺑﻪ ﻫﺪف ﺑﺮﻧﺎﻣﻪ دﺳـﺖ ﭘﻴـﺪا‬
‫ﻧﻤﻲ ﻛﻨﻴﺪ و ﻳﺎ ﻣﻨﻄﻖ داده ﻫﺎ ﺑﺮاي ﻋﻤﻠﻴﺎت ﻏﻠﻂ اﺳﺖ ﻣﺎﻧﻨﺪ ﺗﻘﺴﻴﻢ ﻋﺪدي ﺑﺮ ﺻﻔﺮ‪ ،‬ﺑﻪ اﻳـﻦ ﮔﻮﻧـﻪ‪ ،‬ﺧﻄﺎﻫـﺎي ﻣﻨﻄﻘـﻲ‬
‫ﮔﻮﻳﻨﺪ‪.‬‬
‫ﻣﺘﻐﻴﺮﻫﺎ و اﻧﻮاع آن ﻫﺎ‬
‫ﻣﺘﻐﻴﺮ‪ ،‬اﺳﻤﻲ ﺑﺮاي ﺧﺎﻧﻪ ﻫﺎي ﺣﺎﻓﻈﻪ ‪ RAM‬اﺳﺖ ﻛﻪ ﺑﺮاي ﻧﮕﻬﺪاري اﻃﻼﻋﺎت ﺑـﻪ ﻛـﺎر ﻣـﻲ رود و ﻣﺤﺘﻮﻳـﺎت آن در‬
‫ﻃﻮل اﺟﺮاي ﺑﺮﻧﺎﻣﻪ ﻣﻤﻜﻦ اﺳﺖ ﺗﻐﻴﻴﺮ ﻛﻨﺪ‪ .‬ﺑﺮاي اﻧﺘﺨﺎب اﺳﺎﻣﻲ ﻣﺘﻐﻴﺮﻫﺎ‪ ،‬ﻣـﻲ ﺗـﻮان از ﺣـﺮوف ﺑـﺰرگ و ﻛﻮﭼـﻚ‬
‫اﻧﮕﻠﻴﺴﻲ‪ ،‬اﻋﺪاد و ﻛﺎراﻛﺘﺮ اﺳﺘﻔﺎده ﻧﻤﻮد‪ .‬اوﻟﻴﻦ ﻛﺎراﻛﺘﺮ اﺳﻢ اﻧﺘﺨﺎب ﺷـﺪه ﻧﺒﺎﻳـﺪ ﻋـﺪد ﺑﺎﺷـﺪ‪ .‬زﺑـﺎن ﺟﺎوااﺳـﻜﺮﻳﭙﺖ‬
‫ﻧﺴﺒﺖ ﺑﻪ ﺣﺮوف ﺣﺴﺎس اﺳﺖ‪ .‬ﻣﺜﻼ ﻣﺘﻐﻴﺮ ﺑﺎ اﺳﻢ ‪ counter‬ﺑﺎ ﻣﺘﻐﻴﺮ ‪ COUNTER‬ﻓﺮق داﺷـﺘﻪ و ﺑﺮاﺑـﺮ ﻧﻴـﺴﺘﻨﺪ‪ .‬در‬
‫اﻧﺘﺨﺎب اﺳﺎﻣﻲ ﻣﺘﻐﻴﺮﻫﺎ ﺣﻮﺻﻠﻪ ﺑﻪ ﺧﺮج دﻫﻴﺪ‪ ،‬از ﻧﺎم ﻫﺎﻳﻲ ﺑﻬﺮه ﮔﻴﺮﻳﺪ ﻛﻪ ﺑﺎ ﻣﻔﻬـﻮم ﻣﺘﻐﻴﺮﺗـﺎن ﻫﻤﺎﻫﻨـﮓ ﺑﺎﺷـﺪ‪ ،‬ﻛـﻪ‬
‫اﻳﻦ ﺑﺎﻋﺚ ﺧﻮاﻧﺎﺗﺮ ﺷﺪن ﺑﺮﻧﺎﻣﻪ ﺧﻮاﻫﺪ ﺷﺪ و در ﺻﻮرت ﺑﺮوز اﺷﻜﺎل در ﺑﺮﻧﺎﻣﻪ‪ ،‬ﻛﺎر ﻋﻴﺐ ﻳﺎﺑﻲ ﺳﺎده ﺗﺮ ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  18‬ﻓﺼﻞ ‪2‬‬

‫در ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺳﻪ ﻧﻮع داده ي ﻣﻮﺟﻮد ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻧﻮع داده ي ﻋﺪدي ﺑﺮاي ﻛﺎر ﺑﺎ اﻧﻮاع داده ﻫـﺎي از ﻧـﻮع ﻋـﺪد‪،‬‬
‫ﻧﻮع داده ي رﺷﺘﻪ ا ي ﺑﺮاي ﻛﺎر ﺑﺎ داده ﻫﺎي از ﻧﻮع ﻛﺎراﻛﺘﺮ‪ ،‬و ﻧـﻮع داده ي ﻣﻨﻄﻘـﻲ)‪ (boolean‬ﺑـﺮاي ﻛـﺎر ﺑـﺎ‬
‫داده ﻫﺎي ﺑﺎ ﻣﻘﺪارﻫﺎي ﻣﻨﻄﻘﻲ ‪ .True,False‬ﻧﻮع ﻣﺘﻐﻴﺮﻫﺎ در ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺮاﺑـﺮ ﺑـﺎ ﻧـﻮع داده اﻧﺘـﺴﺎﺑﻲ ﺑـﻪ آن‬
‫ﻣﺘﻐﻴﺮ ﻣﻲ ﺑﺎﺷﺪ‪.‬‬

‫ﺷﻜﻞ ‪ 2-1‬ﭘﻨﺠﺮه ﻧﻤﺎﻳﺶ ﺗﻮﺿﻴﺤﺎت ﺧﻄﺎ‬

‫ﺣﺎﻻ ﻣﻲ ﭘﺮدازﻳﻢ ﺑﻪ ﺟﺰﺋﻴﺎت ﺗﻌﺮﻳﻒ ﻳﻚ ﻣﺘﻐﻴﺮ در ﺟﺎوا اﺳﻜﺮﻳﭙﺖ‪:‬‬
‫‪var‬‬ ‫; ﻣﻘﺪاري ﺑﺮاي ﻣﺘﻐﻴﺮ = ﻧﺎم ﻣﺘﻐﻴﺮ‬
‫ﻣﻘﺪار اﻧﺘﺴﺎﺑﻲ ﻫﻢ ﺑﺮاي ﻣﻘﺪار دﻫﻲ ﺑﻪ ﻣﺘﻐﻴﺮ و ﻫﻢ ﺑﺮاي ﺗﻌﻴﻴﻦ ﻧﻮع ﻣﺘﻐﻴﺮ ﺑﻜﺎر ﻣﻲ رود‪ .‬ﻣﺎﻧﻨﺪ ﻣﺜﺎل ﻫﺎي زﻳﺮ‪:‬‬
‫‪1.‬‬ ‫‪var‬‬ ‫;‪item‬‬
‫‪2.‬‬ ‫‪var‬‬ ‫;‪price= 33.44‬‬
‫‪3.‬‬ ‫‪var‬‬ ‫;)‪wholeThing= 86.45 + (20 *7‬‬
‫‪4.‬‬ ‫‪var‬‬ ‫;"‪name="Willie B. Goode‬‬
‫‪5.‬‬ ‫‪var‬‬ ‫;"‪address "123 Elm Street‬‬
‫‪6.‬‬ ‫‪var‬‬ ‫‪subTotal=sumItems‬‬
‫‪7.‬‬ ‫‪var‬‬ ‫;"‪mixString= 11.86 + "Toy Cats‬‬
‫‪8.‬‬ ‫‪var‬‬ ‫)‪test = (alpha > beta‬‬

‫در ﺷﻤﺎره ‪ 1‬ﻳﻚ ﺗﻌﺮﻳﻒ ﻣﺘﻐﻴﺮ ﺑﺪون ﻣﻘﺪاردﻫﻲ دارﻳﻢ‪ ،‬ﺷﻤﺎره ‪ 2‬و‪ 3‬ﻣﺘﻐﻴـﺮ از ﻧـﻮع ﻋـﺪدي‪ 4 ،‬و‪ 6‬و‪ 7‬ﻣﺘﻐﻴـﺮ از ﻧـﻮع‬
‫رﺷﺘﻪ‪ ،‬ﺷﻤﺎره ‪ 6‬ﻣﺘﻐﻴﺮ از ﻧﻮع ﻳﻚ ﻣﺘﻐﻴﺮ دﻳﮕﺮ و ﻣﺘﻐﻴﺮ ﺷﻤﺎره ‪ 8‬از ﻧﻮع ‪ boolean‬اﺳﺖ‪.‬‬
‫اﺻﻄﻼح ‪ var‬از ﻛﻠﻤﻪ ‪ variable‬ﻣﻲ آﻳﺪ ﻛﻪ ﻧﻮﺷﺘﻦ آن اﺧﺘﻴﺎري ﻣﻲ ﺑﺎﺷـﺪ‪ ،‬ﻳﻌﻨـﻲ ﻣـﻲ ﺗﻮاﻧﻴـﺪ ﻳـﻚ ﻣﺘﻐﻴـﺮ را‬
‫ﺑﺪون ﻧﻮﺷﺘﻦ آن ﻫﻢ ﺗﻌﺮﻳﻒ ﻛﻨﻴﺪ وﻟﻲ اﮔﺮ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻛﺪﺗﺎن ﺧﻮاﻧﺎﺗﺮ ﺑﺎﺷﺪ ﺑﻬﺘﺮ اﺳﺖ ﻛﻪ از ‪ var‬اﺳـﺘﻔﺎده ﻛﻨﻴـﺪ‪.‬‬
‫ﻧﺎم ﻳﻚ ﻣﺘﻐﻴﺮ ﻧﻴﺎﻳﺪ از ﻛﻠﻤﺎت رزرو ﺷﺪه زﺑﺎن ﺑﺎﺷﺪ‪.‬‬

‫‪abstract‬‬ ‫‪final‬‬ ‫‪public‬‬

‫‪boolean‬‬ ‫‪finally‬‬ ‫‪return‬‬
‫‪break‬‬ ‫‪float‬‬ ‫‪short‬‬
‫‪byte‬‬ ‫‪for‬‬ ‫‪static‬‬
‫‪case‬‬ ‫‪function‬‬ ‫‪super‬‬
‫ﻓﺼﻞ ‪19  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫‪catch‬‬ ‫‪goto‬‬ ‫‪switch‬‬

‫‪char‬‬ ‫‪if‬‬ ‫‪synchronized‬‬
‫‪class‬‬ ‫‪implements‬‬ ‫‪this‬‬
‫‪const‬‬ ‫‪import‬‬ ‫‪throw‬‬
‫‪continue‬‬ ‫‪in‬‬ ‫‪throws‬‬
‫‪debugger‬‬ ‫‪instanceof‬‬ ‫‪transient‬‬
‫‪default‬‬ ‫‪int‬‬ ‫‪true‬‬
‫‪delete‬‬ ‫‪interface‬‬ ‫‪try‬‬
‫‪do‬‬ ‫‪long‬‬ ‫‪typeof‬‬
‫‪double‬‬ ‫‪native‬‬ ‫‪var‬‬
‫‪else‬‬ ‫‪new‬‬ ‫‪void‬‬
‫‪enum‬‬ ‫‪null‬‬ ‫‪volatile‬‬
‫‪export‬‬ ‫‪package‬‬ ‫‪while‬‬
‫‪extends‬‬ ‫‪private‬‬ ‫‪with‬‬
‫‪false‬‬ ‫‪protected‬‬
‫ﺟﺪول ‪ 2-1‬ﻛﻠﻤﺎت رزرو ﺷﺪه ي ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬
‫ﺗﺒﺪﻳﻞ ﻧﻮع‬
‫در ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻫﺮ ﻣﺘﻐﻴﺮ داراي ﭼﻨﺪ ﻣﺘﺪ ﺑﻄﻮر ﭘﻴﺶ ﻓﺮض اﺳﺖ ﻛﻪ ﺑﺮاي ﺗﺒﺪﻳﻞ ﻧﻮع ﻛﺎرﺑﺮد دارﻧﺪ‪.‬‬
‫ﺗﺒﺪﻳﻞ ﺑﻪ رﺷﺘﻪ‬
‫ﻣﺘﻐﻴﺮﻫﺎ ﺑﺎ اﻧﻮاع ﻣﺨﺘﻠﻒ ﻗﺎﺑﻞ ﺗﻐﻴﻴﺮ ﺑﻪ ﻧﻮع رﺷﺘﻪ اي ﺑﺎ ﻣﺘﺪ )(‪ toString‬ﻣﻲ ﺑﺎﺷﻨﺪ‪ .‬ﺑﻪ ﻣﺜﺎل زﻳﺮ دﻗﺖ ﻛﻨﻴﺪ‪:‬‬
‫‪var bfoung = false‬‬
‫;))(‪alert(bfound.toString‬‬ ‫ﺧﺮوﺟﻲ‪//‬‬ ‫"‪"false‬‬

‫;‪var iNum = 10‬‬

‫;‪var fNum = 10.0‬‬
‫;))(‪alert(iNum.toString‬‬ ‫ﺧﺮوﺟﻲ ‪//‬‬ ‫"‪"10‬‬
‫;))(‪alert(fNum.toString‬‬ ‫"‪ "10‬ﺧﺮوﺟﻲ‪//‬‬
‫ﻣﺘﺪ )(‪ toString‬ﺑﻄﻮر ﭘﻴﺶ ﻓﺮض اﻋﺪاد را در ﻣﺒﻨﺎي ‪ 10‬ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ وﻟﻲ ﻣﻲ ﺗﻮاﻧﻴـﺪ ﺑـﺎ ﻣـﺸﺨﺺ ﻛـﺮدن‬
‫ﻣﺒﻨﺎي ﻣﻮرد ﻧﻈﺮ ﺑﻌﻨﻮان ﭘﺎراﻣﺘﺮ اﻳﻦ ﻣﺘﺪ‪ ،‬اﻋﺪاد را ﺑﺼﻮرت رﺷﺘﻪ اي ﺑﻪ ﻣﺒﻨﺎي دﻟﺨﻮاه ﺗﺒﺪﻳﻞ ﻧﻤﺎﻳﺪ‪.‬‬
‫;‪var iNum = 10‬‬
‫;))‪alert(iNum.toString(2‬‬ ‫ﺧﺮوﺟﻲ ‪//‬‬ ‫"‪"1010‬‬
‫;))‪alert(iNum.toString(8‬‬ ‫ﺧﺮوﺟﻲ ‪//‬‬ ‫"‪"12‬‬
‫;))‪alert(iNum.toString(16‬‬ ‫ﺧﺮوﺟﻲ ‪//‬‬ ‫"‪"A‬‬
‫ﺗﺒﺪﻳﻞ ﺑﻪ ﻋﺪد‬
‫ﺑﺮاي ﺗﺒﺪﻳﻞ ﻧﻮع رﺷﺘﻪ ﺑﻪ ﻧﻮع ﻋﺪدي از دو ﻣﺘﺪ )(‪ parseInt‬و )(‪ parseFloat‬اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬
‫ﻣﺘﺪ )(‪ parseInt‬از ﻛﺎراﻛﺘﺮ ﻣﻮﻗﻌﻴﺖ ﺻﻔﺮ رﺷﺘﻪ ﺷﺮوع ﻣﻲ ﻛﻨﺪ و آن را ﺑﺮرﺳﻲ ﻣﻲ ﻛﻨﺪ اﮔﺮ ﻛﺎراﻛﺘﺮ ﻋﺪدي‬
‫ﻧﺒﺎﺷﺪ ﻣﻘﺪار ‪ NaN‬را ﺑﺮﻣﻲ ﮔﺮداﻧﺪ و ﻛﺎر ﺧﺎﺗﻤﻪ ﻣﻲ ﻳﺎﺑﺪ‪ .‬اﮔﺮ ﻋﺪدي ﺑﺎﺷﺪ ﺗﺎ زﻣﺎﻧﻴﻜﻪ ﺑﺎ ﻳﻚ ﻛـﺎراﻛﺘﺮ ﻏﻴـﺮ ﻋـﺪدي‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  20‬ﻓﺼﻞ ‪2‬‬

‫ﺑﺮﺳﺪ ﻳﻚ ﻛﺎراﻛﺘﺮ‪ ،‬ﻳﻚ ﻛﺎراﻛﺘﺮ ﻣﻲ ﺧﻮاﻧﺪ و ﺑﻪ ﻋﺪد ﺗﺒﺪﻳﻞ ﻣﻲ ﻛﻨﺪ‪ ،‬و زﻣﺎﻧﻲ ﻛﻪ ﺑﻪ ﻛﺎراﻛﺘﺮ ﻏﻴـﺮ ﻋـﺪدي ﺑﺮﺳـﺪ‬
‫ﻋﻤﻠﻴﺎت ﻣﺘﻮﻗﻒ ﻣﻲ ﺷﻮد و ﻋﺪد را ﺑﺮ ﻣﻲ ﮔﺮداﻧﺪ‪.‬‬
‫‪var‬‬ ‫‪iNum1‬‬ ‫=‬ ‫;)'‪parseInt('1234blue‬‬ ‫‪//‬‬ ‫‪1234‬‬
‫‪var‬‬ ‫‪iNum2‬‬ ‫=‬ ‫;)'‪parseInt('1234‬‬ ‫‪//‬‬ ‫‪1234‬‬
‫‪var‬‬ ‫‪iNum3‬‬ ‫=‬ ‫;)'‪parseInt('0XA‬‬ ‫‪//‬‬ ‫‪10‬‬
‫‪var‬‬ ‫‪iNum4‬‬ ‫=‬ ‫;)'‪parseInt('22.5‬‬ ‫‪//‬‬ ‫‪22‬‬
‫‪var‬‬ ‫‪iNum5‬‬ ‫=‬ ‫;)'‪parseInt('blue‬‬ ‫‪//‬‬ ‫‪NaN‬‬

‫اﻳﻦ ﻣﺘﺪ ﻫﻤﭽﻨﻴﻦ ﻣﻲ ﺗﻮاﻧﺪ اﻋﺪاد را ﺑﻪ ﻣﺒﻨﺎي ﻣﺘﻔﺎوت ﺗﺒﺪﻳﻞ ﻛﻨﺪ‪ .‬ﻛﺎﻓﻴﺴﺖ در ﭘﺎراﻣﺘﺮ دوم اﻳﻦ ﻣﺘﺪ ﻣﺒﻨﺎي ﻣﻮرد ﻧﻈـﺮ‬
‫ﻧﻮﺷﺘﻪ ﺷﻮد‪.‬‬
‫;)‪var iNum1 = parseInt('AF',16‬‬ ‫‪// 175‬‬
‫;)‪var iNum2 = parseInt('10',2‬‬ ‫‪// 2‬‬
‫;)‪var iNum3 = parseInt('10'8‬‬ ‫‪// 8‬‬
‫ﻣﺘﺪ )(‪ parseFloat‬ﺑﺮاي ﺗﺒﺪﻳﻞ ﻧﻮع رﺷﺘﻪ ي ﺑﻪ اﻋﺪاد اﻋﺸﺎري ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫‪var‬‬ ‫‪fNum1‬‬ ‫=‬ ‫;)'‪parseFloat('1234blue‬‬ ‫‪// 1234.0‬‬
‫‪var‬‬ ‫‪fNum2‬‬ ‫=‬ ‫;)'‪parseFloat('0XA‬‬ ‫‪// NaN‬‬
‫‪var‬‬ ‫‪fNum3‬‬ ‫=‬ ‫;)'‪parseFloat('22.5‬‬ ‫‪// 22.5‬‬
‫‪var‬‬ ‫‪fNum4‬‬ ‫=‬ ‫;)'‪parseFloat('blue‬‬ ‫‪// NaN‬‬
‫ﻋﻤﻠﮕﺮ‬
‫ﻋﻤﻠﮕﺮﻫﺎ )‪ (operator‬ﻛﺎراﻛﺘﺮي ﺑﺮاي ﻧﺸﺎن دادن ﻳﻚ ﻋﻼﻣﺖ ﻣﺸﺨﺺ ﻫﺴﺘﻨﺪ ﻛﻪ ﻫﺮ ﻛﺪام از آن ﻫﺎ وﻇﻴﻔـﻪ‬
‫ﺧﺎﺻﻲ دارﻧﺪ‪.‬‬
‫اﻧﻮاع ﻋﻤﻠﮕﺮﻫﺎ‬
‫ﻋﻤﻠﮕﺮﻫﺎ ﺑﻪ ﭼﻨﺪ دﺳﺘﻪ ﺗﻘﺴﻴﻢ ﻣﻲ ﺷﻮﻧﺪ‪:‬‬
‫ﻋﻤﻠﮕﺮﻫﺎي ﻣﺤﺎﺳﺒﺎﺗﻲ )‪(Operators Arithmetic‬‬
‫اﻳﻦ ﻧﻮع ﻋﻤﻠﮕﺮﻫﺎ ﭼﻬﺎر ﻋﻤﻞ اﺻﻠﻲ ﻣﺤﺎﺳﺒﺎت را اﻧﺠﺎم ﻣﻲ دﻫﻨﺪ‪ .‬ﻋﻼوه ﺑﺮ آن ﻫﺎ ﻳﻚ ﻋﻤﻠﮕﺮ وﻇﻴﻔﻪ ﻧﻤﺎﻳﺶ ﺑـﺎﻗﻲ‬
‫ﻣﺎﻧﺪه ﻳﻚ ﺗﻘﺴﻴﻢ را ﺑﻌﻬﺪه دارد و دو ﻋﻤﻠﮕﺮ دﻳﮕﺮ ﻫﺮ ﻛﺪام ﺑﻪ ﺗﺮﺗﻴﺐ ﻳﻚ واﺣﺪ ﺑـﻪ ﻋﻤﻠﻮﻧـﺪ ﺧـﻮد اﺿـﺎﻓﻪ و ﻳـﻚ‬
‫واﺣﺪ از ﻋﻤﻠﻮﻧﺪ ﺧﻮد ﻛﻢ ﻣﻲ ﻛﻨﻨﺪ ﻛﻪ در ﺟﺪول ‪ 2-2‬ﻣﺸﺨﺺ ﺷﺪه اﻧﺪ‪.‬‬
‫ﻧﺘﻴﺠﻪ‬ ‫ﻣﺜﺎل‬ ‫ﺗﻮﺻﻴﻒ‬ ‫ﻋﻤﻠﮕﺮ‬
‫‪4‬‬ ‫‪x = 2, y = 2‬‬ ‫ﺟﻤﻊ‬ ‫‪+‬‬
‫‪x+y‬‬
‫‪2‬‬ ‫‪x = 5 , y = 3‬‬ ‫ﺗﻔﺮﻳﻖ‬ ‫‪-‬‬
‫‪x - y‬‬
‫‪20‬‬ ‫‪x = 5 , y = 4‬‬ ‫ﺿﺮب‬ ‫*‬
‫‪x * y‬‬
‫‪5‬‬ ‫‪x = 20 , y = 4‬‬ ‫ﺗﻘﺴﻴﻢ‬ ‫‪/‬‬
‫‪x / y‬‬
‫‪3‬‬ ‫‪x = 19 , y = 4‬‬ ‫ﺑﺎﻗﻲ ﻣﺎﻧﺪه‬ ‫‪%‬‬
‫‪x % y‬‬
‫‪X=6‬‬ ‫‪x = 5‬‬ ‫اﻓﺰاﻳﺶ‬ ‫‪++‬‬
‫‪x++‬‬
‫ﻓﺼﻞ ‪21  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫‪X=5‬‬ ‫‪x = 5‬‬ ‫ﻛﺎﻫﺶ‬ ‫‪--‬‬

‫‪x--‬‬
‫ﺟﺪول ‪ 2-2‬ﻋﻤﻠﮕﺮﻫﺎي ﻣﺤﺎﺳﺒﺎﺗﻲ‬
‫ﻋﻤﻠﮕﺮﻫﺎي دﻳﮕﺮ ﻛﻪ ﺑﻪ ﻧﺎم ﻋﻤﻠﮕﺮﻫﺎي اﻧﺘـﺴﺎﺑﻲ )‪ (Operators Assignment‬ﻣﻌـﺮوف ﻫـﺴﺘﻨﺪ ﻛـﻪ ﻳـﻚ‬
‫ﻣﻘﺪاري را ﺑﻪ ﻳﻚ ﻣﺘﻐﻴﺮ ﻧﺴﺒﺖ ﻣﻲ دﻫﻨﺪ‪ .‬اﻳﻦ ﻋﻤﻠﮕﺮﻫﺎ ﺑﺮاي ﺧﻼﺻﻪ ﻧﻮﻳﺴﻲ در ﻋﺒﺎرات اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ‪.‬‬

‫ﺑﺮاﺑﺮ اﺳﺖ ﺑﺎ‬ ‫ﻣﺜﺎل‬ ‫ﻋﻤﻠﮕﺮﻫﺎ‬

‫‪x = y‬‬ ‫‪x = y‬‬ ‫=‬
‫‪x = x + y‬‬ ‫‪x + = y‬‬ ‫= ‪+‬‬
‫‪x = x - y‬‬ ‫‪x - = y‬‬ ‫= ‪-‬‬
‫‪x = x * y‬‬ ‫‪x * = y‬‬ ‫= *‬
‫‪x = x / y‬‬ ‫‪x * = y‬‬ ‫=‪/‬‬
‫‪x = x % y‬‬ ‫‪x %= y‬‬ ‫=‪%‬‬
‫ﺟﺪول ‪ 2-3‬ﻋﻤﻠﮕﺮﻫﺎي اﻧﺘﺴﺎﺑﻲ‬
‫ﻋﻤﻠﮕﺮﻫﺎي ﻣﻘﺎﻳﺴﻪ اي‬
‫اﻳﻦ ﻧﻮع ﻋﻤﻠﮕﺮﻫﺎ ﻣﻘﺪارﻫﺎي دو ﻣﺘﻐﻴﺮ را ﺑﺎ ﻳﻜﺪﻳﮕﺮ ﻣﻘﺎﻳﺴﻪ ﻣﻲ ﻛﻨﻨﺪ و ﻧﺘﻴﺠﻪ اﻳﻦ ﻣﻘﺎﻳﺴﻪ ﻳﺎ درﺳﺖ اﺳـﺖ ﻳـﺎ ﻏﻠـﻂ‬
‫ﻛﻪ در دﺳﺘﻮرات ﺷﺮﻃﻲ ﺑﺴﻴﺎر ﻛﺎرﺑﺮد دارﻧﺪ‪.‬‬
‫ﻋﻤﻠﮕﺮﻫﺎي ﻣﻨﻄﻘﻲ‬
‫در اﻳﻦ ﺑﺨﺶ ﺳﻪ ﻧﻮع ﻋﻤﻠﮕﺮ وﺟﻮد دارﻧﺪ ﻛﻪ در ﺣﻘﻴﻘﺖ ﻳﻚ ﻳﺎ ﭼﻨﺪ ﻧﺘﻴﺠﻪ را ﺑﺮرﺳﻲ ﻣﻲ ﻛﻨﻨﺪ و ﺟﻮاب را ﺑـﺎزﻣﻲ‬
‫ﮔﺮداﻧﻨﺪ‪ .‬اﻳﻦ ﻋﻤﻠﮕﺮﻫﺎ ﺑﻪ اﻳﻦ ﺷﻜﻞ ﻣﻲ ﺑﺎﺷﻨﺪ‪:‬‬
‫! ‪&& , || ,‬‬
‫ﻋﻤﻠﮕﺮ && ﻛﻪ ﻋﻤﻠﮕﺮي ﺑﺮاي ﻋﻤﻠﻴﺎت ‪ and‬اﺳﺖ‪.‬‬
‫‪x = 5‬‬
‫‪y = 3‬‬
‫)‪( x < 10 && y > 1‬‬

‫ﻣﺜﺎل‬ ‫ﺗﻮﺻﻴﻒ‬ ‫ﻋﻤﻠﮕﺮﻫﺎ‬

‫‪x = 5 , y=5‬‬ ‫ﻣﻘﺎدﻳﺮ اﮔﺮ ﺑﺮاﺑﺮ ﺑﺎﺷـﻨﺪ ﻧﺘﻴﺠـﻪ درﺳـﺖ‬ ‫==‬
‫‪x == y‬‬
‫ﺧﻮاﻫﺪ ﺑﻮد‪.‬‬
‫"‪x=5,y = "5‬‬ ‫ﻣﻘﺎﻳﺴﻪ ﺑﻴﻦ ﻣﻘﺎدﻳﺮ و ﺟـﻨﺲ ﻣﺘﻐﻴـﺮ ﻛـﻪ‬ ‫===‬

‫‪x === y‬‬ ‫در ﻣﺜﺎل روﺑﺮو ﻧﺘﻴﺠﻪ ﻏﻠﻂ ﺑﺎزﮔﺮداﻧـﺪه‬

‫ﻣﻲ ﺷﻮد‬
‫‪5 != 8‬‬ ‫اﮔﺮ ﻣﻘﺎدﻳﺮ ﺑﺮاﺑﺮ ﻧﺒﺎﺷﻨﺪ ﻧﺘﻴﺠـﻪ درﺳـﺖ‬ ‫=!‬

‫اﺳﺖ‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  22‬ﻓﺼﻞ ‪2‬‬

‫‪8 > 5‬‬ ‫ﺑﺰرﮔﺘﺮ‬ ‫>‬

‫‪8 < 10‬‬ ‫ﻛﻮﭼﻜﺘﺮ‬ ‫<‬
‫‪5 >= 8‬‬ ‫ﺑﺰرﮔﺘﺮ ﻳـﺎ ﻣـﺴﺎوي ﻛـﻪ در اﻳـﻦ ﻣﺜـﺎل‬ ‫=>‬

‫ﻧﺘﻴﺠﻪ ﻏﻠﻂ اﺳﺖ‬

‫‪5 <= 8‬‬ ‫ﻛﻮﭼﻜﺘﺮ ﻳﺎ ﻣـﺴﺎوي ﻛـﻪ در اﻳـﻦ ﻣﺜـﺎل‬ ‫=<‬

‫ﻧﺘﻴﺠﻪ درﺳﺖ اﺳﺖ‬

‫ﺟﺪول ‪ 2-4‬ﻋﻤﻠﮕﺮﻫﺎي ﻣﻘﺎﻳﺴﻪ اي‬
‫در اﻳﻨﺠﺎ اﮔﺮ ﻣﻘﺪار ﻣﺘﻐﻴﺮ ‪ x‬ﻛﻮﭼﻜﺘﺮ از ﻋﺪد ‪ 10‬ﺑﺎﺷﺪ و ‪ y‬ﺑﺰرﮔﺘﺮ از ‪ 1‬ﺑﺎﺷﺪ‪ ،‬ﻧﺘﻴﺠﻪ ‪ true‬ﺑﺎزﮔﺮداﻧﺪه ﻣـﻲ ﺷـﻮد‪.‬‬
‫ﭼﻮن ‪ and‬آﻣﺪه اﺳﺖ ﭘﺲ ﺑﺎﻳﺪ دو ﻃﺮف ﻋﻤﻠﮕﺮ ﺟﻮاب درﺳﺖ ﺑﺎﺷﺪ ﺗﺎ در ﻣﺠﻤﻮع ﻧﺘﻴﺠﻪ درﺳﺖ ﺑﺎﺷﺪ‪.‬‬
‫ﻋﻤﻠﮕﺮ || ﻛﻪ ﻋﻤﻠﮕﺮي ﺑﺮاي ﻋﻤﻠﻴﺎت ‪ or‬اﺳﺖ‪.‬‬
‫‪x = 6‬‬
‫‪y = 3‬‬
‫) ‪( x == 5 || y == 5‬‬
‫ﺣﺪاﻗﻞ ﻳﻜﻲ از ﻃﺮﻓﻴﻦ ﻋﻤﻠﮕﺮ ﺑﺎﻳﺪ درﺳﺖ ﺑﺎﺷﺪ ﺗﺎ ﻧﺘﻴﺠﻪ درﺳﺖ ﺑﺎﺷﺪ‪.‬‬
‫ﻋﻤﻠﮕﺮ! در ﺣﻘﻴﻘﺖ ﻳﻚ ﻋﻤﻠﻴﺎت و ﻣﻌﺎدﻟﻪ را ﺑﺮرﺳﻲ ﻣﻲ ﻛﻨﺪ اﮔﺮ ﺟﻮاب آن ﻣﻌﺎدﻟﻪ درﺳﺖ ﻧﺒﺎﺷﺪ ﻧﺘﻴﺠﻪ ‪ true‬ﻳﺎ‬
‫ﻫﻤﺎن درﺳﺖ را ﺑﺮﻣﻲ ﮔﺮداﻧﺪ‪:‬‬
‫‪x = 5‬‬
‫‪y = 4‬‬
‫) ‪! ( x == y‬‬
‫ﻛﺎرﺑﺮد ﻋﻤﻠﮕﺮﻫﺎ‬
‫ﻋﻤﻠﮕﺮ ﺟﻤﻊ در رﺷﺘﻪ ﻫﺎ ﺑﺮاي اﻟﺤﺎق دو رﺷﺘﻪ ﺑﻜﺎر ﻣﻲ رود‪.‬‬
‫;'‪Msg = 'this'+' is text‬‬
‫ﺑﺮ ﺧﻼف ﺟﻤﻊ دو ﻣﺘﻐﻴﺮ رﺷﺘﻪ اي‪ ،‬ﺗﻔﺮﻳﻖ دو ﻣﺘﻐﻴﺮ رﺷﺘﻪ اي اﻣﻜﺎن ﭘﺬﻳﺮ ﻧﻴﺴﺖ و در ﺻﻮرت ﺗﻔﺮﻳﻖ‪ ،‬در ﻫﺮ ﺣﺎﻟـﺖ‪،‬‬
‫ﺣﺎﺻﻞ ﺑﺮاﺑﺮ ﺑﺎ رﺷﺘﻪ ‪ NaN‬ﺑﻪ ﻣﻌﻨﻲ ‪ Not a Number‬ﺧﻮاﻫﺪ ﺑﻮد‪ .‬اﻳﻦ ﺧﺎﺻﻴﺖ ﺷﺎﻣﻞ ﺗﻔﺮﻳﻖ ﻳـﻚ ﻣﺘﻐﻴـﺮ رﺷـﺘﻪ‬
‫اي از ﻋﺪدي و ﺑﺎﻟﻌﻜﺲ ﻣﻲ ﺑﺎﺷﺪ‪ .‬در ﺗﻔﺮﻳـﻖ ﻣﺘﻐﻴـﺮ ﻫـﺎي »ﻣﻨﻄﻘـﻲ« ‪ True‬ﻣﻔﻬـﻮم ‪)1‬ﻳـﻚ( و ‪ False‬ﻣﻔﻬـﻮم ‪0‬‬
‫)ﺻﻔﺮ( ﺧﻮاﻫﺪ داﺷﺖ‪ .‬ﺑﻪ ﻣﺜﺎل زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬
‫‪a=true‬‬
‫‪b=false‬‬
‫‪c=a-b‬‬
‫‪d=b-a‬‬
‫در ﻧﺘﻴﺠﻪ ﺧﻮاﻫﻴﻢ داﺷﺖ‪ c=1-0=1 :‬و ﻫﻤﭽﻨﻴﻦ ‪ d=0-1=-1‬در اﻳﻦ ﻣﻮرد ‪ a-b‬و ‪ b-a‬ﺑﺎ ﻫﻢ ﻣﺘﻔﺎوﺗﻨﺪ‪.‬‬
‫ﻋﻤﻠﮕﺮ ﺿﺮب‪ :‬ﺑﺮاي اﻧﺠﺎم ﻋﻤﻞ ﺿﺮب از '*' اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﻢ‪ .‬در اﻳﻦ ﺣﺎﻟﺖ ﻣﻲ ﺗﻮان ﺑـﻪ ﺿـﺮب دو ﻋـﺪد )ﭼـﻪ‬
‫ﺻﺤﻴﺢ و ﭼﻪ اﻋﺸﺎري( اﺷﺎره ﻧﻤﻮد‪ .‬در ﺻﻮرت ﺿﺮب دو ﻣﺘﻐﻴﺮ رﺷـﺘﻪ اي ﻳـﺎ ﻳـﻚ ﻣﺘﻐﻴـﺮ رﺷـﺘﻪ اي در ﻳـﻚ ﻣﺘﻐﻴـﺮ‬
‫ﻋﺪدي ﺣﺎﺻﻞ رﺷﺘﻪ ‪ NaN‬ﺧﻮاﻫﺪ ﺑﻮد‪ .‬ﭘﺲ ﻧﻤﻲ ﺗﻮان ﻣﺘﻐﻴﺮ رﺷﺘﻪ اي را در ﻫﻴﭻ ﻧﻮع ﻣﺘﻐﻴﺮ دﻳﮕﺮ ﺿﺮب ﻧﻤﻮد‪.‬‬
‫ﻓﺼﻞ ‪23  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫در ﺿﺮب ﻣﺘﻐﻴﺮ ﻫﺎي ﻣﻨﻄﻘﻲ ﺳﻪ ﺣﺎﻟﺖ ﭘﻴﺶ ﻣﻲ آﻳﺪ‪:‬‬

‫‪ -1‬در ﺻﻮرت ﺿﺮب دو ﻣﺘﻐﻴﺮ ﻣﻨﻄﻘﻲ ‪ ،True‬ﺣﺎﺻﻞ ‪ 1‬ﺧﻮاﻫﺪ ﺑﻮد‪.‬‬
‫‪ -2‬ﺿﺮب دو ﻣﺘﻐﻴﺮ ﻣﻨﻄﻘﻲ ‪ false‬ﻧﻴﺰ ﺣﺎﺻﻞ ﺻﻔﺮ ﺧﻮاﻫﺪ داﺷﺖ‪.‬‬
‫‪ -3‬در ﺿﺮب ﻳﻚ ﻣﺘﻐﻴﺮ ﻣﻨﻄﻘﻲ ‪ True‬در ﻳﻚ ﻣﺘﻐﻴﺮ ‪ ،False‬ﺟﻮاب ﺻﻔﺮ ﺑﺪﺳﺖ ﺧﻮاﻫﺪ آﻣﺪ‪.‬‬
‫ﻧﺘﻴﺠﻪ اﻳﻨﻜﻪ در ﺿﺮب ﻣﺘﻐﻴﺮ ﻫﺎي ﻣﻨﻄﻘﻲ ﻓﻘﻂ دو ﺟﻮاب ‪ 0‬و‪ 1‬ﺧﻮاﻫﻴﺪ داﺷﺖ و ﻓﻘـﻂ در ﺻـﻮرﺗﻲ ﺟـﻮاب ﺑﺮاﺑـﺮ ‪1‬‬
‫ﺧﻮاﻫﺪ ﺑﻮد ﻛﻪ ﻫﻴﭻ ﻣﺘﻐﻴﺮ ‪ False‬ي در ﺿﺮب ﺷﺮﻛﺖ ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬
‫ﻋﻤﻠﮕﺮ ﺗﻘﺴﻴﻢ‪ :‬ﻋﻤﻠﮕﺮي ﻛﻪ ﻣﻲ ﺗﻮان ﺑﺎ اﺳﺘﻔﺎده از آن ﻋﻤﻞ ﺗﻘﺴﻴﻢ را اﻧﺠﺎم داد'‪ '/‬اﺳﺖ‪.‬‬
‫‪ -‬زﺑﺎن ﺟﺎوااﺳﻜﺮﻳﭙﺖ در ﺣﺎﻟﺖ اﻋﺸﺎري ﻓﻘﻂ ﺗﺎ ‪ 16‬رﻗﻢ اﻋﺸﺎري را ﻣﺤﺎﺳﺒﻪ ﻣﻲ ﻛﻨﺪ‪.‬‬
‫‪ -‬در ﻋﻤﻞ ﺗﻘﺴﻴﻢ ﻫﺮ ﻋﺪدي ﺑﺮ ﻋﺪد ﺻﻔﺮ‪ ،‬ﺣﺎﺻﻞ ﺑﺮاﺑﺮ ﺑﺎ رﺷﺘﻪ ‪ Infinity‬ﺑﻪ ﻣﻌﻨﻲ ﺑﻲ ﻧﻬﺎﻳﺖ ﺧﻮاﻫﺪ ﺑﻮد‪.‬‬
‫در ﺗﻘﺴﻴﻢ ﻳﻚ ﻣﺘﻐﻴﺮ رﺷﺘﻪ اي ﺑﻪ ﻳﻚ ﻣﺘﻐﻴﺮ ﻋﺪدي و ﺑﺎﻟﻌﻜﺲ ﺣﺎﺻﻞ ﺑﺮاﺑﺮ ﺑـﺎ ‪ NaN‬ﺧﻮاﻫـﺪ ﺑـﻮد‪ .‬در ﺗﻘـﺴﻴﻢ ﻣﺘﻐﻴـﺮ‬
‫ﻫﺎي ﻣﻨﻄﻘﻲ‪ ،‬ﺣﺎﻟﺖ ﻫﺎي زﻳﺮ ﺑﻪ وﺟﻮد ﻣﻲ آﻳﺪ‪:‬‬
‫‪ -‬در ﺗﻘﺴﻴﻢ ﻳﻚ ﻣﺘﻐﻴﺮ ﻣﻨﻄﻘﻲ ‪ True‬ﺑﺮ ‪ True‬ﺣﺎﺻﻞ ﺑﺮاﺑﺮ ﺑﺎ ‪ 1‬ﺧﻮاﻫﺪ ﺑﻮد‬
‫‪ -‬در ﺗﻘﺴﻴﻢ ﻳﻚ ﻣﺘﻐﻴﺮ ﻣﻨﻄﻘﻲ ‪ True‬ﺑﺮ ‪ False‬ﺣﺎﺻﻞ ﺑﺮاﺑﺮ ﺑﺎ رﺷﺘﻪ ‪Infinity‬ﺧﻮاﻫﺪ ﺑﻮد‬
‫‪ -‬در ﺗﻘﺴﻴﻢ ﻳﻚ ﻣﺘﻐﻴﺮ ﻣﻨﻄﻘﻲ ‪ False‬ﺑﺮ ‪ True‬ﺣﺎﺻﻞ ﺑﺮاﺑﺮ ﺑﺎ ﺻﻔﺮ ﺧﻮاﻫﺪ ﺑﻮد‬
‫‪ -‬در ﺗﻘﺴﻴﻢ ﻳﻚ ﻣﺘﻐﻴﺮ ﻣﻨﻄﻘﻲ ‪ False‬ﺑﺮ ‪ False‬ﺣﺎﺻﻞ ﺑﺮاﺑﺮ ﺑﺎ رﺷﺘﻪ ‪ Infinity‬ﺧﻮاﻫﺪ ﺑﻮد‬
‫دﺳﺘﻮرات ﻛﻨﺘﺮﻟﻲ‬
‫اﮔﺮ ﺑﺨﻮاﻫﻴﻢ ﺗﺤﺖ ﺷﺮاﻳﻄﻲ‪ ،‬ﺗﻌﺪادي از دﺳﺘﻮرات اﺟﺮا ﺷﻮﻧﺪ و ﻳﺎ ﺗﻌﺪادي دﻳﮕﺮ از دﺳﺘﻮرات اﺟﺮا ﻧﺸﻮﻧﺪ‪ ،‬ﺑﺎﻳـﺪ از‬
‫ﺳﺎﺧﺘﺎرﻫﺎي ﺗﺼﻤﻴﻢ اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬اﻳﻦ ﺳـﺎﺧﺘﺎرﻫﺎ‪ ،‬ﺷـﺮﻃﻲ را ﺑﺮرﺳـﻲ ﻣـﻲ ﻛﻨـﺪ در ﺻـﻮرت درﺳـﺖ ﺑـﻮدن ﺷـﺮط‪،‬‬
‫ﻣﺠﻤﻮﻋﻪ اي از دﺳﺘﻮرات را اﻧﺠﺎم ﻣﻲ دﻫﻨﺪ‪.‬‬
‫دﺳﺘﻮر ‪if‬‬
‫ﺳﺎﺧﺘﺎر ‪ if‬ﻛﻪ ﻧﺎم دﻳﮕﺮش‪ ،‬دﺳﺘﻮر اﻧﺘﻘﺎل ﻛﻨﺘﺮل ﺷﺮﻃﻲ اﺳـﺖ‪ ،‬ﺷـﺮﻃﻲ را ﺗـﺴﺖ ﻣـﻲ ﻛﻨـﺪ و در ﺻـﻮرﺗﻲ ﻛـﻪ آن‬
‫ﺷﺮط داراي ارزش درﺳﺘﻲ ﺑﺎﺷﺪ‪ ،‬ﻣﺠﻤﻮﻋﻪ اي از دﺳﺘﻮرات را اﺟﺮا ﻣﻲ ﻛﻨﺪ‪.‬‬
‫ﺑﻪ ﻛﺪ زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬

‫>"‪<script language="javascript" type="text/javascript‬‬

‫‪...‬‬
‫) ‪if ( condition‬‬
‫{‬
‫‪//...‬‬
‫}‬
‫‪...‬‬
‫>‪</script‬‬
‫ﭼﻨﺎﻧﭽﻪ ‪ ،condition‬ﻳﻚ ﻋﺒﺎرت ﺑﺎ ﻣﻨﻄﻖ ‪ true‬ﺑﺎﺷﺪ دﺳﺘﻮرات ﻣﺎﺑﻴﻦ ﺑﻠﻮك }…{ اﺟﺮا ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  24‬ﻓﺼﻞ ‪2‬‬

‫دﺳﺘﻮر ‪if...else‬‬
‫در اﻳﻦ ﺳﺎﺧﺘﺎر در ﺻﻮرت ﻧﺎدرﺳﺖ ﺑﻮدن ﺷﺮط‪ ،‬ﻣﺠﻤﻮﻋﻪ دﺳﺘﻮرات داﺧﻞ ﺑﻠﻮك ﺑﻌﺪ از ‪ else‬اﺟﺮا ﻣﻲ ﺷﻮﻧﺪ‪.‬‬

‫{) ‪if( condition‬‬

‫‪...‬‬
‫}‬
‫‪else‬‬
‫{‬
‫‪...‬‬
‫}‬
‫ﺗﺎﺑﻊ‬
‫در ﺑﺮﻧﺎﻣﻪ ﻣﻲ ﺗﻮان‪ ،‬ﻋﻤﻠﻴﺎت ﺑﺮﻧﺎﻣﻪ را ﺗﻘﺴﻴﻢ ﺑﻨﺪي ﻛﺮد ﺗﺎ ﻫﺮ ﺑﺨﺶ را ﻳﻚ ﺗﺎﺑﻊ اﻧﺠﺎم دﻫﺪ‪ .‬ﺑﺮاي ﻧﻮﺷـﺘﻦ ﺗـﺎﺑﻊ ﺑﺎﻳـﺪ‬
‫اﻫﺪاف ﺗﺎﺑﻊ ﻣﺸﺨﺺ ﺑﺎﺷﺪ‪ .‬ﺗﺎﺑﻊ ﭼﻪ وﻇﻴﻔﻪ اي ﺑﺮﻋﻬﺪه دارد؟ ورودﻳﻬﺎي ﺗﺎﺑﻊ ﭼﻴﺴﺖ؟ وﺧﺮوﺟـﻲ ﺗـﺎﺑﻊ ﭼﻴـﺴﺖ؟ ﺑـﺎ‬
‫داﻧﺴﺘﻦ اﻳﻦ ﻣﻮارد ﻧﻮﺷﺘﻦ ﺗﺎﺑﻊ ﭼﻨﺪان دﺷﻮار ﻧﻴﺴﺖ‪.‬‬
‫ﻫﺮ ﺗﺎﺑﻊ داراي دو ﺟﻨﺒﻪ اﺳﺖ‪ ،‬ﺟﻨﺒﻪ ﺗﻌﺮﻳﻒ ﺗﺎﺑﻊ و ﻓﺮاﺧﻮاﻧﻲ ﺗﺎﺑﻊ‪ .‬ﺗﻌﺮﻳﻒ ﺗﺎﺑﻊ‪ ،‬ﻣﺠﻤﻮﻋﻪ اي از دﺳﺘﻮرات اﺳـﺖ ﻛـﻪ‬
‫ﻋﻤﻠﻜﺮد ﺗﺎﺑﻊ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ و ﻓﺮاﺧﻮاﻧﻲ ﺗﺎﺑﻊ‪ ،‬دﺳﺘﻮري اﺳﺖ ﻛﻪ ﺗﺎﺑﻊ را ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﺪ‪ .‬ﻓﺮاﺧـﻮاﻧﻲ ﺗـﺎﺑﻊ ﺑـﺎ‬
‫ﻧﺎم ﺗﺎﺑﻊ اﻧﺠﺎم ﻣﻲ ﺷﻮد‪ .‬ﻧﺎم ﮔﺬاري ﺗﺎﺑﻊ‪ ،‬از ﻗﻮاﻧﻴﻦ ﻧﺎم ﮔﺬاري ﻣﺘﻐﻴﺮﻫﺎ ﺗﺒﻌﻴﺖ ﻣﻲ ﻛﻨﺪ‪.‬‬
‫)] ﻟﻴﺴﺖ ﭘﺎراﻣﺘﺮﻫﺎ[( ﻧﺎم ﺗﺎﺑﻊ ‪function‬‬
‫{‬
‫ﺑﺪﻧﻪ دﺳﺘﻮرات ﺗﺎﺑﻊ‪//‬‬
‫}‬
‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ ﺑﺮاي ﺗﻌﺮﻳﻒ ﻳﻚ ﺗﺎﺑﻊ از ﻛﻠﻤﻪ ‪ function‬اﺳـﺘﻔﺎده ﻣـﻲ ﺷـﻮد‪ ،‬دﻗـﺖ ﻛﻨﻴـﺪ ﻛـﻪ‬
‫ﺣﺮوف آن ﺑﺎﻳﺪ ﺣﺘﻤﺎً ﻛﻮﭼﻚ ﺑﺎﺷﺪ‪ .‬ﺑﻌﺪ از ﻧﻮﺷﺘﻦ دﺳﺘﻮر ‪ function‬ﻧﻮﺑﺖ ﺑﻪ ﺗﻌﻴﻴﻦ ﻳـﻚ ﻧـﺎم ﺑـﺮاي اﻳـﻦ ﺗـﺎﺑﻊ‬
‫اﺳﺖ ﻛﻪ ﺑﻬﺘﺮ اﺳﺖ اﻳﻦ ﻧﺎم ﻣﺘﻨﺎﺳﺐ ﺑﺎ وﻇﻴﻔﻪ ي ﻛﻪ اﻳﻦ ﻣﺠﻤﻮﻋﻪ ﻗﺮار اﺳﺖ اﻧﺠﺎم دﻫﺪ‪ ،‬ﺑﺎﺷﺪ‪.‬‬
‫ﺷﻤﺎ ﻳﻚ ﺗﺎﺑﻊ را در ﻫﺮ ﻛﺠﺎي ﻳﻚ ﺻﻔﺤﻪ ‪ html‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﻗﺮاردﻫﻴﺪ اﻣﺎ ﺑﻬﺘﺮاﺳﺖ در ﻗﺴﻤﺖ ‪ head‬ﻧﻮﺷﺘﻪ ﺷﻮد‪.‬‬
‫ﺣﺘﻲ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻳﻚ ﺗﺎﺑﻊ را در ﻓﺎﻳﻞ ﺧﺎرﺟﻲ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻛﻪ ﺑـﺎ ﭘـﺴﻮﻧﺪ ‪ js‬ذﺧﻴـﺮه ﻣـﻲ ﺷـﻮد وارد ﻛﻨﻴـﺪ ﺗـﺎ در‬
‫ﺻﻔﺤﺎت ﻣﺨﺘﻠﻒ آن را ﺑﻜﺎر ﺑﺒﺮﻳﺪ‪.‬‬
‫ﻓﺮاﺧﻮاﻧﻲ ﻳﻚ ﺗﺎﺑﻊ‬
‫ﺗﻮاﺑﻌﻲ ﻛﻪ در ﻳﻚ ﺻﻔﺤﻪ ‪ html‬ﺗﻌﺮﻳﻒ ﻣﻲ ﺷﻮﻧﺪ ﺑﻪ ﺧﻮدي ﺧﻮد اﺟﺮا ﻧﺨﻮاﻫﻨﺪ ﺷﺪ‪ .‬اﮔﺮ ﺷﻤﺎ ﻳﻚ ﺗـﺎﺑﻊ ﺗﻌﺮﻳـﻒ‬
‫ﻛﻨﻴﺪ ﭘﺲ از ﺑﺎز ﻛﺮدن ﺻﻔﺤﻪ وب ﺧﻮاﻫﻴﺪ دﻳﺪ ﻛﻪ ﻫﻴﭻ اﺗﻔﺎﻗﻲ ﻧﻤﻲ اﻓﺘﺪ‪ .‬ﺗﻮاﺑﻊ ﭘﺲ از ﺗﻌﺮﻳﻒ ﺑﺎﻳﺪ در ﺟـﺎي ﻣـﻮرد‬
‫ﻧﻈﺮ ﻓﺮاﺧﻮاﻧﻲ ﺷﻮﻧﺪ‪ .‬در ﺣﻘﻴﻘﺖ ﺗﻮاﺑﻊ آﻣﺎده ﻫﺴﺘﻨﺪ ﺗﺎ ﭘﺲ از ﻓﺮاﺧﻮاﻧﻲ اﺟﺮا ﺷﻮﻧﺪ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title </title‬‬

‫> "‪<script type="text/javascript‬‬

‫ﻓﺼﻞ ‪25  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫)(‪function funAlert‬‬
‫{‬
‫) " !‪alert ( " Hello friends‬‬
‫}‬

‫>‪</script‬‬

‫>‪</head‬‬
‫>‪<body‬‬

‫>‪<form‬‬
‫>"‪<input type="button" onclick="funAlert()" value="Click me‬‬
‫>‪</form‬‬

‫>‪</body‬‬
‫>‪</html‬‬

‫ﻳﻜﻲ از راهﻫﺎي ﻓﺮاﺧﻮاﻧﻲ ﺗﻮاﺑﻊ‪ ،‬اﺳﺘﻔﺎده از روﻳﺪادﻫﺎﺳﺖ‪ .‬اﮔﺮ ﻣﻲﺧﻮاﻫﻴﺪ ﻛﺪي‪ ،‬ﺑﻪ ﻫﻨﮕﺎم ﺑﺎز ﺷﺪن ﺻﻔﺤﻪ‪ ،‬اﺟـﺮا‬
‫ﺷﻮد‪ ،‬از روﻳﺪاد‪ onLoad‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬اﮔﺮ ﻣﻲﺧﻮاﻫﻴﺪ ﺑﺎ ﻛﻠﻴـﻚ ﻛـﺮدن ﺑـﺮ روي ﭼﻴـﺰي‪ ،‬ﺗـﺎﺑﻌﻲ اﺟـﺮا ﺷـﻮد‪ ،‬از‬
‫‪ onClick‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ و ﺑﻪ ﻫﻤﻴﻦ ﺗﺮﺗﻴﺐ‪ .‬در ﻛﺪ ﺑﺎﻻ ﺗﺎﺑﻊ ‪ funAlert‬ﺑﻪ ﻫﻨﮕﺎم ﻓـﺸﺮدن دﻛﻤـﻪ ي اﺟـﺮا ﻣـﻲ‬
‫ﺷﻮد‪ .‬ﻫﻤﭽﻨﻴﻦ اﮔﺮ ﺑﺨﻮاﻫﻴﺪ ﺗﺎﺑﻊ ‪ ،funAlert‬ﺑﻪ ﻫﻨﮕﺎم ﺑﺎر ﺷﺪن ﺻﻔﺤﻪ اﺟﺮا ﺷﻮد‪ .‬ﺑﺮاي اﻳﻦ ﻛـﺎر ﺑﺎﻳـﺪ در ﺗـﮓ‬
‫‪ Body‬اﻳﻦ ﻛﺪ را اﺿﺎﻓﻪ ﻛﻨﻴﺪ‪:‬‬
‫>")(‪<Body onLoad="funAlert‬‬
‫ﭘﺎراﻣﺘﺮﻫﺎي ﺗﺎﺑﻊ‬
‫ﭘﺎراﻣﺘﺮﻫﺎ اﻃﻼﻋﺎﺗﻲ ﻫﺴﺘﻨﺪ ﻛﻪ ﻫﻨﮕﺎم ﻓﺮاﺧﻮاﻧﻲ ﺗﺎﺑﻊ‪ ،‬از ﺑﺮﻧﺎﻣﻪ ﻓﺮاﺧﻮان ﺑﻪ آن ارﺳﺎل ﻣـﻲ ﺷـﻮﻧﺪ‪ .‬ﺑـﻪ ﻋﺒـﺎرت دﻳﮕـﺮ‪،‬‬
‫ﭘﺎراﻣﺘﺮﻫﺎ وﺳﻴﻠﻪ ي ﺑﺮاي ﺗﺒﺎدل اﻃﻼﻋﺎت ﺑﻴﻦ ﺑﺨﺶ ﻓﺮاﺧﻮان و ﺗﺎﺑﻊ ﻓﺮاﺧﻮاﻧﻲ ﺷﻮﻧﺪه ﻫﺴﺘﻨﺪ‪ .‬اﮔﺮ ﺗﻌـﺪاد ﭘﺎراﻣﺘﺮﻫـﺎ از‬
‫ﻳﻜﻲ ﺑﻴﺸﺘﺮ ﺑﺎﺷﺪ‪ ،‬ﺑﺎﻳﺪ ﺑﺎ ﻛﺎﻣﺎ از ﻫﻢ ﺟﺪا ﺷﻮﻧﺪ‪ .‬ﺑﻄﻮرﻛﻠﻲ ﭘﺎراﻣﺘﺮﻫﺎي ﻳﻚ ﺗﺎﺑﻊ ﻣﺘﻐﻴﺮﻫﺎي ﻫﺴﺘﻨﺪ ﻛـﻪ ﺗﻌﺮﻳـﻒ ﺷـﺪه‬
‫اﻧﺪ وﻟﻲ ﻣﻘﺪاري ﻧﺪارﻧﺪ‪ .‬اﻳﻦ ﻣﺘﻐﻴﺮ ﻫﺎ ﺑﺎ ﻓﺮاﺧﻮاﻧﻲ ﺗﺎﺑﻊ ﻣﻘﺪار ﻣﻲ ﮔﻴﺮﻧﺪ‪ .‬در ﻓﺮاﺧﻮاﻧﻲ ﺗﺎﺑﻊ ﺑﻪ ازاي ﻫـﺮ ﭘـﺎراﻣﺘﺮ ﺗـﺎﺑﻊ‬
‫ﻳﻚ ﻣﻘﺪار ﺑﻪ ﺗﺎﺑﻊ ارﺳﺎل ﻣﻲ ﺷﻮد‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Shed Planner</title‬‬
‫>"‪<script language="JavaScript‬‬
‫{ )‪function shedWalls(front,side‬‬
‫;‪var numFront=(front * 12 * 2)/8‬‬
‫;‪var numSide=(side * 12 * 2)/8‬‬
‫;‪var total=numFront+numSide‬‬
‫‪var message="You will need " + total + " one by eight-‬‬
‫‪inch boards for your‬‬
‫"‪shed walls.‬‬
‫;)‪document.write(message‬‬
‫}‬
‫;)‪shedWalls(50,40‬‬ ‫‪//The function is called‬‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  26‬ﻓﺼﻞ ‪2‬‬

‫>‪</script‬‬
‫>‪</head‬‬
‫>"‪<body bgcolor="palegoldenrod‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ﺑﺎزﮔﺮداﻧﺪن ﻳﻚ ﻣﻘﺪار ﺗﻮﺳﻂ دﺳﺘﻮر ‪return‬‬

‫ﺗﻮاﺑﻊ ﺟﺎوااﺳﻜﺮﻳﭙﺖ داراي ﻳﻚ دﺳـﺘﻮري ﺑـﻪ ﻧـﺎم ‪ return‬ﻫـﺴﺘﻨﺪ ﻛـﻪ وﻇﻴﻔـﻪ اﻳـﻦ دﺳـﺘﻮر ﺑﺮﮔﺮداﻧـﺪن ﻣﻘـﺎدﻳﺮ‬
‫ﺧﺮوﺟﻲ از آن ﺗﺎﺑﻊ اﺳﺖ‪.‬‬
‫{ ) (‪function test‬‬
‫;)‪return (number‬‬
‫}‬
‫‪.......‬‬
‫اﻳﻦ ﻣﺠﻤﻮﻋﻪ ﻛﺪ را اﮔﺮ ﺑﺪون اﺳﺘﻔﺎده از ‪ return‬اﺟﺮا ﻛﻨﻴﺪ‪ ،‬ﻧﺘﻴﺠﻪ درﺳﺖ ﻧﺨﻮاﻫﻴﺪ ﮔﺮﻓﺖ‪ .‬ﺑﻪ ﻣﺜـﺎل زﻳـﺮ ﺗﻮﺟـﻪ‬
‫ﻛﻨﻴﺪ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title> return statement </title‬‬

‫>"‪<script type="text/javascript‬‬
‫) ‪function total(a,b‬‬
‫{‬
‫;‪x = a * b‬‬
‫;‪return x‬‬
‫}‬
‫>‪</script‬‬

‫>‪</head‬‬
‫>‪<body‬‬
‫>"‪<script type="text/javascript" type="text/javascript‬‬
‫;) ‪price = total( 4, 15‬‬
‫;) ‪document.write( price‬‬
‫>‪</script‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ دو ﭘﺎراﻣﺘﺮ ﺑﺮاي ﺗﺎﺑﻊ ‪ total‬ﺗﻌﺮﻳﻒ ﺷـﺪه اﺳـﺖ‪ .‬ﺣﺎﺻﻠـﻀﺮب اﻳـﻦ دو ﭘـﺎراﻣﺘﺮ در‬
‫ﻣﺘﻐﻴﺮ ‪ x‬ذﺧﻴﺮه ﻣﻲ ﺷﻮد و ﺗﻮﺳﻂ دﺳﺘﻮر ‪ return‬ﻣﻘﺪار ﺟﻮاب ﺑﺮﮔﺸﺖ داده ﻣﻲ ﺷﻮد‪ .‬در ﻧﻈﺮ داﺷـﺘﻪ ﺑﺎﺷـﻴﺪ ﻛـﻪ‬
‫ﺗﻮاﺑﻊ در ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺴﻴﺎر ﻛﺎرﺑﺮد دارﻧﺪ و ﺷﻤﺎ ﻫﻨﮕﺎم ﻧﻮﺷﺘﻦ اﺳﻜﺮﻳﭙﺖ ﺧﻮد ﭘﻲ ﺑﻪ اﻫﻤﻴﺖ آن ﻫـﺎ ﺧﻮاﻫﻴـﺪ ﺑـﺮد‬
‫ﻣﺨﺼﻮﺻﺎً زﻣﺎﻧﻲ ﻛﻪ ﻳﻚ ﺳﺮي ﻛﺪ را ﺑﺨﻮاﻫﻴﺪ در ﻛﻠﻴﻪ ﺻﻔﺤﺎت ﻳﻚ وب ﺳﺎﻳﺖ ﺑﻜﺎر ﺑﺒﺮﻳﺪ ﻣـﻲ ﺗﻮاﻧﻴـﺪ آن ﻫـﺎ را‬
‫ﺑﺼﻮرت ﻳﻚ ﺗﺎﺑﻊ در ﻳﻚ ﻓﺎﻳﻞ ﺧﺎرﺟﻲ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ذﺧﻴﺮه ﻛﻨﻴﺪ و ﺳﭙﺲ در ﻫـﺮ ﺻـﻔﺤﻪ آن ﺗـﺎﺑﻊ را ﻓﺮاﺧـﻮاﻧﻲ‬
‫ﻛﻨﻴﺪ‪.‬‬
‫ﻓﺼﻞ ‪27  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫ﺗﺎﺑﻊ ﺑﻌﻨﻮان داده‬

‫از ﺗﺎﺑﻊ ﻣﻲ ﺗﻮان ﻣﺎﻧﻨﺪ داده ﻫﺎي دﻳﮕﺮ )رﺷﺘﻪ ي‪ ،‬ﻋﺪدي‪ ،‬ﻣﻨﻄﻘﻲ( ﺑﺮاي ﻣﻘﺪاردﻫﻲ ﺑﻪ ﻳﻚ ﻣﺘﻐﻴﺮ اﺳﺘﻔﺎده ﻛﺮد در اﻳﻦ‬
‫ﺣﺎﻟﺖ ﻣﻘﺪار ﺑﺎزﮔﺸﺘﻲ از ﺗﺎﺑﻊ ﺑﻪ ﻣﺘﻐﻴﺮ ﻧﺴﺒﺖ داده ﻣﻲ ﺷﻮد‪:‬‬
‫>"‪<script language="JavaScript‬‬
‫;}‪var total=function(item,tax) {return item +=tax‬‬
‫;))‪document.write("Your bill is $" + total(14.95,.06‬‬
‫>‪</script‬‬

‫ﻣﺘﻐﻴﺮ ﻣﺤﻠﻲ و ﺳﺮاﺳﺮي‬

‫اﮔﺮ ﺑﺨﻮاﻫﻴﻢ از ﻧﻈﺮ ﻧﻮع‪ ،‬ﺑﻪ ﻣﺘﻐﻴﺮ ﻧﮕﺎه ﻛﻨﻴﻢ‪ ،‬ﺳﻪ ﻧﻮع ﻣﻬﻢ دارد‪ :‬رﺷﺘﻪاي‪ ،‬ﻋﺪدي‪ ،‬ﻣﻨﻄﻘﻲ‪ .‬اﻣـﺎ از ﻟﺤـﺎظ ﻣﻮﻗﻌﻴـﺖ و‬
‫ﻣﻜﺎن اﺳﺘﻔﺎده‪ ،‬ﻳﻚ ﺗﻘﺴﻴﻢ ﺑﻨﺪي دﻳﮕﺮ ﺑﺮاي ﻣﺘﻐﻴﺮ وﺟﻮد دارد‪:‬‬
‫‪ -1‬ﻣﺘﻐﻴﺮ ﺳﺮاﺳﺮي‪ ،‬ﻋﻤﻮﻣﻲ ) ‪(Global‬‬
‫اﮔﺮ ﻣﺘﻐﻴﺮ را ﺧﺎرج از ﺗﺎﺑﻊ ﺑﻨﻮﻳﺴﻴﺪ‪ ،‬ﻋﻤﻮﻣﻲ اﺳﺖ‪ ،‬ﭼﻮن ﻣﻲﺷﻮد در ﺳﺮﺗﺎﺳﺮ ﺑﺮﻧﺎﻣﻪ‪ ،‬آن را ﺻﺪا زده و ﻣﻮرد اﺳﺘﻔﺎده‬
‫ﻗﺮار داد‪.‬‬
‫‪ -2‬ﻣﺘﻐﻴﺮ ﻣﺤﻠﻲ ) ‪(Local‬‬
‫اﮔﺮ ﻣﺘﻐﻴﺮي را داﺧﻞ ﺗﺎﺑﻊ ﺗﻌﺮﻳﻒ ﻛﻨﻴﺪ‪ ،‬ﻣﺤﻠﻲ اﺳﺖ‪ .‬ﻳﻌﻨﻲ ﻓﻘﻂ در ﻫﻤﺎن ﻣﺤﻞ و ﻫﻤﺎن ﺗﺎﺑﻊ‪ ،‬ﻛﺎرﺑﺮد دارد‪ ،‬و ﺑﻴـﺮون‬
‫از آن‪ ،‬ﻧﻪ ﻣﻲﺷﻮد ﺻﺪا زد و ﻧﻪ ﻣﻲﺷﻮد اﺳﺘﻔﺎده ﻛﺮد‪.‬‬
‫ﺧﺼﻮﺻﻴﺎت ﻣﺘﻐﻴﺮ ﻣﺤﻠﻲ و ﺳﺮاﺳﺮي‪:‬‬
‫‪ -‬از ﻣﺘﻐﻴﺮ ﺳﺮاﺳﺮي ﻣﻲﺷﻮد در ﺗﻮاﺑﻊ ﻣﺨﺘﻠﻒ اﺳﺘﻔﺎده ﻛﺮد‪ ،‬اﻣﺎ ﻣﺘﻐﻴﺮ ﻣﺤﻠﻲ‪ ،‬ﻓﻘﻂ در ﻫﻤﺎن ﺗـﺎﺑﻊ ﻛـﻪ ﺗﻌﺮﻳـﻒ ﺷـﺪه‬
‫اﺳﺖ‪ ،‬ﻛﺎرﺑﺮد دارد‪.‬‬
‫‪ -‬ﻣﺘﻐﻴﺮ ﻣﺤﻠﻲ ﻣﻲﺗﻮاﻧﺪ ﺑﺎ ﻣﺘﻐﻴﺮ ﺳﺮاﺳﺮي‪ ،‬ﻫﻤﻨﺎم ﺑﺎﺷﺪ‪ .‬اﮔﺮ اﻳﻦ دو ﻣﺘﻐﻴﺮ‪ ،‬ﻫﻤﻨﺎم ﺷﺪﻧﺪ‪ ،‬ﺗﻐﻴﻴﺮ ﻣﻘﺪار ﻳﻜـﻲ از آن دو‪،‬‬
‫ﺗﺎﺛﻴﺮي در دﻳﮕﺮي ﻧﺪارد‪.‬‬
‫ﺷﻲ ﭼﻴﺴﺖ؟‬
‫وﻇﻴﻔﻪ ﺷﻲ ﻫﺎ )‪ (Objects‬را ﻣﻲ ﺗﻮان ﺷﺒﻴﻪ ﺑﻪ ﻣﺘﻐﻴﺮ ﻫﺎ داﻧﺴﺖ اﻣﺎ ﺷﻲ ﻫﺎ ﺑﺴﻴﺎر ﻛﺎﻣﻞ ﺗﺮ از ﻣﺘﻐﻴﺮﻫﺎ ﻫﺴﺘﻨﺪ ﭼﻮن‬
‫آن ﻫﺎ ﻣﻲ ﺗﻮاﻧﻨﺪ اﻃﻼﻋﺎت ﺑﻴﺸﺘﺮي را در ﺧﻮد ذﺧﻴﺮه ﻛﻨﻨﺪ‪ ،‬ﺷﻲ داراي ﻳﻚ ﻣﺠﻤﻮﻋﻪ ي از ﺻﻔﺎت ﺑﻌﻨﻮان ﺧﺎﺻـﻴﺖ‬
‫و ﻳﻚ ﻣﺠﻤﻮﻋﻪ از رﻓﺘﺎرﻫﺎ ﺑﻌﻨﻮان ﻣﺘﺪ ﻫﺴﺘﻨﺪ و ﻫﻤﭽﻨﻴﻦ ﺗﻔﺎوت دﻳﮕﺮي ﻫـﻢ ﻛـﻪ ﺑـﺎ ﻣﺘﻐﻴﺮﻫـﺎ دارﻧـﺪ اﻳـﻦ اﺳـﺖ ﻛـﻪ‬
‫ﻣﺘﻐﻴﺮﻫﺎ ﺑﺎﻳﺪ ﺗﻌﺮﻳﻒ ﺷﻮﻧﺪ ﺗﺎ ﺟﺎوااﺳﻜﺮﻳﭙﺖ آن ﻫـﺎ را ﺑـﺸﻨﺎﺳﺪ اﻣـﺎ ﺑﻌـﻀﻲ از ﺷـﻲ ﻫـﺎ در ﺟﺎوااﺳـﻜﺮﻳﭙﺖ ﺳـﺎﺧﺘﻪ و‬
‫ﺗﻌﺮﻳﻒ ﺷﺪه اﻧﺪ‪ .‬اﻳﻦ ﺷﻲ ﻫﺎي از ﻗﺒﻞ ﺗﻌﺮﻳﻒ ﺷﺪه را درون ﺳﺎﺧﺖ ﻳﺎ ‪ Built-in‬ﻣﻲ ﮔﻮﻳﻨﺪ ﻣﺎﻧﻨﺪ ﺷﻲ ‪.Date‬‬
‫اﻟﺒﺘﻪ ﺑﺎﻳﺪ ﻫﻤﻴﻦ اﺷﻴﺎ ﻫﻢ در اﺑﺘﺪاي ﻛﺪ ﻳﻜﺒﺎر دﻳﮕﺮ ﺑﺎ دﺳﺘﻮر ‪ new‬ﺗﻌﺮﻳﻒ ﺷﻮﻧﺪ‪:‬‬

‫)(‪mydate = new Date‬‬

‫)(‪name = new Array‬‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  28‬ﻓﺼﻞ ‪2‬‬

‫روش ﺳﺎﺧﺖ ﻳﻚ ﺷﻲ‬

‫ﮔﺎﻫﻲ اوﻗﺎت ﻧﻴﺎز اﺳﺖ ﻛﻪ ﻳﻚ ﺷﻲ را ﺧﻮدﺗﺎن ﺗﻌﺮﻳـﻒ ﻛﻨﻴـﺪ ﺗـﺎ ﺑﻬﺘـﺮ ﺑﺘﻮاﻧﻴـﺪ ﻛـﺪ ﺧـﻮد را ﻣـﺪﻳﺮﻳﺖ ﻛﻨﻴـﺪ‪ .‬اﮔـﺮ‬
‫ﺑﺨﻮاﻫﻴــﺪ ﻳــﻚ ﺷــﻲ را در اﺳــﻜﺮﻳﭙﺖ ﺧــﻮد ﺑــﺴﺎزﻳﺪ ﻧﻴــﺎز ﺑــﻪ دو ﭼﻴــﺰ دارﻳــﺪ‪ ،‬اﺑﺘــﺪا ﻳــﻚ ﺗــﺎﺑﻊ ﺳــﺎزﻧﺪه ﻛــﻪ ﺑــﻪ آن‬
‫‪ Constructor‬ﻣــﻲ ﮔﻮﻳﻨــﺪ و در آن ﻧــﻮع ﺷــﻲ ﺗﻌﺮﻳــﻒ ﻣــﻲ ﺷــﻮد‪ ،‬ﺳــﭙﺲ ﺑــﻪ ﻧﻤﻮﻧــﻪ ي از ﺷــﻲ ﻛــﻪ ﺑــﻪ آن‬
‫‪ Instance‬ﻣﻲ ﮔﻮﻳﻨﺪ ﻛﻪ ﺗﻮﺳﻂ دﺳﺘﻮر ‪ new‬ﺗﻌﺮﻳﻒ ﻣﻲ ﺷﻮد‪ .‬ﺑﻪ ﻣﺜﺎل زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪.‬‬
‫ﻣﻲ ﺧﻮاﻫﻴﻢ ﻳﻚ ﺷﻲ ﺑﺮاي اﺗﻮﻣﺒﻴﻞ ﺗﻌﺮﻳﻒ ﻛﻨﻴﻢ ﻛﻪ ﺧﺎﺻﻴﺖ ﻫﺎي ﻣﺎﻧﻨﺪ اﺳﻢ‪ ،‬رﻧﮓ و ﻣـﺪل را داﺷـﺘﻪ ﺑﺎﺷـﺪ‪ .‬ﺑـﺮاي‬
‫اﻳﻦ ﻛﺎر اﺑﺘﺪا ﻳﻚ ﺗﺎﺑﻊ ﺑﺎﻳﺪ ﺗﻌﺮﻳﻒ ﻛﻨﻴﻢ ﺑﻪ ﻧﺎم ‪ Car‬و ﺧﺎﺻﻴﺖ ﻫﺎي آن را ﺑﻪ ﻋﻨﻮان ﭘﺎراﻣﺘﺮﻫﺎﻳﺶ ﺑﻨﻮﻳﺴﻴﻢ و ﺳﭙﺲ‬
‫اﻳﻦ ﭘﺎراﻣﺘﺮﻫﺎ را ﺑﺮ اﺳﺎس ﺧﺎﺻﻴﺖ ﻫﺎﻳﺶ ﻣﻘﺪاردﻫﻲ ﻛﻨﻴﻢ‪:‬‬
‫{ ) ‪function Car ( pname, pmodel, pcolor‬‬

‫‪this.name = pname‬‬
‫‪this.model = pmodel‬‬
‫‪this.color = pcolor‬‬
‫}‬
‫ﺑﻪ ﻛﻠﻤﻪ ‪ this‬دﻗﺖ ﻛﻨﻴﺪ‪ ،‬اﻳﻦ ﻳﻚ ﻛﻠﻤﻪ رزرو ﺷﺪه ﺟﺎوااﺳﻜﺮﻳﭙﺖ اﺳﺖ و ﺑﻪ ﺷـﻲ ﻛـﻪ در ﺣـﺎل ﺗﻌﺮﻳـﻒ اﺳـﺖ‪،‬‬
‫اﺷﺎره دارد و در ﺣﻘﻴﻘﺖ ﺑﻪ ﻣﻔﺴﺮ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻣـﻲ ﮔﻮﻳـﺪ ﻛـﻪ اﻳـﻦ ﺧﺎﺻـﻴﺖ ﺷـﻲ ﺗﻌﺮﻳـﻒ ﺷـﺪه ﺑـﺎ اﻳـﻦ ﻣﻘـﺪار‬
‫ﻣﻘﺪاردﻫﻲ ﺷﻮد‪.‬‬
‫ﺣﺎﻻ ﺑﺎﻳﺪ ﻳﻚ ﻧﻤﻮﻧﻪ از ﺷﻲ ﺟﺪﻳﺪ ﺑﺴﺎزﻳﺪ ﻛﻪ اﻳﻦ ﻧﻤﻮﻧﻪ را در ﻣﺘﻐﻴﺮي ﺑﻨﺎم ‪ mycar‬ذﺧﻴﺮه ﻣﻲ ﻛﻨﻴﻢ‪:‬‬
‫) "‪mycar = new Car ( "peugeot", "206", "Red‬‬

‫اﻳﻦ ﺧﻂ ﻛﺪ ﺑﻪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻣﻲ ﮔﻮﻳﺪ ﻛﻪ ﻳﻚ ﻧﻤﻮﻧﻪ ﺑﻪ ﻧﺎم ‪ mycar‬داراي ﺧﺎﺻﻴﺖ ﻫﺎي اﺳﻢ ﻛـﻪ ‪peugeot‬‬
‫و ﻣﺪل ‪ 206‬و رﻧﮓ ‪ Red‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﻛﻨﻮن ﻣﻲ ﺧﻮاﻫﻴﻢ از ﻧﻤﻮﻧﻪ‪ ،‬اﺳﻢ ﻣﺎﺷﻴﻦ و رﻧﮓ را در ﺻﻔﺤﻪ ﭼﺎپ ﻛﻨﻴﻢ‪:‬‬
‫) ">‪document.write ( mycar.name + "<br /‬‬
‫) ‪document.write ( mycar.color‬‬

‫ﺑﻌﺪ از اﻳﻨﻜﻪ ﺧﺼﻮﺻﻴﺎﺗﻲ ﺑﺮاي ﻳﻚ ﺷﻲ ﺗﻌﺮﻳﻒ ﻛﺮدﻳﺪ ﻧﻮﺑﺖ ﺑﻪ ﻣﺘـﺪﻫﺎي ﺷـﻲ ﺳـﺎﺧﺘﻪ ﺷـﺪه‪ ،‬ﻣـﻲ رﺳـﺪ‪ .‬در اﻳﻨﺠـﺎ‬
‫ﻣﺘﺪي ﻛﻪ ﺗﻌﺮﻳﻒ ﻣﻲ ﻛﻨﻴﻢ ﺑﺮاي ﻛﻠﻴﻪ ﻣﺎﺷﻴﻦ ﻫﺎ ﻣﻲ ﺗﻮاﻧﻴﻢ ﺑﻜﺎر ﮔﻴﺮﻳﻢ‪ .‬اﻟﮕﻮي ﻛﻠﻲ ﺗﻌﺮﻳﻒ ﻳﻚ ﻣﺘﺪ ﺑﻪ ﺷـﺮح زﻳـﺮ‬
‫اﺳﺖ‪:‬‬
‫‪object.methodname()= function_name‬‬
‫‪ object‬ﻧــﺎم ﻧﻤﻮﻧــﻪ ي اﺳــﺖ ﻛــﻪ ﺳــﺎﺧﺘﻴﻢ‪ methodname ،‬ﻧــﺎم ﻣﺘــﺪي اﺳــﺖ ﻛــﻪ در ﻧﻈــﺮ ﻣــﻲ ﮔﻴﺮﻳــﺪ و‬
‫‪ function name‬اﺳﻢ ﺗﺎﺑﻌﻲ اﺳﺖ ﻛﻪ ﺑﺎﻳﺪ ﻋﻤﻠﻴﺎت ﻣﻮرد ﻧﻈﺮ را اﻧﺠﺎم دﻫﺪ‪ .‬ﺳﭙﺲ ﻫﺮ ﻛﺠـﺎ ﻛـﻪ ﻻزم ﺑـﻮد از‬
‫ﻣﺘﺪ اﺳﺘﻔﺎده ﻛﻨﻴﺪ اﺑﺘﺪا ﻧﺎم ﻧﻤﻮﻧﻪ و ﺳﭙﺲ ﺑﺎ ﮔﺬاﺷﺘﻦ ﻳﻚ ﻧﻘﻄﻪ ﻣﺘﺪ را ﺑﻪ ﻫﻤﺮاه ﭘﺮاﻧﺘﺰ ﻣﻲ ﻧﻮﻳـﺴﻴﺪ ﻛـﻪ اﮔـﺮ اﻳـﻦ ﻣﺘـﺪ‬
‫ﭘﺎراﻣﺘﺮي ﻫﻢ داﺷﺖ ﺑﺎﻳﺪ آن را داﺧﻞ ﭘﺮاﻧﺘﺰ ﻣﺸﺨﺺ ﻛﻨﻴﺪ‪.‬‬
‫ﻓﺼﻞ ‪29  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫ﻣﺘﺪي ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﺪ ﺑﺮاي ﺷﻲ ‪ Car‬ﺑﺴﺎزﻳﺪ را ﺑﺎﻳﺪ اﺑﺘﺪا ﺑﺼﻮرت ﻳﻚ ﺗﺎﺑﻊ ﺗﻌﺮﻳﻒ ﻛﻨﻴﺪ‪:‬‬
‫{ )(‪function fdisplaycar‬‬

‫‪var result = " I like " + this.name + " " +‬‬ ‫‪this.model +‬‬
‫"‪" with " + this.color + " color.‬‬
‫) ‪document.write ( result‬‬
‫}‬
‫ﺣﺎﻻ ﺑﺎ اﺳﺘﻔﺎده از دﺳﺘﻮر ‪ this‬اﻳﻦ ﺗﺎﺑﻊ را ﺑﻪ ﻋﻨﻮان ﻣﺘﺪ ﺷﻲ ‪ Car‬ﺗﻌﺮﻳﻒ ﻣﻲ ﻛﻨﻴﺪ‪:‬‬
‫{ ) ‪function Car ( name, model, color‬‬
‫‪this.name = name‬‬
‫‪this.model = model‬‬
‫‪this.color = color‬‬
‫‪this.displaycar = fdisplaycar‬‬
‫}‬
‫ﺑﻌﺪ از ﺗﻌﺮﻳﻒ ﺗﻮاﺑﻊ‪ ،‬ﻣﺘﺪ را اﺟﺮا ﻣﻲ ﻛﻨﻴﺪ‪:‬‬
‫)(‪mycar.displaycar‬‬

‫ﺗﻌﺮﻳﻒ ‪DOM‬‬
‫‪ DOM‬ﻣﺨﻔﻒ ﺳﻪ ﻛﻠﻤﻪ ‪ Model Object Document‬ﻣﻲ ﺑﺎﺷـﺪ‪ .‬ﻣﺘﻨـﻲ ﻛـﻪ در زﻳـﺮ آﻣـﺪه ﺗﻌﺮﻳـﻒ ‪ DOM‬ﺑـﺮ‬
‫اﺳﺎس ‪ W3C‬اﺳﺖ‪:‬‬
‫‪" The Document Object Model is a platform- and language -‬‬
‫‪neutral interface that will allow programs and scripts to‬‬
‫‪dynamically access and update the content, structure and style‬‬
‫‪of documents. The document can be further processed and the‬‬
‫‪results of that processing can be incorporated back into the‬‬
‫"‪presented page.‬‬

‫‪ DOM‬ﻳﻚ واﺳﻄﻲ اﺳﺖ ﻛﻪ ﺑﻪ ﺑﺮﻧﺎﻣﻪ ﻫﺎ و اﺳﻜﺮﻳﭙﺖ ﻫﺎ اﺟﺎزه دﺳﺘﺮﺳﻲ ﺑﻪ ﻣﺤﺘﻮا و ﺳﺎﺧﺘﺎر داﺧﻠﻲ ﭘﻨﺠـﺮه ﻣﺮورﮔـﺮ‬
‫را ﻣﻲ دﻫﺪ ﺗﺎ آن ﻫﺎ ﺑﺘﻮاﻧﻨﺪ ﺗﻐﻴﻴﺮاﺗﻲ اﻳﺠﺎد ﻛﻨﻨﺪ ﻛﻪ ﻧﺘﻴﺠﻪ اﻳﻦ ﺗﻐﻴﻴﺮات در ﺻﻔﺤﻪ وب ﻧﻤﺎﻳﺎن ﺷﻮد‪ .‬در ﻫﻤﻴﻦ راﺑﻄـﻪ‬
‫زﺑﺎﻧﻲ ﺑﻪ ﻧﺎم ‪ DHTML‬ﺑﻮﺟﻮد آﻣﺪ ﻛﻪ ﺑﺎ ﺗﺮﻛﻴﺐ ﻛﺮدن ﻋﻨﺎﺻﺮ ‪ html‬ﺑﺎ ‪ css‬و اﺳﻜﺮﻳﭙﺖ ﻫـﺎ ﻣـﻲ ﺗﻮاﻧـﺪ ﻣﺤﺘـﻮاي‬
‫اﺳﻨﺎد وب را ﺑﺼﻮرت ﻣﺘﺤﺮك و ﭘﻮﻳﺎ درآورد‪ .‬در اﻳﻨﺠﺎ ﭘﻮﻳﺎ ﺑﻮدن ﻓﻘﻂ ﺑﻪ اﻳﻦ ﻣﻨﻈﻮر ﻧﻴـﺴﺖ ﻛـﻪ ﻣـﺘﻦ ﻫـﺎ ﺣﺮﻛـﺖ‬
‫ﻛﻨﻨﺪ و از ﻳﻚ ﻃﺮف وارد ﺑﺸﻮﻧﺪ و از ﻃﺮف دﻳﮕﺮ ﺧﺎرج‪ ،‬ﻣﻤﻜﻦ اﺳﺖ ﻟﻴﻨﻚ ﻫﺎ ﻫﺮ ﺑﺎر ﺷﻤﺎ را ﺑﻪ ﻳﻚ ﺳﺎﻳﺘﻲ ﭘﻴﻮﻧﺪ‬
‫دﻫﻨﺪ و ﻳﺎ ﺗﺼﺎوﻳﺮ ﻣﺮﺗﺐ ﺗﻐﻴﻴﺮ ﻛﻨﻨﺪ‪ ،‬در ﻣﺠﻤﻮع ﻫﺮ ﺗﻐﻴﻴﺮي ﻛﻪ ﻧﻴﺎز ﺑﻪ ﻛﺪﻧﻮﻳﺴﻲ ﻣﺠﺪد ﺑﺮاي آن ﺻـﻔﺤﻪ را ﻧﺪاﺷـﺘﻪ‬
‫ﺑﺎﺷﺪ‪ ،‬ﻣﻔﻬﻮم ﭘﻮﻳﺎ ﺑﻮدن را ﻣﻲ رﺳﺎﻧﺪ‪.‬‬

‫ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺐ اﺷﻴﺎ ‪DOM‬‬

‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‪ ،‬ﺷﻲ ﻫﺎﻳﻲ دارد ﻛﻪ ﻣﻲ ﺗﻮاﻧﻨﺪ ﺑﻄﻮر ﻣﺴﺘﻘﻴﻢ ﺑﺎ ﺧﻮد ﻣﺮورﮔـﺮ ارﺗﺒـﺎط ﺑﺮﻗـﺮار ﻛﻨﻨـﺪ و ﻫﻤﭽﻨـﻴﻦ ﺷـﻲ‬
‫ﻫﺎﻳﻲ ﻛﻪ ﺑﺎ ﺻﻔﺤﻪ وب در ارﺗﺒﺎط ﻫﺴﺘﻨﺪ‪ .‬در ﻛﻞ ﻣﻲ ﺗﻮان اﻳﻦ اﺷﻴﺎ را ﺑﻪ دو دﺳﺘﻪ اﺻﻠﻲ ﺗﻘﺴﻴﻢ ﻛﺮد‪ :‬دﺳـﺘﻪ اول ﻛـﻪ‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  30‬ﻓﺼﻞ ‪2‬‬

‫‪ BOM‬ﮔﻔﺘﻪ ﻣﻲ ﺷﻮد‪(Model Object Browser) :‬ﺷﻲ ﻫﺎﻳﻲ ﻛﻪ ﺑﺎ ﭘﻨﺠﺮه ﻣﺮورﮔﺮ ﻣﻲ ﺗﻮاﻧﻨﺪ ارﺗﺒﺎط ﺑﺮﻗﺮار‬
‫ﻛﻨﻨﺪ و دﺳﺘﻪ دوم ‪ DOM‬ﻛﻪ ﺑﺎ ﺻﻔﺤﻪ)‪ html (Document‬ارﺗﺒﺎط دارﻧﺪ‪ .‬ﺗﻤﺎﻣﻲ اﻳﻦ اﺷﻴﺎ ﺑﺮاﺳﺎس ﻳـﻚ ﺳﻠـﺴﻠﻪ‬
‫ﻣﺮاﺗﺐ اﻳﻦ ارﺗﺒﺎط را ﺑﺮﻗﺮار ﻣﻲ ﻛﻨﻨﺪ ﻛﻪ در رأس آن ﻫﺎ ﺷﻲ ‪ window‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﻳﻦ ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺐ در ﺷـﻜﻞ ‪-3‬‬
‫‪ 2‬آورده ﺷﺪه اﺳﺖ‪.‬‬
‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ در ﺷﻜﻞ‪ 2-3‬ﻣﺸﺎﻫﺪه ﻛﺮدﻳﺪ از ﺷﻲ ‪ window‬ﺗﺎ ﺷﻲ ‪ Document‬ﺟﺰو دﺳـﺘﻪ ‪ BOM‬ﻣـﻲ ﺑﺎﺷـﻨﺪ و‬
‫اﺷﻴﺎء ﺑﻌﺪ از ‪ Document‬در دﺳﺘﻪ ‪ DOM‬ﻗـﺮار ﻣـﻲ ﮔﻴﺮﻧـﺪ‪ .‬در ﺣـﺎل ﺣﺎﺿـﺮ در ﻛـﻞ اﻳـﻦ ﻣﺠﻤﻮﻋـﻪ را ‪ DOM‬ﻣـﻲ‬
‫ﮔﻮﻳﻨﺪ‪.‬‬
‫ﺷﻤﺎ ﺑﺎﻳﺪ اﻳﻦ ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺐ را ﺑﺮاي اﺳﺘﻔﺎده اﺷﻴﺎ آن‪ ،‬رﻋﺎﻳﺖ ﻛﻨﻴﺪ‪ .‬ﺑـﺮاي اﺳـﺘﻔﺎده از آن ﻫـﺎ ﺑﺎﻳـﺪ اﺑﺘـﺪا اﺳـﻢ ﭘـﺪر و‬
‫ﺳﭙﺲ اﺳﻢ ﻓﺮزﻧﺪ را ﻧﻮﺷﺖ و در آﺧﺮ ﻫﻢ ﺧﺎﺻﻴﺖ و ﻳﺎ ﻣﺘﺪ آن ﻓﺮزﻧﺪ ﻛﻪ ﻫﻤﻪ اﻳﻦ ﻫﺎ ﺑﺎ ﻳﻚ ﻧﻘﻄﻪ از ﻫـﻢ ﺑﺎﻳـﺪ ﺟـﺪا‬
‫ﺷﻮﻧﺪ‪ .‬ﺑﻄﻮر ﻣﺜﺎل اﮔﺮ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻳﻚ ﻓﺮم را ﺑﻪ ﻧﺎم ‪ form1‬ﺻﺪا ﺑﺰﻧﻴﺪ ﺗﺎ ﺑﺎ آن ارﺗﺒﺎط ﺑﺮﻗﺮار ﻛﻨﻴﺪ ﺑﺎﻳﺪ ﺑـﻪ ﺷـﻜﻞ‬
‫زﻳﺮ ﻋﻤﻞ ﺷﻮد‪:‬‬
‫‪window.document.form1‬‬
‫ﻣﺎﻧﻨﺪ ﻫﻤﻪ اﺷﻴﺎ در ﺟﺎوااﺳﻜﺮﻳﭙﺖ‪ ،‬اﻳﻦ ﺷﻲ ﻫﺎ ﻫﻢ داراي ﺧﺎﺻﻴﺖ ﻫﺎ و ﻣﺘﺪﻫﺎﻳﻲ ﻫـﺴﺘﻨﺪ ﻛـﻪ ﺑﻌـﺪ از رﻋﺎﻳـﺖ ﻛـﺮدن‬
‫ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺐ ﺑﺎ ﮔﺬاﺷﺘﻦ ﻳﻚ ﻧﻘﻄﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ آن ﻫﺎ را ﺑﻨﻮﻳﺴﻴﺪ‪ .‬ﻣﺎﻧﻨﺪ‪:‬‬
‫)‪window.history.go(-1‬‬
‫اﮔﺮ اﻳﻦ ﺷﻲ را در ﻳﻚ ﻟﻴﻨﻚ ﻗﺮار دﻫﻴﺪ ﺑﺎ ﻛﻠﻴﻚ ﻛﺮدن ﺑﺮ روي آن‪ ،‬ﻛﺎرﺑﺮ ﺑﻪ ﺻﻔﺤﻪ ﻗﺒﻞ ﺑﺎزﮔﺸﺖ داده ﻣﻲ ﺷﻮد‪.‬‬
‫در ﺟﺪول ‪ 2-5‬ﺷﻲ ﻫﺎي اﺻﻠﻲ اﻳﻦ ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺐ ﻟﻴﺴﺖ ﺷﺪه اﺳﺖ‪.‬‬
‫اﻳﻦ ﺷﻲ ﻣﺴﺘﻘﻴﻤﺎً ﺑـﺎ ﭘﻨﺠـﺮه ﻣﺮورﮔـﺮ در ارﺗﺒـﺎط اﺳـﺖ ﻛـﻪ‬ ‫‪window‬‬

‫ﻣﻌﻤﻮﻻً ﺧﺼﻮﺻﻴﺎت و ﻣﺘﺪﻫﺎي اﻳﻦ ﺷﻲ در ﺗﮕﻬﺎي ‪ body‬و‬

‫‪ frameset‬ﺑﻜﺎر ﻣﻲ روﻧﺪ‪.‬‬
‫‪ navigator‬اﻳﻦ ﺷﻲ ﺷﺎﻣﻞ اﻃﻼﻋﺎﺗﻲ در راﺑﻄﻪ ﺑـﺎ ﻣﺮورﮔـﺮ ﻛـﺎرﺑﺮ اﺳـﺖ‬
‫ﻛﻪ ﺗﻮﺳﻂ ﺧﺼﻮﺻﻴﺎت و ﻣﺘﺪﻫﺎي آن اﻳﻦ اﻃﻼﻋـﺎت ذﺧﻴـﺮه‬
‫ﺗﺎ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﮔﻴﺮﻧﺪ‪.‬‬
‫ﺑﺮاي ﻛﺎر ﻛﺮدن ﺑﺮ روي ﻓﺮﻳﻤﻬﺎي ‪.html‬‬ ‫‪frame‬‬

‫دﺳﺘﺮﺳﻲ و ارﺗﺒﺎط ﺑﺎ ﻛﻠﻴﻪ ﻋﻨﺎﺻﺮ ‪ html‬ﻣﺎﻧﻨﺪ‪ ،‬ﻣﺘﻦ ﻫﺎ ﻓﺮم‬ ‫‪document‬‬

‫ﻫﺎ و ﻏﻴﺮه‪.‬‬
‫ﺷــﺎﻣﻞ اﻃﻼﻋــﺎﺗﻲ در ﻣــﻮرد ‪ URL‬ﺻــﻔﺤﻪ اي ﻛــﻪ در ﺣــﺎل‬ ‫‪location‬‬

‫ﻧﻤﺎﻳﺶ اﺳﺖ‪.‬‬
‫اﻳﻦ ﺷﻲ داراي اﻃﻼﻋﺎﺗﻲ ﺑﺮاي رﺟﻮع ﻛﺎرﺑﺮ ﺑﻪ ﺻﻔﺤﺎﺗﻲ ﻛﻪ‬ ‫‪history‬‬

‫ﻗﺒﻞ از آن ﺻﻔﺤﻪ ﻣﺸﺎﻫﺪه ﺷﺪه و ﺑﺮ ﻋﻜﺲ‪.‬‬

‫ﻓﺼﻞ ‪31  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫ﺟﺪول ‪ 2-5‬ﺷﻲ ﻫﺎي اﺻﻠﻲ ﻣﺮورﮔﺮﻫﺎ‬

‫‪ DOM‬ﻳﻚ روش اﺳﺘﺎﻧﺪارد ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑﻪ اﺷﻴﺎ ﺻﻔﺤﻪ وب و ﺗﻐﻴﻴﺮات در ﺻـﻔﺤﻪ وب ﻣـﻲ ﺑﺎﺷـﺪ‪ DOM .‬ﺳـﺎﺧﺘﺎر‬
‫ﺻﻔﺤﻪ ‪ Html‬را ﺑﻌﻨﻮان ﻳﻚ درﺧﺖ )‪ (Tree‬ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ ﻫﻤﺎن ﻃﻮر ﻛﻪ ﻣﻲ داﻧﻴـﺪ ﻳـﻚ درﺧـﺖ از ﻧﻮدﻫـﺎ‬
‫)‪(Nodes‬ﺗﺸﻜﻴﻞ ﺷﺪه اﺳﺖ‪ .‬ﺑﺮاﺳﺎس ﻣﻨﻄﻖ ‪ DOM‬ﻫﺮ ﭼﻴﺰي در ﺻﻔﺤﻪ ‪ Html‬ﻳﻚ ﮔﺮه درﺧﺖ اﺳﺖ‪.‬‬
‫اﻳﻦ ﮔﺮه ﻫﺎ اﻧﻮاع ﻣﺨﺘﻠﻔﻲ ﺑﻪ ﺷﺮح زﻳﺮ دارﻧﺪ‪:‬‬
‫‪ -1‬ﮔﺮه ‪) document‬ﮔﺮه ﺻﻔﺤﻪ وب(‬
‫‪ -2‬ﮔﺮه ‪) text‬ﻣﺘﻦ ﻫﺎي ﻛﻪ در ﺗﮓ ﻫﺎي ‪ Html‬ﻣﻲ ﺑﺎﺷﻨﺪ‪(.‬‬
‫‪ -3‬ﮔﺮه ‪) element‬ﺗﮓ ﻫﺎي ‪(Html‬‬
‫‪ -4‬ﮔﺮه ‪) attribute‬ﺧﺎﺻﻴﺖ ﻫﺎي ‪(Html‬‬
‫‪ -5‬ﮔﺮه ‪) comment‬ﺗﻮﺿﻴﺤﺎت در ﺻﻔﺤﻪ وب(‬
‫در ﺷﻜﻞ ‪ 2-2‬ﺳﺎﺧﺘﺎر ﺳﻠﺴﻪ ﻣﺮاﺗﺒﻲ اﻳﻦ درﺧﺖ را ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ‪.‬‬

‫ﺷﻜﻞ ‪ 2-2‬ﻧﻤﻮدار اﻧﻮاع ﮔﺮه ﻫﺎي ‪DOM‬‬

‫ﻫﺮ درﺧﺖ داراي ﻳﻚ ﮔﺮه رﻳﺸﻪ ي ‪ Document‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﮔﺮه ﻫﺎي ﻧـﻮع ‪ text‬در آﺧـﺮﻳﻦ ﺳـﻄﺢ درﺧـﺖ و‬
‫ﺑﻌﻨﻮان ﮔﺮه ﻫﺎي ﺑﺮگ ﻣﻲ ﺑﺎﺷﻨﺪ‪ .‬ﺑﻪ ﻛﺪ زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>DOM Tutorial</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1>DOM Lesson one</h1‬‬
‫>‪<p>Hello world!</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ﻫﻤــﻪ ﮔــﺮه ﻫــﺎ ﺑﺠــﺰ ﻧــﻮد ‪ document‬داراي ﮔــﺮه ﭘــﺪر)‪ (parent‬ﻫــﺴﺘﻨﺪ‪ .‬در اﻳــﻦ ﻣﺜــﺎل ﭘــﺪر >‪ <head‬و‬
‫>‪ <body‬ﮔﺮه >‪ <html‬اﺳﺖ وﻳﺎ ﭘﺪر ﻣﺘﻦ!‪ Hello world‬ﮔﺮه >‪ <p‬اﺳﺖ‪.‬‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  32‬ﻓﺼﻞ ‪2‬‬

‫ﺑﻴﺸﺘﺮ ﮔﺮه ﻫﺎي ‪ element‬داراي ﻓﺮزﻧﺪ)‪ (child‬ﻣـﻲ ﺑﺎﺷـﻨﺪ‪ .‬ﮔـﺮه >‪ ،<head‬ﻓﺮزﻧـﺪش ﮔـﺮه >‪<title‬‬
‫اﺳﺖ و >‪ <title‬ﻳﻚ ﻓﺮزﻧﺪ دارد ﻛﻪ ﻳﻚ ﮔﺮه ﻣﺘﻨﻲ ‪ DOM Tutorial‬اﺳﺖ‪.‬‬
‫ﺑﻪ ﮔﺮه ﻫﺎي ﻛﻪ داراي ﻳﻚ ﭘﺪر ﺑﺎﺷﻨﺪ ﮔﺮه ﺑﺮادر ﻳﺎ ﻫﻤﺰاد ﮔﻮﻳﻨﺪ‪ .‬در اﻳﻦ ﻣﺜﺎل ﮔـﺮه >‪ <h1‬و >‪ <p‬ﺑـﺎﻫﻢ ﺑﺮادرﻧـﺪ‬
‫ﺑﺮاي اﻳﻨﻜﻪ ﭘﺪر ﻫﺮ دو ﮔﺮه >‪ <body‬اﺳﺖ‪.‬‬
‫ﺑﺎ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺳﺎﺧﺘﺎر ﻳﻚ ﺻﻔﺤﻪ را ﺗﻐﻴﻴﺮ دﻫﻴﺪ‪ .‬ﺑﺮاي اﻳﻦ ﻛـﺎر ﻧﻴـﺎز ﺑـﻪ دﺳﺘﺮﺳـﻲ ﺑـﻪ ﻋﻨﺎﺻـﺮ ﺻـﻔﺤﻪ‬
‫دارﻳـــــﺪ‪ ،‬اﻳـــــﻦ دﺳﺘﺮﺳـــــﻲ ﺑﻮﺳـــــﻴﻠﻪ ﻣﺘـــــﺪﻫﺎي )(‪،createElement() ،createTextNode‬‬
‫)(‪ appendChild‬ﺑﺮاي ﻋﻨﺎﺻﺮ ‪ Html‬ﺻﻔﺤﻪ از ﻃﺮﻳﻖ ‪ DOM‬ﻓﺮاﻫﻢ ﻣﻲ ﺷﻮد‪.‬‬
‫ﺑﺮاي ﻣﺜﺎل ﻛﺪ زﻳﺮ را در ﻧﻈﺮ ﺑﮕﻴﺮﻳﺪ‪ ،‬ﻣﻲ ﺧﻮاﻫﻴﻢ ﻳﻚ ﻋﺒـﺎرﺗﻲ ﺑـﺼﻮرت !‪ Hello World‬را در ﺻـﻔﺤﻪ وب‬
‫در ﻳﻚ ﺗﮓ >‪ <p‬ﺑﻪ ﺻﻔﺤﻪ اﺿﺎﻓﻪ ﻛﻨﻴﻢ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>createElement() Example</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫اﺑﺘﺪا ﻳﻚ ﺗﮓ >‪ <p‬ﺑﺎ دﺳﺘﻮر )(‪ createElement‬اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‪:‬‬
‫;)”‪var oP = document.createElement(“p‬‬
‫ﻣﺮﺣﻠﻪ دوم‪ :‬ﻳﻚ ﮔﺮه ‪ text‬ﺣﺎوي ﻣﺘﻦ ﻣﻮرد اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‪:‬‬
‫;)”!‪var oText = document.createTextNode(“Hello World‬‬
‫ﻣﺮﺣﻠﻪ ﺳﻮم‪ :‬ﺑﺎﻳﺪ ﮔﺮه ‪ text‬را ﺑﻌﻨﻮان ﻓﺮزﻧﺪ ﮔﺮه >‪ <p‬ﻣﻌﺮﻓﻲ ﻛﻨﻴﻢ‪:‬‬
‫;)‪oP.appendChild(oText‬‬
‫ﻣﺮﺣﻠﻪ ﭼﻬﺎرم‪ :‬ﺑﺎﻳﺪ ﮔﺮه >‪ <p‬را ﺑﻌﻨﻮان ﻓﺮزﻧﺪ ﮔﺮه >‪ <body‬ﻣﻌﺮﻓﻲ ﻛﻨﻴﻢ‪:‬‬
‫;)‪document.body.appendChild(oP‬‬
‫ﺑﺎ دﺳﺘﻮرات ﺑﺎﻻ ﻳﻚ ﺧﻂ دﺳﺘﻮر ‪ Html‬ﺑﺼﻮرت >‪ <p>Hello World!</p‬ﺑﻪ ﺻﻔﺤﻪ اﺿﺎﻓﻪ ﻣﻲ ﺷﻮد‪.‬‬
‫دﺳﺘﺮﺳﻲ و ﻳﺎﻓﺘﻦ ﮔﺮه ﻫﺎ‬
‫‪ DOM‬اﻣﻜﺎﻧﺎﺗﻲ را ﻓﺮاﻫﻢ ﻛﺮده اﺳﺖ ﺗﺎ ﺑﺮاﺣﺘـﻲ ﺑﺘﻮاﻧﻴـﺪ ﻫـﺮ ﻋﻨـﺼﺮ از ﺻـﻔﺤﻪ را ﻛـﻪ ﺑـﺮاي ﺗﻐﻴﻴـﺮات ﻧﻴـﺎز دارﻳـﺪ را‬
‫ﺟﺴﺘﺠﻮ ﻛﻨﻴﺪ ﺑﺮاي اﻳﻦ ﻛﺎر ﭼﻨﺪﻳﻦ روش وﺟﻮد دارد‪:‬‬
‫‪ -1‬اﺳﺘﻔﺎده از ﻣﺘﺪ )(‪ getElementById‬و ﻣﺘﺪ )(‪. getElementsByTagName‬‬
‫‪ -2‬ﺑﺎ اﺳﺘﻔﺎده از ﺧﺎﺻﻴﺖ ﻫﺎي ‪. lastChild ،firstChild ،parentNode‬‬
‫روش اول‬
‫ﻣﺘﺪﻫﺎي )(‪ getElementById‬و)(‪ getElementsByTagName‬ﻫﺮ ﻋﻨﺼﺮي در ﺻـﻔﺤﻪ ‪ Html‬را‬
‫ﻣﻲ ﺗﻮاﻧﻨﺪ ﺟﺴﺘﺠﻮ ﻛﻨﻨﺪ‪ .‬اﻳﻦ ﻣﺘﺪﻫﺎ ﺳﺎﺧﺘﺎر درﺧﺘﻲ ﺻﻔﺤﻪ را ﻧﺎدﻳﺪه ﻣﻲ ﮔﻴﺮﻧﺪ‪.‬‬
‫ﻓﺼﻞ ‪33  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫اﮔﺮ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻋﻨﺼﺮ >‪ <p‬را در ﺻﻔﺤﻪ ﭘﻴﺪا ﻛﻨﻴﺪ‪ ،‬ﻣﺘﺪ )(‪ getElementsByTagName‬ﻫﻤﻪ ي آن ﻫﺎ را‬
‫ﺑﺮﻣﻲ ﮔﺮداﻧﺪ ﺻﺮﻓﻨﻈﺮ از اﻳﻨﻜﻪ >‪ <p‬در ﻛﺪام ﺳﻄﺢ درﺧﺖ ﻗﺮار دارد ﻫﻤﭽﻨـﻴﻦ ﻣﺘـﺪ )(‪getElementById‬‬
‫ﻫﻤﻮاره ﻋﻨﺼﺮ ﻣﻮﺟﻮد در ﺻـﻔﺤﻪ را ﺑﺮﻣـﻲ ﮔﺮداﻧـﺪ اﮔﺮﭼـﻪ آن ﻋﻨـﺼﺮ ﺑـﺼﻮرت ﻣﺨﻔـﻲ )‪ (hidden‬ﺑﺎﺷـﺪ‪.‬ﻣﺘـﺪ‬
‫)(‪ getElementById‬ﻳﻚ ﻋﻨﺼﺮ ‪ Html‬را ﺑﺎ ‪ ID‬ﻣﺸﺨﺺ ﺑﺮﻣﻲ ﮔﺮداﻧﺪ‪.‬‬
‫ﺷﻜﻞ ﻛﻠﻲ اﻳﻦ ﻣﺘﺪ ﺑﺼﻮرت زﻳﺮ اﺳﺖ‪:‬‬
‫;)"‪document.getElementById("someID‬‬
‫ﻣﺘﺪ )(‪ getElementsByTagName‬ﺗﻤﺎم ﻋﻨﺎﺻﺮي ﻛﻪ داراي ﻧﺎم ﺗﮓ ﻳﻜﺴﺎﻧﻲ ﻫﺴﺘﻨﺪ را در ﻳﻚ آراﻳـﻪ ﺑـﺮ‬
‫ﻣﻲ ﮔﺮداﻧﺪ‪ .‬اﻳﻦ ﻣﺘﺪ ﺑﺮاي ﺗﻤﺎﻣﻲ ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد ﺑﺮ روي ﺻﻔﺤﻪ ‪ Html‬ﻛﺎر ﻣﻲ ﻛﻨﺪ‪.‬‬
‫ﺷﻜﻞ ﻛﻠﻲ اﻳﻦ ﻣﺘﺪ ﺑﺼﻮرت زﻳﺮ اﺳﺖ‪:‬‬
‫;)"‪document.getElementsByTagName("tagname‬‬
‫ﻳﺎ‬
‫‪document.getElementById('someID').getElementsByTagName("tagnam‬‬
‫;)"‪e‬‬
‫ﺑﻪ ﻣﺜﺎل زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪ :‬در اﻳﻦ ﻣﺜﺎل ﺗﻤﺎم ﺗﮓ ﻫﺎي >‪ <p‬ﺑﺮﮔﺸﺖ داده ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
‫;)"‪document.getElementsByTagName("p‬‬
‫در ﻛﺪ زﻳﺮ ﻣﻲ ﺧﻮاﻫﻴﻢ ﺗﻤﺎم ﺗﮓ ﻫﺎي >‪ <p‬ﻛﻪ داراي "‪ ID="maindiv‬ﻣﻲ ﺑﺎﺷﻨﺪ را ﺟﺴﺘﺠﻮ ﻛﻨﻴﻢ‪:‬‬
‫;)"‪document.getElementById('maindiv').getElementsByTagName("p‬‬
‫آراﻳﻪ ي از ﮔﺮه ﻫﺎ‬
‫زﻣﺎﻧﻴﻜﻪ ﺑﺎ ﻳﻚ آراﻳﻪ از ﮔﺮه ﻫﺎ ﻛﺎر ﻣﻲ ﻛﻨﻴﺪ ﺑﺎﻳﺪ از ﻳﻚ ﻣﺘﻐﻴﺮ ﺑﺮاي ﻧﮕﻬﺪاري ﻋﻨﺎﺻﺮ آراﻳﻪ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬
‫;)"‪var x=document.getElementsByTagName("p‬‬
‫در اﻳﻨﺠﺎ ﻣﺘﻐﻴﺮ ‪ x‬ﻳﻚ آراﻳﻪ از ﺗﮓ ﻫﺎي >‪ <p‬ﻣﻮﺟﻮد در ﺻﻔﺤﻪ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑﻪ ﻫﺮ ﻛـﺪام از ﺗـﮓ ﻫـﺎ‬
‫ﺑﺎﻳﺪ از اﻧﺪﻳﺲ اﺳﺘﻔﺎده ﻛﺮد‪ .‬اﻧﺪﻳﺲ از ﺻﻔﺮ ﺷﺮوع ﻣﻲ ﺷﻮد‪ .‬ﺑﻪ ﻛﺪ زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬
‫;)"‪var x=document.getElementsByTagName("p‬‬
‫)‪for (var i=0;i<x.length;i++‬‬
‫{‬
‫‪// do something with each paragraph‬‬
‫}‬
‫ﻣﺜﻼ ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑﻪ ﺳﻮﻣﻴﻦ ﺗﮓ >‪<p‬‬
‫;]‪var y=x[2‬‬
‫روش دوم‬
‫ﺳﻪ ﺧﺎﺻﻴﺖ ‪ firstChild ،parentNode‬و ‪ lastChild‬از ﺳﺎﺧﺘﺎر درﺧﺘﻲ ﺻﻔﺤﻪ ﭘﻴﺮوي ﻣﻲ ﻛﻨﻨﺪ و‬
‫اﻣﻜﺎن ﻳﻚ ﺣﺮﻛﺖ ﻛﻮﺗﺎه را در اﻳﻦ درﺧﺖ ﻓﺮاﻫﻢ ﻣﻲ آورﻧﺪ‪.‬‬
‫ﺑﻪ اﻳﻦ ﻛﺪ ‪ Html‬دﻗﺖ ﻛﻨﻴﺪ‪:‬‬
‫>‪<table‬‬
‫>‪<tr‬‬
‫>‪<td>hadi</td‬‬
‫>‪<td>mohammad</td‬‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  34‬ﻓﺼﻞ ‪2‬‬

‫>‪<td>tavakoli</td‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫در اﻳﻦ ﻛﺪ اوﻟﻴﻦ >‪ <td‬ﺑﻌﻨﻮان ‪ firstChild‬و آﺧﺮﻳﻦ >‪ <td‬ﺑﻌﻨﻮان ‪ lastChild‬ﺑﺮاي ﮔﺮه >‪ <tr‬ﻣﻲ‬
‫ﺑﺎﺷﺪ‪ <tr> .‬ﭘﺪر ﻫﻤﻪ ي ﮔﺮه ﻫﺎي >‪ <td‬اﺳﺖ‪.‬‬
‫ﺑﻴﺸﺘﺮﻳﻦ ﻛﺎرﺑﺮد ‪ firstChild‬ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑﻪ ﻣﺘﻦ ﻳﻚ ﻋﻨﺼﺮ اﺳﺖ‪.‬‬
‫;]‪var x=[a paragraph‬‬

‫;‪var text=x.firstChild.nodeValue‬‬
‫از ﺧﺎﺻﻴﺖ ‪ parentNode‬اﻏﻠﺐ ﺑﺮاي ﺗﻐﻴﻴﺮ در ﺳﺎﺧﺘﺎر ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ .‬ﻣـﺜﻼ ﺑـﺮاي ﺣـﺬف ﮔـﺮه ي ﺑـﺎ‬
‫"‪: ID="maindiv‬‬
‫;)"‪var x=document.getElementById("maindiv‬‬
‫;)‪x.parentNode.removeChild(x‬‬
‫ﺑﺮاي ﺣﺬف ﻳﻚ ﮔﺮه از ﻣﺘﺪ )(‪ removeChild‬اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬
‫ﮔﺮه رﻳﺸﻪ‬
‫ﮔﺮه رﻳﺸﻪ در ﺳﺎﺧﺘﺎر درﺧﺘﻲ ‪ ،DOM‬ﮔﺮه ‪ document‬اﺳﺖ اﻳﻦ ﮔﺮه دو ﺧﺎﺻﻴﺖ ﺧﺎص ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑـﻪ ﺗـﮓ‬
‫ﻫﺎ داراﺳﺖ‪.‬‬

‫‪- document.documentElement‬‬

‫‪- document.body‬‬

‫ﺧﺎﺻﻴﺖ اول ﮔﺮه رﻳﺸﻪ ﺻﻔﺤﻪ را ﺑﺮﻣﻲ ﮔﺮداﻧﺪ و ﺧﺎﺻﻴﺖ دوم ﺑﺮاي دﺳﺘﺮﺳﻲ ﻣﺴﺘﻘﻴﻢ ﺑﻪ ﺗﮓ >‪ <body‬اﺳﺖ‪ .‬در‬
‫اﻳﻦ ﻣﺜﺎل ﻛﺎرﺑﺮد ﺧﺎﺻﻴﺖ ‪ body‬را ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ‪.‬‬
‫>‪<html‬‬

‫>‪<head‬‬
‫>"‪<script type="text/javascript‬‬
‫)(‪function ChangeColor‬‬
‫{‬
‫"‪document.body.bgColor="yellow‬‬
‫}‬
‫>‪</script‬‬
‫>‪</head‬‬

‫>")(‪<body onclick="ChangeColor‬‬
‫!‪Click on this document‬‬
‫>‪</body‬‬

‫>‪</html‬‬
‫اﻃﻼﻋﺎت ﮔﺮه‬
‫ﺧﺎﺻﻴﺖ ﻫﺎي ‪ nodeValue ،nodeName‬و ‪ nodeType‬ﺷﺎﻣﻞ اﻃﻼﻋﺎت ﮔﺮه ﻫﺎ ﻫﺴﺘﻨﺪ‪.‬‬
‫ﻓﺼﻞ ‪35  2‬‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫ﻫﺮ ﻧﻮد داراي ﺧﺎﺻﻴﺖ ﻫﺎي زﻳﺮ اﺳﺖ‪:‬‬

‫‪nodeName-1‬‬
‫‪nodeValue-2‬‬
‫‪nodeType -3‬‬
‫ﺧﺎﺻﻴﺖ ‪ nodeName‬ﺷﺎﻣﻞ ﻧﺎم ﮔﺮه اﺳﺖ‪:‬‬
‫‪ -‬ﺧﺎﺻﻴﺖ ‪ nodeName‬ﺑﺮاي ﮔﺮه ﻫﺎي ‪ element‬ﻧﺎم ﺗﮓ اﺳﺖ‪.‬‬
‫‪ -‬ﺧﺎﺻﻴﺖ ‪ nodeName‬ﺑﺮاي ﮔﺮه ﻫﺎي ‪ attribute‬ﻧﺎم ﺧﺎﺻﻴﺖ اﺳﺖ‪.‬‬
‫‪ -‬ﺧﺎﺻﻴﺖ ‪ nodeName‬ﺑﺮاي ﮔﺮه ﻫﺎي ‪ text‬ﺑﺼﻮرت ‪ #text‬اﺳﺖ‪.‬‬
‫‪ -‬ﺧﺎﺻــﻴﺖ ‪ nodeName‬ﺑــﺮاي ﮔــﺮه ﻫــﺎي ‪ document‬ﺑــﺼﻮرت ‪ #document‬اﺳــﺖ ﻧــﺎم ﮔــﺮه ﻫــﺎ در‬
‫‪ nodeName‬ﺑﺎ ﺣﺮوف ﺑﺰرگ ﻧﮕﻬﺪاري ﻣﻲ ﺷﻮد‪.‬‬
‫ﺧﺎﺻﻴﺖ ‪: nodeValue‬‬
‫‪ -‬ﺧﺎﺻﻴﺖ ‪ nodeValue‬ﺑﺮاي ﮔﺮه ﻫﺎي ‪ attribute‬ﻣﻘﺪار ﺧﺎﺻﻴﺖ اﺳﺖ‪.‬‬
‫‪ -‬ﺧﺎﺻﻴﺖ ‪ nodeValue‬ﺑﺮاي ﮔﺮه ﻫﺎي ‪ text‬ﺷﺎﻣﻞ ﻣﺘﻦ اﺳﺖ‪.‬‬
‫ﺑﺮاي ﮔﺮه ﻫﺎي ‪ element‬و ‪ document‬اﻳﻦ ﺧﺎﺻﻴﺖ ﻏﻴﺮ ﻓﻌﺎل اﺳﺖ‪.‬‬
‫ﺧﺎﺻﻴﺖ ‪: nodeType‬‬
‫اﻳﻦ ﺧﺎﺻﻴﺖ ﻧﻮع ﮔﺮه را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ‪ .‬ﻣﻘﺪارﻫﺎي اﻳﻦ ﺧﺎﺻﻴﺖ ﺑﺮاي اﻧﻮاع ﮔـﺮه ﻫـﺎي ﻣﺨﺘﻠـﻒ درﺟـﺪول ‪2-6‬‬
‫آورده ﺷﺪه اﺳﺖ‪.‬‬
‫‪Element type‬‬ ‫‪NodeType‬‬
‫‪Element‬‬ ‫‪1‬‬
‫‪Attribute‬‬ ‫‪2‬‬
‫‪Text‬‬ ‫‪3‬‬
‫‪Comment‬‬ ‫‪8‬‬
‫‪Document‬‬ ‫‪9‬‬
‫ﺟﺪول ‪ 2-6‬ﻣﻘﺪار ‪ NodeType‬ﺑﺮاي اﻧﻮاع ﮔﺮه ﻫﺎ‬
‫ﺷﻲ ‪document‬‬
‫ﺑﺎ اﺳﺘﻔﺎده از اﻳﻦ ﺷﻲ ﻣﻲ ﺗﻮان ﺑﻪ ﻫﺮ ﻋﻨﺼﺮ داﺧﻞ ﺻﻔﺤﻪ وب دﺳﺘﺮﺳﻲ داﺷـﺖ‪ .‬و ﻧﻴـﺰ ﺑـﺎ اﺳـﺘﻔﺎده از ﺧﺎﺻـﻴﺖ ﻫـﺎ و‬
‫ﻣﺘﺪﻫﺎي اﻳﻦ ﺷﻲ ﺗﻐﻴﻴﺮاﺗﻲ در ﺻﻔﺤﻪ اﻧﺠﺎم داد‪.‬‬
‫ﻧﺎم ﺧﺎﺻﻴﺖ‬ ‫ﺗﻮﺿﻴﺢ‬
‫‪AlinkColor‬‬ ‫رﻧﮓ ﻟﻴﻨﻚ زﻣﺎﻧﻴﻜﻪ ﻛﻠﻴﻚ ﺷﻮد‬
‫‪BgColor‬‬ ‫رﻧﮓ ﭘﺲ زﻣﻴﻨﻪ ﺻﻔﺤﻪ‬
‫‪Cookie‬‬ ‫ﻣﻘﺪاردﻫﻲ وﻳـﺎ ﺑﺎزﮔﺮداﻧـﺪن ﺗﻤـﺎم ﻛـﻮﻛﻲ ﻫـﺎي ﻛـﻪ در‬
‫ارﺗﺒﺎط ﺑﺎ اﻳﻦ ﺻﻔﺤﻪ ﻣﻲ ﺑﺎﺷﻨﺪ‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  36‬ﻓﺼﻞ ‪2‬‬

‫‪FgColor‬‬ ‫رﻧﮓ ﻣﺘﻦ ﺻﻔﺤﻪ‬

‫]‪Forms[array‬‬ ‫آراﻳﻪ ي از ﻓﺮم ﻫﺎي ﻣﻮﺟﻮد در ﺻﻔﺤﻪ‬
‫]‪Images[array‬‬ ‫آراﻳﻪ ي از ﺗﺼﻮﻳﺮﻫﺎي ﻣﻮﺟﻮد در ﺻﻔﺤﻪ‬
‫‪LastModified‬‬ ‫ﻳﻚ ﻓﺮﻣﺖ رﺷﺘﻪ ي از آﺧﺮﻳﻦ ﺗﺎرﻳﺦ ﺗﻐﻴﻴﺮ ﺻﻔﺤﻪ‬
‫‪LinkColor‬‬ ‫رﻧﮓ اوﻟﻴﻪ ﻳﻚ ﻟﻴﻨﻚ ﻗﺒﻞ از اﻳﻨﻜﻪ ﻣﻼﻗﺎت ﺷﻮد‬
‫]‪Links[array‬‬ ‫آراﻳﻪ ي از ﻟﻴﻨﻚ ﻫﺎي ﻣﻮﺟﻮد در ﺻﻔﺤﻪ‬
‫‪Location‬‬ ‫آدرس ‪ url‬ﺻﻔﺤﻪ‬
‫‪Title‬‬ ‫ﻋﻨﻮان ﺻﻔﺤﻪ‬
‫‪URL‬‬ ‫آدرس ‪ url‬ﺻﻔﺤﻪ‬
‫‪VlinkColor‬‬ ‫رﻧﮓ ﻳﻚ ﻟﻴﻨﻚ ﻣﻼﻗﺎت ﺷﺪه‬
‫ﺟﺪول ‪ 2-7‬ﺧﺎﺻﻴﺖ ﻫﺎي ﺷﻲ ‪document‬‬
‫ﻣﻬﻢ ﺗﺮﻳﻦ ﻣﺘﺪﻫﺎي ﺷﻲ ‪ document‬ﻋﺒﺎرﺗﻨﺪ از‪:‬‬
‫‪write -‬‬
‫‪writeln -‬‬
‫اﻳﻦ دو ﻣﺘﺪآﻧﭽﻪ ﺑﻌﻨﻮان ﭘﺎراﻣﺘﺮ ﺑﺎ آن ﻫﺎ ﻣﻲ دﻫﻴﺪ را ﺑﺮ روي ﺻﻔﺤﻪ ﭼﺎپ ﻣﻲ ﻛﻨﺪ‪.‬‬
‫)‪document.write(exp1,exp2,exp3,....‬‬

‫)‪document.writeln(exp1,exp2,exp3,....‬‬
‫ﻣﺜﺎل‪:‬‬
‫;)'‪document.write('test text‬‬

‫;)">‪document.write("<h1>Hello World!</h1‬‬

‫‪document.write("Hello World! ","Hello You! ","<p‬‬

‫;)">‪style='color:blue;'>Hello World!</p‬‬
‫ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑﻪ ﻋﻨﺼﺮﻫﺎي ﻳﻚ ﺻﻔﺤﻪ از ﻃﺮﻳﻖ ﻧﺎم ﻣﻲ ﺗﻮان از ﻣﺘﺪ )(‪ getElementsByName‬و از ﻃﺮﻳﻖ‬
‫ﺷﻨﺎﺳــﻪ از ﻣﺘــﺪ )(‪ getElementById‬واز ﻃﺮﻳــﻖ ﻧــﺎم ﺗــﮓ از ﻣﺘــﺪ )(‪getElementsByTagName‬‬
‫اﺳﺘﻔﺎده ﻛﺮد‪.‬‬
‫ﻣﺜﺎل ﺑﺮاي ﺗﻐﻴﻴﺮ ﻣﺘﻦ داﺧﻞ ﻳﻚ ‪ textBox‬ﻣﻲ ﺗﻮان ﺑﻪ دو ﺻﻮرت زﻳﺮ ﻋﻤﻞ ﻛﺮد‪:‬‬
‫>'‪<input type=text name='txt1' id='tbox1' value='ok‬‬

‫;'‪document.getElementsByName('txt1').value = 'select name‬‬

‫;'‪document.getElementById('tbox1').value = 'select id‬‬

37  2 ‫ﻓﺼﻞ‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

:‫ﺑﻪ ﻣﺜﺎل زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‬

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>
</body>
</html>
Html ‫ اﺳﺘﻔﺎده ﺷﺪ ﺗﺎ اﻃﻼﻋﺎت ﺑـﻪ ﻓﺮﻣـﺖ‬innerHtml ‫در اﻳﻦ ﻣﺜﺎل ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑﻪ ﻣﺤﺘﻮاي ﻣﺘﻦ از ﺧﺎﺻﻴﺖ‬
.‫ﻧﻴﺰ درﻳﺎﻓﺖ ﺷﻮد‬
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many elements named 'myInput'?" />
</body>
</html>

‫ ﺑﻪ ﻳﻚ ﻣﺠﻤﻮﻋﻪ از ﺗـﮓ ﻫـﺎ دﺳﺘﺮﺳـﻲ ﭘﻴـﺪا‬getElementsByName("myInput") ‫در ﻣﺜﺎل ﺑﺎﻻ ﺑﺎ ﻣﺘﺪ‬

.‫ﻛﺮدﻳﻢ‬
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("input");
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ 2 ‫ ﻓﺼﻞ‬ 38

alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many input elements?" />
</body>
</html>
‫ ﺑـﻪ ﻳـﻚ ﻣﺠﻤﻮﻋـﻪ از ﺗـﮓ ﻫـﺎ‬getElementsByTagName("input") ‫در اﻳﻦ ﻣﺜﺎل ﺑﺎ اﺳﺘﻔﺎده از ﻣﺘـﺪ‬
.‫ﺑﺮاﺳﺎس ﻧﺎم ﻳﻜﺴﺎن دﺳﺘﺮﺳﻲ ﭘﻴﺪا ﻛﺮدﻳﻢ‬
<select> ‫< را ﺑﻌﻨـﻮان ﭘـﺪر‬form> ‫< ﺑﺎﻳـﺪ ﻳـﻚ‬select> ‫ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑﻪ ﻣﻘﺪار اﻧﺘﺨﺎب ﺷﺪه در ﻳـﻚ‬
:‫ﻗﺮار دارد ﺑﺼﻮرت زﻳﺮ‬
<form name='form1'>
<select id="select1">
<option value="0" >‫<ﻧﺎم‬/option>
<option value="1" > ‫<ﻣﻮﺿﻮع‬/option>
</select>
</form>
:‫ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑﻪ ﻣﻘﺪار از دﺳﺘﻮر زﻳﺮ اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﻢ‬
document.form1.select1.options[document.form1.select1.
selectedIndex].value;

innerHTML ‫ و‬innerText ‫ﺧﺎﺻﻴﺖ‬

‫ ﻛـﺎرﺑﺮد اﻳـﻦ دو ﺧﺎﺻـﻴﺖ‬.‫ ﻣﻌﺮﻓـﻲ ﻛـﺮد‬DOM ‫ دو ﺧﺎﺻﻴﺖ ﺟﺪﻳﺪ ﺑﺮاي ﺗﻤﺎﻣﻲ ﻋﻨﺎﺻﺮ‬IE4 ‫ﻣﺎﻳﻜﺮوﺳﺎﻓﺖ ﺑﺎ ﻋﺮﺿﻪ‬
.‫ ﻣﻲ ﺑﺎﺷﺪ وﻟﻲ ﺧﻴﻠﻲ ﺳﺎده ﺗﺮ از ﻗﺒﻞ‬DOM ‫ﺑﺮاي ﺗﻐﻴﻴﺮ ﻋﻨﺎﺻﺮ‬
‫ ﻣـﻲ ﺑﺎﺷـﺪﺑﻪ ﻣﺜـﺎل‬DOM ‫( ﻣﺎﺑﻴﻦ ﺗﮓ ﺷﺮوع و ﭘﺎﻳﺎن ﻳﻚ ﻋﻨﺼﺮ‬text) ‫ ﺑﺮاي ﺗﻐﻴﻴﺮ ﻣﺘﻦ‬innerText ‫ﺧﺎﺻﻴﺖ‬
:‫زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‬
:‫ ﻣﺘﻨﻲ را اﺿﺎﻓﻪ ﻛﻨﻴﻢ‬،‫< در ﺻﻔﺤﻪ‬div> ‫ﻣﻲ ﺧﻮاﻫﻴﻢ ﺑﻪ ﻳﻚ ﺗﮓ‬
<html>
<head>
<title> </title>
</head>
<body>
<div id="div1" > </div>
</body>
</html>
39  2 ‫ﻓﺼﻞ‬ ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

DOM ‫ﻳﻚ راه ﺣﻞ ﺑﺎ اﺳﺘﻔﺎده از دﺳﺘﻮرات ﺳﺎﺧﺘﺎري‬

var dtext = document.createTextNode(“New text for the div.”);

document.getElementById('div1').appendChild(dtext);

innerText ‫اﻣﺎ راه ﺣﻞ دوم اﺳﺘﻔﺎده از ﺧﺎﺻﻴﺖ‬

document.getElementById('div1').innerText = “New text for the
div.”;

‫ ﺑـﺮاي ﻣﺜـﺎل‬.‫ ﺣﺴﺎس ﻧﻴﺴﺖ و آن ﻫﺎ را ﺟﺰء ﻣﺘﻦ ﺑﻪ ﺣﺴﺎب ﻣﻲ آورد‬Html ‫ ﺑﻪ ﺗﮓ ﻫﺎي‬innerText ‫ﺧﺎﺻﻴﺖ‬
:‫< ﺑﻨﻮﻳﺴﻴﻢ‬div> ‫ داﺧﻞ ﻳﻚ‬Html ‫ﻣﻲ ﺧﻮاﻫﻴﻢ اﻳﻦ دﺳﺘﻮر‬
<h1>hadi</h1>
.‫< ﻧﻴﺰ ﺑﺮ روي ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮﻧﺪ‬h1> ‫ اﻧﺠﺎم دﻫﻴﻢ ﻣﺘﻦ ﻫﺎي ﺗﮓ‬innerText ‫اﮔﺮ اﻳﻦ ﻛﺎر را ﺑﺎ‬
document.getElementById('div1').innerText ='<h1>hadi</h1>';
.‫ ﻣﻲ ﺑﺎﺷﺪ و اﻳﻦ ﻣﺸﻜﻞ را ﺣﻞ ﻣﻲ ﻛﻨﺪ‬Html ‫ ﺣﺴﺎس ﺑﻪ ﺗﮓ ﻫﺎي‬innerHTML ‫اﻣﺎ ﺧﺎﺻﻴﺖ دﻳﮕﺮ‬

document.getElementById('div1').innerHTML='<h1>hadi</h1>';
:‫ ﺑﻨﻮﻳﺴﻴﻢ ﺑﺪﻳﻦ ﮔﻮﻧﻪ ﻣﻲ ﺷﺪ‬DOM ‫اﮔﺮ ﻣﻲ ﺧﻮاﺳﺘﻴﻢ اﻳﻦ ﻛﺎر را ﺑﺎ دﺳﺘﻮرات‬
var hText = document.createElement(“h1”);
hText.appendChild(document.createTextNode(“hadi”));

document.getElementById('div1').appendChild(hText);

‫ ﺑﺮاي ﻧﻮﺷﺘﻦ ﺑﺮﻧﺎﻣﻪ ﻫﺎ از ﻛـﺪ ﺟﺎوااﺳـﻜﺮﻳﭙﺖ ﺳـﻤﺖ‬Ajax ‫در ﭘﺎﻳﺎن ﺑﻪ اﻳﻦ ﻧﻜﺘﻪ اﺷﺎره ﻣﻲ ﻛﻨﻴﻢ ﻛﻪ در ﺗﻜﻨﻮﻟﻮژي‬
.‫ﺳﺮور اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‬
 ‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬ ‫‪  40‬ﻓﺼﻞ ‪2‬‬

‫ﺷﻜﻞ ‪ 2-3‬ﻧﻤﻮدار راﺑﻄﻪ اي اﺷﻴﺎ ﻣﺮورﮔﺮﻫﺎ)‪(DOM‬‬

‫ﻓﺼﻞ ‪41  3‬‬ ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬

‫ﻓﺼﻞ ﺳﻮم‪ :‬ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬

‫ﻧﻴﺮوي ﭘﻴﺸﺒﺮﻧﺪه ﭘﺸﺖ ﺳﺮ ‪ ،Ajax‬اﻳﺠﺎد ارﺗﺒﺎط ﺑﻴﻦ ﻛﻼﻳﻨﺖ و ﺳﺮور اﺳﺖ‪ .‬ﻗﺒﻼ اﻳﻦ ارﺗﺒﺎط ﻣﺤﺪود ﺑﻪ ﺗﻮﺳﻌﻪ‬
‫زﺑﺎﻧﻬﺎي ﺳﻤﺖ ﺳﺮور ﻣﺎﻧﻨﺪ ‪ perl‬و ‪ CGI‬ﺑﻮد‪ ،‬ﺗﻜﻨﻮﻟﻮژﻳﻬﺎي ﺟﺪﻳﺪ ﻣﺎﻧﻨﺪ ‪ PHP ،asp.net‬و ‪ jsp‬ﺗﻜﻨﻴﻚ‬
‫ﻫﺎي را ﺑﺮاي آﻣﻴﺨﺘﻦ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺳﻤﺖ ﺳﺮور و ﻛﻼﻳﻨﺖ ﺑﺮاي ﻋﻼﻗﻤﻨﺪان ﺑﻪ اﻳﺠﺎد ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب ﻓﺮاﻫﻢ آوردﻧﺪ‪،‬‬
‫اﻣﺎ آن ﻫﺎ ﻓﺎﻗﺪ ﺗﻜﻨﻴﻚ ﻫﺎي ﺳﻤﺖ ﻛﻼﻳﻨﺖ ﻣﺎﻧﻨﺪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﻮدﻧﺪ‪ .‬اﻣﺎ اﻛﻨﻮن آوﻧﮓ در ﺟﻬﺖ دﻳﮕﺮي ﺗﺎب‬
‫ﻣﻲ ﺧﻮرد‪ ،‬ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن ﺳﻤﺖ ﺳﺮور ﻧﻴﺎز ﺑﻪ ﻓﻬﻤﻴﺪن ﭼﻴﺰﻫﺎي زﻳﺎدي درﺑﺎره ﺗﻜﻨﻴﻚ ﻫﺎي ﺳﻤﺖ ﻛﻼﻳﻨﺖ دارﻧﺪ‬
‫ﺗﺎ ﺑﺘﻮاﻧﻨﺪ راه ﺣﻞ ‪ Ajax‬را ﺑﻪ ﻛﺎر ﺑﺒﺮﻧﺪ‪.‬‬
‫ﺷﺮوع ﺑﺎ ‪HTTP‬‬
‫ﺑﻬﺘﺮﻳﻦ روش درك ‪ Ajax‬درك ‪ HTTP‬اﺳﺖ‪ HTTP ،‬ﭘﺮوﺗﻜﻠﻲ ﺑﺮاي ارﺳﺎل ﺻﻔﺤﺎت وب‪ ،‬ﺗﺼﻮﻳﺮ و اﻧﻮاع‬
‫دﻳﮕﺮ ﻓﺎﻳﻞ ﻫﺎ ﺑﺮ روي اﻳﻨﺘﺮﻧﺖ ﺑﻪ ﺳﻤﺖ ﻣﺮورﮔﺮ ﺷﻤﺎ و ﻳﺎ ﺑﺮﻋﻜﺲ )ﺳﻤﺖ ﺳﺮور( اﺳﺖ‪ .‬زﻣﺎﻧﻲ ﻛﻪ ﺷﻤﺎ ﻳﻚ ‪URL‬‬
‫را در ﻣﺮورﮔﺮ ﺗﺎﻳﭗ ﻣﻲ ﻛﻨﻴﺪ‪ ،‬ﻳﻚ ‪ HTTP://‬ﺑﻪ آدرس ﺷﻤﺎ اﺿﺎﻓﻪ ﻣﻲ ﺷﻮد ﻛﻪ ﻧﺸﺎن ﻣﻲ دﻫﺪ ﺷﻤﺎ ﻣﻲ ﺧﻮاﻫﻴﺪ‬
‫از ‪ HTTP‬ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑﻪ اﻃﻼﻋﺎت ﻣﺤﻞ ذﻛﺮ ﺷﺪه اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪) .‬اﻏﻠﺐ ﻣﺮورﮔﺮﻫﺎ ﺗﻌﺪاد دﻳﮕﺮي از ﭘﺮوﺗﻜﻞ ﻫﺎ‬
‫ﻣﺎﻧﻨﺪ ‪ FTP‬را ﻧﻴﺰ ﭘﺸﺘﻴﺒﺎﻧﻲ ﻣﻲ ﻛﻨﻨﺪ(‬
‫‪ HTTP‬از دوﻗﺴﻤﺖ ﺗﺸﻜﻴﻞ ﺷﺪه اﺳﺖ‪ :‬درﺧﻮاﺳﺖ)‪ (request‬و ﭘﺎﺳﺦ )‪ .(Response‬زﻣﺎﻧﻲ ﻛﻪ ﺷﻤﺎ در‬
‫ﻣﺮورﮔﺮ وب ﻳﻚ ‪ URL‬را ﺗﺎﻳﭗ ﻣﻲ ﻛﻨﻴﺪ‪ ،‬ﻣﺮورﮔﺮ از ﻃﺮف ﺷﻤﺎ ﻳﻚ درﺧﻮاﺳﺖ اﻳﺠﺎد ﻛﺮده و آن را ارﺳﺎل ﻣﻲ‬
‫ﻛﻨﺪ اﻳﻦ درﺧﻮاﺳﺖ ﺷﺎﻣﻞ ‪ Url‬ي ﻛﻪ ﺷﻤﺎ ﺗﺎﻳﭗ ﻛﺮده اﻳﺪ و ﺑﺮﺧﻲ اﻃﻼﻋﺎت دﻳﮕﺮ ﻛﻪ ﺑﻪ ﻣﺮورﮔﺮ ﻣﺮﺑﻮط ﻣﻲ‬
‫ﺷﻮد اﺳﺖ‪ .‬ﺳﺮور اﻳﻦ درﺧﻮاﺳﺖ را درﻳﺎﻓﺖ و ﺑﻪ ﺳﻤﺖ ﻋﻘﺐ )ﺳﻤﺖ ﻣﺮورﮔﺮ( ﭘﺎﺳﺨﻲ را ارﺳﺎل ﻣﻲ ﻛﻨﺪ‪ .‬ﭘﺎﺳﺦ‬
‫ﺷﺎﻣﻞ اﻃﻼﻋﺎﺗﻲ درﺑﺎره ﻣﺤﻞ ﺗﻌﻴﻴﻦ ﺷﺪه داده در ‪ URL‬اﺳﺖ‪ .‬اﻳﻦ وﻇﻴﻔﻪ ﻣﺮورﮔﺮ اﺳﺖ ﻛﻪ ﭘﺎﺳﺦ را ﺗﻐﻴﻴﺮ داده و آن‬
‫را در ﺻﻔﺤﻪ وب ﻧﻤﺎﻳﺶ دﻫﺪ‪.‬‬
‫درﺧﻮاﺳﺖ ﻫﺎي ‪HTTP‬‬
‫ﻓﺮﻣﺖ ﻳﻚ درﺧﻮاﺳﺖ ‪ HTTP‬ﺑﻪ ﺻﻮرت زﻳﺮ اﺳﺖ‪:‬‬
‫>‪<request-line‬‬
‫>‪<headers‬‬
‫>‪<blank line‬‬
‫]>‪[<request-body‬‬
‫در ﻳﻚ درﺧﻮاﺳﺖ ‪ ،HTTP‬ﺧﻂ اول ﺑﺎﻳﺴﺘﻲ ﻳﻚ ﺧﻂ درﺧﻮاﺳﺖ ﺑﺎﺷﺪ ﺗﺎ ﻧﻮع درﺧﻮاﺳﺖ‪ ،‬ﻣﻨﺎﺑﻊ در دﺳﺘﺮس‪ ،‬و‬
‫ﻧﺴﺨﻪ ‪ HTTP‬ﻛﻪ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮد را ﻧﺸﺎن دﻫﺪ‪ .‬ﺧﻂ ﺑﻌﺪ‪ ،‬ﻳﻚ ﻗﻄﻌﻪ ‪ header‬اﺳﺖ ﻛﻪ اﻃﻼﻋﺎت‬
‫اﺿﺎﻓﻲ ﻛﻪ ﺗﻮﺳﻂ ﺳﺮور ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮد را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ .‬ﺑﻌﺪ از ‪ Header‬ﻳﻚ ﺧﻂ ﺧﺎﻟﻲ وﺟﻮد‬
‫داردﻛﻪ ﻣﻲ ﺗﻮاﻧﺪ ﺑﺎ اﻃﻼﻋﺎت اﺿﺎﻓﻲ ﭘﺮ ﺷﻮد‪.‬‬
 ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬ ‫‪  42‬ﻓﺼﻞ ‪3‬‬

‫اﻧﻮاع ﻣﺨﺘﻠﻔﻲ از درﺧﻮاﺳﺖ وﺟﻮد دارد ﻛﻪ در ‪ HTTP‬ﺗﻌﺮﻳﻒ ﻣﻲ ﺷﻮد اﻣﺎ دو ﻧﻮع ﻣﻮرد ﺗﻮﺟﻪ ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن‬
‫‪ Ajax‬درﺧﻮاﺳﺖ ﻫﺎي ﻧﻮع‪ GET :‬و ‪ POST‬ﻣﻲ ﺑﺎﺷﻨﺪ‪ .‬ﻫﺮ زﻣﺎﻧﻲ ﻛﻪ ﺷﻤﺎ ﻳﻚ ‪ URL‬را در ﻣﺮورﮔﺮ وب ﺗﺎﻳﭗ‬
‫ﻛﻨﻴﺪ‪ ،‬ﺑﺮاي آن ‪ ،URL‬ﻳﻚ درﺧﻮاﺳﺖ ‪ GET‬ﺑﻪ ﺳﻤﺖ ﺳﺮور ارﺳﺎل ﻣﻲ ﻛﻨﻴﺪ‪ ،‬ﻛﻪ ﺑﻄﻮر ﻛﻠﻲ ﺑﻪ ﺳﺮور ﻣﻲ ﮔﻮﻳﺪ‬
‫ﻛﻪ ﻣﻨﺎﺑﻊ را ﺑﮕﻴﺮد و آن را ﺑﻪ ﺳﻤﺖ ﻋﻘﺐ ارﺳﺎل ﻛﻨﺪ‪ .‬اﻳﻨﺠﺎ ﻳﻚ ﻣﺜﺎل از ﭼﻴﺰي ﻛﻪ درﺧﻮاﺳﺖ ‪ GET‬ﺑﺮاي آدرس‬
‫‪ www.sample.com‬ﻣﻲ ﺗﻮاﻧﺪ ﻧﺸﺎن دﻫﺪ آورده ﺷﺪه اﺳﺖ‪:‬‬
‫‪GET / HTTP/1.1‬‬
‫‪Host: www.sample.com‬‬
‫;‪User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US‬‬
‫)‪rv:1.7.6‬‬
‫‪Gecko/20050225 Firefox/1.0.1‬‬
‫‪Connection: Keep-Alive‬‬

‫ﺧﻂ اول ﻧﺸﺎن ﻣﻲ دﻫﺪ ﻛﻪ ﻧﻮع درﺧﻮاﺳﺖ ‪ GET‬اﺳﺖ‪ .‬ﻗﺴﻤﺖ دوم )‪ (HTTP‬از آن ﺧﻂ ﻧﺸﺎن ﻣﻲ دﻫﺪ ﻛﻪ‬
‫درﺧﻮاﺳﺖ ﺑﺮاي ﻳﻚ ‪ Domain‬اﺳﺖ اﻧﺘﻬﺎي ﺧﻂ درﺧﻮاﺳﺖ ﻣﻌﻠﻮم ﻣﻲ ﻛﻨﺪ ﻛﻪ از ﻧﺴﺨﻪ ‪ HTTP ،1.1‬اﺳﺘﻔﺎده‬
‫ﻣﻲ ﺷﻮد‪) .‬ﻧﺴﺨﻪ ﻗﺒﻠﻲ آن ‪ 1.0‬ﺑﻮده اﺳﺖ( اﻣﺎ درﺧﻮاﺳﺖ ﺑﻪ ﻛﺠﺎ ارﺳﺎل ﺷﺪه اﺳﺖ؟ اﻳﻦ ﻣﻮﺿﻮع در ﺧﻂ دوم‬
‫ﻧﺸﺎن داده ﺷﺪه اﺳﺖ‪ .‬ﺧﻂ دوم اوﻟﻴﻦ ‪ Header‬در درﺧﻮاﺳﺖ اﺳﺖ‪ .‬ﻫﺪر ‪ ،Host‬ﻣﻘﺼﺪ درﺧﻮاﺳﺖ را ﻧﺸﺎن ﻣﻲ‬
‫دﻫﺪ‪ .‬ﺗﺮﻛﻴﺐ ‪ Host‬ﺑﺎ اﺳﻠﺶ ﺟﻠﻮ)‪ (/‬در ﺧﻂ اول ﺑﻪ ﺳﺮور اﻋﻼم ﻣﻲ ﻛﻨﺪ ﻛﻪ درﺧﻮاﺳﺖ ﺑﺮاي‬
‫‪ www.sample.com‬اﺳﺖ‪) .‬ﻫﺪر ‪ Host‬در ‪ Http1.1‬ﻻزم اﺳﺖ در ﻧﺴﺨﻪ ﻗﺒﻞ از آن ﻻزم ﻧﺒﻮد‪(.‬‬
‫ﺧﻂ ﺳﻮم ﺷﺎﻣﻞ ‪ User-Agent‬اﺳﺖ‪ ،‬ﻛﻪ ﻫﻢ اﺳﻜﺮﻳﭙﺘﻬﺎي ﺳﻤﺖ ﺳﺮور و ﻫﻢ ﻛﻼﻳﻨﺖ ﺑﻪ آن دﺳﺘﺮﺳـﻲ دارﻧـﺪ و‬
‫در ﺑﺮﺧﻲ ﻣﺮورﮔﺮﻫﺎ ﺑﺮاي ﻳﺎﻓﺘﻦ ﺧﻄﺎﻫﺎي ﻣﻨﻄﻘﻲ ﻻزم اﺳﺖ‪ .‬اﻳﻦ اﻃﻼﻋﺎت ﺗﻮﺳﻂ ﻣﺮورﮔﺮ ﻣﻮرد اﺳﺘﻔﺎده ﺷﻤﺎ اﻳﺠﺎد‬
‫ﻣﻲ ﺷﻮﻧﺪ‪) .‬در اﻳﻦ ﻣﺜﺎل ‪ (Firefox‬و ﺑﻪ ﺻﻮرت اﺗﻮﻣﺎﺗﻴﻚ در ﻫﺮ درﺧﻮاﺳﺖ ﺑﺮاي ﺳﺮور ارﺳﺎل ﻣﻲ ﺷﻮﻧﺪ‪ .‬ﺧـﻂ‬
‫آﺧﺮ ‪ Connection‬اﺳﺖ ﻛﻪ ﺑﺮاي ﻧﻤﻮﻧﻪ ﺑﺎﻻ ﺑﺎ ‪ Keep-Alive‬ﻣﻘﺪاردﻫﻲ ﺷﺪه اﺳﺖ‪) .‬ﻣﻲ ﺗﻮاﻧـﺪ ﺑـﺎ ﻣﻘـﺎدﻳﺮ‬
‫دﻳﮕﺮي ﻧﻴﺰ ﺳﺖ ﺷﻮد ﻛﻪ ﺧﺎرج از ﺑﺤﺚ ﻛﺘﺎب اﺳﺖ‪ (.‬ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ ﻳﻚ ﺧﻂ ﺧـﺎﻟﻲ ﺑﻌـﺪ از آﺧـﺮﻳﻦ ‪Header‬‬
‫وﺟﻮد دارد ﺑﺎ اﻳﻨﻜﻪ ﻫﻴﭻ ﺑﺪﻧﻪ درﺧﻮاﺳﺘﻲ وﺟـﻮد ﻧـﺪارد وﻟـﻲ ﺧـﻂ ﺧـﺎﻟﻲ ﻻزم اﺳـﺖ‪ .‬اﮔـﺮ ﻳـﻚ زﻳـﺮ دﻣـﻴﻦ ﻣﺎﻧﻨـﺪ‬
‫‪ www.sample.com/books‬را درﺧﻮاﺳﺖ ﻛﻨﻴﺪ درﺧﻮاﺳﺖ ﺷﻤﺎ ﺑﻪ ﺻﻮرت زﻳﺮ ﺧﻮاﻫﺪ ﺑﻮد‪:‬‬
‫‪GET /books/ HTTP/1.1‬‬
‫‪Host: www.sample.com‬‬
‫;‪User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US‬‬
‫)‪rv:1.7.6‬‬
‫‪Gecko/20050225 Firefox/1.0.1‬‬
‫‪Connection: Keep-Alive‬‬

‫ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺗﻨﻬﺎ ﺧﻂ اول ﺗﻐﻴﻴﺮ ﻛﺮده اﺳﺖ ﻛﻪ ﺷﺎﻣﻞ ﻗﺴﻤﺘﻲ اﺳﺖ ﻛﻪ ﺑﻌﺪ از ‪www.sample.com‬‬
‫در ‪ URL‬آﻣﺪه اﺳﺖ‪.‬‬
‫ﻓﺼﻞ ‪43  3‬‬ ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬

‫ارﺳﺎل ﭘﺎراﻣﺘﺮ ﺑﺮاي ‪ Get‬ﻧﻴﺎزﻣﻨﺪ اﻳﻦ اﺳﺖ ﻛﻪ اﻃﻼﻋﺎت ﺧﺎرﺟﻲ را ﺑﻪ ‪ URL‬اﺿﺎﻓﻪ ﻛﻨﻴﺪ‪:‬‬
‫‪URL ? name1=value1&name2=value2&..&nameN=valueN‬‬
‫اﻳﻦ اﻃﻼﻋﺎت ﻛﻪ رﺷﺘﻪ ‪ query‬ﻧﺎﻣﻴﺪه ﻣﻲ ﺷﻮﻧﺪ‪ ،‬در ﺧﻂ درﺧﻮاﺳﺖ از ﻳﻚ درﺧﻮاﺳﺖ ‪ HTTP‬ﺗﻜﺮار ﻣﻲ ﺷﻮﻧﺪ‪:‬‬
‫‪GET /books/?name=root%20Directory HTTP/1.1‬‬
‫‪Host: www.sample.com‬‬
‫;‪User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US‬‬
‫)‪rv:1.7.6‬‬
‫‪Gecko/20050225 Firefox/1.0.1‬‬
‫‪Connection: Keep-Alive‬‬

‫ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ ﻣﺘﻦ "‪ ،"root Directory‬ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﺑﻪ ﻋﻨﻮان ﭘﺎراﻣﺘﺮ ﺑﺎ ‪ URL‬ارﺳﺎل ﻣﻲ ﺷﻮد‪ ،‬ﺑﺎﻳﺴﺘﻲ‬
‫رﻣﺰﮔﺬاري ﺷﻮد‪ ،‬ﺑﻪ ﻫﻤﻴﻦ ﺧﺎﻃﺮ ﺟﺎي ﺧﺎﻟﻲ ﺑﺎ ‪ %20‬ﺟﺎﻳﮕﺰﻳﻦ ﻣﻲ ﺷﻮد‪ .‬ﺑﻪ اﻳﻦ اﻣﺮ ‪ encode‬ﻛﺮدن ‪ URL‬ﮔﻔﺘﻪ‬
‫ﻣﻲ ﺷﻮد و در ﻗﺴﻤﺖ ﻫﺎي ﻣﺨﺘﻠﻒ ‪ HTTP‬اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪) .‬ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻳﻚ ﺗﺎﺑﻊ داﺧﻠﻲ دارد ﻛﻪ ﻋﻤﻠﻴﺎت‬
‫رﻣﺰﮔﺬاري و رﻣﺰﮔﺸﺎﺋﻲ ‪ URL‬را اﻧﺠﺎم ﻣﻲ دﻫﺪ‪ .‬درﺑﺎره اﻳﻦ ﺗﺎﺑﻊ ﺑﻌﺪاً در اﻳﻦ ﻓﺼﻞ ﺑﺤﺚ ﺧﻮاﻫﺪ ﺷﺪ‪ (.‬ﻣﻘﺎدﻳﺮ‬
‫ﻓﻴﻠﺪﻫﺎي ﻣﺨﺘﻠﻒ ﺑﺎ ﻳﻚ آﻣﭙﺮﺳﻨﺪ "&" از ﻫﻢ ﺟﺪا ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
‫ﺑﺴﻴﺎري از ﺗﻜﻨﻮﻟﻮژﻳﻬﺎي ﺳﻤﺖ ﺳﺮور ﺑﻪ ﺻﻮرت ﺧﻮدﻛﺎر ﺑﺪﻧﻪ درﺧﻮاﺳﺖ را رﻣﺰﮔﺸﺎﺋﻲ ﻣﻲ ﻛﻨﻨﺪ و دﺳﺘﺮﺳﻲ ﺑﻪ‬
‫اﻳﻦ ﻣﻘﺎدﻳﺮ را ﺑﻪ روش ﻫﺎي ﮔﻮﻧﺎﮔﻮﻧﻲ ﻣﻤﻜﻦ ﻣﻲ ﺳﺎزﻧﺪ‪ .‬اﻟﺒﺘﻪ‪ ،‬اﻳﻦ ﻣﺮﺑﻮط ﺑﻪ ﺳﺮور اﺳﺖ ﻛﻪ ﺑﺎ اﻳﻦ داده ﻫﺎ ﭼﻪ ﻛﺎر‬
‫ﻛﻨﺪ‪ .‬از ﺳﻮي دﻳﮕﺮ‪ ،‬درﺧﻮاﺳﺖ ‪ ،POST‬اﻃﻼﻋﺎت را ﺑﻪ ﺑﺪﻧﻪ درﺧﻮاﺳﺖ اﺿﺎﻓﻪ ﻣﻲ ﻛﻨﺪ‪ .‬ﻣﺜﻼ‪ ،‬زﻣﺎﻧﻲ ﻛﻪ ﺷﻤﺎ ﻳﻚ‬
‫ﻓﺮم ‪ online‬را ﭘﺮ و آن را ‪ submit‬ﻣﻲ ﻛﻨﻴﺪ‪ ،‬داده ﻫﺎ ﺑﻪ ﺻﻮرت درﺧﻮاﺳﺖ ‪ POST‬ارﺳﺎل ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
‫اﻳﻨﺠﺎ ﻧﻤﻮﻧﻪ اي از درﺧﻮاﺳﺖ ‪ POST‬آﻣﺪه اﺳﺖ‪:‬‬
‫‪POST / HTTP/1.1‬‬
‫‪Host: www.sample.com‬‬
‫;‪User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US‬‬
‫)‪rv:1.7.6‬‬
‫‪Gecko/20050225 Firefox/1.0.1‬‬
‫‪Content-Type: application/x-www-form-urlencoded‬‬
‫‪Content-Length: 40‬‬
‫‪Connection: Keep-Alive‬‬

‫‪name=root%20Directory&OS=Unix‬‬
‫ﺑﺎﻳﺴﺘﻲ ﺑﻪ ﭼﻨﺪﻳﻦ ﺗﻔﺎوت ﻣﻬﻢ ﺑﻴﻦ درﺧﻮاﺳﺖ ‪ POST‬و درﺧﻮاﺳﺖ ‪ GET‬ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪ .‬اول اﻳﻨﻜﻪ ﺧﻂ درﺧﻮاﺳﺖ‬
‫ﺑﺠﺎي ‪ GET‬ﺑﺎ ‪ POST‬ﺷﺮوع ﻣﻲ ﺷﻮد‪ ،‬ﻛﻪ ﻧﻮع درﺧﻮاﺳﺖ را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ .‬ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺒﻴﻨﻴﺪ ﻛﻪ ﻫﺪرﻫﺎي‬
‫‪ Host‬و ‪ User-Agent‬ﻫﻤﺮاه ﺑﺎ دو ﻣﻮرد ﺟﺪﻳﺪ ﺳﺮﺟﺎي ﺧﻮدﺷﺎن ﻫﺴﺘﻨﺪ‪ .‬ﻫﺪر ‪ Content-Type‬ﻧﺸﺎن‬
‫ﻣﻲ دﻫﺪ ﻛﻪ ﺑﺪﻧﻪ درﺧﻮاﺳﺖ ﭼﮕﻮﻧﻪ ﻛﺪ ﺷﺪه اﺳﺖ‪ .‬ﻣﺮورﮔﺮ ﻫﻤﻴﺸﻪ داده ‪ POST‬را ﺑﻪ ﺻﻮرت‬
‫‪ application/x-www-form-urlencoded‬رﻣﺰﮔﺬاري ﻣﻲ ﻛﻨﺪ ﻛﻪ رﻣﺰﮔﺬاري ﺳﺎده ‪ URL‬از‬
‫ﻧﻮع ‪ MIME‬اﺳﺖ‪ .‬ﻫﺪر ‪ Content-Length‬ﻃﻮل ﺑﺎﻳﺖ ﻫﺎي ﺑﺪﻧﻪ درﺧﻮاﺳﺖ را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ .‬ﭘﺲ از‬
‫‪ Connection‬ﻳﻚ ﺧﻂ ﺧﺎﻟﻲ در ﺑﺪﻧﻪ درﺧﻮاﺳﺖ وﺟﻮد دارد‪ ،‬ﻛﻪ در ﺑﻴﺸﺘﺮ ﻣﺮورﮔﺮﻫﺎ ﻳﻚ ﺟﻔﺖ >ﻧﺎم‪-‬‬
 ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬ ‫‪  44‬ﻓﺼﻞ ‪3‬‬

‫ﻣﻘﺪار< ﻣﻲ ﺳﺎزد ﻛﻪ در اﻳﻨﺠﺎ ‪ name‬ﺑﺮاﺑﺮ ﺑﺎ ‪ root Directory‬و ‪ OS‬ﺑﺎ ‪ Unix‬ﺑﺮاﺑﺮ اﺳﺖ‪ .‬ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ‬
‫ﺑﺒﻴﻨﻴﺪ ﻛﻪ اﻳﻦ ﻓﺮﻣﺖ ﺷﺒﻴﻪ ﭘﺎراﻣﺘﺮﻫﺎي رﺷﺘﻪ اي ‪ Query‬در ‪ URL‬اﺳﺖ‪ .‬ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻗﺒﻼ ﮔﻔﺘﻴﻢ‪ ،‬اﻧﻮاع دﻳﮕﺮ‬
‫درﺧﻮاﺳﺖ ‪ HTTP‬وﺟﻮد دارد‪ ،‬وﻟﻲ آن ﻫﺎ ﻧﻴﺰ از ﻓﺮﻣﺖ ﻫﺎي ﺷﺒﻴﻪ ‪ POST‬و ‪ GET‬ﺗﺒﻌﻴﺖ ﻣﻲ ﻛﻨﻨﺪ‪ .‬ﮔﺎم ﺑﻌﺪي‬
‫ﻧﮕﺎه ﺑﻪ ﭼﻴﺰي اﺳﺖ ﻛﻪ ﺳﺮور ﺑﻪ ﺳﻤﺖ ﻋﻘﺐ )ﺳﻤﺖ ﻣﺮورﮔﺮ(‪ ،‬ﺑﻌﻨﻮان ﭘﺎﺳﺦ درﺧﻮاﺳﺖ ‪ HTTP‬ارﺳﺎل ﻣﻲ ﻛﻨﺪ‪.‬‬
‫ﭘﺎﺳﺦ ‪HTTP‬‬
‫ﻓﺮﻣﺖ ﻳﻚ ﭘﺎﺳﺦ ‪ ،HTTP‬ﻛﻪ ﺧﻴﻠﻲ ﺷﺒﻴﻪ درﺧﻮاﺳﺖ آن اﺳﺖ‪ ،‬در زﻳﺮ آﻣﺪه اﺳﺖ‪:‬‬
‫>‪<status-line‬‬
‫>‪<headers‬‬
‫>‪<blank line‬‬
‫]>‪[<response-body‬‬
‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻣﻲ ﺑﻴﻨﻴﺪ‪ ،‬ﺗﻨﻬﺎ ﺗﻔﺎوت ﭘﺎﺳﺦ ﺑﺎ ﻳﻚ درﺧﻮاﺳﺖ اﻳﻦ اﺳﺖ ﻛﻪ ﺧﻂ اول ﺷﺎﻣﻞ اﻃﻼﻋﺎت وﺿﻌﻴﺖ ﺑﻪ‬
‫ﺟﺎي اﻃﻼﻋﺎت درﺧﻮاﺳﺖ اﺳﺖ‪ .‬ﺧﻂ وﺿﻌﻴﺖ درﺑﺎره ﻣﻨﺎﺑﻊ درﺧﻮاﺳﺖ ﺷﺪه ﺑﻮﺳﻴﻠﻪ ﻳﻚ ﻛﺪ ﺣﺎﻟﺖ اﻃﻼع رﺳﺎﻧﻲ‬
‫ﻣﻲ ﻛﻨﺪ‪ .‬اﻳﻨﺠﺎ ﻳﻚ ﭘﺎﺳﺦ ﺳﺎده ‪ HTTP‬آﻣﺪه اﺳﺖ‪:‬‬
‫‪HTTP/1.1 200 OK‬‬
‫‪Date: Sat, 31 Dec 2005 23:59:59 GMT‬‬
‫‪Content-Type: text/html;charset=ISO-8859-1‬‬
‫‪Content-Length: 122‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Wrox Homepage</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<!-- body goes here --‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫دراﻳﻦ ﻣﺜﺎل ﺧﻂ وﺿﻌﻴﺖ ﻳﻚ ﻛﺪ وﺿﻌﻴﺖ ‪ 200 ،HTTP‬و ﻳﻚ ﭘﻴﻐﺎم ‪ ok‬اﺳﺖ‪ .‬ﺧﻂ وﺿﻌﻴﺖ ﻫﻤﻴﺸﻪ ﺷﺎﻣﻞ ﻛﺪ‬
‫وﺿﻌﻴﺖ و ﻳﻚ ﭘﻴﻐﺎم ﻛﻮﺗﺎه اﺳﺖ‪ .‬ﻣﻬﻤﺘﺮﻳﻦ ﻛﺪﻫﺎي ﺣﺎﻻت در زﻳﺮ آﻣﺪه اﻧﺪ‪:‬‬
‫‪ :(ok) 200‬ﻣﻨﺒﻊ ﭘﻴﺪا ﺷﺪه اﺳﺖ و ﻫﻤﻪ ﭼﻴﺰ ﺧﻮب ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫‪ :(NOT MODIFIED) 300‬ﻣﻨﺒﻊ ﻧﺘﻮاﻧﺴﺘﻪ ﺑﻌﺪ درﺧﻮاﺳﺖ آﺧﺮ اﺻﻼح ﺷﻮد‪ .‬اﻳﻦ ﻛﺪ ﺑﻴﺸﺘﺮ اوﻗﺎت ﺑﺮاي ﻣﻜﺎﻧﻴﺰم‬
‫ﻫﺎي ‪ cache‬ﻣﺮورﮔﺮ ﺑﻪ ﻛﺎر ﻣﻲ رود‪.‬‬
‫‪ :(UNAUTHORIZED) 401‬ﻛﻼﻳﻨﺖ ﺣﻖ دﺳﺘﺮﺳﻲ ﺑﻪ ﻣﻨﺒﻊ را ﻧﺪارد‪ .‬اﻏﻠﺐ ﺑﺎﻋﺚ ﻣﻲ ﺷﻮد ﻛﻪ ﻣﺮورﮔﺮ ﺑﺮاي‬
‫‪ login‬ﺑﻪ ﺳﺮور ﻧﺎم ﻛﺎرﺑﺮي و ﭘﺴﻮرد را درﺧﻮاﺳﺖ ﻛﻨﺪ‪.‬‬
‫‪ :(FORBIDDEN) 403‬ﻛﻼﻳﻨﺖ در دﺳﺘﺮﺳﻲ ﺑﻪ ﻣﻨﺎﺑﻊ ﺑﺎ ﺧﻄﺎ ﻣﻮاﺟﻌﻪ ﺷﺪه اﺳﺖ‪ .‬اﻳﻦ ﻧﻮع زﻣﺎﻧﻲ اﺗﻔﺎق ﻣﻲ اﻓﺘﺪ‬
‫ﻛﻪ ﺷﻤﺎ ﺑﻌﺪ از ‪ 401‬ﻧﺘﻮاﻧﻴﺪ ﺑﺎ ﻳﻚ اﺳﻢ ﻛﺎرﺑﺮي ﺻﺤﻴﺢ‪ login‬ﻛﻨﻴﺪ‪.‬‬
‫‪ :(NOT FOUND) 404‬ﻣﻨﺒﻊ در ﻣﺤﻞ ﻣﻮرد ﻧﻈﺮ وﺟﻮد ﻧﺪارد‪.‬‬
‫ﻓﺼﻞ ‪45  3‬‬ ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬

‫در ﺧﻂ وﺿﻌﻴﺖ‪ ،‬ﻫﺪرﻫﺎي دﻳﮕﺮي ﻧﻴﺰ ﻣﻮﺟﻮدﻧﺪ‪ .‬ﺑﻄﻮر ﻧﻤﻮﻧﻪ‪ ،‬ﺳﺮور ﻳﻚ ﻫﺪر ‪ Date‬را ﺑﺮﻣﻲ ﮔﺮداﻧﺪ ﻛﻪ زﻣﺎن و‬
‫ﺗﺎرﻳﺦ اﻳﺠﺎد ﭘﺎﺳﺦ را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪) .‬ﺳﺮور اﻃﻼﻋﺎﺗﻲ در ﻣﻮرد ﺧﻮدش ﻧﻴﺰ ارﺳﺎل ﻣﻲ ﻛﻨﺪ‪ ،‬اﮔﺮ ﭼﻪ ﻣﻮرد ﻧﻴﺎز‬
‫ﻧﺒﺎﺷﻨﺪ( دو ﻫﺪر ﺑﻌﺪي ﺑﺎﻳﺪ آﺷﻨﺎ ﺑﺎﺷﻨﺪ‪ ،‬آن ﻫﺎ ‪ Content-Type‬و ‪ Content-Length‬ﻛﻪ در‬
‫درﺧﻮاﺳﺖ ‪ POST‬ﻧﻴﺰ اﺳﺘﻔﺎده ﻣﻲ ﺷﺪﻧﺪ‪ ،‬ﻫﺴﺘﻨﺪ‪ .‬در اﻳﻦ ﻣﺜﺎل‪ ،‬ﻫﺪر ‪ Content-Type‬ﻧﻮع ‪ MIME‬را ﺑﺮاي‬
‫‪ text/html‬ﺑﺎ ﻳﻚ رﻣﺰﮔﺬاري از ﻧﻮع ‪ ISO-8859-1‬ﺗﻌﻴﻴﻦ ﻣﻲ ﻛﻨﺪ‪) .‬ﻛﻪ اﺳﺘﺎﻧﺪارد ﻣﻨﺎﺑﻊ اﻧﮕﻠﻴﺴﻲ اﻳﺎﻻت‬
‫ﻣﺘﺤﺪه اﺳﺖ‪ (.‬ﺑﺪﻧﻪ ﭘﺎﺳﺦ ﺷﺎﻣﻞ ﻳﻚ ﻛﺪ ‪ HTML‬ﺳﺎده اﺳﺖ‪ .‬اﻳﻦ ﻫﻤﺎن ﭼﻴﺰي اﺳﺖ ﻛﻪ ﻣﺮورﮔﺮ ﺑﻪ ﻛﺎرﺑﺮ ﻧﺸﺎن‬
‫ﺧﻮاﻫﺪ داد‪ .‬ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ اﺷﺎره اي ﺑﻪ ﻧﻮع درﺧﻮاﺳﺖ ﻛﻪ ﭘﺎﺳﺦ ﺑﺮاي آن ارﺳﺎل ﻣﻲ ﺷﻮد ﻧﻴﺴﺖ؛ اﮔﺮ ﭼﻪ‪ ،‬اﻳﻦ‬
‫ﻣﻄﻠﺐ اﺛﺮي ﺑﺮ روي ﺳﺮور ﻧﺪارد‪ .‬اﻳﻦ ﻣﻄﻠﺐ ﻣﺮﺑﻮط ﺑﻪ ﻛﻼﻳﻨﺖ اﺳﺖ ﻛﻪ ﺑﺪاﻧﺪ ﭼﻪ ﻧﻮع داده اي ﺑﺮاي ﻫﺮ ﻧﻮع‬
‫درﺧﻮاﺳﺖ ﺑﺎﻳﺴﺘﻲ ﺑﻪ ﺳﻤﺖ ﻋﻘﺐ ﺑﺮﮔﺮداﻧﺪه ﺷﻮد ﺗﺎ ﺗﺼﻤﻴﻢ ﺑﮕﻴﺮد ﭼﮕﻮﻧﻪ از داده ﺑﺎﻳﺴﺘﻲ اﺳﺘﻔﺎده ﻛﻨﺪ‪.‬‬

‫درﺧﻮاﺳﺖ ‪XMLHttp‬‬
‫‪ XMlHttp‬اﺑﺘﺪا در ‪ IE5‬ﺑﺎ ﻳﻚ ‪ ActiveX‬ﻣﻌﺮﻓﻲ ﺷﺪ‪ .‬ﺷﻲ ‪ XMlHttp‬ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن را ﺑﻪ اﻳﺠﺎد‬
‫درﺧﻮاﺳﺖ ‪ Http‬از ﻫﺮ ﻛﺠﺎي ﻳﻚ ﺑﺮﻧﺎﻣﻪ ﻗﺎدر ﻣﻲ ﺳﺎزد‪ .‬ﺑﺮاي اﻳﻦ درﺧﻮاﺳﺖ ﻳﻚ ‪ XML‬ﺑﻪ ﻋﻨﻮان ﭘﺎﺳﺦ‬
‫ﺑﺮﮔﺮداﻧﺪه ﻣﻲ ﺷﻮد‪ ،‬ﺑﻪ ﻫﻤﻴﻦ ﺧﺎﻃﺮ‪ XMlHttp‬ﻳﻚ روش ﺳﺎده ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑﻪ اﻃﻼﻋﺎت از ﻃﺮﻳﻖ ‪ XML‬را‬
‫ﻣﻬﻴﺎ ﻣﻲ ﻛﻨﺪ‪.‬‬
‫‪ Mozila‬ﻧﻴﺰ ﺑﻌﺪاً ‪ XMlHttp‬را در ﻣﺮورﮔﺮﻫﺎي ﺧﻮد )ﻣﺎﻧﻨﺪ ‪ (Firefox‬ﻗﺮار داد‪ .‬ﺑﻌﺪ از آن ﻣﺮورﮔﺮﻫﺎي‬
‫‪) Safari‬ﺑﻌﺪ از ﻧﺴﺨﻪ ‪ (1,2‬و ‪) Opera‬ﻧﺴﺨﻪ ‪ 7,6‬ﺑﻪ ﺑﺎﻻ( از آن ﺣﻤﺎﻳﺖ ﻛﺮدﻧﺪ‪ .‬اﻣﺮوزه‪ ،‬ﺗﻘﺮﻳﺒﺎ اﻛﺜﺮ‬
‫ﻣﺮورﮔﺮﻫﺎي ﻣﻄﺮح از اﻳﻦ ﻧﻮع درﺧﻮاﺳﺖ ﺣﻤﺎﻳﺖ ﻣﻲ ﻛﻨﻨﺪ‪ .‬ﺑﺎﻳﺪ ﺗﻮﺟﻪ داﺷﺖ ﻛﻪ ‪ XMlHttp‬اﺳﺘﺎﻧﺪارد ‪W3C‬‬
‫ﻧﻴﺴﺖ‪ ،‬ﺑﻪ ﻫﻤﻴﻦ ﺧﺎﻃﺮ رﻓﺘﺎرﻫﺎي ﻣﺘﻔﺎوﺗﻲ از آن را ﻣﻲ ﺗﻮان در ﻣﺮورﮔﺮﻫﺎي ﻣﺨﺘﻠﻒ ﻣﺸﺎﻫﺪه ﻛﺮد‪ ،‬وﻟﻲ اﻛﺜﺮ ﻣﺘﺪﻫﺎ‬
‫و ﺻﻔﺎت ﻣﻬﻢ در ﻫﻤﻪ آن ﻫﺎ ﺑﻪ ﻳﻚ ﺻﻮرت ﺣﻤﺎﻳﺖ ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
‫ﺑﺎﻳﺴﺘﻲ ﺑﻪ اﻳﻦ ﻣﻮﺿﻮع اﺷﺎره ﻛﺮد ﻛﻪ اﮔﺮ ﻛﺎرﺑﺮان ﺑﺎ ﻣﺮورﮔﺮﻫﺎي ﻗﺪﻳﻤﻲ ﺗﺮ ﺑﻪ وب ﺷﻤﺎ دﺳﺘﺮﺳﻲ دارﻧﺪ ﺑﺎﻳﺴﺘﻲ در‬
‫اﻧﺘﺨﺎب اﻳﻦ ﮔﺰﻳﻨﻪ ﺗﺠﺪﻳﺪ ﻧﻈﺮ ﻛﻨﻴﺪ‪.‬‬

‫اﻳﺠﺎد ﺷﻲ ‪XMlHttp‬‬
‫ﺑﺎ اﺳﺘﻔﺎده از‬ ‫ﺑﺮاي ارﺳﺎل درﺧﻮاﺳﺖ و ﭘﺮدازش ﭘﺎﺳﺦ ﺑﺎﻳﺴﺘﻲ اﺑﺘﺪا ﻳﻚ ﺷﻲ‪XMLHttpRequest‬‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ اﻳﺠﺎد ﻛﻨﻴﺪ‪ .‬ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ اﻳﻦ ﻣﻮﺿﻮع ﻛﻪ ‪ XMLHttpRequest‬اﺳﺘﺎﻧﺪارد ‪ W3C‬ﻧﻴﺴﺖ‪ ،‬ﻣﻲ‬
‫ﺑﺎﻳﺴﺘﻲ از روش ﻫﺎي ﻛﻪ ﻣﺮورﮔﺮﻫﺎ از آن ﺣﻤﺎﻳﺖ ﻣﻲ ﻛﻨﻨﺪ ﺑﻪ اﻳﺠﺎد ﺷﻲ ﻣﺒﺎدرﺗﺖ ﻛﺮد‪ ،IE .‬ﺑﻮﺳﻴﻠﻪ ﻳﻚ ﺷﻲ‬
‫‪ ،ActiveX‬ﺷﻲ ‪ XMLHttpRequest‬را اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ در ﺣﺎﻟﻲ ﻛﻪ ﻣﺮورﮔﺮﻫﺎي دﻳﮕﺮ ﻣﺎﻧﻨﺪ ‪،Firefox‬‬
‫‪ ،Safari،Opera‬آن را ﺑﻪ ﺻﻮرت ﻳﻚ ﺷﻲ ﺟﺎوااﺳﻜﺮﻳﭙﺘﻲ ﭘﻴﺎده ﺳﺎزي ﻣﻲ ﻛﻨﻨﺪ‪ .‬ﺑﺨﺎﻃﺮ اﻳﻦ ﻣﻮﺿﻮع‪ ،‬ﻛﺪ‬
 ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬ ‫‪  46‬ﻓﺼﻞ ‪3‬‬

‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺎﻳﺴﺘﻲ ﺷﺎﻣﻞ ﻫﺮ دو روش اﻳﺠﺎد ﻳﻚ ﻧﻤﻮﻧﻪ ‪ XMLHttpRequest‬ﺑﺎ اﺳﺘﻔﺎده از ﺗﻜﻨﻴﻚ‬

‫‪ ActiveX‬و ﺷﻲ ﺟﺎوااﺳﻜﺮﻳﭙﺘﻲ ﺑﺎﺷﺪ‪.‬‬
‫ﺑﺮاي اﻧﺠﺎم اﻳﻦ ﻛﺎر اﺣﺘﻴﺎﺟﻲ ﺑﻪ داﻧﺴﺘﻦ ﻧﻮع ﻣﺮورﮔﺮ ﻧﻴﺴﺖ‪ ،‬ﺗﻨﻬﺎ ﭼﻴﺰي ﻛﻪ ﺑﺎﻳﺴﺘﻲ اﻧﺠﺎم ﺑﺪﻫﻴﺪ اﻳﻦ اﺳﺖ ﻛﻪ ﭼﻚ‬
‫ﻛﻨﻴﺪ آﻳﺎ ﻣﺮورﮔﺮ از ‪ ActiveX‬ﺣﻤﺎﻳﺖ ﻣﻲ ﻛﻨﺪ ﻳﺎ ﻧﻪ؟ در ﺻﻮرت ﭘﺸﺘﻴﺒﺎﻧﻲ ﻛﺮدن‪ ،‬ﺷﻲ‬
‫‪ XMLHttpRequest‬را ﺑﺎ اﺳﺘﻔﺎده از ﺗﻜﻨﻴﻚ ‪ ActiveX‬در ﻏﻴﺮ اﻳﻨﺼﻮرت از ﺷﻲ ﻣﺤﻠﻲ ﺟﺎوااﺳﻜﺮﻳﭙﺘﻲ‬
‫ﺑﺮاي اﻳﻦ ﻣﻨﻈﻮر اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﺪ‪ .‬ﺑﺮاي اﻳﻨﻜﻪ در ‪ IE‬ﺑﺎ اﺳﺘﻔﺎده از ‪ ActiveX‬ﺑﺨﻮاﻫﻴﺪ ﻳﻚ ﺷﻲ‬
‫‪ XMLHttpRequest‬را ﻧﻤﻮﻧﻪ ﺳﺎزي ﻛﻨﻴﺪ‪ ،‬ﺑﺎﻳﺴﺘﻲ ﺑﻪ ﺻﻮرت زﻳﺮ ﻋﻤﻞ ﻛﻨﻴﺪ‪.‬‬
‫;)]‪var xmlHttp = new ActiveXObject(iEVersion[i‬‬

‫ﻣﺸﻜﻠﻲ ﻛﻪ اﻳﻨﺠﺎ وﺟﻮد دارد‪ ،‬وﺟﻮد ﭼﻨﺪﻳﻦ ﻧﺴﺨﻪ از ﻛﺘﺎﺑﺨﺎﻧﻪ ﻫﺎي ‪ MSXML‬اﺳﺖ‪ .‬ﭼﻮن ﻫﺮ ﻧﺴﺨﻪ ﺳﺮﻋﺖ و ﺛﺒﺎت‬
‫ﺧﻮد را دارد‪ ،‬ﺑﺎﻳﺪ ﻣﻄﻤﺌﻦ ﺷﻮﻳﺪﻛﻪ از ﺟﺪﻳﺪﺗﺮﻳﻦ ﻧﺴﺨﻪ ﻛﻪ ﻣﺎﺷﻴﻦ ﻛﺎرﺑﺮ از آن ﺣﻤﺎﻳﺖ ﻣﻲ ﻛﻨﺪ اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﺪ‬
‫ﻳﺎ ﻧﻪ؟ ﺑﺪﻳﻦ ﻣﻨﻈﻮر ﺑﺎﻳﺪ ﻧﺴﺨﻪ ﻫﺎي ﻣﻮﺟﻮد را ﺑﺮرﺳﻲ ﻛﻨﻴﺪ‪.‬‬
‫ﻧﺴﺨﻪ ﻫﺎي ﻣﻮﺟﻮد ‪ MSXML‬ﺑﻪ ﻗﺮار زﻳﺮ ﻣﻲ ﺑﺎﺷﺪ‪:‬‬
‫‪-‬‬ ‫‪Microsoft.XMLHttp‬‬
‫‪-‬‬ ‫‪MSXML2.XMLHttp‬‬
‫‪-‬‬ ‫‪MSXML2.XMLHttp.3.0‬‬
‫‪-‬‬ ‫‪MSXML2.XMLHttp.4.0‬‬
‫‪-‬‬ ‫‪MSXML2.XMLHttp.5.0‬‬
‫ﻣﺘﺎﺳﻔﺎﻧﻪ‪ ،‬ﺗﻨﻬﺎ راه ﺗﺸﺨﻴﺺ ﺑﻬﺘﺮﻳﻦ ﻧﺴﺨﻪ ﺑﺮاي اﺳﺘﻔﺎده‪ ،‬ﺳﻌﻲ در اﻳﺠﺎد ﻫﺮ ﻳﻚ از اﻳﻦ ﻧﺴﺨﻪ ﻫﺎ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺑﺨﺎﻃﺮ‬
‫اﻳﻨﻜﻪ اﻳﻦ ﻧﺴﺨﻪ ﻫﺎ ﻛﻨﺘﺮل ‪ ActiveX‬ﻫﺴﺘﻨﺪ‪ ،‬ﻧﺎﺗﻮاﻧﻲ در اﻳﺠﺎد ﻫﺮ ﻳﻚ از آن ﻫﺎ ﻣﻨﺠﺮ ﺑﻪ اﻳﺠﺎد ﻳﻚ ﺧﻄﺎ ﺧﻮاﻫﺪ‬
‫ﺷﺪ‪ ،‬اﻳﻦ ﻣﻮرد ﺑﻪ اﻳﻦ ﻣﻌﻨﻲ اﺳﺖ ﻛﻪ ﺷﻤﺎ ﺑﺎﻳﺴﺘﻲ از ﺑﻠﻮك ‪ try…catch‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬در اﻳﻨﺼﻮرت ﺑﺎ اﻳﺠﺎد‬
‫ﻳﻚ ﺧﻄﺎ در ﻳﻚ ‪ ActiveX‬ﺳﻌﻲ در اﻳﺠﺎد ﻳﻚ ﻧﻤﻮﻧﻪ‪ XMLHttpRequest‬ﺑﺎ اﺳﺘﻔﺎده از ‪ActiveX‬‬
‫ﺑﻌﺪي ﻣﻲ ﻛﻨﺪ‪ .‬اﻳﺠﺎد ﺷﻲ ‪ XMLHttp‬در ﻣﺮورﮔﺮﻫﺎي دﻳﮕﺮ ﺑﺴﻴﺎر ﺳﺎده ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﺗﻨﻬﺎ ﻛﺎﻓﻲ اﺳﺖ از ﻛﺪ زﻳﺮ‬
‫ﺑﺮاي اﻳﻦ ﻣﻨﻈﻮر اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪:‬‬
‫;)(‪var xmlHttp = new XMLHttpRequest‬‬
‫ﻧﺘﻴﺠﻪ ﻛﺎر ﺑﻪ ﺻﻮرت زﻳﺮ ﺧﻮاﻫﺪ ﺑﻮد‪:‬‬
‫{ )(‪function createXMLHttp‬‬
‫{)"‪if (typeof XMLHttpRequest !="undefined‬‬
‫)(‪return new XMLHttpRequest‬‬
‫{)‪}else if (window.ActiveXObject‬‬

‫‪var iEVersion = [ "MSXML2.XMLHttp.5.0",‬‬

‫‪"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",‬‬
‫"‪"<MSXML2.XMLHttp","Microsoft.XMLHttp‬‬
‫;]‬

‫{)‪for (var i=0; i< iEVersion.length; i++‬‬

‫ﻓﺼﻞ ‪47  3‬‬ ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬

‫{‪try‬‬
‫‪var xmlHttp = new‬‬
‫;)]‪ActiveXObject(iEVersion[i‬‬
‫;‪return xmlHttp‬‬

‫{)‪}catch(oError‬‬
‫ﻫﻴﭻ ﻋﻤﻠﻲ اﻧﺠﺎم ﻧﻤﻲ ﮔﻴﺮد‪//‬‬
‫}‬

‫}‬
‫}‬
‫;)"‪throw new Error("XMLHttp object could be created.‬‬
‫}‬
‫ﺗﺎﺑﻊ ‪ createXMLHttp‬اﺑﺘﺪا ﺑﺎ اﺳﺘﻔﺎده از ﻋﻤﻠﮕﺮ ‪ typeof‬ﭼﻚ ﻣﻲ ﻛﻨﺪ ﻛﻪ آﻳﺎ ﻛﻼس‬
‫‪ XMLHttpRequest‬ﺗﻌﺮﻳﻒ ﺷﺪه اﺳﺖ ﻳﺎ ﻧﻪ؟)ﻣﺮورﮔﺮ ازآن ﭘﺸﺘﻴﺒﺎﻧﻲ ﻣﻲ ﻛﻨﺪ ﻳﺎ ﻧﻪ؟(‬
‫اﮔﺮ ‪ XMLHttpRequest‬ﻣﻮﺟﻮد ﺑﻮد‪ ،‬از آن ﺑﺮاي اﻳﺠﺎد ﺷﻲ ‪ XMLHttp‬اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﺪ‪ ،‬در ﻏﻴﺮ اﻳﻨﺼﻮرت‬
‫ﭼﻚ ﻣﻲ ﻛﻨﺪ ﻛﻪ آﻳﺎ ﻛﻼس ‪ ActiveXObject‬ﻣﻮﺟﻮد اﺳﺖ ﻳﺎ ﻧﻪ؟ در ﺻﻮرت وﺟﻮد‪ ،‬دﺳﺘﻪ ‪ ActiveX‬ﻫﺎ‬
‫را در ﻳﻚ آراﻳﻪ ﻗﺮار ﻣﻲ دﻫﺪ‪ ) .‬ﺟﺪﻳﺪﺗﺮﻳﻦ ﻧﺴﺨﻪ اﺑﺘﺪاي آراﻳﻪ ﻗﺮار ﻣﻲ ﮔﻴﺮد‪ ( .‬ﺑﺎ اﺳﺘﻔﺎده از ﻳﻚ ﺣﻠﻘﻪ ﺗﻜﺮار‬
‫‪ ActivX‬ﻫﺎ را از آراﻳﻪ ﺧﻮاﻧﺪه و ﺳﻌﻲ ﻣﻲ ﻛﻨﺪ ﻳﻚ ﻧﻮع ‪ XMLHttp‬اﻳﺠﺎد ﻛﻨﺪ اﮔﺮ اﻳﻦ ﻛﺎر اﻣﻜﺎن ﻧﺪاﺷﺖ‪،‬‬
‫ﻋﺒﺎرت ‪ catch‬از اﻳﺠﺎد ﺧﻄﺎ و ﺗﻮﻗﻒ ﻋﻤﻠﻴﺎت ﺟﻠﻮﮔﻴﺮي ﻣﻲ ﻛﻨﺪ‪ ،‬ﺳﭙﺲ ﻣﻮرد ﺑﻌﺪي آراﻳﻪ ﻣﻮرد آزﻣﺎﻳﺶ ﻗﺮار‬
‫ﻣﻲ ﮔﻴﺮد‪ .‬زﻣﺎﻧﻲ ﻛﻪ ﻳﻚ ﺷﻲ اﻳﺠﺎد ﺷﺪ‪ ،‬ﺑﺎ ﺑﺮﮔﺮداﻧﺪن آن ﺷﻲ ﻋﻤﻠﻴﺎت ﺑﻪ ﭘﺎﻳﺎن ﻣﻲ رﺳﺪ‪ ،‬در ﻏﻴﺮ اﻳﻨﺼﻮرت ﻳﻚ‬
‫ﺧﻄﺎ ﺑﺎ اﺳﺘﻔﺎده از دﺳﺘﻮر ‪ throw‬اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ ﻛﻪ ﻧﺸﺎن ﻣﻲ دﻫﺪ ﻋﻤﻠﻴﺎت ﺑﺎ ﺷﻜﺴﺖ ﻣﻮاﺟﻪ ﺷﺪه اﺳﺖ‪.‬‬

‫ﻣﺘﺪﻫﺎ و ﺻﻔﺎت‬
‫اﻛﻨﻮن ﺗﻮاﻧﺴﺘﻪ اﻳﺪ ﻳﻚ ﺷﻲ ‪ XMLHttp‬اﻳﺠﺎد ﻛﻨﻴﺪ‪ .‬ﻫﻤﺎﻧﻄﻮر ﻛﻪ دﻳﺪﻳﺪ ﺑﺮاي اﻳﺠﺎد اﻳﻦ ﺷﻲ در ﻣﺮورﮔﺮﻫﺎي‬
‫ﻣﺨﺘﻠﻒ روﺷﻬﺎي ﻣﺨﺘﻠﻔﻲ را اﻋﻤﺎل ﻛﺮدﻳﻢ‪ ،‬ﺑﻪ ﻫﻤﻴﻦ ﺧﺎﻃﺮ ﺗﻔﺎوﺗﻬﺎﻳﻲ ﻧﻴﺰ در ﻣﺘﺪﻫﺎ و ﺻﻔﺎت اﻳﻦ ﺷﻲ در‬
‫ﻣﺮورﮔﺮﻫﺎي ﻣﺨﺘﻠﻒ ﺧﻮاﻫﻴﻢ دﻳﺪ‪ .‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﺻﻔﺎت ﺷﻲ ‪ XMLHttpRequest‬اﻳﺠﺎد ﺷﺪه در ‪ IE‬را در‬
‫ﺟﺪول ‪ 3-1‬و ﻣﺘﺪﻫﺎي آن را در ﺟﺪول ‪ ،3-2‬ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪ .‬ﺻﻔﺎت اﻳﻦ ﺷﻲ در ﻣﺮورﮔﺮﻫﺎي‬
‫‪ netScape،Mozila‬و ‪ Firefox‬در ﺟﺪول ‪ 3-3‬و ﻣﺘﺪ ﻫﺎي آن در ﺟﺪول ‪ 3-4‬آﻣﺪه اﺳﺖ‪.‬‬
‫‪ Apple safari‬ﻫﻨﻮز ﻣﺘﺪﻫﺎ و ﺻﻔﺎت ﻛﺎﻣﻞ ﺑﺮاي ﺷﻲ ‪ XMLHttpRequest‬را اﻋﻼم ﻧﻜﺮده اﺳﺖ‪ ،‬اﻣﺎ‬
‫ﻣﺠﻤﻮﻋﻪ اي از ﺻﻔﺎت ﻋﻤﻮﻣﻲ ﻣﻮرد اﺳﺘﻔﺎده را اﻋﻼم ﻛﺮده اﺳﺖ‪ ،‬ﻛﻪ در ﺟﺪول ‪ 3-5‬آﻣﺪه اﺳﺖ و ﻣﺘﺪﻫﺎي‬
‫ﻋﻤﻮﻣﻲ‪ ،‬ﻧﻴﺰ در ﺟﺪول ‪ 3-6‬آﻣﺪه اﺳﺖ‪.‬‬
 Ajax ‫ﺷﺮوع ﻛﺎر ﺑﺎ‬ 3 ‫ ﻓﺼﻞ‬ 48

Property Means Read/write

onreadystatechange Holds the name Read/write
of the
event handler
that should be
called when the
value
of the
readyState
property changes
readyState Holds the state Read-only
of the request
responseBody Holds a response Read-only
body, which is
one way HTTP
responses can be
returned
responseStream Holds a response Read-only
stream, a binary
stream to the
server
responseText Holds the Read-only
response body as
a string
responseXML Holds the Read-only
response body as
XML
status Holds the HTTP Read-only
status code
returned by a
request
statusText Holds the HTTP Read-only
response status
text
IE ‫ در‬XMLHttpRequest ‫ ﺧﺎﺻﻴﺖ ﻫﺎي ﺷﻲ‬3-1 ‫ﺟﺪول‬

Method Means
abort Aborts the HTTP request
getAllResponseHeaders Gets all the HTTP
headers
getResponseHeader Gets the value of an
HTTP header
open Opens a request to the
server

send Sends an HTTP request to

the server
49  3 ‫ﻓﺼﻞ‬ Ajax ‫ﺷﺮوع ﻛﺎر ﺑﺎ‬

setRequestHeader Sets the name and value

of an HTTP header
IE ‫ در‬XMLHttpRequest ‫ ﻣﺘﺪﻫﺎي ﺷﻲ‬3-2 ‫ﺟﺪول‬

Property Means Read/write

channel Holds the channel Read-only
used to perform the
request
readyState Holds the state of Read-only
the request
responseText Holds the response Read-only
body as a string
responseXML Holds the response Read-only
body as XML
status Holds the HTTP Read-only
status code
returned by a
request
statusText Holds the HTTP Read-only
response status
text
firefox ‫ در ﻣﺮورﮔﺮﻫﺎي ﻧﻈﻴﺮ‬XMLHttpRequest ‫ ﺧﺎﺻﻴﺖ ﻫﺎي ﺷﻲ‬3-3 ‫ﺟﺪول‬

Method Means
abort Aborts the HTTP request

getAllResponseHeaders Gets all the HTTP

headers

getResponseHeader Gets the value of an

HTTP header

openRequest Native (non-script)

method to open a request

overrideMimeType Overrides the MIME type

the server returns
firefox ‫ در ﻣﺮورﮔﺮﻫﺎي ﻧﻈﻴﺮ‬XMLHttpRequest ‫ ﻣﺘﺪﻫﺎي ﺷﻲ‬3-4 ‫ﺟﺪول‬
 Ajax ‫ﺷﺮوع ﻛﺎر ﺑﺎ‬ 3 ‫ ﻓﺼﻞ‬ 50

Property Means Read/write

onreadystatechange Holds the name Read-only
of the event
handler that
should be called
when
the value of the
readyState
property changes
readyState Holds the state Read-only
of the request
responseText Holds the Read-only
response body as
a string
responseXML Holds the Read-only
response body as
XML
status Holds the HTTP Read-only
status code
returned by a
request
statusText Holds the HTTP Read-only
response Read-
only
status text
safari ‫ ﺑﺮاي‬XMLHttpRequest ‫ ﺧﺎﺻﻴﺖ ﻫﺎي ﺷﻲ‬3-5‫ﺟﺪول‬

Method Means
abort Aborts the HTTP request

getAllResponseHeaders Gets all the HTTP

headers

getResponseHeader Gets the value of an

HTTP header
open Opens a request to the
server

send Sends an HTTP request to

the server
setRequestHeader Sets the name and value
of an HTTP header
safari ‫ ﺑﺮاي‬XMLHttpRequest ‫ ﻣﺘﺪﻫﺎي ﺷﻲ‬3-6 ‫ﺟﺪول‬
‫ﻓﺼﻞ ‪51  3‬‬ ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬

‫اﺟﺎزه ﺑﺪﻫﻴﺪ ﺑﻪ ﻣﺘﺪﻫﺎي ﻣﻬﻤﻲ ﻛﻪ در اﻳﻨﺠﺎ اﺷﺎره ﺷﺪ ﻧﮕﺎﻫﻲ داﺷﺘﻪ ﺑﺎﺷﻴﻢ‪:‬‬

‫ﻣﺘﺪ )(‪ :open‬ﺑﺮاي اﺳﺘﻔﺎده از ﺷﻲ ‪ XMLHttpRequest‬ﺑﺎ اﺳﺘﻔﺎده از ﻣﺘﺪ )(‪ open‬ﺑﺮ روي ﺷﻲ ﭘﻴﻜﺮﺑﻨﺪي‬
‫اوﻟﻴﻪ را اﻧﺠﺎم ﻣﻲ دﻫﻴﺪ‪ .‬اﻳﻨﺠﺎ ﻃﺮﻳﻘﻪ اﺳﺘﻔﺎده از ﻣﺘﺪ ‪ open‬را ﻧﺸﺎن ﻣﻲ دﻫﻴﻢ )ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ آﻳﺘﻢ ﻫﺎي ﺑﻴﻦ ﺑﺮاﻛﺖ‬
‫ﻫﺎ‪] ،‬و[‪ ،‬ﻣﻮارد اﺧﺘﻴﺎري ﻣﻲ ﺑﺎﺷﻨﺪ(‬
‫‪open(string method, string URL [,boolean asyncFlag [, string‬‬
‫)]]]‪username [,string password‬‬
‫اﻳﻦ ﻣﺘﺪ داراي ‪ 2‬ﭘﺎراﻣﺘﺮ اﺻﻠﻲ و‪ 3‬ﭘﺎراﻣﺘﺮ اﺧﺘﻴﺎري ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺟﺪول ‪ 3-7‬اﻳﻦ ﭘﺎراﻣﺘﺮﻫﺎ را ﺗﻮﺿﻴﺢ ﻣﻲ دﻫﺪ‪:‬‬
‫ﻣﻌﻨﻲ آن‬ ‫ﭘﺎراﻣﺘﺮ‬
‫ﻣﺘﺪ ‪ HTTP‬ﻛﻪ ﺑﺮاي اﻳﺠﺎد ارﺗﺒﺎط در ‪ open‬اﺳﺘﻔﺎده‬ ‫‪method‬‬

‫ﻣﻲ ﺷﻮد‪ ،‬ﻣﺎﻧﻨﺪ ‪GET, POST, PUT, HEAD,‬‬

‫‪or PROPFIND‬‬
‫آدرﺳﻲ ﻛﻪ از آﻧﺠﺎ درﺧﻮاﺳﺖ ﺻﻮرت ﻣﻲ ﮔﻴﺮد‬ ‫‪URL‬‬

‫ﻣﻘﺪار ﺑﻮﻟﻲ ﻛﻪ ﻣﺸﺨﺺ ﻏﻴﺮ ﻫﻤﺰﻣﺎن ﺑﻮدن درﺧﻮاﺳﺖ‬ ‫‪asyncFlag‬‬

‫را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ‬

‫ﻧﺎم ﻛﺎرﺑﺮي‬ ‫‪username‬‬

‫ﻛﻠﻤﻪ ﻋﺒﻮر‬ ‫‪password‬‬

‫ﺟﺪول ‪ 3-7‬ﭘﺎراﻣﺘﺮﻫﺎي ﻣﺘﺪ ‪open‬‬

‫ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ ‪ asyncFlag‬ﺑﻪ ﺻﻮرت ﭘﻴﺶ ﻓﺮض ‪ true‬ﻣﻲ ﺑﺎﺷﺪ‪ True .‬ﺑﻮدن اﻳﻦ ﭘﺎراﻣﺘﺮ ﻻزﻣﻪ روش‬
‫‪ ajax‬ﻣﻲ ﺑﺎﺷﺪ‪ ،‬در ﺻﻮرت ‪ False‬ﺑﻮدن آن ﻫﺪف اﺳﺘﻔﺎده از ‪ XMLHttpRequest‬زﻳﺮ ﺳﻮال ﻣﻲ رود‪.‬‬
‫اﻟﺒﺘﻪ ﻣﻤﻜﻦ اﺳﺖ اﻳﻦ ﻣﻘﺪار را در ﺑﺮﺧﻲ ﻣﻮاﻗﻊ ﻣﺎﻧﻨﺪ اﻋﺘﺒﺎرﺳﻨﺠﻲ ورودي ﻫﺎي ﻛﺎرﺑﺮ ﻣﻔﻴﺪ ﺑﺎﺷﺪ‪.‬‬
‫ﻣﺘﺪ)(‪ :send‬در ﺣﻘﻴﻘﺖ اﻳﻦ ﻣﺘﺪ درﺧﻮاﺳﺖ را ارﺳﺎل ﻣﻲ ﻛﻨﺪ‪ .‬اﮔﺮ درﺧﻮاﺳﺖ ﺑﻪ ﺻﻮرت‬
‫‪ asynchronous‬ﺗﻌﺮﻳﻒ ﺷﺪه ﺑﺎﺷﺪ‪ ،‬اﻳﻦ ﻣﺘﺪ ﻓﻮراً ﺑﻪ اﺗﻤﺎم ﻣﻴﺮﺳﺪ‪ ،‬در ﻏﻴﺮ اﻳﻨﺼﻮرت ﺑﺮاي رﺳﻴﺪن ﭘﺎﺳﺦ ﻣﻨﺘﻈﺮ‬
‫ﻣﻲ ﻣﺎﻧﺪ‪ .‬اﻳﻦ ﻣﺘﺪ ﺑﻪ ﺻﻮرت زﻳﺮ ﺗﻌﺮﻳﻒ ﻣﻲ ﺷﻮد‪:‬‬
‫)]‪send([content‬‬
‫ﭘﺎراﻣﺘﺮ اﺧﺘﻴﺎري ﻣﻲ ﺗﻮاﻧﺪ ﻳﻚ ﻧﻤﻮﻧﻪ از ﺷﻲ ‪ DOM‬ﺑﺎﺷﺪ و ﻳﺎ ﻳﻚ رﺷﺘﻪ ﻳﺎ ﻳﻚ اﺳﺘﺮﻳﻢ ورودي ﺑﺎﺷﺪ‪ ،‬در ﻏﻴﺮ‬
‫اﻳﻨﺼﻮرت ﻣﻘﺪار ‪ null‬ﻣﻲ ﮔﻴﺮد‪ .‬اﻳﻦ ﻣﻘﺪار ﺑﻪ ﻋﻨﻮان ﻗﺴﻤﺘﻲ از درﺧﻮاﺳﺖ ارﺳﺎل ﻣﻲ ﺷﻮد‪.‬‬
‫ﻣﺘﺪ ‪ : setRequestHeader‬اﻳﻦ ﻣﺘﺪ ﻣﻘﺪار ‪ header‬درﺧﻮاﺳﺖ را ﺗﻨﻈﻴﻢ ﻣﻲ ﻛﻨﺪ‪ .‬اﻳﻦ ﻣﺘﺪ ﺑﻪ ﺻﻮرت زﻳﺮ‬
‫ﺗﻌﺮﻳﻒ ﻣﻲ ﺷﻮد‪:‬‬
‫)‪setRequestHeader(string header, string value‬‬
‫ﻳﻚ رﺷﺘﻪ ﺑﺮاي ﺗﻨﻈﻴﻢ ‪ header‬و ﻳﻚ رﺷﺘﻪ ﻛﻪ ﻧﻮع ﻣﺤﺘﻮا را ﻧﺸﺎن ﻣﻲ دﻫﺪ را ﺑﻪ ﻋﻨﻮان ﭘﺎراﻣﺘﺮ درﻳﺎﻓﺖ ﻣﻲ ﻛﻨﺪ‪.‬‬
‫اﻳﻦ ﻣﺘﺪ ﭘﺲ از ﻣﺘﺪ ‪ open‬ﻣﻘﺪار دﻫﻲ ﻣﻲ ﺷﻮد‪.‬‬
 ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬ ‫‪  52‬ﻓﺼﻞ ‪3‬‬

‫ﻣﺜﻼ اﮔﺮ ﺑﺨﻮاﻫﻴﺪ داده ﻫﺎﻳﺘﺎن را ﺑﻪ ﺻﻮرت ‪ Xml‬ارﺳﺎل ﻛﻨﻴﺪ ‪ Header‬درﺧﻮاﺳﺘﺘﺎن را ﺑﺎ ﻧﻮع ﻣﺤﺘﻮاي‬
‫"‪ "text/xml‬ﺗﻨﻈﻴﻢ ﻣﻲ ﻛﻨﻴﺪ‪:‬‬
‫;)”‪xMLHttp.setRequestHeader(“Content-Type”, “text/xml‬‬
‫ﺳﭙﺲ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﺴﺘﻘﻴﻤﺎ ‪ xml‬ﺗﺎن را ﺑﻪ ﺻﻮرت ﻣﺴﺘﻘﻴﻢ ﺑﺎ اﺳﺘﻔﺎده از ﻣﺘﺪ ‪ send‬ارﺳﺎل ﻛﻨﻴﺪ‪ ،‬ﻛﻪ ﻣﻲ ﺗﻮاﻧﺪ ﭼﻴﺰي‬
‫ﺷﺒﻴﻪ اﻳﻦ ﺑﺎﺷﺪ‪:‬‬
‫;)”>‪xMLHttp.send(“<doc><name>limit</name><data>5</data></doc‬‬

‫ﻣﺘﺪ )(‪ :abort‬از ارﺳﺎل درﺧﻮاﺳﺖ ﺟﻠﻮﮔﻴﺮي ﻣﻲ ﻛﻨﺪ‪.‬‬

‫ﻣﺘﺪ )(‪ :getAllResponseHeaders‬اﻳﻦ ﻣﺘﺪ ﻳﻚ رﺷﺘﻪ ﻣﺤﺘﻮي ﻫﺪرﻫﺎي ﻳﻚ ﭘﺎﺳﺦ ﺑﺮاي ﻳﻚ‬
‫درﺧﻮاﺳﺖ ‪ Http‬را ﺑﺮﻣﻲ ﮔﺮداﻧﺪ‪ .‬ﻫﺪرﻫﺎ ﺷﺎﻣﻞ ‪ Content-Length, Date‬و‪ URL‬ﻫﺴﺘﻨﺪ‪.‬‬

‫اوﻟﻴﻦ ﺑﺮﻧﺎﻣﻪ ﺳﺎده ‪Ajax‬‬

‫اﻛﻨﻮن ﻛﻪ ﺑﺎ ﻣﺘﺪ ﻫﺎي ‪ XMLHttp‬آﺷﻨﺎ ﺷﺪﻳﺪ اﺟﺎزه ﺑﺪﻫﻴﺪ ﺑﺎ ﻳﻚ ﻣﺜﺎل ﺳﺎده‪ ،‬ﻫﻢ ﻳﻚ ﺑﺮﻧﺎﻣﻪ ﺑﺎ روش ‪Ajax‬‬
‫اﻳﺠﺎد ﻛﻨﻴﻢ و ﻫﻢ اﻳﻨﻜﻪ ﺻﻔﺎت ﺷﻲ ‪ XMLHttp‬را ﺗﻮﺿﻴﺢ دﻫﻴﻢ‪.‬‬
‫در اﻳﻦ ﻣﺜﺎل از ﻛﺎرﺑﺮ ﺧﻮاﺳﺘﻪ ﻣﻲ ﺷﻮد ﻛﻪ ﻛﻠﻴﺪ روي ﺻﻔﺤﻪ وب را ﻛﻠﻴﻚ ﻛﻨﺪ‪ ،‬ﭘﺲ از ﻓﺸﺮدن ﻛﻠﻴﺪ‪ ،‬ﺑﺮﻧﺎﻣﻪ‬
‫ﺑﻮﺳﻴﻠﻪ ﺗﻜﻨﻴﻚ ‪ Ajax‬اﻃﻼﻋﺎت را از ﺳﺮور ﺧﻮاﻧﺪه و آن ﻫﺎ را در ﺻﻔﺤﻪ وب ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‪ .‬اﻳﻦ ﻋﻤﻠﻴﺎت ﺑﺪون‬
‫ﺑﺎرﮔﺬاري ﻣﺠﺪد ﺻﻔﺤﻪ ﻛﺎرﺑﺮ اﻧﺠﺎم ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬
‫ﺳﻌﻲ ﻣﺎ اﻳﻦ اﺳﺖ ﻛﻪ ﻃﺮﻳﻘﻪ اﻳﺠﺎد ﺑﺮﻧﺎﻣﻪ را ﺗﻮﺿﻴﺢ دﻫﻴﻢ‪ .‬در اﺑﺘﺪاي ﻛﺎر ﻳﻚ ﺻﻔﺤﻪ وب ﻛﻪ ﺷﺎﻣﻞ ﻳﻚ ﺷﻲ‬
‫‪ Button‬و ﺷﻲ ‪Div‬ﻣﻲ ﺑﺎﺷﺪ را اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Untitled Document</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫> "‪<input type="button" value="Display Message‬‬
‫>"‪<div id="targetDiv‬‬
‫>‪<p>Display Message Hear.</p‬‬
‫>‪</div‬‬

‫>‪</body‬‬
‫>‪</html‬‬
‫اﻳﻦ ﻛﺪ‪ ،‬ﺻﻔﺤﻪ ﺑﺎ ﻳﻚ ﻛﻠﻴﺪ و ﻳﻚ ﻣﺘﻦ ﺑﺮ روي آن را اﻳﺠﺎد ﺧﻮاﻫﺪ ﻛﺮد‪ .‬اﻣﺎ ﻛﻠﻴﻚ ﺑﺮ روي ﻛﻠﻴﺪ ﻣﻨﺠﺮ ﺑﻪ ﻫﻴﭻ‬
‫ﻋﻤﻠﻲ ﻧﺨﻮاﻫﺪ ﺷﺪ‪ .‬در ‪ onClick‬دﻛﻤﻪ ﻗﺴﻤﺖ ﻛﺪي را اﺿﺎﻓﻪ ﻣﻲ ﻛﻨﻴﻢ ﻛﻪ ﺑﺎ ﻓﺸﺮدن ﻛﻠﻴﺪ ﻋﻤﻠﻴﺎت ﮔﻔﺘﻪ ﺷﺪه‬
‫را اﻧﺠﺎم دﻫﺪ‪.‬ﻛﺪ زﻳﺮ ﻛﺪ ﺗﺼﺤﻴﺢ ﺷﺪه ﻗﺴﻤﺖ ﻗﺒﻞ ﻣﻲ ﺑﺎﺷﺪ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Untitled Document</title‬‬
53  3 ‫ﻓﺼﻞ‬ Ajax ‫ﺷﺮوع ﻛﺎر ﺑﺎ‬

</head>
<body>
<input type="button" value="Display Message" onclick =
"getData('Data.txt','targetDiv')">
<div id="targetDiv">
<p>Display Message Hear.</p>
</div>

</body>
</html>
‫ و ﻣﺤﻠﻲ‬،Data.txt ‫ ﻧﺎم ﻓﺎﻳﻞ رﺷﺘﻪ ي‬:‫ دو ﭘﺎراﻣﺘﺮ رﺷﺘﻪ اي ﻣﻲ ﮔﻴﺮد‬getData ‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻣﻲ ﺑﻴﻨﻴﺪ ﺗﺎﺑﻊ‬
‫ ﻓﺸﺮدن ﻛﻠﻴﺪ روي ﺻﻔﺤﻪ وب ﺟﺰ ﻳﻚ ﭘﻴﻐﺎم ﺧﻄﺎ‬.targetDiv‫ﻛﻪ ﻣﺤﺘﻮاي اﻳﻦ ﻓﺎﻳﻞ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‬
.‫ﻋﻜﺲ اﻟﻌﻤﻞ دﻳﮕﺮي ﺑﻪ ﻫﻤﺮاه ﻧﺨﻮاﻫﺪ داﺷﺖ‬
‫ ﻗﺒﻼ ﻃﺮﻳﻘﻪ‬،‫ ﻣﻲ ﺑﺎﺷﺪ‬XMLHttp ‫ اﺣﺘﻴﺎج ﺑﻪ ﻳﻚ ﺷﻲ‬Ajax ‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻗﺒﻼ اﺷﺎره ﺷﺪ ﺑﺮاي ﻛﺎر ﺑﺎ ﺑﺮﻧﺎﻣﻪ ﻫﺎي‬
‫ ﻛﻪ اﻳﻦ‬createXMLHttp ‫ اﻛﻨﻮن ﺑﺪون ﺗﻮﺿﻴﺢ اﺿﺎﻓﻪ ي ﺗﺎﺑﻊ‬،‫ را ﺗﻮﺿﻴﺢ دادﻳﻢ‬XMLHttp ‫ي اﻳﺠﺎد ﺷﻲ‬
.‫وﻇﻴﻔﻪ را ﺑﺮ ﻋﻬﺪه داﺷﺖ ﺑﻪ ﺑﺮﻧﺎﻣﻪ اﺿﺎﻓﻪ ﻣﻲ ﻛﻨﻴﻢ‬
<head>
<title>First Project of Ajax</title>
<script language = "javascript">
function createXMLHttp() {
if (typeof XMLHttpRequest !="undefined"){
return new XMLHttpRequest()
}else if (window.ActiveXObject){

var iEVersion = [ "MSXML2.XMLHttp.5.0",

"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
"<MSXML2.XMLHttp","Microsoft.XMLHttp"
];
for (var i=0; i< iEVersion.length; i++){
try{
var xmlHttp = new
ActiveXObject(iEVersion[i]);
return xmlHttp;
}catch(oError){
//‫ﻫﻴﭻ ﻋﻤﻠﻲ اﻧﺠﺎم ﻧﻤﻲ ﮔﻴﺮد‬
}

}
}
throw new Error("XMLHttp object could be
created.");
}
</script>
</head>
 ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬ ‫‪  54‬ﻓﺼﻞ ‪3‬‬

‫اﻛﻨﻮن ﻧﻴﺎزﻣﻨﺪ اﻳﻦ ﻫﺴﺘﻴﺪ ﻛﻪ از ﻃﺮﻳﻖ ﺗﺎﺑﻊ ﺑﺎﻻ ﻳﻚ ﻧﻤﻮﻧﻪ ﺷﻲ ‪ XMLHttp‬اﻳﺠﺎد ﻛﻨﻴﺪ‪ .‬و از اﻳﻦ ﻧﻤﻮﻧﻪ ﺷﻲ ﺑﺮاي‬
‫اﻧﺠﺎم ﻋﻤﻠﻴﺎت ﻣﻮرد ﻧﻈﺮ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬
‫اﻛﻨﻮن ﺳﻮاﻟﻲ ﻛﻪ ﻣﻄﺮح ﻣﻲ ﺷﻮد اﻳﻦ اﺳﺖ ﻛﻪ ﭼﮕﻮﻧﻪ از اﻳﻦ ﺷﻲ ﺑﺮاي ﺧﻮاﻧﺪن و ﻧﻤﺎﻳﺶ اﻃﻼﻋﺎت اﺳﺘﻔﺎده ﻛﻨﻴﻢ؟‬
‫ﻫﻤﻪ اﻳﻦ ﻋﻤﻠﻴﺎت در ﺗﺎﺑﻊ ‪ getData‬ﭘﻴﺎده ﺳﺎزي ﻣﻲ ﺷﻮد‪.‬‬

‫>"‪<script language = "javascript‬‬

‫‪..‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬

‫{)‪function getData(dataSource, divID‬‬

‫‪..‬‬
‫‪..‬‬
‫‪..‬‬
‫}‬
‫>‪</script‬‬

‫در اﻳﻦ ﺗﺎﺑﻊ اﺑﺘﺪا ﻳﻚ ﻣﺘﻐﻴﺮ از ﻧﻮع ﺷﻲ ‪ XMLHttp‬اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‪.‬‬

‫>"‪<script language = "javascript‬‬

‫‪..‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬

‫{)‪function getData(dataSource, divID‬‬

‫;)(‪xmlHttp = createXMLHttp‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬
‫}‬
‫>‪</script‬‬
‫اﻛﻨﻮن ﻳﻚ ﻧﻤﻮﻧﻪ از ﺷﻲ ‪ XMLHttp‬در ﻣﺘﻐﻴﺮ ‪ xmlHttp‬دارﻳﺪ‪ ،‬اﻛﻨﻮن ﺑﺎ ﻣﺘﺪ ‪ open‬ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻗﺒﻼ ﺗﻮﺿﻴﺢ‬
‫داده ﺷﺪ ﺷﻲ ‪ xmlHttp‬را ﺑﺮاي اﺳﺘﻔﺎده از ‪ URL‬ﻣﻮرد ﻧﻈﺮ ﭘﻴﻜﺮﺑﻨﺪي ﻣﻲ ﻛﻨﻴﻢ‪ .‬اﻏﻠﺐ از ﻣﺘﺪ ‪ GET‬زﻣﺎﻧﻲ ﻛﻪ‬
‫ﻣﻲ ﺧﻮاﻫﻴﺪ اﻃﻼﻋﺎﺗﻲ را ﺑﺎزﻳﺎﺑﻲ ﻛﻨﻴﺪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد و از ﻣﺘﺪ ‪ POST‬زﻣﺎﻧﻲ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد ﻛﻪ ﺑﺨﻮاﻫﻴﺪ‬
‫ﺗﻌﺪادي داده ﺑﺮاي ﺳﺮور ارﺳﺎل ﻛﻨﻴﺪ‪ .‬در اﻳﻦ ﻣﺜﺎل ﺑﺎ اﺳﺘﻔﺎده از ‪ GET‬ﺑﺮاي ﺧﻮاﻧﺪن ﻓﺎﻳﻞ ‪ Data.txt‬ﺑﻪ ﺻﻮرت‬
‫زﻳﺮ ﻋﻤﻞ ﻣﻲ ﻛﻨﻴﻢ‪:‬‬
‫>"‪<script language = "javascript‬‬
‫‪..‬‬
‫‪..‬‬
‫ﻓﺼﻞ ‪55  3‬‬ ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬

‫‪..‬‬
‫‪..‬‬

‫{)‪function getData(dataSource, divID‬‬

‫;)(‪xmlHttp = createXMLHttp‬‬
‫;)‪xmlHttp.open("GET", dataSource‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬
‫}‬
‫>‪</script‬‬
‫اﻳﻦ ﻛﺪ ﺷﻲ ‪ xmlHttp‬را ﺑﺎ اﺳﺘﻔﺎده از ‪ URl‬اي ﻛﻪ ﻣﺸﺨﺺ ﻧﻤﻮده اﻳﺪ )در اﻳﻨﺠﺎ ‪ (Data.txt‬ﭘﻴﻜﺮ ﺑﻨﺪي‬
‫ﻣﻲ ﻛﻨﺪ‪ ،‬اﻣﺎ ﻫﻨﻮز ﺑﻪ ﺻﻮرت واﻗﻌﻲ ﺑﻪ ﻓﺎﻳﻞ ﻣﻮرد ﻧﻈﺮ وﺻﻞ ﻧﺸﺪه اﺳﺖ‪) .‬اﮔﺮ از ﻳﻚ داﻣﻴﻦ ﺧﺎص اﺳﺘﻔﺎده ﻣﻲ‬
‫ﻛﻨﻴﺪ آدرس ‪ URL‬ﻣﻮرد ﻧﻈﺮ ﺑﺎﻳﺴﺘﻲ ﺷﺎﻣﻞ آدرس داﻣﻴﻦ ﻧﻴﺰ ﺑﺎﺷﺪ(‬
‫ﺑﻪ ﺻﻮرت ﭘﻴﺶ ﻓﺮض اﻳﻦ ارﺗﺒﺎط ﺑﻪ ﺻﻮرت ‪ asynchronous‬ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻛﻪ ﺑﺪﻳﻦ ﻣﻌﻨﻲ اﺳﺖ ﻛﻪ ﺑﺮﻧﺎﻣﻪ ﻣﻨﺘﻈﺮ‬
‫ﺧﻮاﻧﺪن ﻓﺎﻳﻞ و داﻧﻠﻮد آن ﻧﻤﻲ ﻣﺎﻧﺪ‪) .‬ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ از ﮔﺰﻳﻨﻪ ﺳﻮم ‪ ،asyncFlag‬ﺑﺮاي اﺟﺮاي‬
‫‪ synchronous‬ﺑﺮﻧﺎﻣﻪ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ ،‬ﻛﻪ ﺑﻪ اﻳﻦ ﻣﻌﻨﻲ ﺧﻮاﻫﺪ ﺑﻮد ﻛﻪ ﺑﺮﻧﺎﻣﻪ ﻫﻤﻪ ﻓﻌﺎﻟﻴﺖ ﻫﺎي ﺧﻮد را ﺗﺎ زﻣﺎن‬
‫داﻧﻠﻮد ﻓﺎﻳﻞ ﻣﺘﻮﻗﻒ ﻛﻨﺪ‪(.‬‬
‫ﺣﺎل ﻓﺮض ﻛﻨﻴﻢ ﺷﻤﺎ اﻃﻼﻋﺎﺗﺘﺎن را ﺑﺮاي ﺳﺮور ارﺳﺎل ﻛﺮده اﻳﺪ و ﺳﺮور ﺑﻪ درﺧﻮاﺳﺖ ﺷﻤﺎ ﭘﺎﺳﺦ داده و ﻓﺎﻳﻞ‬
‫‪ Data.txt‬را ﺑﺮاﻳﺘﺎن ارﺳﺎل ﻛﺮده اﺳﺖ‪.‬اﻛﻨﻮن ﭼﮕﻮﻧﻪ ﺑﺎﻳﺴﺘﻲ از آﻣﺎده ﺑﻮدن اﻃﻼﻋﺎﺗﺘﺎن ﺑﺮاي داﻧﻠﻮد آﮔﺎه‬
‫ﺷﻮﻳﺪ ﺗﺎ ﺑﺘﻮاﻧﻴﺪ از آن ﻫﺎ اﺳﺘﻔﺎده ﻛﻨﻴﺪ؟‬
‫ﺷﻲ ‪ XMLHttp‬ﻳﻚ ‪) property‬ﺻﻔﺖ ( ﺑﺎ ﻧﺎم ‪ onreadystatechange‬دارد ﻛﻪ ﺑﺮاي اﻳﻦ ﻣﻨﻈﻮر‬
‫ﺗﺪارك دﻳﺪه اﺳﺖ‪ .‬اﻳﻦ ‪ property‬اﺟﺎزه ﻣﺪﻳﺮﻳﺖ ﻋﻤﻠﻴﺎت ﺑﺎرﺷﺪن ‪ asynchronous‬را ﺑﻪ ﺷﻤﺎ ﻣﻲ دﻫﺪ‪.‬‬
‫اﮔﺮ ﺷﻤﺎ ﻧﺎم ﻳﻚ ﺗﺎﺑﻊ را ﺑﺮاي اﻳﻦ ‪ property‬ﻣﺸﺨﺺ ﻛﻨﻴﺪ‪ ،‬ﻫﺮ زﻣﺎن ﻛﻪ ﺗﻐﻴﻴﺮي در اﺳﻜﺮﻳﭙﺖ ﺷﻤﺎ اﻳﺠﺎد ﺷﺪ‬
‫اﻳﻦ ‪ property‬ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‪ ،‬و آن ﻧﻴﺰ ﺗﺎﺑﻊ ﺷﻤﺎ را ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﺪ‪ .‬اﻟﺒﺘﻪ ﭼﻮن اﻳﻦ ﺗﺎﺑﻊ در ﻣﻮارد دﻳﮕﺮ‬
‫ﻛﺎرﺑﺮدي ﻧﺪارد ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ ﺻﻮرت زﻳﺮ آن را داﺧﻞ ﺗﺎﺑﻊ ‪ getData‬اﻳﺠﺎد ﻛﻨﻴﺪ‪:‬‬
‫>"‪<script language = "javascript‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬

‫{)‪function getData(dataSource, divID‬‬

‫;)(‪xmlHttp = createXMLHttp‬‬
‫;)‪xmlHttp.open("GET", dataSource‬‬

‫{)(‪xmlHttp.Onreadystatechange = function‬‬
‫‪..‬‬
 Ajax ‫ﺷﺮوع ﻛﺎر ﺑﺎ‬ 3 ‫ ﻓﺼﻞ‬ 56

..
}
..
..
}
</script>
‫ ﺷﻤﺎ ﺑﺎﻳﺴﺘﻲ دو‬.‫ ﺗﻐﻴﻴﺮي اﻳﺠﺎد ﺷﻮد ﻓﺮاﺧﻮاﻧﻲ ﺧﻮاﻫﺪ ﺷﺪ‬xmlHttp ‫اﻳﻦ ﺗﺎﺑﻊ ﺟﺪﻳﺪ ﻫﺮ زﻣﺎن ﻛﻪ در ﺷﻲ‬
‫ ﻛﻪ وﺿﻌﻴﺖ‬readyState .status ‫ و‬readyState ‫ ﺻﻔﺎت‬:‫ از اﻳﻦ ﺷﻲ را ﺑﺮرﺳﻲ ﻛﻨﻴﺪ‬property
:‫ ﻣﻲ ﺗﻮاﻧﺪ داﺷﺘﻪ ﺑﺎﺷﺪ را ﻣﻲ آورﻳﻢ‬readyState ‫ اﻳﻨﺠﺎ ﻣﻘﺎدﻳﺮ ﻣﻤﻜﻨﻲ ﻛﻪ‬،‫ﻟﻮد ﺷﺪن داده ﻫﺎ را اﻋﻼم ﻣﻲ ﻛﻨﺪ‬
- 0 uninitialized (‫)ﻣﻘﺪار دﻫﻲ ﻧﺸﺪه‬
- 1 loading (‫)در ﺣﺎل ﻟﻮد‬
- 2 loaded (‫)ﻟﻮد ﺷﺪه‬
- 3 interactive (‫)در ﺣﺎل ﺗﺒﺎدل داده‬
- 4 complete (‫)ﻛﺎﻣﻞ‬
.‫ ﺑﻪ ﻣﻌﻨﻲ اﻳﻦ اﺳﺖ ﻛﻪ داده ﻫﺎي ﺷﻤﺎ ﻛﺎﻣﻼ داﻧﻠﻮد ﺷﺪه اﻧﺪ‬4 ‫ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ‬
‫ ﺑﺪﻳﻦ ﻣﻌﻨﻲ‬200 ‫ آﻣﺪه اﺳﺖ )ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ‬status ‫ در اﻳﻨﺠﺎ ﺑﺮﺧﻲ ﻣﻘﺎدﻳﺮ ﻣﻤﻜﻦ ﺑﺮاي‬:status ‫ﺻﻔﺖ‬
(.‫اﺳﺖ ﻛﻪ ﻫﻤﻪ ﭼﻴﺰ ﺧﻮب ﭘﻴﺶ ﻣﻲ رود‬
- 200 OK
- 201 Created
- 204 No Content
- 205 Reset Content
- 206 Partial Content
- 400 Bad Request
- 401 Unauthorized
- 403 Forbidden
- 404 Not Found
- 405 Method Not Allowed
- 406 Not Acceptable
- 407 Proxy Authentication Required
- 408 Request Timeout
- 411 Length Required
- 413 Requested Entity Too Large
- 414 Requested URL Too Long
- 415 Unsupported Media Type
- 500 Internal Server Error
- 501 Not Implemented
- 502 Bad Gateway
- 503 Service Unavailable
- 504 Gateway Timeout
- 505 HTTP Version Not Supported
‫ﻓﺼﻞ ‪57  3‬‬ ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬

‫ﺑﺮاي اﻃﻤﻴﻨﺎن از داﻧﻠﻮد ﻛﺎﻣﻞ اﻃﻼﻋﺎﺗﺘﺎن و ﺧﻮب ﺑﻮدن ﻫﻤﻪ ﭼﻴﺰ‪ ،‬ﺑﺎﻳﺪ ﻣﻄﻤﺌﻦ ﺷﻮﻳﺪ ﻛﻪ ﺻﻔﺖ ‪readyState‬‬
‫ﺑﺮاﺑﺮ ‪ 4‬و ﺻﻔﺖ ‪ status‬ﺑﺎ ‪ 200‬ﺑﺮاﺑﺮ اﺳﺖ‪ .‬اﻳﻨﺠﺎ ﭼﮕﻮﻧﮕﻲ ﭘﻴﺎده ﺳﺎزي آن را ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﻴﻢ‪:‬‬
‫>"‪<script language = "javascript‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬

‫{)‪function getData(dataSource, divID‬‬

‫;)(‪xmlHttp = createXMLHttp‬‬
‫;)‪xmlHttp.open("GET", dataSource‬‬

‫{)(‪xmlHttp.Onreadystatechange = function‬‬
‫&& ‪if(xmlHttp.readyState == 4‬‬
‫{)‪xmlHttp.status == 200‬‬

‫‪..‬‬
‫‪..‬‬
‫}‬
‫}‬
‫‪..‬‬
‫‪..‬‬
‫}‬
‫>‪</script‬‬
‫ﺣﺎﻻ ﻣﺮورﮔﺮ اﻃﻼﻋﺎت را ﺑﺪﺳﺖ آورده اﺳﺖ‪ ،‬وﻟﻲ ﺷﻤﺎ ﭼﮕﻮﻧﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ اﻳﻦ اﻃﻼﻋﺎت دﺳﺘﺮﺳﻲ داﺷﺘﻪ ﺑﺎﺷﻴﺪ‪.‬‬
‫ﺑﺮاي ﮔﺮﻓﺘﻦ داده ﻫﺎ از ﺷﻲ ‪ XMLHttp‬دو روش وﺟﻮد دارد‪:‬‬
‫‪ -‬اﮔﺮ ﺷﻤﺎ ﺑﺎ داده ﻫﺎي درﻳﺎﻓﺘﻲ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻫﻤﺎﻧﻨﺪ ﻣﺘﻦ اﺳﺘﺎﻧﺪارد رﻓﺘﺎر ﻛﻨﻴﺪ‪ ،‬ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ از ﺻﻔﺖ‬
‫‪ responseText‬ﺷﻲ ‪ XMLHttp‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ‬
‫‪ -‬اﮔﺮ داده ﺷﻤﺎ ﺑﺼﻮرت ‪ XML‬ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ از ﺻﻔﺖ ‪ responseXML‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬
‫در اﻳﻦ ﻣﺜﺎل ﻓﺎﻳﻞ ‪ Data.text‬ﻣﺤﺘﻮي ﻣﺘﻦ ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﺑﻪ ﻫﻤﻴﻦ ﺧﺎﻃﺮ ﺷﻤﺎ ﺑﺎﻳﺴﺘﻲ از ﺻﻔﺖ‬
‫‪ responseText‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬ﺑﺮاي اﻳﻨﻜﻪ داده داﻧﻠﻮد ﺷﺪه را در ﺻﻔﺤﻪ وﺑﺘﺎن در ﻣﺤﻠﻲ ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﺪ‬
‫ﺑﺒﻴﻨﻴﺪ‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ آن را در ﻳﻚ ‪ Div‬ﻛﻪ ﺑﺎ ‪ targetDiv،ID‬ﻛﻪ در ﺻﻔﺤﻪ ﻣﻮﺟﻮد ﻣﻲ ﺑﺎﺷﺪ و ﺑﻪ ﻋﻨﻮان ﭘﺎراﻣﺘﺮ‬
‫ﺑﻪ ﺗﺎﺑﻊ ‪ getData‬ارﺳﺎل ﺷﺪه‪ ،‬ﻧﻤﺎﻳﺶ دﻫﻴﺪ‪:‬‬

‫>"‪<script language = "javascript‬‬

‫‪..‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬

‫{)‪function getData(dataSource, divID‬‬

 ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬ ‫‪  58‬ﻓﺼﻞ ‪3‬‬

‫;)(‪xmlHttp = createXMLHttp‬‬
‫;)‪xmlHttp.open("GET", dataSource‬‬

‫{)(‪xmlHttp.Onreadystatechange = function‬‬
‫&& ‪if(xmlHttp.readyState == 4‬‬
‫{)‪xmlHttp.status == 200‬‬

‫;‪obj.innerHTML = xmlHttp.responseText‬‬
‫}‬
‫}‬
‫‪..‬‬
‫‪..‬‬
‫}‬
‫>‪</script‬‬

‫اﻛﻨﻮن ﺷﻤﺎ ﻛﺪﺗﺎن را ﺑﺮاي ﻣﺪﻳﺮﻳﺖ ﭘﺎﺳﺦ ﺳﺮور‪ ،‬زﻣﺎﻧﻲ ﻛﻪ ﭘﺎﺳﺦ را درﻳﺎﻓﺖ ﻛﺮدﻳﺪ آﻣﺎده ﻛﺮده اﻳﺪ‪ .‬اﻣﺎ اﻛﻨﻮن‬
‫ﭼﮕﻮﻧﻪ ﺑﻪ ﺻﻮرت واﻗﻌﻲ ﺑﺮاي درﻳﺎﻓﺖ اﻳﻦ ﭘﺎﺳﺦ ﺑﻪ ﺳﺮور وﺻﻞ ﺷﻮﻳﺪ؟ ﺑﺮاي اﻳﻦ ﻛﺎر از ﻣﺘﺪ ‪ send‬اﺳﺘﻔﺎده ﻣﻲ‬
‫ﻛﻨﻴﺪ‪ .‬اﻳﻦ ﻣﺘﺪ ﻗﺒﻼ ﺗﻮﺿﻴﺢ داده ﺷﺪ‪ ،‬زﻣﺎﻧﻲ ﻛﻪ از ﻣﺘﺪ ‪ GET‬اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﺪ ﻣﻘﺪار ‪ null‬ﺑﺮاي ﺳﺮور ارﺳﺎل ﻣﻲ‬
‫ﻛﻨﻴﺪ‪:‬‬
‫>"‪<script language = "javascript‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬

‫{)‪function getData(dataSource, divID‬‬

‫;)(‪xmlHttp = createXMLHttp‬‬
‫;)‪xmlHttp.open("GET", dataSource‬‬

‫{)(‪xmlHttp.Onreadystatechange = function‬‬
‫&& ‪if(xmlHttp.readyState == 4‬‬
‫{)‪xmlHttp.status == 200‬‬

‫;‪obj.innerHTML = xmlHttp.responseText‬‬
‫}‬
‫}‬
‫;)‪xmlHttp.send (null‬‬
‫}‬
‫>‪</script‬‬
‫اﻛﻨﻮن ﺑﺮﻧﺎﻣﻪ ﺷﻤﺎ اﻃﻼﻋﺎت درﺧﻮاﺳﺘﻲ را ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﻲ ﻛﻨﺪ و ﻗﺴﻤﺖ ﻣﺪﻳﺮﻳﺖ‪ ،‬اﻃﻼﻋﺎت درﻳﺎﻓﺘﻲ را ﺑﻪ ﺷﻤﺎ‬
‫ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ .‬اﻳﻦ اوﻟﻴﻦ ﺑﺮﻧﺎﻣﻪ واﻗﻌﻲ ﺷﻤﺎ ﺗﺤﺖ ﺑﺮﻧﺎﻣﻪ ‪ Ajax‬ﺑﻮد‪ .‬ﺑﺮﻧﺎﻣﻪ در ﭘﺸﺖ ﺻﺤﻨﻪ اﻃﻼﻋﺎﺗﻲ را از ﺳﺮور‬
‫درﻳﺎﻓﺖ و ﺑﻪ ﺷﻤﺎ ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‪ ،‬ﺑﺪون اﻳﻨﻜﻪ وب ﺷﻤﺎ ﻫﻤﻪ ﻓﻌﺎﻟﻴﺖ ﻫﺎي ﺧﻮد را ﺗﺎ رﺳﻴﺪن اﻃﻼﻋﺎت ﻣﺘﻮﻗﻒ‬
‫ﻓﺼﻞ ‪59  3‬‬ ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬

‫ﻛﺮده و ﺑﺮاي ﻧﻤﺎﻳﺶ داده ﻫﺎ ﺻﻔﺤﻪ را ‪ refresh‬ﻛﻨﺪ‪ .‬ﻛﺪﻫﺎي ﻛﺎﻣﻞ اﻳﻦ ﻣﺜﺎل در ‪ CD‬ﻛﺘﺎب در ﻣﺴﻴﺮ‬
‫\‪ example\xmlhttp\1‬ﺑﺎ ﻧﺎم ‪ firstAjax.html‬ﻣﻮﺟﻮد ﻣﻲ ﺑﺎﺷﺪ‪.‬‬

‫ﻣﺘﺪ ‪ GET‬در ‪XMLHTTP‬‬

‫ﺣﺎل ﻛﻪ ﺑﺎ ﭼﮕﻮﻧﮕﻲ ﻛﺎر ‪ XMLHttp‬آﺷﻨﺎ ﺷﺪﻳﺪ‪ ،‬اﻛﻨﻮن ﺑﺎ دو ﻣﺜﺎل ﻃﺮﻳﻘﻪ اﺳﺘﻔﺎده از ﻣﺘﺪ ﻫﺎي ‪ GET‬و ‪ POST‬را‬
‫ﺧﻮاﻫﻴﻢ دﻳﺪ‪.‬در اﻳﻦ ﻣﺜﺎل ﻳﻚ ﻛﺎرﺑﺮ ﺷﻤﺎره ﻣﺸﺘﺮي را وارد ﻣﻲ ﻛﻨﺪ و اﻃﻼﻋﺎت ﻣﺮﺑﻮط ﺑﻪ ﻛﺎرﺑﺮ را درﻳﺎﻓﺖ ﻣﻲ‬
‫ﻛﻨﺪ‪.‬‬
‫در اﻳﻦ ﻣﺜﺎل از ‪ PHP‬ﻛﻪ ﻳﻚ زﺑﺎن ﻣﺘﻦ ﺑﺎز ﺳﻤﺖ ﺳﺮور ﺑﺴﻴﺎر ﺧﻮب اﺳﺖ و ‪ MySql‬ﺑﻪ ﻋﻨﻮان ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ‬
‫اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ‪ .‬ﺑﺮاي ﺷﺮوع ﻛﺎر اﺑﺘﺪا ﺑﺎﻳﺪ ﺟﺪول ﻣﺮﺑﻮط ﺑﻪ ﻛﺎرﺑﺮ را در ‪ mySql‬اﻳﺠﺎد ﻛﻨﻴﺪ‪.‬ﻣﻲ ﺗﻮاﻧﻴﺪ اﻳﻦ‬
‫ﺟﺪول را ﺑﻪ ﺻﻮرت زﻳﺮ اﻳﺠﺎد ﻛﻨﻴﺪ‪:‬‬
‫( `‪CREATE TABLE `user‬‬
‫‪`ID` INT NOT NULL AUTO_INCREMENT ,‬‬
‫‪`username` VARCHAR( 50 ) NOT NULL ,‬‬
‫‪`firstname` VARCHAR( 50 ) NOT NULL ,‬‬
‫‪`lastname` VARCHAR( 50 ) NOT NULL ,‬‬
‫‪`password` VARCHAR( 50 ) NOT NULL ,‬‬
‫‪`age` INT NOT NULL ,‬‬
‫‪`gender` CHAR( 1 ) NOT NULL ,‬‬
‫‪`status` TINYINT NOT NULL ,‬‬
‫) `‪PRIMARY KEY ( `ID‬‬
‫;)‬

‫ﻣﻬﻤﺘﺮﻳﻦ ﻓﻴﻠﺪ در اﻳﻦ ﺟﺪول ‪ CustomerId‬ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﺑﺮاي ﮔﺮﻓﺘﻦ اﻃﻼﻋﺎت ﻛﺎرﺑﺮ از آن اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﺪ‪.‬‬
‫اﺑﺘﺪا ﻓﺎﻳﻞ ‪ PHP‬را اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‪ .‬اوﻟﻴﻦ ﻛﺎر‪ ،‬ﺗﻌﺮﻳﻒ ﻫﻤﻪ داده ﻫﺎي اﺳﺖ ﻛﻪ ﺑﺎ آن ﻫﺎ ﺳﺮوﻛﺎر دارﻳﺪ‪ .‬در اﻳﻦ‬
‫ﻣﺜﺎل‪ ،‬اﻳﻦ داده ﻫﺎ ﻋﺒﺎرﺗﻨﺪ از ﻛﺪ ﻣﺸﺘﺮي ﺑﺮاي ﺟﺴﺘﺠﻮ‪ ،‬ﻣﺘﻐﻴﺮ‪ $sInfo‬ﻛﻪ اﻃﻼﻋﺎت را ﺑﺮﻣﻲ ﮔﺮداﻧﺪ و اﻃﻼﻋﺎت‬
‫ﻣﺮﺑﻮط ﺑﻪ اﺗﺼﺎل ﺑﻪ ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ‪) .‬ﺳﺮور ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ‪ ،‬ﻧﺎم ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ‪ ،‬ﻧﺎم ﻛﺎرﺑﺮ‪ ،‬ﭘﺴﻮرد و ﻳﻚ رﺷﺘﻪ‬
‫دﺳﺘﻮري ‪(Sql‬‬
‫‪<?php‬‬
‫;]"‪$sID = $_GET["id‬‬
‫;"" = ‪$sInfo‬‬
‫;"‪$sDBServer = "your.databaser.server‬‬
‫;"‪$sDBName = "your_db_name‬‬
‫;"‪$sDBUsername = "your_db_username‬‬
‫;"‪$sDBPassword = "your_db_password‬‬
‫;‪$sQuery = "Select * from user where ID=".$sID‬‬
‫‪..‬‬
‫‪..‬‬
‫‪..‬‬
‫>?‬
 ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬ ‫‪  60‬ﻓﺼﻞ ‪3‬‬

‫اﻳﻦ ﻛﺪ ﺑﺎ ﮔﺮﻓﺘﻦ ‪ id‬ﺷﺮوع ﻣﻲ ﺷﻮد‪ PHP .‬ﺑﺮاي ﺳﺎدﮔﻲ اﻃﻼﻋﺎت ارﺳﺎﻟﻲ از ﺳﻤﺖ ﻛﺎرﺑﺮ را در ﻳﻚ آراﻳﻪ‬
‫‪ $_GET‬ﻗﺮار ﻣﻲ دﻫﺪ‪ .‬اﻳﻦ ‪ id‬در ‪ $sID‬ذﺧﻴﺮه ﻣﻲ ﺷﻮد‪ ،‬ﻛﻪ در اﻳﺠﺎد ‪ Sql ،Query‬ذﺧﻴﺮه ﺷﺪه در‬
‫‪ $sQuery‬ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮد‪ .‬ﻣﺘﻐﻴﺮ ‪ $sInfo‬ﻧﻴﺰ اﻳﻨﺠﺎ اﻳﺠﺎد ﻣﻲ ﺷﻮد و ﺑﺎ ﻳﻚ رﺷﺘﻪ ﺧﺎﻟﻲ ﻣﻘﺪار‬
‫دﻫﻲ ﻣﻲ ﺷﻮد‪.‬ﻛﺪﻫﺎي دﻳﮕﺮ ﻣﺮﺑﻮط ﺑﻪ ﺗﻨﻈﻴﻤﺎت ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﺷﻤﺎ ﺑﺎﻳﺴﺘﻲ ﺑﺎ اﻃﻼﻋﺎت ﺻﺤﻴﺢ آن‬
‫را ﺗﻨﻈﻴﻢ ﻛﻨﻴﺪ‪.‬ﻛﺎر ﺑﻌﺪي اﺗﺼﺎل ﺑﻪ ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ و اﺟﺮاي ‪ Query‬و ﺑﺮﮔﺮداﻧﺪن ﻧﺘﻴﺠﻪ ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﮔﺮ ﻛﺎرﺑﺮي ﺑﺎ‬
‫‪ ID‬داده ﺷﺪه ﻣﻮﺟﻮد ﺑﺎﺷﺪ‪ $sInfo ،‬ﺑﺎ ﻛﺪ ‪ Html‬ﻛﻪ ﺣﺎوي اﻃﻼﻋﺎت ﻣﺸﺘﺮي اﺳﺖ ﭘﺮ ﻣﻲ ﺷﻮد‪ ،‬اﮔﺮ ‪ID‬‬
‫ﻧﺎﻣﻌﺘﺒﺮ ﺑﺎﺷﺪ‪ $sInfo ،‬ﺑﺎ ﻳﻚ ﭘﻴﻐﺎم ﺧﻄﺎ ﺑﺮاي ﻧﺸﺎن دادن در ﺻﻔﺤﻪ وب ﻣﻘﺪار دﻫﻲ ﻣﻲ ﺷﻮد‪.‬‬
‫‪<?php‬‬
‫;]"‪$sID = $_GET["id‬‬
‫;"" = ‪$sInfo‬‬

‫;"‪$sDBServer = "your.databaser.server‬‬
‫;"‪$sDBName = "your_db_name‬‬
‫;"‪$sDBUsername = "your_db_username‬‬
‫;"‪$sDBPassword = "your_db_password‬‬
‫;‪$sQuery = "Select * from user where ID=".$sID‬‬

‫= ‪$oLink‬‬
‫;)‪mysql_connect($sDBServer,$sDBUsername,$sDBPassword‬‬
‫‪@mysql_select_db($sDBName) or $sInfo=" Unable to open‬‬
‫;"‪database‬‬

‫‪if($oResult = mysql_query($sQuery) and‬‬

‫)‪mysql_num_rows($oResult) > 0‬‬
‫{‬
‫;)‪$aValues = mysql_fetch_array($oResult,MYSQL_ASSOC‬‬
‫‪$sInfo = $aValues['firstname']."<br‬‬
‫‪/>".$aValues['lastname'].‬‬
‫‪"<br />".$aValues['age']."<br‬‬
‫;">‪/>".$aValues['gender']."<br /‬‬
‫}‬
‫{ ‪else‬‬
‫;"‪$sInfo = "Customer with ID $sID doesn't exist.‬‬
‫}‬
‫;)‪mysql_close($oLink‬‬
‫>?‬
‫دو ﺧﻂ اول در ﻛﺪﻫﺎي ﭘﺮرﻧﮓ ﺷﺪه‪ ،‬ﺷﺎﻣﻞ اﺗﺼﺎل ﺑﻪ ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ از ﻃﺮﻳﻖ دﺳﺘﻮرات ‪ PHP‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺗﺎﺑﻊ‬
‫)(‪ mysql_query‬ﺑﺮاي اﺟﺮاي ‪ Query‬ﻣﻮرد ﻧﻈﺮ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‪ .‬اﮔﺮ ﺗﺎﺑﻊ ﻣﻘﺪاري را ﺑﺮﮔﺮداﻧﺪ ﻛﻪ ﺗﻨﻬﺎ‬
‫ﺷﺎﻣﻞ ﻳﻚ ﺳﻄﺮ ﺑﻮد آﻧﮕﺎه ﺑﺮﻧﺎﻣﻪ ﺑﺮاي ﮔﺮﻓﺘﻦ اﻃﻼﻋﺎت وذﺧﻴﺮه آن ﻫﺎ در ‪ $sInfo‬اداﻣﻪ ﭘﻴﺪا ﻣﻲ ﻛﻨﺪ‪ ،‬در ﻏﻴﺮ‬
‫اﻳﻨﺼﻮرت ‪ $sInfo‬ﺑﺎ ﻳﻚ ﭘﻴﻐﺎم ﺧﻄﺎ ﻣﻘﺪار دﻫﻲ ﻣﻲ ﺷﻮد‪ .‬ﻛﺪ ﺻﻔﺤﻪ آﺧﺮ ﺑﺮاي ﭘﺎك ﻛﺮدن ارﺗﺒﺎط ﺑﺎﻧﻚ‬
‫اﻃﻼﻋﺎﺗﻲ ﺑﻪ ﻛﺎر ﻣﻲ رود‪.‬‬
‫ﺣﺎل ﺑﺎﻳﺴﺘﻲ اﻃﻼﻋﺎت را ﺑﺮاي اﺳﺘﻔﺎده در ‪ XMLHttp‬ﺑﻪ آن ﭘﺎس دﻫﻴﻢ‪.‬‬
61  3 ‫ﻓﺼﻞ‬ Ajax ‫ﺷﺮوع ﻛﺎر ﺑﺎ‬

<?php
header("Content-Type: text/plain");

$sID = $_GET["id"];
$sInfo = "";

$sDBServer = "your.databaser.server";
$sDBName = "your_db_name";
$sDBUsername = "your_db_username";
$sDBPassword = "your_db_password";
$sQuery = "Select * from user where CustomerId=".$sID;

$oLink =
mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sInfo=" Unable to open
database";

if($oResult = mysql_query($sQuery) and

mysql_num_rows($oResult) > 0)
{
$aValues = mysql_fetch_array($oResult,MYSQL_ASSOC);
$sInfo = $aValues['firstname']."<br
/>".$aValues['lastname']."
<br />".$aValues['age']."<br />".$aValues['gender'].
"<br />";
} else {
$sInfo = "Customer with ID $sID doesn't exist.";
}
mysql_close($oLink);

echo $sInfo;
?>
‫ ﺑﺮاي ﺗﻨﻈﻴﻢ ﻧﻮع‬header() ‫ ﺟﺎﻳﻲ ﻛﻪ ﺗﺎﺑﻊ‬،‫ اوﻟﻲ در اﺑﺘﺪاي ﻓﺎﻳﻞ اﻧﺠﺎم ﺷﺪه اﺳﺖ‬،‫دو ﺗﻐﻴﻴﺮ را ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺒﻴﻨﻴﺪ‬
‫ اﻣﺎ ﺑﻬﺘﺮ‬،‫ ﺑﺮ ﻣﻲ ﮔﺮداﻧﺪ‬Html ‫ ﺑﺎ اﻳﻨﻜﻪ اﻏﻠﺐ ﺻﻔﺤﻪ ﻳﻚ ﺗﻜﻪ ﻛﺪ‬.‫ﻣﺤﺘﻮاي ﺻﻔﺤﻪ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮد‬
Header ‫ ﺷﻤﺎ ﺑﺎﻳﺴﺘﻲ‬.‫ ﻧﻴﺴﺖ‬HTML ‫ ﺑﺨﺎﻃﺮ اﻳﻨﻜﻪ ﻳﻚ ﺻﻔﺤﻪ ﻛﺎﻣﻞ‬.‫ ﺗﻨﻈﻴﻢ ﺷﻮد‬text/plain ‫اﺳﺖ ﻛﻪ ﺑﺎ‬
‫ ﺟﺎي‬،‫ ﺗﻐﻴﻴﺮ دوم در زﻳﺮ ﺑﺮﻧﺎﻣﻪ ﻗﺮار دارد‬.‫ اي ﻛﻪ ﺑﻪ ﻣﺮورﮔﺮ ﻣﻲ ﻓﺮﺳﺘﻴﺪ را ﺗﻨﻈﻴﻢ ﻛﻨﻴﺪ‬html ‫ﻫﻤﻪ ﺻﻔﺤﺎت ﻏﻴﺮ‬
‫ ﺣﺎل ﺑﻪ ﺳﻤﺖ ﻛﻼﻳﻨﺖ ﻣﻲ روﻳﻢ‬.‫ ﺑﻪ ﺧﺮوﺟﻲ داده ﻣﻲ ﺷﻮد‬echo ‫ ﺑﻪ ﻋﻨﻮان ﻳﻚ اﺳﺘﺮﻳﻢ ﺑﺎ دﺳﺘﻮر‬$sInfo ‫ﻛﻪ‬
:‫ اﺑﺘﺪا ﺻﻔﺤﻪ وﺑﻲ را ﺑﻪ ﺻﻮرت زﻳﺮ اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‬.‫و ﺑﻪ ﺗﻨﻈﻴﻢ ﺑﺮﻧﺎﻣﻪ وب ﻣﻲ ﭘﺮدازﻳﻢ‬
<p>Enter customer ID number to retrieve information:</p>
<p>Customer ID: <input type="text" id="txtCustomerId" value=""
/></p>
<p><input type="button" value="Get Customer Info"
onclick="requestCustomerInfo()" /></p>
<div id="divCustomerInfo"></div>
 ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬ ‫‪  62‬ﻓﺼﻞ ‪3‬‬

‫ﺗﺎﺑﻊ)(‪ requestCustomerInfo‬ﺑﺎ اﺳﺘﻔﺎده از ‪ XMLHttp‬اﻃﻼﻋﺎت ارﺳﺎﻟﻲ را از ﻓﺎﻳﻞ ‪ PHP‬ﮔﺮﻓﺘﻪ و آن‬

‫ﻫﺎ را ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‪.‬‬
‫{ )(‪function requestCustomerInfo‬‬
‫;‪var sId = document.getElementById("txtCustomerId").value‬‬
‫;)(‪var oXmlHttp = createXMLHttp‬‬
‫;)‪oXmlHttp.open("get", "secondAjax.php?id=" + sId, true‬‬
‫{ )( ‪oXmlHttp.onreadystatechange = function‬‬
‫{ )‪if (oXmlHttp.readyState == 4‬‬
‫{ )‪if (oXmlHttp.status == 200‬‬
‫;)‪displayCustomerInfo(oXmlHttp.responseText‬‬
‫{ ‪} else‬‬
‫‪displayCustomerInfo("An error occurred: "+‬‬
‫;)‪oXmlHttp.statusText‬‬
‫}‬
‫}‬
‫;}‬
‫;)‪oXmlHttp.send(null‬‬
‫}‬
‫ﺗﺎﺑﻊ ‪ requestCustomerInfo‬ﻣﻘﺪار ﻣﻮﺟﻮد در ‪ txtCustomerId‬را ﺑﻪ ﻋﻨﻮان ‪ ID‬ﻣﺸﺘﺮي درﻳﺎﻓﺖ‬
‫و آن را در ﻣﺘﻐﻴﺮ ‪ sId‬ذﺧﻴﺮه ﻣﻲ ﻛﻨﺪ ﺳﭙﺲ ﺑﺎ اﺳﺘﻔﺎده از ﺗﺎﺑﻊ ‪ createXMLHttp‬ﻳﻚ ﺷﻲ ‪XMLHttp‬‬
‫اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ‪ .‬ﻣﺘﺪ )(‪ open‬ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن ﻳﻚ درﺧﻮاﺳﺖ ‪ GET‬ﻏﻴﺮﻫﻤﺰﻣﺎن‪ ،‬ﺑﺮاي ﻓﺮاﺧﻮاﻧﻲ ﺻﻔﺤﻪ‬
‫‪ secondAjax.php‬ﻣﻲ ﺑﺎﺷﺪ‪) .‬ﻛﻪ ‪ ID‬ﮔﻔﺘﻪ ﺷﺪه ﺑﻪ ﻋﻨﻮان اﺿﺎﻓﻪ ﺷﺪه اﺳﺖ‪ (.‬ﺳﭙﺲ ﻣﻘﺪار‬
‫‪ readyState‬را ﺑﺮرﺳﻲ ﻣﻲ ﻛﻨﺪ ﻛﻪ اﮔﺮ ﺑﺮاﺑﺮ ﺑﺎ ‪ 4‬ﺑﻮد ﺑﻌﺪ وﺿﻌﻴﺖ ‪ status‬را ﺑﺮرﺳﻲ ﻣﻲ ﻛﻨﺪ اﮔﺮ‬
‫‪ status‬ﺧﻮب ﺑﻮد)ﺑﺮاﺑﺮ ﺑﺎ ‪ (200‬آﻧﮕﺎه ﺗﺎﺑﻊ )(‪ displayCustomerInfo‬ﺑﺮاي ﻧﻤﺎﻳﺶ اﻃﻼﻋﺎت‬
‫ﻛﺎرﺑﺮ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‪ .‬اﮔﺮ ﻋﻤﻠﻴﺎت ﺑﺎ ﺧﻄﺎ روﺑﺮو ﺷﻮد اﻃﻼﻋﺎت ﺧﻄﺎ ﺑﻪ اﻳﻦ ﺗﺎﺑﻊ ارﺳﺎل ﻣﻲ ﺷﻮد‪.‬‬
‫{ )‪function displayCustomerInfo(sText‬‬
‫= ‪var divCustomerInfo‬‬
‫;)"‪document.getElementById("divCustomerInfo‬‬
‫;‪divCustomerInfo.innerHTML = sText‬‬
‫}‬
‫در اﻳﻦ ﺗﺎﺑﻊ اﺑﺘﺪا‪ ،‬ﺧﻂ اول ﻳﻚ ارﺟﺎع ﺑﻪ اﻟﻤﻨﺖ ‪ Div‬ﺑﺮاي ﻧﻤﺎﻳﺶ اﻃﻼﻋﺎت ﺻﻮرت ﻣﻲ ﮔﻴﺮد‪ .‬در ﺧﻂ دوم‪،‬‬
‫اﻃﻼﻋﺎت ﻛﺎرﺑﺮ)‪ ،(sText‬ﺧﺎﺻﻴﺖ ‪ innerHTML‬اﻟﻤﻨﺖ ‪ Div‬را ﻣﻘﺪار دﻫﻲ ﻣﻲ ﻛﻨﺪ‪ .‬اﺳﺘﻔﺎده از‬
‫‪ innerHTML‬اﻳﻦ اﻣﻜﺎن را ﻣﻲ دﻫﺪ ﻛﻪ در ‪ Div‬ﺑﺘﻮاﻧﻴﻢ ﻣﻘﺎدﻳﺮ ‪ html‬ﻗﺮار دﻫﻴﺪ‪ .‬ﻛﺪﻫﺎي ﻛﺎﻣﻞ اﻳﻦ ﻣﺜﺎل در‬
‫‪ CD‬ﻛﺘﺎب در ﻣﺴﻴﺮ '\‪'example\ xmlhttp\2‬ﻣﻮﺟﻮد ﻣﻲ ﺑﺎﺷﺪ‬

‫ﻣﺘﺪ ‪ POST‬در ‪XMLHTTP‬‬

‫اﻛﻨﻮن ﻛﻪ دﻳﺪﻳﺪ ‪ XMLHttp‬ﭼﮕﻮﻧﻪ ﻛﺎر ﺑﺎ ‪ GET‬را آﺳﺎن ﻣﻲ ﻛﻨﺪ‪ ،‬زﻣﺎن آن اﺳﺖ ﻛﻪ ﺑﻪ درﺧﻮاﺳﺖ ‪ POST‬ﻧﻴﺰ‬
‫ﻧﮕﺎﻫﻲ ﺑﻴﺎﻧﺪازﻳﻢ‪.‬‬
63  3 ‫ﻓﺼﻞ‬ Ajax ‫ﺷﺮوع ﻛﺎر ﺑﺎ‬

‫ ﻛﺪ‬.‫ را ﺑﻪ ﻋﻬﺪه دارد ﺷﺮوع ﻣﻲ ﻛﻨﻴﻢ‬POST ‫ ﻛﻪ ﻣﺪﻳﺮﻳﺖ درﺧﻮاﺳﺘﻬﺎي‬SaveCustomer.php‫اﺑﺘﺪا ﺑﺎ ﻓﺎﻳﻞ‬

‫ ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ اﻳﻨﻜﻪ اﻳﻦ‬.‫ وﻇﻴﻔﻪ اﺳﺘﻔﺎده از اﻃﻼﻋﺎت ﻣﻮﺟﻮد در درﺧﻮاﺳﺖ و ذﺧﻴﺮه آن ﻫﺎ را ﺑﺮ ﻋﻬﺪه دارد‬،PHP
:‫ ﺷﺎﻣﻞ ﺗﻤﺎم ﺗﻤﺎﻣﻲ اﻃﻼﻋﺎﺗﻲ اﺳﺖ ﻛﻪ ارﺳﺎل ﻣﻲ ﺷﻮد‬$_POST ‫ آراﻳﻪ‬،‫ اﺳﺖ‬POST ‫ﻳﻚ درﺧﻮاﺳﺖ‬
<?php
$sName = $_POST["txtName"];
$sAddress = $_POST["txtAddress"];
$sCity = $_POST["txtCity"];
$sState = $_POST["txtState"];
$sZipCode = $_POST["txtZipCode"];
$sPhone = $_POST["txtPhone"];
$sEmail = $_POST["txtEmail"];

$sStatus = "";

$sDBServer = "your.database.server";
$sDBName = "your_db_name";
$sDBUsername = "your_db_username";
$sDBPassword = "your_db_password";

$sSQL = "Insert into

Customers(Name,Address,City,State,Zip,Phone,'E-
mail')"."values('$sName','$sAddress','$sCity',
'$sState','$sZipCode'". ", '$sPhone', '$sEmail')";

//more here
?>
‫ ﻳﻚ ﭘﻴﻐﺎم وﺿﻌﻴﺖ‬،‫ ﻋﻼوه ﺑﺮ اﻳﻦ‬،‫ درﻳﺎﻓﺖ ﻣﻲ ﻛﻨﺪ‬POST ‫اﻳﻦ ﺗﻜﻪ ﻛﺪ ﻫﻤﻪ اﻃﻼﻋﺎت را از ﻃﺮﻳﻖ‬
‫ ﻛﻪ‬،‫ اﺳﺖ‬INSERT ‫ در اﻳﻦ ﻣﺜﺎل‬SQL ‫ ﻋﺒﺎرت‬،‫ و اﻃﻼﻋﺎت ﻣﺮﺑﻮط ﺑﻪ ﺑﺎﻧﻚ را اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ‬،($sStatus)
.‫ﻫﻤﻪ اﻃﻼﻋﺎت ﺑﺎزﻳﺎﺑﻲ ﺷﺪه را ذﺧﻴﺮه ﻣﻲ ﻛﻨﺪ‬
<?php
$sName = $_POST["txtName"];
$sAddress = $_POST["txtAddress"];
$sCity = $_POST["txtCity"];
$sState = $_POST["txtState"];
$sZipCode = $_POST["txtZipCode"];
$sPhone = $_POST["txtPhone"];
$sEmail = $_POST["txtEmail"];

$sStatus = "";

$sDBServer = "your.database.server";
$sDBName = "your_db_name";
$sDBUsername = "your_db_username";
$sDBPassword = "your_db_password";

$sSQL = "Insert into Customers(Name,Address,City,State,

Zip,Phone,'E-mail') ". " values
 Ajax ‫ﺷﺮوع ﻛﺎر ﺑﺎ‬ 3 ‫ ﻓﺼﻞ‬ 64

('$sName','$sAddress','$sCity','$sState',
'$sZipCode'". ", '$sPhone', '$sEmail')";
$oLink =
mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sStatus = "Unable to open
database";

if($oResult = mysql_query($sSQL)) {
$sStatus = "Added customer; customer ID is
".mysql_insert_id();
} else {
$sStatus = "An error occurred while inserting;
customer not saved.";
}

mysql_close($oLink);

?>
‫ ﻣﺘﻐﻴﺮ‬،‫ در ﺻﻮرت درﺳﺘﻲ‬.‫ ﻳﻚ ﺷﺎﺧﺺ ﺑﺮاي ﺗﺎﺋﻴﺪ درﺳﺘﻲ ﻋﻤﻠﻴﺎت اﺳﺖ‬mysql_query() ‫ ﻧﺘﻴﺠﻪ ﺗﺎﺑﻊ‬،‫اﻳﻨﺠﺎ‬
‫ ﺗﺎﺑﻊ‬.‫ ﻣﻘﺪاردﻫﻲ ﻣﻲ ﺷﻮد‬،‫ را ﻧﺸﺎن ﻣﻲ دﻫﺪ‬،‫ ﻣﺸﺘﺮي‬ID‫ ﺑﺎ ﭘﻴﻐﺎﻣﻲ ﻛﻪ ﻣﻮﻓﻘﻴﺖ ﻋﻤﻠﻴﺎت ذﺧﻴﺮه و‬$sStatus
‫ در‬.‫ را ﺑﺮ ﻣﻲ ﮔﺮداﻧﺪ‬auto-incremented ‫ ﻫﻤﻴﺸﻪ ﺟﺪﻳﺪﺗﺮﻳﻦ ﻣﻘﺪار‬mysql_insert_id()
.‫ ﺑﺎ ﻳﻚ ﭘﻴﻐﺎم ﺧﻄﺎ ﻣﻘﺪار دﻫﻲ ﻣﻲ ﺷﻮد‬$sStatus ‫ ﻋﻤﻠﻴﺎت درج ﺑﻪ درﺳﺘﻲ اﻧﺠﺎم ﻧﺸﺪه ﺑﺎﺷﺪ‬،‫ﺻﻮرﺗﻴﻜﻪ‬
.‫ﺣﺎل اﻃﻼﻋﺎت ﻧﻮع ﻣﺤﺘﻮا و ﻋﻤﻠﻴﺎت ارﺳﺎل ﻣﺘﻦ را اﺿﺎﻓﻪ ﻣﻲ ﻛﻨﻴﻢ‬
<?php
header("Content-Type: text/plain");

$sName = $_POST["txtName"];
$sAddress = $_POST["txtAddress"];
$sCity = $_POST["txtCity"];
$sState = $_POST["txtState"];
$sZipCode = $_POST["txtZipCode"];
$sPhone = $_POST["txtPhone"];
$sEmail = $_POST["txtEmail"];

$sStatus = "";

$sDBServer = "your.database.server";
$sDBName = "your_db_name";
$sDBUsername = "your_db_username";
$sDBPassword = "your_db_password";

$sSQL = "Insert into Customers(Name,Address,City,

State,Zip,Phone,'E-mail') ". " values
('$sName','$sAddress','$sCity','$sState',
'$sZipCode'". ", '$sPhone', '$sEmail')";
65  3 ‫ﻓﺼﻞ‬ Ajax ‫ﺷﺮوع ﻛﺎر ﺑﺎ‬

$oLink =
mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sStatus = "Unable to open
database";

if($oResult = mysql_query($sSQL)) {
$sStatus = "Added customer; customer ID is
".mysql_insert_id();
} else {
$sStatus = "An error occurred while inserting;
customer not saved.";
}

mysql_close($oLink);
echo $sStatus;
?>
.‫ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‬$sStatus ‫ ﺑﺮاي ارﺳﺎل‬echo ‫ ﺑﺮاي ﺗﻨﻈﻴﻢ ﻧﻮع ﻣﺤﺘﻮا و ﺗﺎﺑﻊ‬header ‫ﺗﺎﺑﻊ‬
:‫ ﺑﺮاي درﻳﺎﻓﺖ اﻃﻼﻋﺎت ﻛﺎرﺑﺮ اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‬form ‫در ﺻﻔﺤﻪ اﺻﻠﻲ ﻳﻚ ﺗﮓ‬
<form method="post" action="SaveCustomer.php"
onsubmit="sendRequest(); return false">

<p>Enter customer information to be saved:</p>

<p>Customer Name: <input type="text" name="txtName"
value="" /><br />
Address: <input type="text" name="txtAddress" value=""
/><br />
City: <input type="text" name="txtCity" value="" /><br />
State: <input type="text" name="txtState" value="" />
<br />
Zip Code: <input type=" text" name="txtZipCode" value=""
/><br />
Phone: <input type="text" name="txtPhone" value="" />
<br />
E-mail: <input type="text" name="txtEmail" value=""/></p>
<p><input type="submit" value="Save Customer Info" /></p>
</form>
<div id="divStatus"></div>

‫ )ﻫﻤﭽﻨﻴﻦ‬.‫ را ﺗﻐﻴﻴﺮ داده اﺳﺖ‬sendRequest() ‫ ﻧﻮع ﻓﺮاﺧﻮاﻧﻲ ﺗﺎﺑﻊ‬onsubmit‫ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ رﺧﺪاد‬

‫( اﻳﻦ ﻣﺘﺪ اﺑﺘﺪا داده ﻫﺎ را‬.‫ واﻗﻌﻲ ﺻﻔﺤﻪ ﺟﻠﻮﮔﻴﺮي ﻛﻨﺪ‬submit ‫ را ﺑﺮﻣﻲ ﮔﺮداﻧﺪ ﺗﺎ از ﻫﺮﮔﻮﻧﻪ‬false ‫ﻣﻘﺪار‬
‫ اﻃﻼﻋﺎت‬.‫ را ﺑﺮاي ارﺳﺎل آن آﻣﺎده ﻣﻲ ﺳﺎزد‬XMLHttp ‫ آﻣﺎده ﻣﻲ ﻛﻨﺪ ﺳﭙﺲ ﺷﻲ‬POST ‫ﺑﺮاي درﺧﻮاﺳﺖ‬
:‫ﺑﺎﻳﺴﺘﻲ ﺑﺎ ﻓﺮﻣﺖ رﺷﺘﻪ اي زﻳﺮ ارﺳﺎل ﺷﻮﻧﺪ‬
name1=value1&name2=value2&name3=value3
‫ از ﺑﻴﻦ رﻓﺘﻦ‬،‫ رﻣﺰﮔﺬاري ﺷﻮﻧﺪ ﺗﺎ در ﻣﺪت اﻧﺘﻘﺎل از‬URL ‫ ﻫﺎ ﺑﺮاي ﻫﺮ ﭘﺎراﻣﺘﺮ ﺑﺎﻳﺴﺘﻲ ﺑﻪ ﺻﻮرت‬value ‫ و‬name
‫ ﺑﺮاي اﻳﻦ ﻣﻨﻈﻮر‬encodeURIComponent() ‫ ﺟﺎوااﺳﻜﺮﭘﺖ ﻳﻚ ﺗﺎﺑﻊ داﺧﻠﻲ ﺑﺎ ﻧﺎم‬.‫داده ﻫﺎ ﻣﻤﺎﻧﻌﺖ ﺷﻮد‬
 Ajax ‫ﺷﺮوع ﻛﺎر ﺑﺎ‬ 3 ‫ ﻓﺼﻞ‬ 66

‫ را روي ﻓﻴﻠﺪﻫﺎي ﻓﺮم‬value ‫ و‬name ‫ ﺑﺮاي اﻳﺠﺎد اﻳﻦ رﺷﺘﻪ ﺑﺎﻳﺴﺘﻲ اﺳﺘﺨﺮاج و رﻣﺰﮔﺬاري‬.‫ﺗﺪارك دﻳﺪه اﺳﺖ‬
:‫ اﻳﻦ ﻛﺎر را اﻧﺠﺎم ﻣﻲ دﻫﺪ‬getRequestBody() ‫ ﺗﺎﺑﻊ‬.‫ﺗﻜﺮار ﻛﻨﻴﺪ‬
function getRequestBody(oForm) {
var aParams = new Array();
for (var i=0 ; i < oForm.elements.length; i++) {
var sParam = encodeURIComponent(oForm.elements[i].name);
sParam += "=";
sParam += encodeURIComponent(oForm.elements[i].value);
aParams.push(sParam);
}
return aParams.join("&");
}
.(oForm)‫اﻳﻦ ﺗﺎﺑﻊ ﻓﺮض را ﺑﺮ اﻳﻦ ﻣﻲ ﮔﺬارد ﻛﻪ ﺷﻤﺎ ﻳﻚ ارﺟﺎع ﺑﻪ ﻓﺮم از ﻃﺮﻳﻖ ﻳﻚ آرﮔﻮﻣﺎن ﺧﻮاﻫﻴﺪ داﺷﺖ‬
Form ‫ ﺳﭙﺲ اﻟﻤﻨﺘﻬﺎي‬.‫ اﻳﺠﺎد ﻣﻲ ﺷﻮد‬name-value ‫(ﺑﺮاي ذﺧﻴﺮه ﺟﻔﺖ ﻣﻘﺪار‬aParams) ‫ﻳﻚ آراﻳﻪ‬
‫ ﻛﻪ ﺳﭙﺲ در ﻳﻚ آراﻳﻪ ﻗﺮار ﻣﻲ‬،‫ ذﺧﻴﺮه ﻣﻲ ﺷﻮﻧﺪ‬sParam‫ ﻳﻚ رﺷﺘﻪ اﻳﺠﺎد و در‬،‫در ﻳﻚ ﺣﻠﻘﻪ ﻗﺮار ﮔﺮﻓﺘﻪ‬
‫ در‬join() ‫ آﺧﺮﻳﻦ ﻣﺮﺣﻠﻪ ﻓﺮاﺧﻮاﻧﻲ‬.‫ در ﺑﺮﺧﻲ ﻣﺮورﮔﺮﻫﺎ ﻣﻤﻜﻦ اﺳﺖ ﻛﻨﺪ ﺑﺎﺷﺪ‬،‫ اﻧﺠﺎم اﻳﻦ ﻋﻤﻠﻴﺎت‬.‫ﮔﻴﺮﻧﺪ‬
‫ ﻳﻚ اﻣﭙﺮﺳﻨﺪ "&" ﻗﺮار‬name-value‫ اﻳﻦ دﺳﺘﻮر ﺑﻴﻦ ﺟﻔﺖ ﻣﻘﺎدﻳﺮ‬.‫آراﻳﻪ اﺳﺖ ﺑﺮاي ﺑﺮﮔﺮداﻧﺪن داده ﻫﺎ اﺳﺖ‬
.‫داده و ﻳﻚ رﺷﺘﻪ ﺑﺎ ﻓﺮﻣﺖ ﺻﺤﻴﺢ اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ‬
‫ را ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﺪ و درﺧﻮاﺳﺖ را ﺗﻨﻈﻴﻢ ﻣﻲ‬getRequestBody() ‫ ﺗﺎﺑﻊ‬sendRequest() ‫ﺗﺎﺑﻊ‬
:‫ﻛﻨﺪ‬
function sendRequest() {
var oForm = document.forms[0];
var sBody = getRequestBody(oForm);

var oXmlHttp = createXMLHttp();

oXmlHttp.open("post", oForm.action, true);
oXmlHttp.setRequestHeader("Content-Type", "application/x-
www-form-urlencoded");

oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200) {
saveResult(oXmlHttp.responseText);
} else {
saveResult("An error occurred: "+
oXmlHttp.statusText);
}
}
};
oXmlHttp.send(sBody);
}
‫ﻓﺼﻞ ‪67  3‬‬ ‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬

‫ﻫﻤﺎﻧﻨﺪ ﻣﺜﺎل ﻗﺒﻠﻲ‪ ،‬ﻣﺮﺣﻠﻪ اول دراﻳﻦ ﺗﺎﺑﻊ اﻳﺠﺎد ﻳﻚ ﻓﺮم و ذﺧﻴﺮه آن در ﻣﺘﻐﻴﺮ )‪ (oForm‬اﺳﺖ ﻛﻪ ﭘﺲ از اﻳﺠﺎد‬
‫ﺑﺪﻧﻪ درﺧﻮاﺳﺖ‪ ،‬در ‪ sBody‬ذﺧﻴﺮه ﻣﻲ ﺷﻮد‪ .‬ﻣﺮﺣﻠﻪ ﺑﻌﺪ اﻳﺠﺎد ﻳﻚ ﺷﻲ ‪ XMLHTTP‬اﺳﺖ‪ .‬ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ در‬
‫ﻣﺘﺪ ‪ open‬آرﮔﻮﻣﺎن اوﻟﻲ ﺑﻪ ﺟﺎي ‪ POST ،GET‬ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻫﭽﻨﻴﻦ آرﮔﻮﻣﺎن دوم ﺑﺎ‪oForm.action‬‬
‫ﻣﻘﺪاردﻫﻲ ﻣﻲ ﺷﻮد‪ .‬ﻫﭽﻨﻴﻦ ‪ Header‬درﺧﻮاﺳﺖ ﻧﻴﺰ ﺗﻨﻈﻴﻢ ﺷﺪه اﺳﺖ‪ .‬ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﻳﻚ ﻓﺮم از ﻣﺮورﮔﺮ ﺑﻪ ﺳﺮور‬
‫ارﺳﺎل ﻣﻲ ﺷﻮد‪ ،‬ﻧﻮع ﻣﺤﺘﻮاي درﺧﻮاﺳﺖ آن ﺑﺎ ‪application/x-www-form-urlencoded‬‬
‫ﻣﻘﺪاردﻫﻲ ﻣﻲ ﺷﻮد‪ .‬اﻛﺜﺮ زﺑﺎﻧﻬﺎي ﺗﺤﺖ ﺳﺮور در درﺧﻮاﺳﺖ ﻫﺎي ‪ POST‬ﺑﻪ اﻳﻦ ﻛﺪ ﺗﻮﺟﻪ ﻣﻲ ﻛﻨﺪ‪ ،‬ﺑﻨﺎﺑﺮاﻳﻦ اﻳﻦ‬
‫دﺳﺘﻮر از اﻫﻤﻴﺖ ﺧﺎﺻﻲ ﺑﺮﺧﻮردار اﺳﺖ‪.‬رﺧﺪاد ‪ onreadystatechange‬ﺗﺎﺑﻊ )(‪ saveResult‬را‬
‫ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﺪ‪:‬‬
‫{ )‪function saveResult(sMessage‬‬
‫;)"‪var divStatus = document.getElementById("divStatus‬‬
‫;‪divStatus.innerHTML = "Request completed: "+ sMessage‬‬
‫}‬
‫اﻳﻦ ﺗﺎﺑﻊ وﻇﻴﻔﻪ ﻧﻤﺎﻳﺶ اﻃﻼﻋﺎت ﻣﺸﺘﺮي و ﻳﺎ ﭘﻴﻐﺎم ﺧﻄﺎ را دارد ﺧﻂ آﺧﺮ ﺑﺴﻴﺎر ﻣﻬﻢ اﺳﺖ‪ sBody ،‬ﺑﻪ ﺗﺎﺑﻊ ‪send‬‬
‫ﭘﺎس داده ﻣﻲ ﺷﻮد ﻛﻪ ﺑﻌﺪ ﺟﺰﺋﻲ از درﺧﻮاﺳﺖ ﻣﻲ ﺷﻮد‪.‬‬
‫ﺷﺮوع ﻛﺎر ﺑﺎ ‪Ajax‬‬ ‫‪  68‬ﻓﺼﻞ ‪3‬‬
‫ﻓﺼﻞ ‪69  4‬‬ ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬

‫ﻓﺼﻞ ﭼﻬﺎرم‪ :‬ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪Asp.Net‬‬

‫‪ ASP.Net‬ﻓﺮﻳﻢ ورك ﺗﻘﺮﻳﺒﺎً ﺟﺪﻳﺪي از ﺷﺮﻛﺖ ﻣﺎﻳﻜﺮوﺳﺎﻓﺖ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﺑﺎ ﻣﻌﺮﻓﻲ آن ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ‪Web‬‬
‫ﭘﺎ در ﻋﺮﺻﻪ ﺟﺪﻳﺪي ﮔﺬاﺷﺖ‪ .‬ﺑﺎ اﻳﻨﻜﻪ آن را ﻧﻤﻮدي از ‪ JSP‬ﺟﺎوا ﻣﻲ داﻧﻨﺪ‪ ،‬اﻣﺎ ﻧﻤﻲ ﺗﻮان ﺗﻔﺎوت ﺑﻴﻦ اﻳﻦ دو‪،‬‬
‫روش آﺳﺎﻧﺘﺮ ‪ Asp.Net‬ﻧﺴﺒﺖ ﺑﻪ روش ﺟﺎوا و اﻟﺒﺘﻪ ﻛﻤﻲ ﺳﺨﺖ ﻧﺴﺒﺖ ﺑﻪ ‪ PHP‬را ﻛﺘﻤﺎن ﻛﺮد‪ .‬اﻳﻦ ﻓﺼﻞ ﺑﻪ‬
‫ﻫﻴﭻ ﻋﻨﻮان ﻗﺼﺪ ﻣﻘﺎﻳﺴﻪ روﺷﻬﺎي اﻳﺠﺎد وب و ﻳﺎ آﻣﻮزش آﻧﻬﺎ را ﻧﺪارد؛ و ﺗﻨﻬﺎ ﺑﻪ اﻳﺠﺎد ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬ي ﺑﺮ‬
‫روي ‪ ASP.Net‬ﺧﻮاﻫﺪ ﭘﺮداﺧﺖ‪.‬‬
‫ﻛﻨﺘﺮل ﻫﺎ‬
‫در ‪ ASP.Net‬ﻋﻼوه ﺑﺮ ﻋﻨﺎﺻﺮ وب‪ ،‬ﺷﺎﻫﺪ وﺟﻮد ﻋﻨﺎﺻﺮ ‪ ASP.Net‬ي ﺑﺎ ﻧﺎم ﻛﻨﺘﺮل ﻫﺴﺘﻴﻢ ﻛﻪ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ را‬
‫ﺑﺮاي ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن ﺑﻪ ﻣﺮاﺗﺐ آﺳﺎن ﺗﺮ از ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ در ﭘﻠﺘﻔﺮم ﻫﺎي دﻳﮕﺮ ﻛﺮده اﺳﺖ‪ .‬اﻳﻦ ﻛﻨﺘﺮل ﻫﺎ ﺑﻪ‬
‫ﺻﻮرت ﻋﻤﻮﻣﻲ در ﻗﺎﻟﺐ >‪ <asp:controlName‬ﺗﻌﺮﻳﻒ ﻣﻲ ﺷﻮﻧﺪ و ﻋﻤﻠﻴﺎت ﭘﻮﻳﺎ را در واﺳﻂ ﻛﺎرﺑﺮي‬
‫اﻳﺠﺎد ﻣﻲ ﻛﻨﻨﺪ‪ .‬ﺑﺎ اﻳﺠﺎد روﻳﺪادي ﺑﺮ روي ﻛﻨﺘﺮل ﻫﺎ )ﻓﺸﺮدن دﻛﻤﻪ و‪ ،(...‬ﻛﻨﺘﺮل ﻫﺎ اﻃﻼﻋﺎﺗﻲ را ﺑﻪ ﺳﻤﺖ ﺳﺮور‬
‫ارﺳﺎل ﻣﻲ ﻛﻨﻨﺪ وﻣﻨﺘﻈﺮ اﺗﻤﺎم ﻛﺎر ﺳﺮور و ﭘﺎﺳﺦ از ﺳﻤﺖ ﺳﺮور ﻣﻲ ﺷﻮﻧﺪ ؛ ﺑﺎ درﻳﺎﻓﺖ اﻃﻼﻋﺎت از ﺳﻤﺖ ﺳﺮور‬
‫ﺻﻔﺤﻪ وب ﻣﺠﺪدا ﺑﺎرﮔﺬاري ﺷﺪه و اﺣﺘﻤﺎل از دﺳﺖ دادن اﻃﻼﻋﺎت ﻗﺒﻠﻲ وﺟﻮد دارد‪.‬‬
‫اﻣﺎ ﻋﻨﺎﺻﺮ ﻣﻌﻤﻮﻟﻲ ‪ html‬اﻳﻦ ﺧﺎﺻﻴﺖ را ﻧﺪارﻧﺪ وﺣﺎﻟﺖ ﭘﻴﺶ ﻓﺮض آن ﻫﺎ اﺟﺮاي روﻳﺪاد در ﺳﻤﺖ ﻛﻼﻳﻨﺖ ﻣﻲ‬
‫ﺑﺎﺷﺪ‪ .‬ﺑﻪ ﻋﻠﺖ ﺳﺮ ﺑﺎر زﻳﺎدي ﻛﻪ ﻛﻨﺘﺮل ﻫﺎي ‪ ASP.NET‬دارﻧﺪ در اﻳﻨﺠﺎ از ﻋﻨﺎﺻﺮ ﺳﺎده ‪ html‬اﺳﺘﻔﺎده ﻣﻲ‬
‫ﻛﻨﻴﻢ‪.‬‬
‫‪ Ajax‬در ‪ASP.Net‬‬
‫دراﻳﻦ ﺑﺨﺶ ﻗﺼﺪ دارﻳﻢ ﭼﮕﻮﻧﮕﻲ ﻛﺎر ﺑﺎ ‪ Ajax‬را ﺑﺎ ﻳﻚ ﻣﺜﺎل ﺗﻮﺿﻴﺢ دﻫﻴﻢ‪ :‬ﻗﺮار اﺳﺖ ﺑﺮﻧﺎﻣﻪ اي اﻳﺠﺎد ﻛﻨﻴﺪ‬
‫ﻛﻪ ﻛﺎرﺑﺮ ﺑﺎ اﻧﺘﺨﺎب ﻳﻚ ﻛﻠﻴﺪ اﻃﻼﻋﺎت ﻳﻚ ﻓﺎﻳﻞ ‪ XML‬را در ﺻﻔﺤﻪ وب ﻣﺸﺎﻫﺪه ﻛﻨﺪ‪ .‬اﻳﻦ ﻛﺎر را از ﻃﺮﻳﻖ‬
‫‪ ajax‬اﻧﺠﺎم ﺧﻮاﻫﻴﺪ داد‪.‬‬
‫اﺑﺘﺪا ﻳﻚ ﭘﺮوژه وب در ‪ Microsoft Visual Studio‬ﺑﺎ ﻧﺎم ‪ AspAjaxSample‬اﻳﺠﺎد ﻛﻨﻴﺪ‪ .‬ﻳﻚ‬
‫ﭘﻮﺷﻪ ﺑﺎ ﻧﺎم ‪ javaScript‬اﻳﺠﺎد ﻛﺮده و ﺑﺎ اﺳﺘﻔﺎده از ﮔﺰﻳﻨﻪ ‪ Add New Item‬ﻳﻚ ﻓﺎﻳﻞ ﺟﺎوا اﺳﻜﺮﻳﭙﺘﻲ ﺑﺎ‬
‫ﻧﺎم ‪ xmlHttp.js‬در آن اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﺪ‪ .‬ﺑﺎﻳﺪ ﺗﻮﺟﻪ داﺷﺖ ﻛﻪ اﻳﻦ ﭘﻮﺷﻪ ﺗﻨﻬﺎ ﺑﺮاي دﺳﺘﺮﺳﻲ آﺳﺎن ﺑﻪ داده اﺳﺖ‬
‫و ﻟﺰوﻣﻲ ﺑﺮاي وﺟﻮد آن ﻧﻴﺴﺖ‪ .‬ﺣﺎل دو ﻣﺘﺪ ﻛﻪ ﺑﺮاي اﻳﺠﺎد ‪ ajax‬ﺳﺎﺧﺘﻪ ﺑﻮدﻳﻢ را در اﻳﻦ ﻓﺎﻳﻞ ﻗﺮار ﻣﻲ دﻫﻴﻢ‪.‬‬
‫ﺣﺎل ﻳﻚ ‪ web Form‬ﺑﺎ ﻧﺎم ‪ SimpleResponseText.aspx‬را ﺑﻪ ﭘﺮوژه اﺿﺎﻓﻪ ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
‫ﺗﺎﺑﻊ )(‪) getData‬ﻛﻪ در ﻓﺼﻞ ﺳﻮم ﺑﺎ آن آﺷﻨﺎ ﺷﺪﻳﺪ( را ﺑﻪ ﺻﻮرت زﻳﺮ اﺻﻼح ﻛﻨﻴﺪ‪ .‬اﻳﻦ ﺗﺎﺑﻊ را ﺑﻪ ﻫﻤﺮاه‬
‫ﺗﺎﺑﻊ )(‪ createXMLHttp‬ﺑﻪ ﻓﺎﻳﻞ ‪ xmlHttp.js‬اﺿﺎﻓﻪ ﻧﻤﺎﻳﺪ‪:‬‬
‫)‪function getData(dataSource, divID‬‬
‫{‬
‫;)(‪xmlHttp = createXMLHttp‬‬
 ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬ 4 ‫ ﻓﺼﻞ‬ 70

if(xmlHttp) {
var obj = document.getElementById(divID);
xmlHttp.open("GET", dataSource);
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4 && xmlHttp.status ==
200) {
obj.childNodes[0].nodeValue =
xmlHttp.responseText;
}
}
xmlHttp.send(null);
}
}

‫ ﺷﻮد ﺗﺎ ﺑﺘﻮاﻧﺪ‬xmlHttp.js ‫( ﺑﺎﻳﺴﺘﻲ ﻣﺘﻀﻤﻦ ﻓﺎﻳﻞ‬SimpleResponseText.aspx) ‫ﺻﻔﺤﻪ وب‬

:‫ ﺑﺮاي اﻳﻨﻜﺎر ﻣﺎﻧﻨﺪ زﻳﺮ ﺑﺎﻳﺪ ﻋﻤﻞ ﻛﻨﻴﺪ‬.‫ي داﺷﺘﻪ ﺑﺎﺷﺪ‬Ajax ‫ﻳﻚ درﺧﻮاﺳﺖ‬
<head runat="server">
<title> Ajaxian Simple ResponseText</title>
<script type="text/javascript"
src="javaScript/xmlHttp.js"></script>
</head>
.‫ را ﻧﻤﺎﻳﺶ دﻫﺪ‬XML ‫ﺣﺎل ﻛﺪ اﺻﻠﻲ را ﺑﻪ ﺻﻮرت زﻳﺮ ﺗﻐﻴﻴﺮ ﻣﻲ دﻫﻴﻢ ﺗﺎ اﻃﻼﻋﺎت‬
<body>

<form id="form1" runat="server">

<input type="button" onclick="getData('http://' +

location.host +
'/AspAjaxSample/resource/DataFile.xml','divResu
lts');" value="Test XMLHTTP Call"/>
<br />
<br />

<div id="divResults">{no results}</div>

</form>

</body>
‫ اﺳﺖ را در ﭘﻮﺷﻪ‬xml ‫ ﻛﻪ ﻳﻚ ﻓﺎﻳﻞ‬DataFile.xml ‫ﺣﺎل اﺻﻠﻲ ﺗﺮﻳﻦ ﻋﻨﺼﺮ اﻳﻦ ﻣﺠﻤﻮﻋﻪ ﻳﻌﻨﻲ ﻓﺎﻳﻞ‬
.‫ ﺑﻪ ﺻﻮرت زﻳﺮ ﻣﻲ ﺑﺎﺷﺪ‬DataFile.xml ‫ ﻣﺤﺘﻮﻳﺎت ﻓﺎﻳﻞ‬.‫ اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‬resource
<?xml version="1.0" encoding="utf-8" ?>
<Customers>
<Customer>
<Firstname>Joe</Firstname>
<Lastname>Bloggs</Lastname>
<email>joe@bloggs.com</email>
‫ﻓﺼﻞ ‪71  4‬‬ ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬

‫>‪</Customer‬‬

‫>‪<Customer‬‬
‫>‪<Firstname>Alan</Firstname‬‬
‫>‪<Lastname>Anonymous</Lastname‬‬
‫>‪<email>anon@ymous.com</email‬‬
‫>‪</Customer‬‬

‫>‪<Customer‬‬
‫>‪<Firstname>Marvin</Firstname‬‬
‫>‪<Lastname>Martian</Lastname‬‬
‫>‪<email>marvin@mars.com</email‬‬
‫>‪</Customer‬‬

‫>‪</Customers‬‬
‫زﻣﺎﻧﻲ ﻛﻪ ﻛﻠﻴﺪ را اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪ ،‬ﻧﺘﻴﺠﻪ ﺑﻪ ﺻﻮرت ﺷﻜﻞ ‪ 5-1‬ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬
‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻣﻲ ﺑﻴﻨﻴﺪ‪ ،‬اﻃﻼﻋﺎت ﻓﺎﻳﻞ ‪ XML‬ﺑﻪ ﻫﻤﺎن ﺻﻮرﺗﻲ ﻛﻪ در آن ذﺧﻴﺮه ﺷﺪه اﻧﺪ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
‫اﺳﺘﻔﺎده از ﺧﺎﺻﻴﺖ ‪responseXML‬‬
‫در ﺳﻨﺎرﻳﻮي اﺻﻠﻲ ﺷﻤﺎ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻛﻪ ﭼﻨﺪﻳﻦ آﻳﺘﻢ ﻧﻤﺎﻳﺶ دﻫﻴﺪ‪ ،‬ﻛﻪ ﻣﻲ ﺗﻮاﻧﺪ ﺑﻪ ﺻﻮرت اﻧﺘﺨﺎب ﻧﺎم اﻓﺮاد از‬
‫ﻟﻴﺴﺖ ﺑﺎﺷﺪ‪ .‬ﻫﻤﺎﻧﻄﻮر ﻛﻪ در ﻓﺼﻞ ﺳﻮم ﻧﻴﺰ اﺷﺎره ﺷﺪ ﺑﺮاي ﺧﻮاﻧﺪن ﻓﺮﻣﺖ ‪ ، XML‬ﺷﻲ ‪ XMLHTTP‬ﻳﻚ ﺧﺎﺻﻴﺖ‬
‫ﺑﺎ ﻧﺎم ‪ responseXML‬را ﻓﺮاﻫﻢ ﻛﺮده اﺳﺖ‪ .‬اﻳﻦ ﺧﺎﺻﻴﺖ ﻳﻚ ﺷﻲ ﺳﻨﺪي ‪ XML‬اﺳﺘﺎﻧﺪارد ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﻣﻲ‬
‫ﺗﻮاﻧﺪ ﺑﻪ ﺑﺮرﺳﻲ و ﺗﺠﺰﻳﻪ اﺳﻨﺎد ‪ XML‬ﻳﺎ اﺳﺘﻔﺎده ﻣﺘﺪﻫﺎ و ﺧﺎﺻﻴﺖ ﻫﺎي ﮔﺮه ﻫﺎي ‪ DOM‬ﺑﭙﺮدازد‪.‬‬
‫اﺑﺘﺪا ﻳﻚ ‪ Web Form‬ﺑﺎ ﻧﺎم ‪ SimpleResponseXML.aspx‬اﻳﺠﺎد ﻛﻨﻴﺪ‪ .‬و ﻓﺎﻳﻞ ‪ xmlHttp.js‬را‬
‫ﺑﻪ آن اﻟﺤﺎق ﻛﻨﻴﺪ‪.‬‬

‫ﺷﻜﻞ ‪ 5-1‬ﻧﻤﺎﻳﺶ ﻓﺎﻳﻞ ‪DataFile.xml‬‬

‫ﻗﺒﻞ از ﺷﺮوع ﺑﻪ ﻧﻮﺷﺘﻦ ﺑﺮﻧﺎﻣﻪ ﺟﺪﻳﺪ‪ ،‬اﺻﻼﺣﻲ در ﻓﺎﻳﻞ ﺟﺎوا اﺳﻜﺮﻳﭙﺘﻲ اﻧﺠﺎم دﻫﻴﺪ‪ .‬ﺑﺮاي اﻳﻨﻜﻪ ﺗﺎﺑﻊ ‪gatData‬‬
‫را ﻳﻚ ﻣﺘﺪ ﻗﺎﺑﻞ اﻧﻌﻄﺎف ﺗﺮي ﺑﺴﺎزﻳﺪ آن را ﺑﻪ ﮔﻮﻧﻪ اي ﺗﻐﻴﻴﺮ ﺑﺪﻫﻴﺪ ﻛﻪ ﺑﺘﻮاﻧﻴﺪ ﺗﻘﺮﻳﺒﺎ در ﻫﺮ ﺑﺮﻧﺎﻣﻪ اي آن را ﺑﻪ ﻛﺎر‬
 ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬ ‫‪  72‬ﻓﺼﻞ ‪4‬‬

‫ﺑﺒﺮﻳﺪ‪ .‬ﺗﻮﺟﻪ دارﻳﺪ ﻛﻪ ﺑﺮاي ﻫﺮ ﺑﺮﻧﺎﻣﻪ ﺑﺎﻳﺴﺘﻲ ﻋﻤﻠﻴﺎﺗﻲ ﻛﻪ روﻳﺪاد ‪ onreadystatechange‬اﻧﺠﺎم ﻣﻲ دﻫﺪ‬
‫را ﺗﻐﻴﻴﺮ دﻫﻴﺪ‪ ،‬ﺗﺎ از ﺑﺮﻧﺎﻣﻪ ﺟﻮاب ﺑﮕﻴﺮﻳﺪ‪ .‬ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻳﻚ وﻳﮋﮔﻲ ﺳﺎده و ﺟﺎﻟﺒﻲ دارد ﻛﻪ ﺷﻤﺎ را ﻗﺎدر ﻣﻲ ﺳﺎزد‬
‫ﻛﺪ ﻳﻚ ﺗﺎﺑﻊ را ﺑﻪ ﺗﺎﺑﻊ دﻳﮕﺮي ﺑﻪ ﻋﻨﻮان ﭘﺎراﻣﺘﺮ ﭘﺎس دﻫﻴﺪ‪ .‬از اﻳﻦ ﺧﺎﺻﻴﺖ اﺳﺘﻔﺎده ﻛﺮده و ﺗﺎﺑﻊ ﺟﺪﻳﺪي ﺑﻪ‬
‫ﺻﻮرت زﻳﺮ اﻳﺠﺎد ﻛﻨﻴﺪ‪:‬‬
‫)‪function getDataCallBack(callBack,dataSource‬‬
‫{‬
‫;)(‪xmlHttp = createXMLHttp‬‬
‫{ )‪if(xmlHttp‬‬

‫;)‪xmlHttp.open("GET", dataSource‬‬
‫)(‪xmlHttp.onreadystatechange = function‬‬
‫{‬
‫== ‪if (xmlHttp.readyState == 4 && xmlHttp.status‬‬
‫{ )‪200‬‬
‫‪callBack(xmlHttp.responseText,xmlHttp.‬‬
‫;)‪responseXML‬‬
‫}‬
‫}‬
‫;)‪xmlHttp.send(null‬‬
‫}‬
‫}‬
‫‪ callBack‬ﻫﻤﺎن ﺗﺎﺑﻌﻲ اﺳﺖ ﻛﻪ ﺑﻪ ﺻﻮرت ﭘﺎراﻣﺘﺮ ﺑﻪ ﺗﺎﺑﻊ ﺟﺪﻳﺪ ‪ getDataCallBack‬ﭘﺎس داده ﺷﺪه‬
‫اﺳﺖ‪ .‬در روﻳﺪاد ‪ onreadystatechange‬ﻧﻴﺰ ﭘﺲ از ﻋﻤﻠﻴﺎت اﻋﺘﺒﺎر ﺳﻨﺠﻲ ﺑﻪ ﺟﺎي اﻧﺠﺎم ﻣﺴﺘﻘﻴﻢ ﻋﻤﻠﻴﺎت‪،‬‬
‫ﻳﻚ ﺗﺎﺑﻊ ﭘﺎس داده ﺷﺪه ﺑﺎ دو ﭘﺎراﻣﺘﺮ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‪ .‬ﺑﺎ اﻳﻦ ﻛﺎر ﻛﺪ ﺧﻮاﻧﺎﺗﺮي ﺧﻮاﻫﻴﺪ داﺷﺖ‪.‬‬
‫اﺑﺘﺪا ﻳﻚ ﺗﺎﺑﻊ ﺟﺪﻳﺪي ﺑﻪ ﻓﺮم اﺿﺎﻓﻪ ﻛﻨﻴﺪ‪ ،‬اﻳﻦ ﺗﺎﺑﻊ ﺑﻪ ﺻﻮرت زﻳﺮ ﺧﻮاﻫﺪ ﺑﻮد‪:‬‬
‫>"‪<head runat="server‬‬
‫"‪<script type="text/javascript‬‬
‫>‪src="javaScript/xmlHttp.js"></script‬‬
‫> "‪<script type="text/javascript‬‬
‫{)‪function getDataCallBack(responseText,responseXML‬‬
‫;)"‪var obj = document.getElementById("divResults‬‬
‫(‪var node = responseXML.selectSingleNode‬‬
‫;)”)(‪“//Customers/Customer/Firstname/text‬‬
‫;‪obj.childNodes[0].nodeValue = node.nodeValue‬‬
‫}‬
‫>‪</script‬‬
‫>‪</head‬‬
‫ﺑﻪ ﺟﺎي اﻳﻨﻜﻪ داده ﺧﺮوﺟﻲ را ﺑﻪ ﺻﻮرت ﻣﺠﻤﻮﻋﻪ ﻛﺎﻣﻞ ﻧﻤﺎﻳﺶ دﻫﻴﺪ‪ ،‬اوﻟﻴﻦ ﻧﻤﻮﻧﻪ >‪ ،<Firstname‬را‬
‫ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﻴﺪ‪ .‬ﺷﻤﺎ اﻳﻦ ﻛﺎر را ﺑﺎ اﺳﺘﻔﺎده ﻣﺘﺪ ‪ selectSingleNode‬اﻧﺠﺎم ﻣﻲ دﻫﻴﺪ‪ .‬اﻳﻦ ﻣﺘﺪ در ﺻﻮرت‬
‫ﭘﻴﺪا ﻛﺮدن ﺟﻮاب ﻳﻚ ﮔﺮه ‪XML‬ي را ﺑﺮﻣﻲ ﮔﺮداﻧﺪ در ﻏﻴﺮ اﻳﻨﺼﻮرت ﻣﻘﺪار ﺧﺮوﺟﻲ آن ‪ null‬ﺧﻮاﻫﺪ ﺑﻮد‪.‬‬
‫ﻣﻘﺪار ﺷﻲ ﮔﺮه در ‪nodeValue‬ي اوﻟﻴﻦ ﻋﻨﺼﺮ ﺑﺪﺳﺖ آﻣﺪه ﺗﻮﺳﻂ ﺧﺎﺻﻴﺖ ‪ childNodes‬از ﻋﻨﺼﺮ‬
‫ﻓﺼﻞ ‪73  4‬‬ ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬

‫‪ divResults‬ﻗﺮار داده ﻣﻲ ﺷﻮد‪ .‬اﮔﺮ از ‪ Firefox‬اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﺪ ﺑﺎﻳﺪ ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ‬
‫‪ Firefox‬از ﻣﺘﺪﻫﺎي )(‪ selectSingleNode‬و )(‪ selectNodes‬ﺣﻤﺎﻳﺖ ﻧﻤﻲ ﻛﻨﺪ‪.‬‬
‫اﻛﻨﻮن ﺑﺪﻧﻪ ي ﻣﺜﺎل ﺟﺪﻳﺪ را ﻫﻤﺎﻧﻨﺪ ﻣﺜﺎل ﻗﺒﻠﻲ ﻧﻮﺷﺘﻪ و ﺗﻨﻬﺎ ﺑﺮاي اﺳﺘﻔﺎده از ﻣﺘﺪ ﺟﺪﻳﺪ در آن ﺗﻐﻴﻴﺮ ﻛﻮﭼﻜﻲ‬
‫ﺑﺪﻫﻴﺪ‪:‬‬
‫>"‪<form id="form1" runat="server‬‬
‫"‪<input type="button‬‬
‫‪onclick="getDataCallBack(parsingData,'http://' +‬‬
‫";)'‪location.host + '/AspAjaxSample/resource/DataFile.xml‬‬
‫>‪value="Test XMLHTTP Call"/‬‬
‫>‪<br /‬‬
‫>‪<br /‬‬
‫>‪<div id="divResults">{no results}</div‬‬
‫>‪</form‬‬
‫اﻳﻦ ﻣﺜﺎل ﻓﻌﻼ ﻳﻚ ﻣﺜﺎل ﺳﺎده ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﺣﺎﻻ ﺑﺎ اﻳﺠﺎد ﻳﻚ ﺻﻔﺤﻪ وب ﺳﺎده ﻣﻲ ﺧﻮاﻫﻴﻢ ﻛﻪ ﺑﻪ ﺷﻤﺎ اﺟﺎزه اﻧﺘﺨﺎب‬
‫ﻳﻚ ﻓﺮد از ﻟﻴﺴﺖ اﻓﺮاد و ﻧﻤﺎﻳﺶ ﻧﺎم ﻛﺎﻣﻞ واﻃﻼﻋﺎت ‪ mail‬ﺑﺎ اﻧﺠﺎم ﻳﻚ ﺟﺴﺘﺠﻮي ﺳﻤﺖ ﺳﺮور از ﻓﺎﻳﻞ ‪XML‬‬
‫ﺑﻪ ﺻﻮرت ﻏﻴﺮ ﻫﻤﺰﻣﺎن داده ﺷﻮد‪.‬‬
‫ﺑﺎ اﺳﺘﻔﺎده از ﻳﻚ ﻋﻨﺼﺮ ‪ ،drop-down‬ﻟﻴﺴﺘﻲ از ﻧﺎم اﻓﺮاد ﻣﻮﺟﻮد در ﻓﺎﻳﻞ ‪ XML‬را اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‪ .‬زﻣﺎﻧﻲ ﻛﻪ‬
‫ﻛﺎرﺑﺮ ﻧﺎﻣﻲ را از ﻟﻴﺴﺖ اﻧﺘﺨﺎب ﻛﺮد ‪ ،‬ﻳﻚ درﺧﻮاﺳﺖ ﺳﻤﺖ ﺳﺮور ﺑﺮاي ﺑﺎزﻳﺎﺑﻲ آن داده و ﺑﺎزﻳﺎﺑﻲ ‪ email‬اﺟﺮا‬
‫ﻣﻲ ﺷﻮد‪ .‬ﺑﺪون اﺳﺘﻔﺎده از ‪ XMLHTTP‬ﻛﺎرﺑﺮ ﺑﺎﻳﺴﺘﻲ ﺗﺎ زﻣﺎن ارﺳﺎل اﻃﻼﻋﺎت ﺑﻪ ﺳﺮور و ﭘﺮدازش آن و ﺑﺎزﻳﺎﺑﻲ‬
‫اﻃﻼﻋﺎت ﻣﻨﺘﻈﺮ ﺑﻤﺎﻧﺪ‪.‬‬
‫ﺑﺪﻧﻪ ﻓﺮم را ﺑﻪ ﺻﻮرت زﻳﺮ ﺗﻐﻴﻴﺮ ﺑﺪﻫﻴﺪ‪:‬‬

‫‪<body onload="getDataCallBack(LoadCustomers,'http://' +‬‬

‫‪location.host + '/AspAjaxSample/resource/‬‬
‫>";)'‪DataFile.xml‬‬
‫>"‪<form id="form1" runat="server‬‬

‫>‪<div‬‬
‫"‪<select id="ddlCustomers‬‬
‫‪onchange="getDataCallBack(DisplayCustomerDetails,‬‬
‫‪'http://' + location.host +‬‬
‫>";)'‪'/AspAjaxSample/resource/DataFile.xml‬‬
‫‪<option value="">- Select a Customer -‬‬
‫>‪</option‬‬
‫>‪</select‬‬

‫>‪<hr /‬‬

‫>‪<div‬‬
‫>‪<p>Details:</p‬‬
‫>"‪<span id="spnDetailDisplay‬‬
 ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬ 4 ‫ ﻓﺼﻞ‬ 74

(You have not made a selection yet.)

</span>
</div>

</div>

</form>
</body>

‫< ﻗﺮار دارد ﻛﻪ ﻧﺎم ﻛﺎرﻣﻨﺪان را ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ و ﻳﻚ ﻋﻨﺼﺮ‬select> ‫داﺧﻞ ﻋﻨﺼﺮ ﻓﺮم ﻳﻚ ﻋﻨﺼﺮ‬
onload ‫ ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ روﻳﺪاد‬.‫< ﻛﻪ در آن ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﺸﺨﺼﺎت ﻛﺎرﻣﻨﺪان را ﻧﻤﺎﻳﺶ دﻫﻴﺪ‬span>
‫ ﺑﻪ آن ﭘﺎس داده ﺷﺪه را ﻓﺮاﺧﻮاﻧﻲ‬LoadCustomers() ‫ ﻛﻪ ﻣﺘﺪ‬getDataCallBack ‫< ﺗﺎﺑﻊ‬body>
‫ ﻋﻨﺼﺮ‬onchange ‫ ﻫﻤﭽﻨﻴﻦ روﻳﺪاد‬،‫ﻣﻲ ﻛﻨﺪ ﻛﻪ ﺑﺮاي ﻣﻘﺪار دﻫﻲ اوﻟﻴﻪ ﻟﻴﺴﺖ ﺑﺎ ﻧﺎم ﻛﺎرﻣﻨﺪان ﻣﻲ ﺑﺎﺷﺪ‬
‫ را ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﺪ ﻛﻪ اﻃﻼﻋﺎت ﻛﺎرﻣﻨﺪ‬DisplayCustomerDetails() ‫ ﺗﺎﺑﻊ‬، <select>
.‫اﻧﺘﺨﺎﺑﻲ را از اﻧﺘﺨﺎب ﻛﺮده و ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‬
:‫ ﻛﻪ ﻧﺎم ﻛﺎرﻣﻨﺪان را ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ ﺑﻪ ﺻﻮرت زﻳﺮ ﺧﻮاﻫﺪ ﺑﻮد‬LoadCustomers() ‫ﻣﺘﺪ‬
function LoadCustomers(responseText,responseXML){

var xmlDoc = responseXML;

var nodes = xmlDoc.selectNodes
("//Customers/Customer/Lastname/text()");
var ctrl =
document.getElementById("ddlCustomers");
for (var i=0; i < nodes.length; i++)
{

var lastName = nodes[i].nodeValue;

var htmlCode=
document.createElement('option');
ctrl.options.add(htmlCode);
htmlCode.text = lastName;
htmlCode.value = lastName;
}
}
:‫ را ﭘﻴﺎده ﺳﺎزي ﻛﻨﻴﺪ‬DisplayCustomerDetails() ‫ﺣﺎل ﺑﺮاي ﻧﻤﺎﻳﺶ اﻃﻼﻋﺎت ﻛﺎرﻣﻨﺪ ﺑﺎﻳﺪ ﻣﺘﺪ‬
function DisplayCustomerDetails(responseText,responseXML){

var ctrl =
document.getElementById("ddlCustomers");
var doc = responseXML;
var lastName=ctrl.options[ctrl.selectedIndex]
.value;

var node = doc.selectSingleNode

‫ﻓﺼﻞ ‪75  4‬‬ ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬

‫‪("//Customers/Customer[Lastname='" +‬‬
‫;)"]'" ‪lastName +‬‬
‫‪var details = 'Fullname: ' + node‬‬
‫)')(‪.selectSingleNode('Firstname/text‬‬
‫‪.nodeValue + ' ' +lastName + '. Email: ' +‬‬
‫)')(‪node.selectSingleNode('email/text‬‬
‫;‪.nodeValue‬‬

‫)"‪document.getElementById("spnDetailDisplay‬‬
‫;‪.childNodes[0].nodeValue = details‬‬
‫}‬

‫ﺷﻜﻞ‪ 5-2‬ﻧﻤﺎﻳﺶ ﻣﺸﺨﺼﺎت ﻓﺮد اﻧﺘﺨﺎﺑﻲ از ﻟﻴﺴﺖ‬

‫ارﺳﺎل ﭘﺎراﻣﺘﺮ ﺑﻪ ﺳﺮور‬
‫ﻣﻮارد زﻳﺎدي وﺟﻮد دارد ﻛﻪ ﺷﻤﺎ ﻧﻴﺎز ﺑﻪ ارﺳﺎل داده ﺑﻪ ﺳﻤﺖ ﺳﺮور دارﻳﺪ‪ .‬روش ﺳﻨﺘﻲ ﺑﺮاي اﻧﺠﺎم اﻳﻦ ﻛﺎر‬
‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ در ﻓﺼﻠﻬﺎي ﻗﺒﻞ ﮔﻔﺘﻪ ﺷﺪ ارﺳﺎل از ﻃﺮﻳﻖ رﺷﺘﻪ آرﮔﻮﻣﺎﻧﻬﺎي ﺑﻪ ﻋﻨﻮان ﻗﺴﻤﺘﻲ از درﺧﻮاﺳﺖ‬
‫‪ XMLHTTP‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻳﻚ ﻣﺜﺎل ﻣﻲ ﺗﻮاﻧﺪ ﺑﻪ ﺻﻮرت زﻳﺮ ﺑﺎﺷﺪ‪:‬‬
‫‪xmlHttp.open(“GET”,”http://” + location.host +‬‬
‫;)‪“/XmlHttpExample1/WebForm1.aspx?arg=123”, true‬‬
‫ﺻﻔﺤﻪ اي ﻛﻪ اﻳﻦ درﺧﻮاﺳﺖ را ﮔﺮﻓﺘﻪ و ﭘﺮدازش ﻣﻲ ﻛﻨﺪ )در اﻳﻦ ﻣﺜﺎل ‪ ( WebForm1.aspx‬ﻣﻲ ﺗﻮاﻧﺪ رﺷﺘﻪ‬
‫ﭘﺎراﻣﺘﺮﻫﺎ ﻣﻮﺟﻮد در ‪ URL‬ﻛﻪ از آن ﻫﺎ ‪ query string‬ﻧﺎم ﺑﺮده ﻣﻲ ﺷﻮد را ﺑﺮداﺷﺘﻪ و از آن ﻫﺎ اﺳﺘﻔﺎده‬
‫ﻛﻨﺪ‪ .‬ﻧﻤﻮﻧﻪ از ﺑﻪ ﮔﺮﻓﺘﻦ رﺷﺘﻪ ﭘﺎراﻣﺘﺮﻫﺎ در زﻳﺮ آﻣﺪه اﺳﺖ‪:‬‬
‫)‪private void Page_Load(object sender, System.EventArgs e‬‬
‫{‬
 ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬ ‫‪  76‬ﻓﺼﻞ ‪4‬‬

‫)‪if (Request.QueryString.Count > 0‬‬

‫{‬
‫;]”‪string queryArg = Request.QueryString[“arg‬‬
‫)‪switch (queryArg‬‬
‫{‬
‫‪case “123”:‬‬
‫;)”‪Server.Transfer(“DataFile1.xml‬‬
‫;‪break‬‬
‫‪case “456”:‬‬
‫;)”‪Server.Transfer(“DataFile2.xml‬‬
‫;‪break‬‬
‫‪default:‬‬
‫;)”‪Server.Transfer(“DataFile1.xml‬‬
‫;‪break‬‬
‫}‬
‫}‬
‫}‬
‫اﺳﺘﻔﺎده از روش ﺳﻨﺘﻲ ﮔﺰﻳﻨﻪ ﻣﻨﺎﺳﺒﻲ ﺑﺮاي اﺳﺘﻔﺎده از آرﮔﻮﻣﺎﻧﻬﺎ در ﺳﻤﺖ ﺳﺮور ﻧﻤﻲ ﺑﺎﺷﺪ‪،‬‬
‫‪ HTTP Handeler‬ﻫﺎ‬
‫ﻳﻚ روش ﺑﺮاي ﻣﺪﻳﺮﻳﺖ اﻳﻦ ﻧﻮع درﺧﻮاﺳﺖ ﻫﺎ اﺳﺘﻔﺎده ﻳﻚ‪ HTTP handeler‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻳﻚ‬
‫‪ handeler‬ﺗﻮاﻧﺎﺋﻲ ﭘﺎﺳﺦ دادن ﺑﻪ درﺧﻮاﺳﺖ ﻫﺎي ﺑﺎ ﻛﻨﺘﺮل ﻣﺴﺘﻘﻴﻢ ﺑﺮ روي داده ي ﭘﺎﺳﺦ را دارد‪.‬‬
‫‪ HTTP handeler‬ﻣﻲ ﺗﻮاﻧﺪ ﻣﺴﺘﻘﻴﻤﺎ ﺑﺎ درﺧﻮاﺳﺖ ﻫﺎ ﺳﺮوﻛﺎر داﺷﺘﻪ ﺑﺎﺷﺪ ﺑﺪون اﻳﻨﻜﻪ ﻧﮕﺮان داده ي ‪HTML‬‬
‫ﺗﻮﻟﻴﺪ ﺷﺪه ﺗﻮﺳﻂ ﺻﻔﺤﻪ‪ ،‬ﺑﺎﺷﺪ‪.‬‬
‫ﺑﺮاي ﻧﺸﺎن دادن اﺳﺘﻔﺎده از ‪ HTTP handeler‬در درﻳﺎﻓﺖ آرﮔﻮﻣﺎﻧﻬﺎي ارﺳﺎﻟﻲ از ﺷﻲ ‪ ، XMLHTTP‬ﺑﺎﻳﺴﺘﻲ‬
‫اﺑﺘﺪا واﺳﻂ ﻛﺎرﺑﺮي ﺻﻔﺤﻪ وب را ﻃﺮاﺣﻲ ﻛﻨﻴﺪ‪ ،‬ﻛﻪ در ﻛﺪ زﻳﺮ ﻧﺸﺎن داده ﺷﺪه اﺳﺖ‪ .‬اﻳﻦ ﻣﺜﺎل ﻳﻚ ﻟﻴﺴﺖ‬
‫‪ drop-down‬ﻛﻪ ﺑﺎ ﻧﺎم ﺳﻪ ﻛﺎرﻣﻨﺪ ﻣﻘﺪار دﻫﻲ ﺷﺪه اﺳﺖ را ﻧﺸﺎن ﻣﻲ دﻫﺪ ‪ .‬زﻣﺎﻧﻲ ﻛﻪ ﻳﻜﻲ از ﻛﺎرﻣﻨﺪان‬
‫اﻧﺘﺨﺎب ﻣﻲ ﺷﻮﻧﺪ‪ ID ،‬ﻛﺎرﻣﻨﺪ ﺑﻪ ﻋﻨﻮان ﻗﺴﻤﺘﻲ از درﺧﻮاﺳﺖ ‪ Ajax‬ﺑﻤﻨﻈﻮر درﻳﺎﻓﺖ ﻣﺠﻤﻮﻋﻪ ﺧﺎﺻﻲ از داده ﻫﺎ‬
‫ﻛﻪ ﺑﻪ ﻣﺸﺨﺼﺎت ﻛﺎرﻣﻨﺪ اﻧﺘﺨﺎﺑﻲ ﻣﺮﺑﻮط ﻣﻲ ﺷﻮﻧﺪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬
‫>"‪<form id="form1" runat="server‬‬
‫>‪<div‬‬
‫"‪<select id="ddlCustomers‬‬
‫>";)(‪onchange="LoadCustomers‬‬
‫‪<option value="">- Select a Customer -‬‬
‫>‪</option‬‬
‫>‪<option value="1">Customer 1</option‬‬
‫>‪<option value="2">Customer 2</option‬‬
‫>‪<option value="3">Customer 3</option‬‬
‫>‪</select‬‬
‫>‪<hr /‬‬
‫>‪<div‬‬
‫>‪<p>Details:</p‬‬
‫>"‪<span id="spnDetailDisplay‬‬
‫)‪(You have not made a selection yet‬‬
77  4 ‫ﻓﺼﻞ‬ ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬

</span>
</div>
</div>
</form>

‫ دراﻳﻦ ﻣﺘﺪ ﻳﻚ‬.‫ را ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﺪ‬LoadCustomer ‫< ﻣﺘﺪ‬select> ‫ ﻋﻨﺼﺮ‬onchange ‫در اﻳﻦ ﻣﺜﺎل‬
،‫ ﭘﺎس ﻣﻲ دﻫﺪ‬getDataCallBack ‫ را ﺑﻪ ﺗﺎﺑﻊ‬ShowCustomer ‫ دارﻳﻢ ﻛﻪ ﻣﺘﺪ‬Ajax ‫درﺧﻮاﺳﺖ‬
‫ را ﺑﺎ‬arg ‫ اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﺪ و‬asynchronous ‫ ﺑﺮاي اﻳﺠﺎد درﺧﻮاﺳﺖ‬handeler ‫ﻫﻤﭽﻨﻴﻦ از ﻳﻚ‬
.‫< ﻣﻘﺪار دﻫﻲ ﻣﻲ ﻛﻨﺪ‬select> ‫ﮔﺰﻳﻨﻪ اﻧﺘﺨﺎﺑﻲ در ﻋﻨﺼﺮ‬
:‫ ﺑﻪ ﺻﻮرت زﻳﺮ ﭘﻴﺎده ﺳﺎزي ﻣﻲ ﺷﻮد‬LoadCustomer ‫ﻣﺘﺪ‬
<head runat="server">
<script type="text/javascript"
src="javaScript/xmlHttp.js"></script>
<script type="text/javascript" >

function LoadCustomers(){

var ddlCtrl=document.
getElementById("ddlCustomers");

var custNumber = ddlCtrl.value;

getDataCallBack(ShowCustomer,'http://' +
location.host + '/AspAjaxSample/
AsyncRequestHandler.ashx?arg='+custNumber);
}

</script>
</head>
:‫ ﻧﻴﺰ ﺑﻪ ﺻﻮرت زﻳﺮ ﭘﻴﺎده ﺳﺎزي ﻣﻲ ﺷﻮد‬ShowCustomer ‫ﺗﺎﺑﻊ‬
function ShowCustomer(responseText,responseXML){

var disp = document.

getElementById("spnDetailDisplay");
var xmlDoc = responseXML;
var name =xmlDoc.
selectSingleNode("//root/Customer/name/text()");
var email =xmlDoc.selectSingleNode
("//root/Customer/email/text()");
alert(name);
disp.childNodes[0].nodeValue = "Name: " +
name.nodeValue + " - Email: " +
email.nodeValue;
}
 ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬ 4 ‫ ﻓﺼﻞ‬ 78

‫ ﻓﺮاﺧﻮاﻧﻲ‬XMLHTTP ‫ ﺗﻮﺳﻂ ﺷﻲ‬handeler ‫ اﻳﻦ‬.‫ را در زﻳﺮ ﻣﻲ ﺑﻴﻨﻴﺪ‬HTTP handeler ‫ﭘﻴﺎده ﺳﺎزي ﻳﻚ‬
‫ ﺑﻪ ﺷﻲ‬،‫ ﻛﺎرﻣﻨﺪ‬email ‫ ﺷﺎﻣﻞ ﻧﺎم و‬،XML ‫ ﻛﺎرﺑﺮ را ﮔﺮﻓﺘﻪ و از آن ﺑﺮاي ﺑﺮﮔﺮداﻧﺪن ﻳﻚ ﺳﻨﺪ‬ID ‫ و‬،‫ﻣﻲ ﺷﻮد‬
.‫ ﻗﺮار ﻣﻲ ﮔﻴﺮد‬AsyncRequestHandler.ashx ‫ اﻳﻦ ﻛﺪ در ﻓﺎﻳﻞ‬.‫ اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﺪ‬XMLHTTP
<%@ WebHandler Language="C#" Class="AsyncRequestHandler" %>

using System;
using System.Web;

public class AsyncRequestHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

string param = context.Request.QueryString["arg"];

const string xmlData = @"<?xml version=""1.0""
encoding=""utf-8"" ?><root><Customer><name>{0}
</name><email>{1}</email></Customer></root>";
string returnXML = null;
switch (param)
{
case "1":
returnXML = string.Format(xmlData, "Big Bob",
"big@bob.com");
break;
case "2":
returnXML = string.Format(xmlData,
"Small Sammy","small@sammy.com");
break;
case "3":
returnXML = string.Format(xmlData,
"Large Larry","large@larry.com");
break;
}
context.Response.ContentType = "application/xml";
context.Response.Write(returnXML);
}

public bool IsReusable {

get {
return false;
}
}

}
‫ﻓﺼﻞ ‪79  4‬‬ ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬

‫ﺷﻜﻞ‪ 5-3‬ﻧﻤﺎﻳﺶ ﻣﺸﺨﺼﺎت ﻛﺎرﻣﻨﺪ ﺑﺎ ‪HTTP handeler‬‬

‫‪ Web Service‬ﻫﺎ ﭼﻴﺴﺘﻨﺪ؟‬
‫‪ .NET‬ﺑﻪ ﺻﻮرت ﮔﺴﺘﺮده از ‪ Web Service‬ﻫﺎ ﺣﻤﺎﻳﺖ ﻣﻲ ﻛﻨﺪ‪ Web Service .‬ﻣﻜﺎﻧﻴﺴﻢ ﺑﺮﺗﺮ ﺑﺮاي‬
‫اراﺋﻪ ﻋﻤﻠﻴﺎت ﺳﻤﺖ ﺳﺮور و ﻳﺎ ﻧﻘﻄﻪ اي ﺑﺮاي ورود ﺑﻪ ﭘﺮدازش ﻫﺎي ﺳﻤﺖ ﺳﺮور ﻣﻲ ﺑﺎﺷﺪ‪ .‬دﺳﺘﺮﺳﻲ ﺑﻪ اﻳﻦ‬
‫ﺳﺮوﻳﺲ ﻫﺎ در روش ‪ asynchronous‬ﻳﻚ ﻣﺮﺣﻠﻪ ي ﺳﺎده و روﺷﻲ ﻣﻨﺎﺳﺐ در اﻳﺠﺎد ﻫﻤﺎﻫﻨﮕﻲ ﺑﻴﻦ ﺑﺮﻧﺎﻣﻪ‬
‫ﻫﺎي ﺳﻤﺖ ﻛﻼﻳﻨﺖ و ﺳﺮور اﺳﺖ ﻛﻪ ﺗﻮﺳﻂ ‪ .NET‬در اﺧﺘﻴﺎر ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ‪.‬‬
‫ﻣﺜﺎل زﻳﺮ ﺷﺎﻣﻞ ﻳﻚ ﺗﺎﺑﻊ ‪ Web Service‬ﺑﺎ ﻧﺎم ‪ Adder‬اﺳﺖ ﻛﻪ وﻇﻴﻔﻪ آن ﻣﺤﺎﺳﺒﻪ ﺣﺎﺻﻞ ﺟﻤﻊ دو‬
‫آرﮔﻮﻣﺎن ارﺳﺎﻟﻲ از ﺳﻤﺖ ﻛﻼﻳﻨﺖ ﺑﻪ ﺳﺮوﻳﺲ اﺳﺖ‪:‬‬
‫>"‪<form id="form1" runat="server‬‬
‫>‪<div‬‬
‫>‪<input type="text" id="val1" /‬‬
‫>‪<input type="text" id="val2" /‬‬
‫"‪<input type="button" value="Calculate‬‬
‫>‪onclick="ExecWebService();" /‬‬
‫>‪<hr /‬‬
‫>‪<div‬‬
‫>‪<p>Details:</p‬‬
‫>"‪<span id="spnDetailDisplay‬‬
‫)‪(You have not made a selection yet‬‬
‫>‪</span‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫>‪</form‬‬
‫اﻳﻦ ﺻﻔﺤﻪ ﺳﺎده ‪ HTML‬از دو ﻓﻴﻠﺪ ‪ text‬ﻛﻪ ﻣﻘﺎدﻳﺮ ﻋﺪدي ﻣﻲ ﮔﻴﺮﻧﺪ و ﺑﻪ ﻋﻨﻮان آرﮔﻮﻣﺎﻧﻬﺎي ﻋﻤﻠﻴﺎت ﺟﻤﻊ‬
‫اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد و ﻳﻚ ﻛﻠﻴﺪ ﻛﻪ ﺑﺮاي ﻣﺤﺎﺳﺒﻪ ﺣﺎﺻﻞ ﺟﻤﻊ دو آرﮔﻮﻣﺎن اﺳﺖ ﺗﺸﻜﻴﻞ ﺷﺪه اﺳﺖ‪ .‬در‬
 ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬ 4 ‫ ﻓﺼﻞ‬ 80

‫ ﺷﻤﺎ را ﺑﻪ ﺻﻮرت‬WebService ‫ ﻛﻪ‬ExecWebService() ‫ ﻛﻠﻴﺪ ﺗﺎﺑﻊ‬onclick

.‫ ﻧﻮﺷﺘﻪ ﺷﺪه اﺳﺖ‬،‫ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﺪ‬ExecWebService()
‫ در ﻓﺎﻳﻞ‬Web Service .‫ ﻛﻪ ﻳﻚ ﻛﺪ ﺳﺎده ﻣﻲ ﺑﺎﺷﺪ را ﭘﻴﺎده ﺳﺎزي ﻛﻨﻴﺪ‬،WebService ‫ﺣﺎل ﺑﺎﻳﺪ ﻛﺪ‬
:‫ ﻣﻲ ﺑﺎﺷﺪ‬Adder ‫ اﻳﺠﺎد ﻣﻲ ﺷﻮد و ﺷﺎﻣﻞ ﺗﻨﻬﺎ ﻳﻚ ﻣﺘﺪ ﺑﺎ ﻧﺎم‬AsyncService.asmx
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AsyncService : System.Web.Services.WebService {

public AsyncService () {
}

[WebMethod]
public int AdderAdder(int arg1, int arg2) {
return arg1 + arg2;
}

}
‫ اﻳﻦ ﻣﺘﺪ ﻣﻘﺎدﻳﺮ دو ﻓﻴﻠﺪ را ﮔﺮﻓﺘﻪ و ﻳﻚ‬.‫ ﻣﻲ ﭘﺮدازﻳﻢ‬ExecWebService() ‫ﺣﺎل ﺑﻪ ﭘﻴﺎده ﺳﺎزي ﻣﺘﺪ‬
:‫ اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ‬،getDataCallBack ‫ ﺑﻪ ﺗﺎﺑﻊ‬ShowResoult ‫ي ﺑﺎ ﭘﺎس دادن ﻣﺘﺪ‬-ajax ‫درﺧﻮاﺳﺖ‬
function ExecWebService(){

var ctlVal1 = document.getElementById("val1");

var ctlVal2 = document.getElementById("val2");

getDataCallBack(ShowResoult,'http://' +
location.host +'/AspAjaxSample/AsyncService.asmx
/Adder?arg1=' + ctlVal1.value + '&arg2=' +
ctlVal2.value);
}
:‫ ﺑﻪ ﻛﺎر ﻣﻲ رود‬Web Server ‫ ﺑﺮاي ﻧﻤﺎﻳﺶ ﻣﻘﺪار ﺑﺮﮔﺮداﻧﺪه ﺷﺪه از‬ShowResoult ‫ﻣﺘﺪ‬
function ShowResoult(responseText,responseXML){
var disp = document
.getElementById("spnDetailDisplay");
var result = responseXML.lastChild
.childNodes[0].nodeValue;
disp.childNodes[0].nodeValue = "Result: " +
result;
}
‫ اﻳﻦ ﻣﻮﺿﻮع ﻧﺸﺎن از اﻳﺠﺎد ﻳﻚ ﻣﺸﻜﻞ در ﻛﺪ‬.‫ ﻫﻴﭻ ﺟﻮاﺑﻲ از ﺳﻤﺖ ﺳﺮور درﻳﺎﻓﺖ ﻧﺨﻮاﻫﻴﺪ ﻛﺮد‬،‫ﺑﺎ اﺟﺮاي ﺑﺮﻧﺎﻣﻪ‬
‫ ﻛﻪ ﺑﺮ روي‬Firebug ‫ ﻣﺎﻧﻨﺪ‬Debug ‫ ﺑﺮاي ﭘﻲ ﺑﺮدن ﺑﻪ ﻣﺸﻜﻞ ﻣﻲ ﺗﻮاﻧﻴﺪ از ﻧﺮم اﻓﺰارﻫﺎي‬.‫ﺷﻤﺎ ﻣﻲ ﺑﺎﺷﺪ‬
‫ در اﻳﻨﺠﺎ ﻣﺎ از ﺗﻐﻴﻴﺮ در ﻛﺪ ﺑﺮﻧﺎﻣﻪ اﺷﻜﺎل ﻣﻮﺟﻮد را ﺑﺮرﺳﻲ ﻣﻲ‬.‫ ﻛﺎر ﻣﻲ ﻛﻨﻨﺪ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‬Firefox ‫ﻣﺮورﮔﺮ‬
:‫ را ﺑﻪ ﺻﻮرت زﻳﺮ ﺗﻐﻴﻴﺮ دﻫﻴﺪ‬getDataCallBack ‫ در ﻛﺪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺗﺎﺑﻊ‬.‫ﻛﻨﻴﻢ‬
function getDataCallBack(callBack,dataSource)
81  4 ‫ﻓﺼﻞ‬ ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬

{ .
.
.

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

callBack(xmlHttp.responseText,xmlHttp.responseXML);
}else{
alert(xmlHttp.responseText);
}

}
}
‫ ﻛﻪ ﻣﺸﻜﻞ در ارﺳﺎل درﺧﻮاﺳﺖ ﺑﻪ ﺳﻤﺖ‬،‫ﺑﺎ اﺟﺮاي دوﺑﺎره ﺑﺮﻧﺎﻣﻪ ﻳﻚ ﭘﻴﻐﺎم ﺧﻄﺎ در ﺑﺮﻧﺎﻣﻪ ﺷﻤﺎ ﻇﺎﻫﺮ ﻣﻲ ﺷﻮد‬
.‫ﺳﺮور را ﺑﻴﺎن ﻣﻲ ﻛﻨﺪ‬

‫ وﺟﻮد ﺧﻄﺎ در ارﺳﺎل درﺧﻮاﺳﺖ ﺑﻪ ﺳﺮور‬5-4 ‫ﺷﻜﻞ‬

:‫ﻫﺎ ﺗﻐﻴﻴﺮاﺗﻲ را اﻋﻤﺎل ﻛﻨﻴﺪ‬Web Service ‫ ﺑﺮاي ﻛﺎر ﺑﺎ‬web.config ‫ﺑﺮاي ﺣﻞ ﻣﺸﻜﻞ ﺑﺎﻳﺴﺘﻲ در‬
<configuration>
<system.web>
.
.
.
<webServices>
<protocols>
<add name="HttpGet"/>
 ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬ ‫‪  82‬ﻓﺼﻞ ‪4‬‬

‫>‪</protocols‬‬

‫>‪</webServices‬‬
‫>‪</system.web‬‬
‫>‪</configuration‬‬
‫ﺑﺎ اﺿﺎﻓﻪ ﻛﺮدن ﻛﺪ ﺑﺎﻻ در ‪ ،web.config‬ﺑﺮﻧﺎﻣﻪ اﺟﺮا اﺟﺮا ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬
‫ﺑﺮاي اﺳﺘﻔﺎده از رﺷﺘﻪ آرﮔﻮﻣﺎﻧﻬﺎ‪ ،‬ﻛﻪ در ﻣﺜﺎل ﺑﺎﻻ ﻧﺸﺎن داده ﺷﺪ‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ از ﻣﺘﺪ )(‪ send‬ﺷﻲ ‪XMLHTTP‬‬
‫ﺑﺮاي اﻟﺤﺎق داده ﻫﺎ ﺑﺎ ﺑﺪﻧﻪ درﺧﻮاﺳﺖ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬در اﻳﻦ ﺻﻮرت اﺣﺘﻴﺎﺟﻲ ﺑﻪ اﺿﺎﻓﻪ ﻛﺮدن ﻛﺪ در‬
‫‪ web.config‬ﻧﺨﻮاﻫﻴﺪ داﺷﺖ‪.‬‬
‫ﺑﺮاي ﻧﻮﺷﺘﻦ اﻳﻦ ﺑﺮﻧﺎﻣﻪ از ﭘﺮوﺗﻜﻞ ‪ POST‬اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﻢ‪ ،‬ﺑﻪ ﻫﻤﻴﻦ دﻟﻴﻞ ﺑﺎﻳﺴﺘﻲ )(‪getDataCallBack‬‬
‫را ﺑﺮاي اﺳﺘﻔﺎده از اﻳﻦ ﭘﺮوﺗﻜﻞ آﻣﺎده ﻛﻨﻴﺪ‪ .‬روش ﺧﻮﺑﻲ ﻛﻪ ﺑﺮاي اﻳﻦ ﻛﺎر ﻣﻲ ﺗﻮان ﭘﻴﺸﻨﻬﺎد داد اﺳﺘﻔﺎده از ﻳﻚ‬
‫آرﮔﻮﻣﺎن ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن ﻧﻮع ﭘﺮوﺗﻜﻞ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ در ﻫﺮ ﺑﺎر ﻓﺮاﺧﻮاﻧﻲ ﺑﺎﻳﺴﺘﻲ ﭘﺮوﺗﻜﻞ را ﺑﻪ آن ﭘﺎس داد‪.‬‬
‫در اﻳﻨﺠﺎ ﻳﻚ ﻣﺘﺪ ﺟﺪﻳﺪ ﺑﺮاي اﺳﺘﻔﺎده از اﻳﻦ ﭘﺮوﺗﻜﻞ اﺿﺎﻓﻲ ﭘﻴﺎده ﺳﺎزي ﻣﻲ ﺷﻮد‪.‬‬
‫)‪function getDataCallBackWithPost(callBack,dataSource,sendData‬‬
‫{‬
‫;)(‪xmlHttp = createXMLHttp‬‬
‫{ )‪if(xmlHttp‬‬

‫;)‪xmlHttp.open("POST", dataSource‬‬
‫)(‪xmlHttp.onreadystatechange = function‬‬
‫{‬
‫== ‪if (xmlHttp.readyState == 4 && xmlHttp.status‬‬
‫{ )‪200‬‬

‫‪callBack(xmlHttp.responseText,xmlHttp.‬‬
‫;)‪responseXML‬‬
‫{‪}else‬‬
‫;)‪alert(xmlHttp.responseText‬‬
‫}‬
‫}‬
‫‪xmlHttp.setRequestHeader("Content-‬‬
‫‪Type","application/x-‬‬
‫;)"‪www-form-urlencoded‬‬
‫;)‪xmlHttp.send(sendData‬‬
‫}‬
‫}‬
‫ﺗﻐﻴﻴﺮات ﺗﺎﺑﻊ )(‪ getDataCallBackWithPost‬ﻧﺴﺒﺖ ﺑﻪ ﺗﺎﺑﻊ )(‪ getDataCallBack‬ﺑﻪ‬
‫ﺻﻮرت ﭘﺮ رﻧﮓ ﻧﺸﺎن داده ﺷﺪه اﺳﺖ‪ .‬آرﮔﻮﻣﺎن ‪ ، sendData‬رﺷﺘﻪ آرﮔﻮﻣﺎﻧﻲ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﺑﻪ ﺑﺪﻧﻪ درﺧﻮاﺳﺖ‬
‫اﻟﺤﺎق ﺷﺪه و ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﻲ ﺷﻮد‪ .‬ﺣﺎل ﺑﻪ ﺑﺪﻧﻪ ﺻﻔﺤﻪ ‪ HTML‬دﻛﻤﻪ ي ﺑﺮاي اﻧﺠﺎم ﻋﻤﻠﻴﺎت ﺟﻤﻊ ﺑﺎ ﻣﺘﺪ‬
‫‪ POST‬اﺿﺎﻓﻪ ﻛﻨﻴﺪ‪:‬‬

‫>"‪<form id="form1" runat="server‬‬

83  4 ‫ﻓﺼﻞ‬ ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬

.
.
.
<input type="button" value="CalculateWithPost"
onclick="ExecWebServiceWithPost();" />
.
.
.
</form>
:‫ﺣﺎل ﻣﺘﺪ را ﺑﻪ ﺻﻮرت زﻳﺮ ﭘﻴﺎده ﺳﺎزي ﻛﻨﻴﺪ‬
function ExecWebServiceWithPost(){

var ctlVal1 = document.getElementById("val1");

var ctlVal2 = document.getElementById("val2");

var sendData = 'arg1=' + ctlVal1.value + '&arg2='

+ ctlVal2.value ;
getDataCallBackWithPost(ShowResoult,'http://' +
location.host +'/AspAjaxSample/AsyncService.
asmx/Adder', sendData);
}
.‫ﺑﻪ ﻛﺪ ﺑﺎﻻ ﻧﮕﺎه ﺑﻴﺎﻧﺪازﻳﺪ ﺑﺎ ﻣﺜﺎﻟﻬﺎي ﻗﺒﻠﻲ ﭼﻨﺪ ﺗﻔﺎوﺗﻬﺎي را ﻣﺸﺎﻫﺪ ﺧﻮاﻫﻴﺪ ﻛﺮد‬
:‫ ﻣﻮرد اﺳﺘﻔﺎده ﻛﻤﻲ ﻣﺘﻔﺎوت از درﺧﻮاﺳﺖ ﻫﺎي ﻗﺒﻠﻲ ﻣﻲ ﺑﺎﺷﺪ‬URL ،Web Service ‫ﺑﺎ اﺳﺘﻔﺎده از‬
xmlHttp.open("POST","http://" + location.host + "/AspAjaxSample
/AsyncService.asmx/Adder");
Web Server ‫ ﺑﻌﻼوه ﻣﺘﺪي از‬،‫ ﻣﻲ ﺑﺎﺷﺪ‬asmx ‫ و ﻓﺎﻳﻞ‬Web Server ‫ ﺷﺎﻣﻞ آدرس‬URL ‫ﻣﻲ ﺑﻴﻨﻴﺪ ﻛﻪ‬
‫ ﻗﺒﻞ از ارﺳﺎل درﺧﻮاﺳﺖ ﺑﻪ‬.‫ اﺿﺎﻓﻪ ﻣﻲ ﺷﻮد‬URL ‫( ﺑﻪ‬/Adder) ‫ﻛﻪ ﺑﺮاي اﻧﺠﺎم ﻋﻤﻠﻴﺎت ﻓﺮاﺧﻮاﻧﻲ ﺷﺪه اﺳﺖ‬
"application/x-www-form- ‫" را ﺑﺎ‬Content-Type" ‫ ﻫﺪر درﺧﻮاﺳﺖ ﺑﺎ ﻧﺎم‬،‫ﺳﺮور‬
.‫" ﻧﻮع رﻣﺰﮔﺸﺎﺋﻲ ﻓﺮم را ﺗﻌﻴﻴﻦ ﻣﻲ ﻛﻨﺪ‬Content-Type" ‫ ﺻﻔﺖ‬.‫ ﻣﻘﺪار دﻫﻲ ﻣﻲ ﻛﻨﻴﻢ‬urlencoded"
"application/x-www-form-urlencoded" ،"Content-Type" ‫ﻣﻘﺪار ﭘﻴﺶ ﻓﺮض ﺑﺮاي‬
.‫ ﻧﻤﻲ ﺑﺎﺷﺪ و ﺑﺎﻳﺴﺘﻲ ﺑﻪ ﺻﻮرت دﺳﺘﻲ ﻧﺸﺎن داده ﺷﻮد‬XMLHTTP ‫ اﻟﺒﺘﻪ اﻳﻦ ﻣﻘﺪار ﭘﻴﺶ ﻓﺮض‬.‫ﻣﻲ ﺑﺎﺷﺪ‬
‫ ﺑﺎﻳﺪ ﻟﻴﺴﺘﻲ از آرﮔﻮﻣﺎن ﻫﺎ را ﻫﻤﺎﻧﻨﺪ روﺷﻲ ﻛﻪ ﺑﺮاي رﺷﺘﻪ‬، XMLHTTP ‫ در ﺷﻲ‬send() ‫ﺑﺮاي اﺟﺮاي ﻣﺘﺪ‬
.‫ اﻳﺠﺎد ﻛﻨﻴﺪ‬،‫ اﺳﺘﻔﺎده ﻛﺮدﻳﺪ‬URL ‫آرﮔﻮﻣﺎن ﻫﺎي‬
xmlHttp.send(“arg1=” + ctlVal1.value + “&arg2=” +
ctlVal2.value);
‫ ﻧﺘﻴﺠﻪ اﻳﻦ‬.‫ از ﻫﻢ ﺟﺪا ﺷﺪه اﻧﺪ‬URL ‫ ﺑﺎ آﻣﭙﺮﺳﻨﺪ )&( ﻫﻤﺎﻧﻨﺪ روﺷﻲ‬arg2 ‫ و‬arg1 ‫ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ ﭘﺎراﻣﺘﺮﻫﺎي‬
:‫رﺷﺘﻪ ﺑﻪ ﺻﻮرت زﻳﺮ ﺧﻮاﻫﺪ ﺑﻮد‬
 ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬ 4 ‫ ﻓﺼﻞ‬ 84

arg1=1&arg2=2
‫ اﻳﻦ رﺷﺘﻪ ﺑﻪ ﺻﻮرت ﺧﻮدﻛﺎرﺑﻪ ﻋﻨﻮان ﻗﺴﻤﺘﻲ از ﺑﺪﻧﻪ‬.‫ ﻣﻲ ﺑﺎﺷﺪ‬2 ‫ ﺑﺮاﺑﺮ ﺑﺎ‬arg2 ‫ و‬1 ‫ ﺑﺮاﺑﺮ‬arg1 ‫ﻛﻪ ﻣﻘﺪار‬
‫ اﻳﻦ روش ﻣﺎﻧﻨﺪ ﻫﻤﺎن روﺷﻲ اﺳﺖ ﻛﻪ‬.‫ ﻣﺪﻳﺮﻳﺖ ﺧﻮاﻫﺪ ﺷﺪ‬web Service ‫درﺧﻮاﺳﺖ در آﻣﺪه و ﺑﺎ ﺗﻮﺳﻂ‬
‫ ﻣﻲ ﺗﻮاﻧﺪ ﺷﺒﻴﻪ ﻛﺪ زﻳﺮ‬URL ‫ درﺧﻮاﺳﺖ ﻣﺸﺎﺑﻪ ﺑﺎ اﺳﺘﻔﺎده از رﺷﺘﻪ آرﮔﻮﻣﺎﻧﻬﺎ در‬.‫ اﻧﺠﺎم ﻣﻲ ﺷﺪ‬GET ‫درﺧﻮاﺳﺖ‬
:‫ﺑﺎﺷﺪ‬
http://www.somesite.com/SomePage.aspx?arg1=1&arg2=2
:‫ ﺣﺎﺻﻞ ﺟﻤﻊ ﺑﻪ ﺻﻮرت زﻳﺮ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‬،‫در آﺧﺮ‬
var result = responseXML.lastChild.text;
‫ ﭘﺎﺳﺨﻲ ﻛﻪ ﺑﻪ‬.‫ ﺑﻪ دﺳﺖ ﻣﻲ آورد‬WebServer ‫ ﻣﻘﺪار رﺷﺘﻪ ي آﺧﺮﻳﻦ ﮔﺮه ﻓﺮزﻧﺪ را از ﭘﺎﺳﺦ‬،‫اﻳﻦ دﺳﺘﻮر‬
:‫ ﺑﻪ ﺻﻮرت زﻳﺮ ﺧﻮاﻫﺪ ﺑﻮد‬،‫ داده ﻣﻲ ﺷﻮد‬،webServer ‫آرﮔﻮﻣﺎﻧﻬﺎﻳﻲ ﺑﺎ ﻣﻘﺎدﻳﺮ ﮔﻔﺘﻪ ﺷﺪه ﺑﻪ درﺧﻮاﺳﺖ‬
<?xml version=”1.0” encoding=”utf-8”?>
<int xmlns=”http://tempuri.org/”>3</int>
:‫ اﻣﻜﺎن روﺑﺮو ﺷﺪن ﺑﺎ دوﻧﻮع ﺧﻄﺎ وﺟﻮد داردﻛﻪ ﺑﺎﻳﺪ ﺑﻪ روﺷﻬﺎي ﻣﺨﺘﻠﻔﻲ ﻣﺪﻳﺮﻳﺖ ﺷﻮد‬،‫در اﻳﻦ ﻣﺜﺎل‬
‫( از آن ﺣﺬف ﺷﻮد و ﻳﺎ‬/Adder ‫ )در اﻳﻦ ﻣﺜﺎل‬url ‫ اوﻟﻴﻦ ﺧﻄﺎ زﻣﺎﻧﻲ اﺗﻔﺎق ﻣﻲ اﻓﺘﺪ ﻛﻪ ﻣﺘﺪ ﺗﻌﻴﻴﻦ ﺷﺪه در‬-
.‫آرﮔﻮﻣﺎن ﻧﺎﻣﻌﺘﺒﺮ ﺑﺎ درﺧﻮاﺳﺖ ارﺳﺎل ﺷﻮد‬
.‫“ ﺑﺮاي ﻫﺪر درﺧﻮاﺳﺖ ﻓﺮاﻣﻮش ﺷﻮد‬Content-Type” ‫ ﻧﻮع ﺑﻌﺪي از ﺧﻄﺎ زﻣﺎﻧﻲ اﺗﻔﺎق ﻣﻲ اﻓﺘﺪ ﻛﻪ ﺗﻌﻴﻦ‬-
‫ ﺑﺪﻧﻪ ﭘﺎﺳﺦ ﻣﺎﻧﻨﺪ ﻣﺜﺎل‬،‫ در ﻧﻤﻮﻧﻪ اول‬.‫ ﺧﻮاﻫﻴﺪ داﺷﺖ‬status ‫ را ﺑﺮاي‬500 ‫ ﺷﻤﺎ ﻣﻘﺪار‬،‫ﺑﺮاي ﻫﺮ دو ﻣﻮرد ﺧﻄﺎ‬
:‫زﻳﺮ ﺧﻮاﻫﻴﺪ داﺷﺖ‬
System.InvalidOperationException: Request format is invalid. :
at System.Web.Services.Protocols.HttpServerProtocol.ReadParameters()
at
System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()

:‫ ﭘﺎﺳﺦ زﻳﺮ را ﺧﻮاﻫﻴﺪ داﺷﺖ‬،‫در ﻧﻤﻮﻧﻪ دوم‬

<?xml version=”1.0” encoding=”utf-8”?><soap:Envelope

xmlns:soap=”http://www.w3.org/2003/05/soap-envelope”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xmlns:xsd=”http://www.w3.org/2001/XMLSchema”><soap:Body><soap:Fault>
<soap:Code><soap:Value>soap:Receiver</soap:Value></soap:Code>
<soap:Reason><soap:Textxml:lang=”en”>
System.Web.Services.Protocols.SoapException: Server was unable to
process request. ---&gt; System.Xml.XmlException: Data at the root
level is
invalid. Line 1, position 1.
at System.Xml.XmlTextReaderImpl.Throw(Exception e)
at System.Xml.XmlTextReaderImpl.Throw(String res, String arg)
at System.Xml.XmlTextReaderImpl.ParseRootLevelWhitespace()
at System.Xml.XmlTextReaderImpl.ParseDocumentContent()
at System.Xml.XmlTextReaderImpl.Read()
at System.Xml.XmlTextReader.Read()
85  4 ‫ﻓﺼﻞ‬ ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬

at
System.Web.Services.Protocols.SoapServerProtocol.SoapEnvelopeReader.
Read()
at System.Xml.XmlReader.MoveToContent()
at
System.Web.Services.Protocols.SoapServerProtocol.SoapEnvelopeReader.
MoveToContent()
at
System.Web.Services.Protocols.SoapServerProtocolHelper.GetRequestEle
ment()
at
System.Web.Services.Protocols.Soap12ServerProtocolHelper.RouteReques
t()
at
System.Web.Services.Protocols.SoapServerProtocol.RouteRequest(SoapSe
rverMessage
message)
at System.Web.Services.Protocols.SoapServerProtocol.Initialize()
at System.Web.Services.Protocols.ServerProtocolFactory.Create(Type
type,
HttpContext context, HttpRequest request, HttpResponse response,
Boolean&amp;
abortProcessing)
--- End of inner exception stack trace ---
</soap:Text></soap:Reason><soap:Detail
/></soap:Fault></soap:Body></soap:Envelope>

ASP.NET AJAX
‫ ﻛﺘﺎﺑﺨﺎﻧﻪ اي از ﺗﻮاﺑﻊ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﺗﻮﺳﻂ ﺷﺮﻛﺖ‬Microsoft Ajax ‫ﻳﺎ ﺑﻪ ﺑﻴﺎن ﻛﺎﻣﻞ ﺗﺮ‬MS Ajax
‫ اﻳﺠﺎد ﺷﺪه‬VS 2005 ‫ در ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺗﺤﺖ وب در‬Ajax ‫ﻣﺎﻳﻜﺮوﺳﺎﻓﺖ ﺑﻪ ﻣﻨﻈﻮر ﺑﻬﺮه ﮔﻴﺮي از ﺗﻜﻨﻮﻟﻮژي‬
.‫اﺳﺖ‬
(Open Source) ‫ ﺑﻮده و ﻫﻢ اﻛﻨﻮن ﺑﻪ ﺻﻮرت ﻣﻨﺒﻊ ﺑﺎز‬Atlas ‫ﻻزم ﺑﻪ ذﻛﺮ اﺳﺖ ﻛﻪ ﻧﺎم ﺳﺎﺑﻖ آن‬
.‫در دﺳﺘﺮس ﻣﻲ ﺑﺎﺷﺪ‬

ASP.NET AJAX ‫ﻣﻌﻤﺎري‬

،‫ ﺑﺎ ﻗﺎﺑﻠﻴﺖ ﻓﻌﻞ و اﻧﻔﻌﺎل‬،‫ ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن را ﺑﻪ اﻳﺠﺎد ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب ﻗﺪرﺗﻤﻨﺪ‬ASP.NET AJAX ‫ﻓﺮﻳﻢ ورك‬
‫ ﺷﺎﻳﺪ ﻓﻜﺮ ﻛﻨﻴﺪ ﻛﻪ اﻳﻦ ﻓﺮﻳﻢ ورك ﻣﺎﻧﻨﺪ روش ﻫﺎي‬،‫ در ﻧﮕﺎه اول‬.‫و ﺑﺎ ﻗﺎﺑﻠﻴﺖ ﺷﺨﺼﻲ ﺳﺎزي ﺑﺎﻻ ﻗﺎدر ﻣﻲ ﺳﺎزد‬
‫ اﻳﻦ ﻓﺮﻳﻢ ورك ﻧﻴﺰ‬،‫ در ﺣﻘﻴﻘﺖ‬.‫ ﻣﻲ داﻧﻨﺪ‬Ajax ‫ را ﺗﻨﻬﺎ ﻛﺘﺎﺑﺨﺎﻧﻪ‬Ajax ‫دﻳﮕﺮ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ در آن ﻫﺎ ﻓﺮﻳﻢ ورك‬
‫ وﻟﻲ ﺑﻪ ﺧﺼﻮﺻﻴﺎت دﻳﮕﺮي اﺷﺎره ﻣﻲ ﻛﻨﺪ ﻛﻪ ﻣﻲ ﺗﻮاﻧﻨﺪ ﻛﻴﻔﻴﺖ و ﺳﻮدﻣﻨﺪي‬،‫ ﻣﻲ ﺑﺎﺷﺪ‬Ajax ‫ﻳﻚ ﻛﺘﺎﺑﺨﺎﻧﻪ‬
‫ آﻣﺪه‬5-5 ‫ ﻛﻪ در ﺷﻜﻞ‬ASP.NET AJAX ‫ اﻳﻦ ﻣﻄﻠﺐ ﻣﺎ را ﺑﻪ ﺑﺮرﺳﻲ ﻣﻌﻤﺎري‬.‫ﺑﺮﻧﺎﻣﻪ وب ﺷﻤﺎ را اﻓﺰاﻳﺶ دﻫﻨﺪ‬
.‫اﺳﺖ ﻣﺸﺘﺎق ﻣﻲ ﻛﻨﺪ‬
 ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬ ‫‪  86‬ﻓﺼﻞ ‪4‬‬

‫اوﻟﻴﻦ ﭼﻴﺰي ﻛﻪ ﺷﺎﻳﺪ در ﻣﻮرد ﻣﻌﻤﺎري ﻓﺮﻳﻢ ورك ‪ ASP.NET AJAX‬ﺑﻪ آن ﺗﻮﺟﻪ ﻛﻨﻴﺪ اﻳﻦ اﺳﺖ ﻛﻪ ﻛﻼﻳﻨﺖ‬
‫و ﺳﺮور را ﭘﻮﺷﺶ ﻣﻲ دﻫﺪ‪ .‬ﺑﻪ ﻏﻴﺮ از ﻳﻚ ﻣﺠﻤﻮﻋﻪ از ﻛﺎﻣﭙﻮﻧﻨﺖ ﻫﺎ و ﻛﺘﺎﺑﺨﺎﻧﻪ ﻫﺎ ﻣﻮارد ﺑﺴﻴﺎري وﺟﻮد دارد ﻛﻪ‬
‫در ﺳﻤﺖ ﺳﺮور ﺑﺎ ﻛﻨﺘﺮﻟﻬﺎي ﺳﻤﺖ ﺳﺮور و ﺳﺮوﻳﺲ ﻫﺎي ‪ ASP.NET‬ﺣﻤﺎﻳﺖ ﻣﻲ ﺷﻮﻧﺪ‪.‬‬

‫ﺷﻜﻞ ‪ 5-5‬ﻣﻌﻤﺎري ﻓﺮﻳﻢ ورك ‪ASP.NET AJAX‬‬

‫ﻓﺮﻳﻢ ورك ﻛﻼﻳﻨﺖ‬

‫ﻣﻮرد ﺟﺎﻟﺒﻲ ﻛﻪ درﺑﺎره ﻓﺮﻳﻢ ورك ﻛﻼﻳﻨﺖ وﺟﻮد دارد اﻳﻦ اﺳﺖ ﻛﻪ ﻛﺘﺎﺑﺨﺎﻧﻪ ﻫﺴﺘﻪ ي اﻳﻦ ﻗﺴﻤﺖ ﺑﻪ ﻛﺎﻣﭙﻮﻧﻨﺖ‬
‫ﻫﺎي ﺳﺮور ﻣﺘﻜﻲ ﻧﻴﺴﺖ‪ .‬ﻛﺘﺎﺑﺨﺎﻧﻪ ﻫﺴﺘﻪ ﻣﻲ ﺗﻮاﻧﺪ در ﺗﻮﺳﻌﻪ ﺑﺮﻧﺎﻣﻪ ﻫﺎي اﻳﺠﺎد ﺷﺪه در ‪PHP ،Cold Fusion‬‬
‫و زﺑﺎﻧﻬﺎ و ﭘﻠﺘﻔﺮﻣﻬﺎي دﻳﮕﺮ اﺳﺘﻔﺎده ﺷﻮد‪ .‬ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ اﻳﻦ اﻧﻌﻄﺎف ﭘﺬﻳﺮي‪ ،‬ﻣﻌﻤﺎري از ﻧﻈﺮ ﻣﻨﻄﻘﻲ ﻣﻲ ﺗﻮاﻧﺪ ﺑﻪ دو‬
‫ﻗﺴﻤﺖ ﺗﻘﺴﻴﻢ ﺷﻮد‪ :‬ﻓﺮﻳﻢ ورك ﻛﻼﻳﻨﺖ و ﻓﺮﻳﻢ ورك ﺳﺮور‪ .‬درك ﭼﮕﻮﻧﮕﻲ اﻧﺠﺎم ﻋﻤﻠﻴﺎت در ﻓﺮﻳﻢ ورك‬
‫ﻛﻼﻳﻨﺖ ﺣﺘﻲ ﺑﺮاي ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن ﺳﻤﺖ ﺳﺮور ﻧﻴﺰ ﺿﺮوري ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﺑﺨﺎﻃﺮ اﻳﻨﻜﻪ اﻳﻦ ﺑﺨﺶ ﺑﺎﻋﺚ ﻣﻮﺟﻮدﻳﺖ‬
‫ﺻﻔﺤﺎت وب ﻣﻲ ﺷﻮد‪ .‬در ﻫﺴﺘﻪ‪ ،‬ﻛﺘﺎﺑﺨﺎﻧﻪ ‪ Ajax‬ﻣﺎﻳﻜﺮوﺳﺎﻓﺖ )‪ (Microsoft Ajax Library‬ﻗﺮار‬
‫دارد‪.‬‬
‫‪Microsoft Ajax Library‬‬
‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻗﺒﻼ ﺗﻮﺿﻴﺢ دادﻳﻢ ﻗﻠﺐ ﻓﺮﻳﻢ ورك ‪ Microsoft Ajax Library‬ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻫﻤﭽﻨﻴﻦ ﺑﻪ ﻧﺎم‬
‫ﻛﺘﺎﺑﺨﺎﻧﻪ ﻫﺴﺘﻪ )‪ (core‬ﻧﻴﺰ ﺷﻨﺎﺧﺘﻪ ﻣﻲ ﺷﻮد‪ .‬ﻛﺘﺎﺑﺨﺎﻧﻪ ﺗﺮﻛﻴﺒﻲ از ﻣﺠﻤﻮﻋﻪ ﻓﺎﻳﻠﻬﺎي ﺟﺎوا اﺳﻜﺮﻳﭙﺖ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ‬
‫ﻣﻲ ﺗﻮاﻧﺪ ﻣﺴﺘﻘﻞ از ﺧﺼﻮﺻﻴﺎت ﺳﺮور اﺳﺘﻔﺎده ﺷﻮد‪ .‬ﺑﺎ ﻛﺘﺎﺑﺨﺎﻧﻪ ﻫﺴﺘﻪ از ﻃﺮﻳﻖ ﺗﻮﺿﻴﺢ ﻣﻔﻬﻮم ﻫﺮ ﻳﻚ از ﻗﻄﻌﻪ ﻫﺎ و‬
‫ﻻﻳﻪ ﻫﺎي آن‪ ،‬آﺷﻨﺎ ﺧﻮاﻫﻴﺪ ﺷﺪ‪ ،‬اﺑﺘﺪا ﺑﺎ زﻳﺮ ﺑﻨﺎي آن ﺷﺮوع ﻣﻲ ﻛﻨﻴﻢ‪ :‬ﺳﻴﺴﺘﻢ ﻧﻮع)‪.(type system‬‬
‫ﻓﺼﻞ ‪87  4‬‬ ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬

‫ﻫﺪف ﺳﻴﺴﺘﻢ ﻧﻮع ﻣﻌﺮﻓﻲ ﻣﻔﻬﻮﻣﻲ ﺷﺒﻴﻪ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﺷﻲ ﮔﺮا در ﺟﺎوا اﺳﻜﺮﻳﭙﺖ ﻣﻲ ﺑﺎﺷﺪ؛ ﻣﺎﻧﻨﺪ ﻛﻼس ﻫﺎ‪ ،‬ارث‬
‫ﺑﺮي‪ ،‬اﻳﻨﺘﺮﻓﻴﺲ ﻫﺎ و ﻣﺪﻳﺮﻳﺖ روﻳﺪاد‪ .‬اﻳﻦ ﻻﻳﻪ ﻫﻤﭽﻨﻴﻦ ﻧﻮع ﻫﺎي ﻣﻮﺟﻮد در ﺟﺎوااﺳﻜﺮﻳﭙﺖ را ﺑﺴﻂ ﻣﻲ دﻫﺪ‪ .‬ﺑﺮاي‬
‫ﻣﺜﺎل‪ ،‬ﻧﻮع ﻫﺎي ‪ String‬و ‪ Array‬در ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻫﺮ دو ﺑﺮاي آﻣﺎده ﺳﺎزي ﺗﻮاﺑﻊ اﺿﺎﻓﻲ و آﺷﻨﺎ ﺑﻮدن ﺑﺮاي‬
‫ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن ‪ ASP.NET‬ﺑﺴﻂ داده ﺷﺪه اﻧﺪ‪ .‬ﺳﻴﺴﺘﻢ ﻧﻮع زﻣﻴﻨﻪ ي ﻛﺎري را ﺑﺮاي اﺗﻜﺎي )راﺣﺘﻲ( ﻛﺘﺎﺑﺨﺎﻧﻪ‬
‫ﻫﺴﺘﻪ اي ‪ Ajax‬اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ‪.‬‬
‫در ﺑﺎﻻي ﺳﻴﺴﺘﻢ ﻧﻮع ﻻﻳﻪ ﻛﺎﻣﭙﻮﻧﻨﺖ ﻫﺎ )‪ (components layer‬ﻗﺮار دارﻧﺪ‪ ،‬اﻳﻦ ﻻﻳﻪ ﺑﺨﺶ ﻋﻤﺪه ي‬
‫ﻛﺘﺎﺑﺨﺎﻧﻪ ﻫﺴﺘﻪ ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﻳﻦ ﻻﻳﻪ از ﺳﺮي ﻛﺮدن )ﺳﺮﻳﺎل ﺳﺎزي( ‪ ،JSON‬ارﺗﺒﺎﻃﺎت ﺷﺒﻜﻪ‪ ،‬ﻣﺤﻠﻲ ﺳﺎزي‪ ،‬ﻓﻌﺎﻟﻴﺘﻬﺎي‬
‫‪ DOM‬و ﺳﺮوﻳﺴﻬﺎي ﺑﺮﻧﺎﻣﻪ ‪ ASP.NET‬ﻣﺎﻧﻨﺪ اﻋﺘﺒﺎر ﺳﻨﺠﻲ و ﭘﺮوﻓﺎﻳﻞ‪ ،‬ﺣﻤﺎﻳﺖ ﻣﻲ ﻛﻨﺪ‪ .‬ﻫﻤﭽﻨﻴﻦ ﺗﺼﻮﻳﺮي از‬
‫ﺳﺎﺧﺘﻤﺎن ﻣﺪل ﻫﺎي ﻗﺎﺑﻞ اﺳﺘﻔﺎده را ﻣﻌﺮﻓﻲ ﻣﻲ ﻛﻨﺪ ﻛﻪ ﻣﻲ ﺗﻮاﻧﻨﺪ ﺑﻪ ﻋﻨﻮان ﻛﻨﺘﺮل و رﻓﺘﺎرﻫﺎ در ﺻﻔﺤﻪ دﺳﺘﻪ ﺑﻨﺪي‬
‫ﺷﻮﻧﺪ‪.‬‬
‫اﻳﻦ ﻻﻳﻪ ﻣﺎ را ﺑﻪ ﻻﻳﻪ ﺑﺎﻻﺗﺮ در ﻛﺘﺎﺑﺨﺎﻧﻪ ﻣﺘﺼﻞ ﻣﻲ ﻛﻨﺪ‪ .‬ﻻﻳﻪ ﺑﺮﻧﺎﻣﻪ )‪ (Application layer‬ﻳﻚ ﺑﺨﺶ‬
‫ﺗﻮﺿﻴﺤﻲ ﺑﺮاي ‪ Application model‬اﺳﺖ‪ .‬ﻫﻤﺎﻧﻨﺪ ﭼﺮﺧﻪ ﺣﻴﺎت ﺻﻔﺤﻪ در ‪ ASP.NET‬اﻳﻦ ﻻﻳﻪ ﻳﻚ‬
‫ﻣﺪل ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﻣﺪﻳﺮﻳﺖ روﻳﺪاد را اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ ﻛﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮاي ﻛﺎر ﺑﺎ ﻋﻨﺎﺻﺮ ‪ ،DOM‬ﻛﺎﻣﭙﻮﻧﻨﺖ ﻫﺎ و‬
‫ﭼﺮﺧﻪ ﺣﻴﺎت ﻫﺮ ﺑﺮﻧﺎﻣﻪ در ﻣﺮورﮔﺮ از آن اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬
‫‪ JavaScript ،HTML‬و ‪XML Script‬‬
‫ﺻﻔﺤﺎت وب ﺑﺎ ﺗﻮاﻧﺎﻳﻲ ‪ ASP.NET AJAX‬در ‪ ،HTML‬ﺟﺎوااﺳﻜﺮﻳﭙﺖ و ﻳﻚ ﺗﻌﺮﻳﻒ ﻛﻨﻨﺪه ﮔﺮاﻣﺮ ﺟﺪﻳﺪ ﺑﺮ‬
‫ﭘﺎﻳﻪ ‪ XML‬ﻛﻪ ‪ XML Script‬ﻧﺎﻣﻴﺪه ﻣﻲ ﺷﻮد‪ ،‬ﻧﻮﺷﺘﻪ ﻣﻲ ﺷﻮﻧﺪ‪ .‬اﻳﻦ ﻣﻮﺿﻮع ﺑﻴﺶ از ﻳﻚ ﮔﺰﻳﻨﻪ ﺑﺮاي ﻧﻮﺷﺘﻦ ﻛﺪ‬
‫در ﺳﻤﺖ ﻛﻼﻳﻨﺖ را ﺑﺮاي ﺷﻤﺎ آﻣﺎده ﻣﻲ ﻛﻨﺪ‪ .‬ﻋﻨﺎﺻﺮ ﺗﻌﺮﻳﻒ ﺷﺪه در ‪ XML Script‬داﺧﻞ ﺗﮓ ﺟﺪﻳﺪ‬
‫اﺳﻜﺮﻳﭙﺘﻲ ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ‪:‬‬
‫>"‪<script type="text/xml-script‬‬
‫ﻣﺮورﮔﺮ ﻣﻲ ﺗﻮاﻧﺪ ﺗﮓ اﺳﻜﺮﻳﭙﺖ را ﺗﺸﺨﻴﺺ ﺑﺪﻫﺪ اﻣﺎ ﻣﻜﺎﻧﻴﺴﻤﻲ ﺑﺮاي ﭘﺮدازش ﻧﻮع ‪ XML Script‬ﻧﺪارد‪ .‬در‬
‫ﻋﻮض‪ ،‬ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻣﻮﺟﻮد درﻓﺮﻳﻢ ورك ‪ ASP.NET AJAX‬ﻣﻲ ﺗﻮاﻧﺪ اﺳﻜﺮﻳﭙﺘﻬﺎ را ﺗﺠﺰﻳﻪ ﻛﺮده‪ ،‬ﻳﻚ‬
‫ﻧﻤﻮﻧﻪ ﻛﺎﻣﭙﻮﻧﻨﺖ و ﻛﻨﺘﺮل را در ﺻﻔﺤﻪ اﻳﺠﺎد ﻛﻨﺪ‪ .‬دراداﻣﻪ ﺗﻜﻪ ﻛﺪي را ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ ﻛﻪ ﻧﺸﺎن ﻣﻲ دﻫﺪ ‪XML‬‬
‫‪ Script‬ﭼﮕﻮﻧﻪ ﺑﺮاي ﻧﻤﺎﻳﺶ ﻳﻚ ﭘﻴﻐﺎم ﺑﻌﺪ از اﻳﻨﻜﻪ ﺻﻔﺤﻪ ﻟﻮد ﺷﺪ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮد‪:‬‬
‫>"‪<script type="text/xml-script‬‬
‫>"‪<page xmlns="http://schemas.microsoft.com/xml-script/2005‬‬
‫>‪<components‬‬
‫>‪<application load="page_load" /‬‬
‫>‪</components‬‬
‫>‪</page‬‬
‫>‪</script‬‬

‫>"‪<script type="text/javascript‬‬
‫{)‪function page_load(sender, e‬‬
‫;)"!‪alert("Hello from XML-Script‬‬
 ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬ ‫‪  88‬ﻓﺼﻞ ‪4‬‬

‫}‬
‫>‪</script‬‬
‫دراﻳﻦ ﻣﺜﺎل‪ ،‬در ﺗﮓ ‪XML Script‬ﻳﻚ ﺗﺎﺑﻊ ﺟﺎوااﺳﻜﺮﻳﭙﺘﻲ ﺑﻪ ﻧﺎم ‪ page_load‬را ﺑﻪ روﻳﺪاد ‪ load‬ﺻﻔﺤﻪ‬
‫ﻧﺴﺒﺖ ﻣﻲ دﻫﺪ‪ .‬اﺟﺮاي اﻳﻦ ﺻﻔﺤﻪ ﺗﺎﺑﻊ ‪ page_load‬را ﺑﻌﺪ از ﻓﻌﺎل ﺷﺪن روﻳﺪاد ‪ load‬ﺑﺮاي ﻧﻤﺎﻳﺶ ﺟﻌﺒﻪ‬
‫ﭘﻴﻐﺎم در ﻛﻼﻳﻨﺖ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﺪ‪.‬‬
‫‪ XMl Script‬و ﺟﻨﺒﻪ ﻫﺎي دﻳﮕﺮ ﻣﻮﺟﻮد در ﻓﺮﻳﻢ ورك در ﻳﻚ ﻣﺠﻤﻮﻋﻪ ﺟﺪاﮔﺎﻧﻪ اي از ﻣﻨﺎﺑﻊ ﺑﻪ ﻧﺎم‬
‫‪ ASP.NET Future‬اراﺋﻪ ﻣﻲ ﺷﻮﻧﺪ‪ .‬اﻳﻦ وﻳﮋﮔﻲ ﻫﺎ در وﺿﻌﻴﺖ ﭘﻴﺶ ﻧﻤﺎﻳﺶ ﺗﻜﻨﻮﻟﻮژي اﺟﺘﻤﺎع )‪(CTP‬‬
‫ﻣﻮﺟﻮد ﻣﻲ ﺑﺎﺷﻨﺪ‪(Community Technology Preview) CTP .‬وﺿﻌﻴﺖ ﻓﻌﻠﻲ ﻣﺤﺼﻮﻻﺗﻲ را ﻛﻪ‬
‫ﻫﻨﻮز اﻣﻜﺎن ﺗﻐﻴﻴﺮ دارﻧﺪ را ﻣﻨﻌﻜﺲ ﻣﻲ ﻛﻨﺪ‪ .‬دراﻳﻦ ﺻﻮرت‪ ASP.NET Future CTP ،‬ﺑﺴﻄﻲ از ﻫﺴﺘﻪ ﻓﺮﻳﻢ‬
‫ورك ‪ ASP.NET AJAX‬اﺳﺖ ﻛﻪ ﺳﺮاﻧﺠﺎم در ﺑﺴﺘﻪ ﻫﺴﺘﻪ ادﻏﺎم ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬
‫ﻓﺮﻳﻢ ورك ﺳﺮور‬
‫‪ ASP.NET 2.0‬از ﻳﻚ ﻣﺠﻤﻮﻋﻪ ﺑﺎارزﺷﻲ از ﻛﻨﺘﺮل ﻫﺎ و ﺳﺮوﻳﺲ ﻫﺎ ﻛﻪ ﻗﺎﺑﻞ ﺗﻮﺳﻌﻪ ﺑﺮاي ﭘﺸﺘﻴﺒﺎﻧﻲ ‪ Ajax‬ﻣﻲ‬
‫ﺑﺎﺷﺪ‪ ،‬اﻳﺠﺎد ﺷﺪه اﺳﺖ‪ .‬اﻳﻦ ﻻﻳﻪ از ﻓﺮﻳﻢ ورك ﺳﺮور ‪ASP.NET AJAX server extensions‬‬
‫ﻧﺎﻣﻴﺪه ﻣﻲ ﺷﻮد‪ server extensions .‬ﺑﻪ ﺳﻪ ﻗﺴﻤﺖ ﺗﻘﺴﻴﻢ ﻣﻲ ﺷﻮﻧﺪ‪ :‬ﻛﻨﺘﺮل ﻫﺎي ﺳﺮوري‪ ،‬ﭘﻞ ﺳﺮوﻳﺲ‬
‫ﻫﺎي وب )‪ (web service‬و ﭘﻞ ﺳﺮوﻳﺲ ﻫﺎي ﺑﺮﻧﺎﻣﻪ)‪ .(Application services‬ﻫﺮ ﻳﻚ از‬
‫اﻳﻦ ﻗﺴﻤﺖ ﻫﺎ در ارﺗﺒﺎط ﻧﺰدﻳﻚ ﺑﺎ ﻣﺪل ﺑﺮﻧﺎﻣﻪ در ﻛﻼﻳﻨﺖ ﺑﺮاي ﺑﻬﺒﻮد ﻓﻌﻞ و اﻧﻔﻌﺎل ﺻﻔﺤﺎت ‪ ASP.NET‬ﺑﺮ‬
‫ﻳﻜﺪﻳﮕﺮ‪ ،‬ﻫﺴﺘﻨﺪ‪.‬‬
‫ﻛﻨﺘﺮل ﻫﺎي ﺳﺮور ‪ASP.NET AJAX‬‬
‫ﻳﻚ ﻣﺠﻤﻮﻋﻪ ﺟﺪﻳﺪ از ﻛﻨﺘﺮل ﻫﺎي ﺳﺮور ﺑﻪ ﻧﻮار اﺑﺰار ‪ ASP.NET‬اﺿﺎﻓﻪ ﻣﻲ ﺷﻮد ﻛﻪ ﻋﻤﺪﺗﺎً ﺑﺎ دو ﻛﻨﺘﺮل ﻣﺪﻳﺮﻳﺖ‬
‫ﻣﻲ ﺷﻮد‪ .‬اوﻟﻴﻦ ﻧﻮع از اﻳﻦ ﻛﻨﺘﺮل ﻫﺎ ‪ ScriptManager‬ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻛﻪ ﻣﻔﻬﻮم ﻳﻚ ﺻﻔﺤﻪ ﺑﺎ ﻗﺎﺑﻠﻴﺖ ‪ Ajax‬را‬
‫ﻃﺮح رﻳﺰي ﻣﻲ ﻛﻨﺪ‪ .‬ﻳﻜﻲ از وﻇﺎﻳﻒ ﻋﻤﺪه ي ‪ ScriptManager‬ﺗﻨﻈﻴﻢ ﺑﺨﺸﻲ ازﺻﻔﺤﻪ اﺳﺖ ﻛﻪ ﻫﻨﮕﺎم‬
‫درﻳﺎﻓﺖ ﺟﻮاب ﺑﺼﻮرت ﻏﻴﺮﻫﻤﺎن ﺑﻪ روز رﺳﺎﻧﻲ ﻣﻲ ﺷﻮد‪ .‬ﻛﻨﺘﺮل دوم‪ UpdatePanel ،‬ﻧﺎم دارد‪ ،‬و ﺑﺮاي‬
‫ﻣﺸﺨﺺ ﻛﺮدن آن ﺑﺨﺸﻲ از ﺻﻔﺤﻪ ﻛﻪ ﻧﻴﺎز دارد ﺑﻪ روز رﺳﺎﻧﻲ ﺷﻮد اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ .‬اﻳﻦ دو ﻛﻨﺘﺮل ﺑﺎ ﻫﻢ ﺑﺮاي‬
‫ﺑﺎﻻ ﺑﺮدن ﺗﺠﺮﺑﻪ ﻛﺎرﺑﺮ ﺑﺎ ﺟﺎﻳﮕﺰﻳﻨﻲ ارﺳﺎل و درﻳﺎﻓﺖ اﻃﻼﻋﺎت ﻏﻴﺮ ﻫﻤﺰﻣﺎن ﺑﺠﺎي روش ﻗﺒﻠﻲ ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ‪ .‬اﻳﻦ‬
‫ﻛﻨﺘﺮل ﻫﺎ ﺑﻪ ﺟﺎي ﺑﻪ روز رﺳﺎﻧﻲ )‪ (refresh‬ﻛﻞ ﺻﻔﺤﻪ در ﺑﺨﺸﻲ از ﺻﻔﺤﻪ ﻛﻪ ﺑﺎﻳﺪ ﺑﻪ روز رﺳﺎﻧﻲ ﺷﻮد ﻣﻮرد‬
‫اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ‪.‬‬
‫ﭘﻞ ‪Web services‬‬
‫ﺑﻄﻮرﻧﻤﻮﻧﻪ‪ ،‬ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب ﺑﻪ ﻣﻨﺎﺑﻊ ﺑﺮ روي ﺳﺮورﻫﺎي ﻣﺤﻠﻲ ﺷﺎن ﻣﺤﺪود ﻣﻲ ﺷﻮﻧﺪ‪ .‬ﮔﺬﺷﺘﻪ از ﻳﻚ ﺳﺮي ﻣﻨﺎﺑﻊ‬
‫ﺧﺎرﺟﻲ‪ ،‬ﻣﺎﻧﻨﺪ ﺗﺼﺎوﻳﺮ و ﻓﺎﻳﻠﻬﺎي ‪ ،CSS‬ﺑﺮﻧﺎﻣﻪ ﻫﺎ اﺟﺎزه دﺳﺘﺮﺳﻲ ﺑﻪ ﻣﻨﺎﺑﻌﻲ ﻛﻪ در ﻣﺤﺪوده ﻛﻼﻳﻨﺖ ﻫﺴﺘﻨﺪ را‬
‫ﻧﺪارﻧﺪ‪ .‬ﺑﺮاي ﻏﻠﺒﻪ ﺑﺮ اﻳﻦ ﻣﺎﻧﻊ‪ server extensions ،‬در ﻓﺮﻳﻢ ورك ‪ ASP.NET AJAX‬ﺷﺎﻣﻞ ﻳﻚ‬
‫ﻓﺼﻞ ‪89  4‬‬ ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬

‫‪ web services bridge‬اﺳﺖ ﻛﻪ دروازه اي ﺑﺮاي ﺷﻤﺎ اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ ﺗﺎ از ﻃﺮﻳﻖ آن ﺳﺮوﻳﺲ ﻫﺎي وب‬
‫ﺧﺎرﺟﻲ را از ﻃﺮﻳﻖ اﺳﻜﺮﻳﭙﺖ ﺳﻤﺖ ﻛﻼﻳﻨﺖ ﻓﺮاﺧﻮاﻧﻲ ﻛﻨﻴﺪ‪.‬‬
‫ﭘﻞ ‪Application services‬‬
‫ﺑﻪ ﻋﻠﺖ اﻳﻨﻜﻪ ‪ ASP.NET AJAX‬ﺑﺎ ‪ ASP.NET‬ﻋﻤﻴﻘﺎ ﺗﺮﻛﻴﺐ ﺷﺪه اﺳﺖ دﺳﺘﺮﺳﻲ ﺑﻪ ﺑﺮﺧﻲ از ﺳﺮوﻳﺲ ﻫﺎي‬
‫ﺑﺮﻧﺎﻣﻪ ﻣﺎﻧﻨﺪ اﻋﺘﺒﺎر ﺳﻨﺠﻲ )‪ (authentication‬و ﺳﺎﺑﻘﻪ )‪ (profile‬ﻛﻪ ﺑﻪ ﺑﺮﻧﺎﻣﻪ اﺿﺎﻓﻪ ﺷﺪه ﺑﺎﺷﻨﺪ‬
‫ﺧﻴﻠﻲ ﺑﺪون دردﺳﺮ اﺳﺖ‪ .‬اﻳﻦ وﻳﮋﮔﻲ ﻗﺎدر ﻣﻲ ﺳﺎزد ﻋﻤﻠﻴﺎﺗﻲ ﻣﺎﻧﻨﺪ ﺗﺼﺪﻳﻖ )‪ (verifying‬اﻋﺘﺒﺎرﻧﺎﻣﻪ ﻳﻚ‬
‫ﻛﺎرﺑﺮ و دﺳﺘﺮﺳﻲ ﺑﻪ اﻃﻼﻋﺎت ﺳﺎﺑﻘﻪ ﻛﺎرﺑﺮ از ﻃﺮﻳﻖ اﺳﻜﺮﻳﭙﺖ ﻫﺎي ﻛﻼﻳﻨﺘﻲ ﺳﺎزﻣﺎﻧﺪﻫﻲ ﺷﻮﻧﺪ‪.‬‬
‫اﻛﻨﻮن ﻛﻪ ﻳﻚ اﻳﺪه ﻛﻠﻲ از ﺑﺨﺶ ﻫﺎي ﺳﺎزﻧﺪه ﻓﺮﻳﻢ ورك دارﻳﺪ ﺑﻬﺘﺮ اﺳﺖ ﺑﺎ ﺳﻮاﻟﻲ ﻛﻪ ﭼﮕﻮﻧﻪ اﻳﻦ ﺑﺨﺶ ﻫﺎ را‬
‫ﺑﻄﻮر ﻣﻮﺛﺮ ﺑﻜﺎر ﺑﺒﺮﻳﻢ؟ ﺷﺮوع ﻛﻨﻴﻢ‪ .‬ﺟﻮاب اﻳﻦ ﺳﻮال ﻣﻨﺠﺮ ﺑﻪ ﺑﺮرﺳﻲ دو ﺳﻨﺎرﻳﻮي ﺗﻮﺳﻌﻪ ﻣﻲ ﺷﻮد‪.‬‬

‫ﻣﺪل ﺗﻮﺳﻌﻪ ي ﻛﻼﻳﻨﺖ ﻣﺤﻮري )‪(Client-centric development model‬‬

‫ﻃﺮاﺣﻲ اﻧﻌﻄﺎف ﭘﺬﻳﺮ از ﻣﻌﻤﺎري ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب دو ﺳﻨﺎرﻳﻮ را ﻓﺮاﻫﻢ ﻣﻲ آورد‪ .‬اوﻟﻴﻦ ﺳﻨﺎرﻳﻮ در ﺳﻤﺖ ﻛﻼﻳﻨﺖ‬
‫ﭘﻴﺎده ﺳﺎزي ﺷﺪه و ﺑﻪ ﻋﻨﻮان ‪ Client-centric development model‬ﺷﻨﺎﺧﺘﻪ ﻣﻲ ﺷﻮد‪ .‬ارزش‬
‫دارد زﻣﺎﻧﻲ را ﺑﺮاي درك اﻳﻨﻜﻪ اﻳﻦ ﻣﺪل ﻫﺎ ﭼﮕﻮﻧﻪ ﻛﺎر ﻣﻲ ﻛﻨﻨﺪ و ﭼﻪ زﻣﺎﻧﻲ از ﻫﺮ ﻛﺪام اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد ﺻﺮف‬
‫ﻛﻨﻴﺪ‪ .‬در ﻣﺪل ﻛﻼﻳﻨﺖ ﻣﺤﻮري ﻻﻳﻪ ﻧﻤﺎﻳﺶ از اﺳﻜﺮﻳﭙﺖ ﻫﺎي ﻛﻼﻳﻨﺘﻲ ﻛﻪ از ‪ DHTML‬و ﺟﺎوااﺳﻜﺮﻳﭙﺖ اﺳﺘﻔﺎده‬
‫ﻣﻲ ﻛﻨﺪ‪ ،‬ﺗﺸﻜﻴﻞ ﺷﺪه اﺳﺖ‪ .‬اﻳﻦ ﺑﺪﻳﻦ ﻣﻌﻨﻲ اﺳﺖ ﻛﻪ ﻳﻚ ﺑﺮﻧﺎﻣﻪ ﻓﻌﺎل ﺗﺮ و ﻫﻮﺷﻤﻨﺪﺗﺮ‪ ،‬ﻣﺮورﮔﺮ را از ﺗﺤﻮﻳﻞ‬
‫درﺧﻮاﺳﺖ ﺑﻪ ﺳﺮور زﻣﺎﻧﻴﻜﻪ ﺻﻔﺤﻪ ﺑﺮاي دﻓﻌﻪ اول ﺑﺎر ﮔﺬاري ﻣﻲ ﺷﻮد‪ ،‬ﻣﻄﻠﻊ ﻣﻲ ﺳﺎزد‪ .‬ﺑﻌﺪ از اﻳﻦ ﻋﻤﻠﻴﺎت ارﺗﺒﺎط‬
‫ﺑﻴﻦ ﺑﺮﻧﺎﻣﻪ ﺳﻤﺖ ﻛﻼﻳﻨﺖ ﺑﺎ ﺳﺮور ﻣﺤﺪود ﻣﻲ ﺷﻮد ﺗﺎ زﻣﺎﻧﻴﻜﻪ ﻧﻴﺎز ﺑﻪ داده ﺑﺮاي ﺑﻪ روز رﺳﺎﻧﻲ ﺻﻔﺤﻪ ﺑﺎﺷﺪ‪ .‬اﻳﻦ‬
‫ﻣﺪل ﻣﻮﺟﺐ ارﺗﺒﺎط ﺑﻬﺘﺮ ﻛﺎرﺑﺮ و ﺑﺮﻧﺎﻣﻪ وب ﻣﻲ ﺷﻮد‪ .‬ﺷﻜﻞ ‪ 5-6‬ﻣﺪل ﺗﻮﺳﻌﻪ ﻛﻼﻳﻨﺖ ﻣﺤﻮر را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪.‬‬

‫ﺷﻜﻞ ‪ 5-6‬ﻣﺪل ﻛﻼﻳﻨﺖ ﻣﺤﻮر ﺗﻮﺳﻌﻪ‬

‫ﻣﺪل ﺳﺮور ﻣﺤﻮري ﺗﻮﺳﻌﻪ‬
‫در ﻣﺪل ﺳﺮور ﻣﺤﻮر ﻣﻨﻄﻖ ﺑﺮﻧﺎﻣﻪ و ﺑﻴﺸﺘﺮ واﺳﻂ ﻛﺎرﺑﺮي در ﺳﻤﺖ ﺳﺮور ﺑﺎﻗﻲ ﻣﻲ ﻣﺎﻧﻨﺪ‪ .‬ﺑﻴﺸﺘﺮ ﺗﻐﻴﻴﺮات در واﺳﻂ‬
‫ﻛﺎرﺑﺮي ﺑﻪ ﺑﺮﻧﺎﻣﻪ ﻣﺮورﮔﺮي ارﺳﺎل ﻣﻲ ﺷﻮد ﺑﺠﺎي اﻳﻨﻜﻪ در ﺳﻤﺖ ﻛﻼﻳﻨﺖ اﺟﺮا ﺷﻮد‪ .‬اﻳﻦ روش ﻣﺎﻧﻨﺪ ﻣﺪل ﻗﺒﻠﻲ‬
 ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬ ‫‪  90‬ﻓﺼﻞ ‪4‬‬

‫ﺻﻔﺤﺎت ‪ ASP.NET‬اﺳﺖ ﻣﺪﻟﻲ ﻛﻪ در آن واﺳﻂ ﻛﺎرﺑﺮي را ﺑﺎ ارﺳﺎل داده ﺑﻪ ﻣﺮورﮔﺮ ﺑﻪ ﻋﻨﻮان ﺧﺮوﺟﻲ ﺗﻮﻟﻴﺪ‬
‫ﻣﻲ ﻛﻨﺪ‪ .‬ﺗﻔﺎوت ﺑﻴﻦ اﻳﻦ ﻣﺪل و ﻣﺪل ﻗﺒﻠﻲ وب در ‪ Asp.net‬اﻳﻦ اﺳﺖ ﻛﻪ آن ﻗﺴﻤﺖ از واﺳﻂ ﻛﺎرﺑﺮي ﻛﻪ‬
‫ﻧﻴﺎزدارد ﺑﻌﻨﻮان ﺧﺮوﺟﻲ ﻧﻤﺎﻳﺶ داده ﺷﻮد ﺑﻪ ﺑﺮﻧﺎﻣﻪ ﻣﺮورﮔﺮي ﭘﺎس داده ﻣﻲ ﺷﻮد ﻧﻪ ﻣﺎﻧﻨﺪ ﻣﺪل ﻗﺒﻠﻲ ﻛﻪ ﺗﻤﺎم‬
‫ﺻﻔﺤﻪ ارﺳﺎل ﻣﻲ ﺷﺪ‪.‬‬
‫ﺷﻜﻞ ‪ 5-7‬ﻣﺪل ﺳﺮور ﻣﺤﻮري ﺗﻮﺳﻌﻪ را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪.‬‬

‫ﺷﻜﻞ ‪ 5-7‬ﻣﺪل ﺗﻮﺳﻌﻪ ﺳﺮور ﻣﺤﻮر‬

‫اﻳﻦ روش ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن وب را ﻗﺎدر ﻣﻲ ﺳﺎزد ﻛﻪ ﻫﺴﺘﻪ واﺳﻂ ﻛﺎرﺑﺮي و ﻣﻨﻄﻖ ﺑﺮﻧﺎﻣﻪ ﺷﺎن را در ﺳﻤﺖ ﺳﺮور‬
‫ﻧﮕﻪ دارﻧﺪ‪ .‬ﻫﻤﭽﻨﻴﻦ ﻗﺴﻤﺖ ﺟﺬاب ﻣﻄﻠﺐ اﻳﻦ اﺳﺖ ﺑﺮﻧﺎﻣﻪ ﻫﺎ ﻣﻲ ﺗﻮاﻧﻨﺪ در ﺻﻮرت ﻏﻴﺮﻓﻌﺎل ﻛﺮدن ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬
‫در ﻣﺮورﮔﺮ ﺗﻮﺳﻂ ﻛﺎرﺑﺮ ﻣﺎﻧﻨﺪ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﻣﻌﻤﻮﻟﻲ وب رﻓﺘﺎر ﻛﻨﻨﺪ‪.‬‬
‫اﻫﺪاف ‪ASP.NET AJAX‬‬
‫‪-1‬اﺳﺘﻔﺎده آﺳﺎن‪ ،‬وﺟﻮد ﻳﻚ ﻓﺮﻳﻢ ورك ﺗﻮﻟﻴﺪ ﻛﻨﻨﺪه ﻗﻮي‬
‫اﺿﺎﻓﻪ ﻛﺮدن ﻗﺎﺑﻠﻴﺖ ‪ Ajax‬ﺑﻪ ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب ﺗﻮﺳﻂ اﻳﻦ ﻓﺮﻳﻢ ورك ﺑﺴﻴﺎر ﺳﺎده ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫اﻳﻦ ﻛﺎر ﺗﻮﺳﻂ ﻳﻚ ﻛﺘﺎﺑﺨﺎﻧﻪ ﻛﻼﻳﻨﺘﻲ و ﻳﻚ ﻣﺠﻤﻮﻋﻪ از ﻛﻨﺘﺮل ﻫﺎي ﺳﺮوري ﻛﻪ ﻧﺤﻮه ﻛﺎرﻛﺮد ﺳﺎده ي دارﻧﺪ‪،‬‬
‫ﻓﺮاﻫﻢ ﻣﻲ ﺷﻮد‪.‬‬
‫‪ -2‬ﺗﺮﻛﻴﺐ ﻣﺪل ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﺳﺮور‬
‫ﻛﻨﺘﺮل ﻫﺎي ﺳﺮوري ﺑﺮاي ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن ‪ Asp.net‬ﻳﻚ ﻣﺤﻴﻂ راﺣﺖ ﺑﺮاي ﺗﻮﺳﻌﻪ ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب ﻓﺮاﻫﻢ ﻣﻲ‬
‫ﻛﻨﺪ‪ .‬اﻳﻦ ﻛﻨﺘﺮل ﻫﺎ ﻧﻴﺎز ﺑﻪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺮاي ﻓﻌﺎل ﻛﺮدن ‪ Ajax‬در ﺻﻔﺤﻪ را ﺣﺬف ﻣﻲ ﻛﻨﺪ و ﻧﻴﺎز ﺑﻪ داﻧﺶ‬
‫زﻳﺎدي در ﻣﻮرد ﺷﻲ ‪ XHL‬را ﺑﺮﻃﺮف ﻣﻲ ﺳﺎزﻧﺪ‪.‬‬
‫‪ -3‬اﺑﺰار ‪ world-class‬و ﻛﺎﻣﭙﻮﻧﻨﺖ ﻫﺎ‬
‫ﻛﺎﻣﭙﻮﻧﻨﺖ ﻫﺎ و اﺑﺰارﻫﺎي ﺳﺎﺧﺘﻪ ﺷﺪه ﺑﺮ روي ﻓﺮﻳﻢ ورك ﻓﻘﻂ ﺑﺮاي ﺗﻮﺳﻌﻪ ﻓﺮﻳﻢ ورك ﻧﻴﺴﺖ اﻳﻦ اﺑﺰارﻫﺎ ﺷﺎﻣﻞ‬
‫ﺑﺨﺶ ﻫﺎي ﺑﺮاي ‪ profiling-trace -debug‬ﻣﻲ ﺑﺎﺷﻨﺪ‪.‬‬
‫ﻓﺼﻞ ‪91  4‬‬ ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬

‫ﻳﻚ ﺑﺮﻧﺎﻣﻪ ﺳﻤﺖ ﺳﺮور‬

‫وﻳﮋوال اﺳﺘﻮدﻳﻮي ‪ 2005‬را اﺟﺮا ﻛﺮده و از ﻗﺴﻤﺖ ‪ New Web Site‬ﮔﺰﻳﻨﻪ ‪ASP.NET AJAX-‬‬
‫‪ Enabled Web Site‬را اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪ .‬ﺑﺎ اﻧﺘﺨﺎب اﻳﻦ ﮔﺰﻳﻨﻪ ﺳﺎﻳﺘﻲ را اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ ﻛﻪ ﺑﻪ اﺳﻤﺒﻠﻲ‬
‫‪ ASP.NET AJAX‬ﻳﻌﻨﻲ ‪ System.Web.Extensions.dll‬ﻛﻪ ﻣﺘﻌﻠﻖ ﺑﻪ ﻛﺶ اﺳﻤﺒﻠﻲ ﻋﻤﻮﻣﻲ‬
‫)‪ (GAC‬اﺳﺖ اﺷﺎره ﻣﻲ ﻛﻨﺪ‪ .‬ﻫﻤﭽﻨﻴﻦ ﻳﻚ ﻓﺎﻳﻞ ‪ web.config‬ﭘﻴﭽﻴﺪه ﻛﻪ ﺷﺎﻣﻞ ﺗﻨﻀﻴﻤﺎت اﺿﺎﻓﻲ ﺑﺮاي‬
‫ﺗﺮﻛﻴﺐ ﺑﺎ ﻓﺮﻳﻢ ورك ‪ ASP.NET AJAX‬ﻣﻲ ﺑﺎﺷﺪ را اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ‪.‬‬

‫ﺷﻜﻞ ‪ 5-8‬ﮔﺰﻳﻨﻪ ﺳﺎﺧﺖ ﺑﺮﻧﺎﻣﻪ ‪ASP.NET AJAX-Enabled Web Site‬‬

‫ﻳﻚ ﻛﻼس ﺑﻪ ﻧﺎم ‪ HumanResources.cs‬ﺑﻪ ﻣﻨﻈﻮر ﺟﺴﺘﺠﻮي ﻣﻨﻄﻘﻲ ﻛﺎرﻣﻨﺪان اﻳﺠﺎد ﻛﺮده و ﻛﺪ زﻳﺮ را‬
‫در آن ﻛﭙﻲ ﻛﻨﻴﺪ‪:‬‬

‫;‪using System‬‬
‫‪public static class HumanResources‬‬
‫{‬
‫)‪public static int GetEmployeeCount(string department‬‬
‫{‬
‫;‪int count = 0‬‬
‫)‪switch (department‬‬
‫{‬
‫‪case "Sales":‬‬
‫;‪count = 10‬‬
‫;‪break‬‬

‫‪case "Engineering":‬‬
‫;‪count = 28‬‬
 ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬ ‫‪  92‬ﻓﺼﻞ ‪4‬‬

‫;‪break‬‬

‫‪case "Marketing":‬‬
‫;‪count = 44‬‬
‫;‪break‬‬

‫‪case "HR":‬‬
‫;‪count = 7‬‬
‫;‪break‬‬

‫‪default:‬‬
‫;‪break‬‬
‫}‬

‫;‪return count‬‬
‫}‬
‫}‬
‫اﻳﻦ ﻛﻼس ﺷﺎﻣﻞ ﻳﻚ ﻣﺘﺪ ﺑﻨﺎم ‪ GetEmployeeCount‬ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻛﻪ ﻧﺎم دﭘﺎرﺗﻤﺎن را ﺑﻪ ﻋﻨﻮان ﭘﺎراﻣﺘﺮ ورودي‬
‫درﻳﺎﻓﺖ ﻣﻲ ﻛﻨﺪ‪ .‬اﻳﻦ ﻣﺘﺪ از ﻳﻚ ‪ switch‬ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن ﺗﻌﺪاد ﻛﺎرﻣﻨﺪان ﻫﺮ ﺑﺨﺶ اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﺪ‪.‬‬
‫زﻣﺎﻧﻴﻜﻪ ﻳﻚ وب ﺳﺎﻳﺖ ﺟﺪﻳﺪ اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﺪ‪ ،‬ﻳﻚ ﺻﻔﺤﻪ ﭘﻴﺶ ﻓﺮض ﺑﻨﺎم ‪ Default.aspx‬در آن اﻳﺠﺎد‬
‫ﻣﻲ ﺷﻮد ﻛﻪ ﻣﺤﺘﻮاي آن ﻣﺎﻧﻨﺪ ﻛﺪ زﻳﺮ ﺧﻮاﻫﺪ ﺑﻮد‪:‬‬
‫"‪<%@ Page Language="C#" AutoEventWireup="true‬‬
‫>‪CodeFile="Default.aspx.cs" Inherits="_Default" %‬‬

‫"‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN‬‬

‫>"‪"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd‬‬
‫>"‪<html xmlns="http://www.w3.org/1999/xhtml‬‬
‫>"‪<head runat="server‬‬
‫>‪<title>Untitled Page</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>"‪<form id="form1" runat="server‬‬
‫"‪<asp:ScriptManager ID="ScriptManager1" runat="server‬‬
‫>‪/‬‬
‫>‪<div‬‬
‫>‪</div‬‬
‫>‪</form‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﺗﻔﺎوت ﺑﻴﻦ اﻳﻦ ﺻﻔﺤﻪ ﺑﺎ ﺻﻔﺤﻪ ﭘﻴﺶ ﻓﺮض اﻳﺠﺎد ﺷﺪه ﺑﺎ وﻳﮋوال اﺳﺘﻮدﻳﻮ در اﻳﻦ اﺳﺖ ﻛﻪ ﻳﻚ ﻛﻨﺘﺮل‬
‫‪ ScriptManager‬در آن اﺿﺎﻓﻪ ﺷﺪه اﺳﺖ‪ ScriptManager .‬ﻣﺴﺌﻮل ﺗﺸﺨﻴﺺ درﻳﺎﻓﺖ اﻃﻼﻋﺎت در‬
‫ﺳﺮور ﺑﺮاي ﻣﺮورﮔﺮ ﺳﻤﺖ ﻛﻼﻳﻨﺖ و ﻣﺪﻳﺮﻳﺖ ﺑﻪ روز رﺳﺎﻧﻲ ﺟﺰﺋﻲ در ﺻﻔﺤﻪ ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﮔﺮ ﻫﻨﻮز ﺑﺎ اﻳﻦ ﻣﻔﻬﻮم‬
‫آﺷﻨﺎ ﻧﻴﺴﺘﻴﺪ ﻧﮕﺮان ﻧﺒﺎﺷﻴﺪ ﭼﺮا ﻛﻪ اﮔﺮ ﺑﺎ وﻳﮋوال اﺳﺘﻮدﻳﻮ ﻛﺎر ﻛﻨﻴﺪ ﻣﻔﻬﻮم آن ﺑﺮاي ﺷﻤﺎ ﻣﻠﻤﻮس ﺗﺮ ﺧﻮاﻫﺪ ﺑﻮد‪.‬‬
‫ﺣﺎل ﻛﺪ زﻳﺮ را ﺑﻪ داﺧﻞ ﺗﮓ ِ‪ DIV‬ﭘﺎﻳﻴﻦ ﺗﮓ ‪ ScriptManager‬اﺿﺎﻓﻪ ﻛﻨﻴﺪ‪:‬‬
93  4 ‫ﻓﺼﻞ‬ ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬

<div>
<asp:ListBox AutoPostBack="true" runat="server"
ID="Departments"
OnSelectedIndexChanged="Departments_SelectedIndexChanged">
<asp:ListItem Text="Engineering"
Value="Engineering" />
<asp:ListItem Text="Human Resources"
Value="HR" />
<asp:ListItem Text="Sales" Value="Sales" />
<asp:ListItem Text="Marketing"
Value="Marketing" />
</asp:ListBox>
</div>
<br />
<div>
<asp:Label ID="EmployeeResults" runat="server" />
</div>
،‫ ﻛﻨﺘﺮل‬AutoPostBack ‫ ﺧﺎﺻﻴﺖ‬.‫از ﻳﻚ ﻟﻴﺴﺖ ﺑﺮاي ﻧﻤﺎﻳﺶ ﻧﺎم دﭘﺎرﺗﻤﺎن ﻫﺎ ﺟﻬﺖ اﻧﺘﺨﺎب اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‬
‫ اﻳﻦ ﻋﻤﻞ ﻳﻌﻨﻲ اﻧﺘﺨﺎب ﻧﺎم ﻳﻚ دﭘﺎرﺗﻤﺎن‬.‫ ﺗﻨﻈﻴﻢ ﻣﻲ ﺷﻮد‬true ‫ﺑﻪ ﻣﻨﻈﻮر درﺧﻮاﺳﺖ ﻳﻚ ﭘﺎﺳﺦ از ﺳﺮور ﺑﺎ ﻣﻘﺪار‬
‫ و ﻓﺮاﺧﻮاﻧﻲ ﻣﺘﺪ‬SelectedIndexChanged ‫از ﻟﻴﺴﺖ ﻛﻪ ﺑﺎﻋﺚ ﻓﻌﺎل ﺷﺪن روﻳﺪاد‬
Label ‫ در اﻧﺘﻬﺎي ﻓﺮم ﻳﻚ ﻛﻨﺘﺮل‬.‫ در ﻛﺪ ﻣﻲ ﺷﻮد‬Departments_SelectedIndexChanged
‫ ﺑﺮاي ﺗﻜﻤﻴﻞ ﺑﺮﻧﺎﻣﻪ ﻳﻚ واﺳﻂ ﻛﺎرﺑﺮي را ﭘﻴﺎده ﺳﺎزي ﻛﻨﻴﺪ ﻛﻪ‬.‫ﻗﺮار دارد ﻛﻪ ﻧﺘﻴﺠﻪ ﻋﻤﻠﻴﺎت را ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‬
:‫ﺑﺮاي ﺟﺴﺘﺠﻮي ﺗﻌﺪاد ﻛﺎرﻣﻨﺪان ﻣﻮﺟﻮد در دﭘﺎرﺗﻤﺎن اﻧﺘﺨﺎﺑﻲ ﺑﺎﺷﺪ‬
protected void Departments_SelectedIndexChanged(object
sender,EventArgs e)
{
EmployeeResults.Text = string.Format("Employee count:
{0}",HumanResources.GetEmployeeCountDepartments.SelectedV
alue));
}

:‫ ﻧﺘﻴﺠﻪ ي ﻣﺎﻧﻨﺪ ﺷﻜﻞ زﻳﺮ را ﻣﻲ ﺗﻮان ﻣﺸﺎﻫﺪ ﻛﺮد‬،‫زﻣﺎﻧﻴﻜﻪ ﺑﺮﻧﺎﻣﻪ اﺟﺮا ﺷﻮد و ﻳﻜﻲ از دﭘﺎرﺗﻤﺎﻧﻬﺎ اﻧﺘﺨﺎب ﮔﺮدد‬
 ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬ 4 ‫ ﻓﺼﻞ‬ 94

Employee ‫ ﻧﻤﺎي از اﺟﺮاي ﻣﺜﺎل‬5-9 ‫ﺷﻜﻞ‬

‫ ﻳﻚ ﻋﺪد را ﺑﺮﮔﺮداﻧﺪه‬،‫ اﻧﺘﺨﺎب ﻳﻚ دﭘﺎرﺗﻤﺎن از ﺻﻔﺤﻪ‬:‫ﺑﺮﻧﺎﻣﻪ ﻫﻤﺎن ﻛﺎري ﻛﻪ اﻧﺘﻈﺎرش را داﺷﺘﻴﻢ اﻧﺠﺎم ﻣﻲ دﻫﺪ‬
‫ ﺗﻨﻬﺎ ﻣﻮﺿﻮع اﻳﻦ اﺳﺖ ﻛﻪ ﻫﺮ زﻣﺎن ﻛﻪ ﻳﻚ دﭘﺎرﺗﻤﺎن اﻧﺘﺨﺎب ﻣﻲ ﺷﻮد ﺻﻔﺤﻪ‬.‫و آن را در ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‬
UpdatePanel ‫ ﺣﻞ اﻳﻦ ﻣﺸﻜﻞ آﺳﺎن ﻣﻲ ﺑﺎﺷﺪ؛ ﻣﺤﺘﻮﻳﺎت ﺻﻔﺤﻪ را داﺧﻞ ﻳﻚ ﻛﻨﺘﺮل‬.‫ ﻣﻲ ﺷﻮد‬refresh
:‫ﻗﺮار دﻫﻴﺪ‬
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:ListBox AutoPostBack="true"
runat="server" ID="Departments"

OnSelectedIndexChanged="Departments_SelectedIndexChanged">
<asp:ListItem Text="Engineering"
Value="Engineering" />
<asp:ListItem Text="Human Resources"
Value="HR" />
<asp:ListItem Text="Sales" Value="Sales"
/>
<asp:ListItem Text="Marketing"
Value="Marketing" />
</asp:ListBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>
:‫ وﻳﮋوال اﺳﺘﻮدﻳﻮ ﺑﻪ ﺻﻮرت زﻳﺮ ﺧﻮاﻫﺪ ﺑﻮد‬Design ‫ﻧﺘﻴﺠﻪ ﻛﺎر در ﻗﺴﻤﺖ‬
‫ﻓﺼﻞ ‪95  4‬‬ ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬

‫ﺷﻜﻞ ‪ 5-10‬ﻃﺮاﺣﻲ ﺑﺮﻧﺎﻣﻪ ﺑﺎ ‪UpdatePanel‬‬

‫ﺑﺼﻮرت ﭘﻴﺶ ﻓﺮض ﻣﺤﺘﻮاي داﺧﻞ ﺗﮓ ‪ ContentTemplate‬از ﻛﻨﺘﺮل ‪ UpdatePanel‬زﻣﺎﻧﻲ ﻛﻪ ﻳﻚ‬
‫درﺧﻮاﺳﺖ ﻏﻴﺮ ﻫﻤﺰﻣﺎن اﻧﺠﺎم ﻣﻲ ﺷﻮد ﺑﺼﻮرت ﺧﻮدﻛﺎر ﺑﻪ روز ﻣﻲ ﺷﻮد‪.‬‬
‫ﻛﻨﺘﺮل ‪UpdateProgress‬‬
‫ﻣﻌﻤﻮﻻ ﻳﻚ زﻣﺎن ﺗﺎﺧﻴﺮي ﻫﻤﻴﺸﻪ ﺑﻴﻦ ارﺳﺎل درﺧﻮاﺳﺖ و درﻳﺎﻓﺖ ﺟﻮاب در ﺑﺮﻧﺎﻣﻪ ﻫﺎ وﺟﻮد دارد‪ .‬اﻳﻦ زﻣﺎن در‬
‫ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب ﺑﻪ ﻋﻮاﻣﻞ زﻳﺎدي از ﺟﻤﻠﻪ ﺗﺮاﻓﻴﻚ ﺷﺒﻜﻪ‪ ،‬ﺣﺠﻢ اﻃﻼﻋﺎت ارﺳﺎﻟﻲ و درﻳﺎﻓﺘﻲ ﺑﺴﺘﮕﻲ دارد‪.‬‬
‫ﻗﺒﻞ از اراﺋﻪ ‪ refresh ،Ajax‬ﺷﺪن ﻳﻚ ﺻﻔﺤﻪ ﺑﺮاي اﻏﻠﺐ ﻛﺎرﺑﺮان دﻟﻴﻠﻲ ﺑﺮ ﭘﺮدازش ﭼﻴﺰي و ﻳﺎ ﻗﺒﻮل‬
‫ﻋﻤﻠﻴﺎﺗﺸﺎن ﺑﻮد‪ .‬ﺣﺎل‪ ،‬ﺑﺎ ﺟﻠﻮﮔﻴﺮي از درﺧﻮاﺳﺖ و ﭘﺎﺳﺦ ﻣﻌﻤﻮﻟﻲ ﺗﻮﺳﻂ ‪ ،Ajax‬ﻛﺎرﺑﺮ دﻟﻴﻠﻲ ﺑﺮ اﻳﻨﻜﻪ ﺗﺎ ﻛﺎﻣﻞ‬
‫ﺷﺪن ﻋﻤﻠﻴﺎت ﭼﻴﺰي در ﭘﺸﺖ ﺻﺤﻨﻪ اﻧﺠﺎم ﻣﻲ ﺷﻮد‪ ،‬ﻧﺪارﻧﺪ‪ .‬آن ﻫﺎ ﺑﻪ ﻳﻚ ﻧﻮع ﺑﺎزﺧﻮر ﺑﺼﺮي ﺑﺮاي ﻧﺸﺎن دادن‬
‫اﻳﻨﻜﻪ ﻛﺎرﺷﺎن در ﺣﺎل ﭘﻴﺸﺮﻓﺖ ﻣﻲ ﺑﺎﺷﺪ ﻧﻴﺎز دارﻧﺪ‪.‬‬
‫ﻛﻨﺘﺮل ‪ UpdateProgress‬ﺑﺮاي ﺣﻞ اﻳﻦ ﻣﺸﻜﻞ اراﺋﻪ ﺷﺪه اﺳﺖ‪ .‬ﻫﺪف آن آﻣﺎده ﺳﺎزي ﻳﻚ راﻫﻨﻤﺎي‬
‫ﺑﺼﺮي ﺑﺮاي ﻛﺎرﺑﺮ ﻫﻨﮕﺎم اﻳﺠﺎد ﻳﻚ درﺧﻮاﺳﺖ ‪ asynchronous‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺑﺮاي اﺳﺘﻔﺎده از آن ﻛﺎﻓﻲ اﺳﺖ‬
‫ﻛﺪ زﻳﺮ را اﺿﺎﻓﻪ ﻛﺮده و از ﻳﻚ ﺗﺼﻮﻳﺮ ﺑﺮاي ﻧﻤﺎﻳﺶ اﻳﻦ زﻣﺎن اﻧﺘﻈﺎر اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪:‬‬
‫>"‪<asp:UpdateProgress ID="UpdateProgress1" runat="server‬‬
‫>‪<ProgressTemplate‬‬
‫‪<img src="images/indicator.gif" />&nbsp;&nbsp;Loading‬‬
‫‪...‬‬
‫>‪</ProgressTemplate‬‬
‫>‪</asp:UpdateProgress‬‬
‫ﺑﺎ اﺟﺮاي دوﺑﺎره ﺑﺮﻧﺎﻣﻪ ﻫﻨﮕﺎم اﻧﺘﺨﺎب دﭘﺎرﺗﻤﺎن از ﻟﻴﺴﺖ ﺗﺎ زﻣﺎن ﻟﻮد ﺷﺪن اﻃﻼﻋﺎت ﻳﻚ ﺗﺼﻮﻳﺮ ﻧﻤﺎﻳﺶ داده ﻣﻲ‬
‫ﺷﻮد‪).‬ﻫﻤﺎﻧﻨﺪ ﺷﻜﻞ زﻳﺮ(‬
 ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬ ‫‪  96‬ﻓﺼﻞ ‪4‬‬

‫ﺷﻜﻞ ‪ 5-11‬اﺟﺮاي ﺑﺮﻧﺎﻣﻪ ﺑﺎ ﻧﻮار ‪UpdateProgress‬‬

‫اﻟﺒﺘﻪ در ﺻﻮرت اﺟﺮا ﺑﺮ روي ﺳﺮور ﻣﺤﻠﻲ اﻳﺠﺎد ﺷﺪه ﺑﺮ روي ﺳﻴﺴﺘﻢ ﺧﻮدﺗﺎن‪ ،‬ﺑﻪ ﻋﻠﺖ ﺳﺮﻋﺖ اﻧﺠﺎم ﻋﻤﻠﻴﺎت‬
‫ﺷﺎﻧﺲ ﻛﻤﻲ ﺑﺮاي ﻣﺸﺎﻫﺪه اﻳﻦ ﺗﺼﻮﻳﺮ دارﻳﺪ‪ .‬ﺑﺮاي اﻳﻨﻜﻪ ﺑﺘﻮاﻧﻴﺪ اﻳﻦ ﺗﺼﻮﻳﺮ را ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ ﻳﻚ دﺳﺘﻮر ‪sleep‬‬
‫ﺑﻪ ﻛﺪﺗﺎن اﺿﺎﻓﻪ ﻛﻨﻴﺪ‪:‬‬
‫‪protected void Departments_SelectedIndexChanged(object‬‬
‫)‪sender,EventArgs e‬‬
‫{‬
‫‪EmployeeResults.Text = string.Format("Employee count:‬‬
‫‪{0}",HumanResources.GetEmployeeCount‬‬
‫;))‪(Departments.SelectedValue‬‬
‫;)‪System.Threading.Thread.Sleep(2000‬‬
‫}‬
‫ﻳﻚ ﺑﺮﻧﺎﻣﻪ ﺳﺎده ﺑﺮ ﻣﺤﻮر ﻛﻼﻳﻨﺖ‬
‫ﻧﻮﺷﺘﻦ ﺑﺮﻧﺎﻣﻪ ﻫﺎ ﺑﺮ ﻣﺤﻮر ﺳﺮور ﺑﺴﻴﺎر ﺳﺎده ﺑﻮدﻧﺪ وﻟﻲ داراي ﻧﻘﻄﻪ ﺿﻌﻒ ﻣﻲ ﺑﺎﺷﻨﺪ‪ .‬ﻫﻨﻮز ﺑﻴﺸﺘﺮ ﻋﻤﻠﻴﺎت در ﺳﻤﺖ‬
‫ﺳﺮور اﺟﺮا ﻣﻲ ﺷﻮد‪ .‬وﻟﻲ ﻣﻲ ﺧﻮاﻫﻴﻢ ﻋﻤﻠﻴﺎت ﺳﻤﺖ ﺳﺮور ﻣﺤﺪود ﺷﻮﻧﺪ‪ ،‬و ﺗﻨﻬﺎ زﻣﺎﻧﻲ ﻛﻪ ﺑﻪ داده اي ﻧﻴﺎز داﺷﺘﻪ‬
‫ﺑﺎﺷﻴﻢ آن را از ﺳﺮور درﻳﺎﻓﺖ ﻛﻨﻴﻢ‪.‬‬
‫‪Place Code in‬‬ ‫ﺑﺮاي ﻧﻮﺷﺘﻦ ﺑﺮﻧﺎﻣﻪ ﺑﺮ ﻣﺤﻮر ﻛﻼﻳﻨﺖ در ﭘﻨﺠﺮه ‪ Add new Item‬ﮔﺰﻳﻨﻪ‬
‫‪ Separate File‬را ﻏﻴﺮ ﻓﻌﺎل ﻛﻨﻴﺪ‪ .‬و ﻳﻚ وب ﺳﺮوﻳﺲ ﺑﻨﺎم ‪ HRService.asmx‬را ﺑﻪ ﺑﺮﻧﺎﻣﻪ اﺿﺎﻓﻪ‬
‫ﻛﻨﻴﺪ‪.‬‬
‫ﺑﺮاي ﻛﺎﻣﻞ ﺷﺪن راه ﺣﻞ ﻛﺪ زﻳﺮ را در ﺑﺮﻧﺎﻣﻪ ﻛﭙﻲ ﻛﻨﻴﺪ‪:‬‬
‫‪using‬‬ ‫;‪System‬‬
‫‪using‬‬ ‫;‪System.Web‬‬
‫‪using‬‬ ‫;‪System.Web.Services‬‬
‫‪using‬‬ ‫;‪System.Web.Services.Protocols‬‬
‫‪using‬‬ ‫;‪System.Web.Script.Services‬‬
‫ﻓﺼﻞ ‪97  4‬‬ ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬

‫]‪[ScriptService‬‬
‫])"‪[WebService(Namespace = "http://tempuri.org/‬‬
‫])‪[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1‬‬
‫{ ‪public class HRService : System.Web.Services.WebService‬‬

‫]‪[ScriptMethod‬‬
‫]‪[WebMethod‬‬
‫)‪public int GetEmployeeCount(string department‬‬
‫{‬
‫;)‪return HumanResources.GetEmployeeCount(department‬‬
‫}‬
‫}‬

‫اﺑﺘﺪا ﺑﻪ ﻓﻀﺎي ﻧﺎﻣﻲ ‪ System.Web.Script.Services‬ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪ .‬اﻳﻦ ﻓﻀﺎي ﻧﺎﻣﻲ ﻗﺴﻤﺘﻲ از ﻫﺴﺘﻪ‬
‫ﻓﺮﻳﻢ ورك ‪ ASP.NET AJAX‬ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﺑﺮﺧﻲ از ارﺗﺒﺎﻃﺎت ﺷﺒﻜﻪ اي و ﻋﻤﻠﻴﺎت اﺳﻜﺮﻳﭙﺘﻲ را ﻛﭙﺴﻮﻟﻪ ﻣﻲ‬
‫ﻛﻨﺪ‪ .‬ﺳﭙﺲ ﺑﻪ ﺧﺎﺻﻴﺖ ﻫﺎي ﺟﺪﻳﺪي ﻛﻪ ﻛﻼس )]‪ ([ScriptService‬و ﺗﻌﺮﻳﻒ ﻣﺘﺪ‬
‫)]‪ ([ScriptMethod‬را در ‪ web service‬در ﺑﺮ ﻣﻲ ﮔﻴﺮﻧﺪ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪ .‬اﻳﻦ ﺧﺎﺻﻴﺖ ﻫﺎ ﺗﻮﺳﻂ‬
‫‪ ASP.NET Ajax‬ﺗﺠﺰﻳﻪ ﺷﺪه و ﺑﺮاي ﺗﻌﻴﻴﻦ اﻳﻨﻜﻪ ﭼﻪ ﻗﺴﻤﺘﻬﺎﻳﻲ از ﺳﺮوﻳﺲ در اﺧﺘﻴﺎر ﭘﺮاﻛﺴﻲ ﻫﺎي‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻗﺮار ﺑﮕﻴﺮﻧﺪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ‪ .‬اﻟﺒﺘﻪ ﺧﺎﺻﻴﺖ ‪ ScriptMethod‬ﺿﺮوري ﻧﻤﻲ ﺑﺎﺷﺪ‪ ،‬اﻣﺎ ﻣﻲ‬
‫ﺗﻮاﻧﻴﺪ از آن ﺑﺮاي دﺳﺘﻜﺎري ﺗﻨﻈﻴﻤﺎت ﺑﺮﺧﻲ از ﻣﺘﺪﻫﺎ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬
‫اﮔﺮ در ﻣﺮورﮔﺮ ﺗﺎن ﻓﺎﻳﻞ ‪ ASMX‬را ﺑﺎ ﻳﻚ ‪ /js‬در اﻧﺘﻬﺎي ‪ URL‬آن ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪ ،‬ﻳﻚ ﻣﺠﻤﻮﻋﻪ ﭘﺮاﻛﺴﻲ‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺮاي اﻳﻦ ﺳﺮوﻳﺲ اﻳﺠﺎد ﺷﺪه را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ .‬ﺷﻜﻞ ‪ 5-12‬اﻳﻦ ﻣﻮرد را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪.‬‬
‫ﺑﺎ اﺳﺘﻔﺎده از ‪ web service‬آﻣﺎده‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﻳﻚ ﺻﻔﺤﻪ ﺟﺪﻳﺪ ﺑﺮاي اﻳﻦ راه ﺣﻞ اﻳﺠﺎد ﻛﻨﻴﺪ‪ .‬ﺑﺮاي ﺷﺮوع‬
‫ﻳﻚ ﻓﺮم وب ﺑﻪ ﻧﺎم ‪ EmployeeLookupClient.aspx‬ﺑﻪ ﺳﺎﻳﺖ اﺿﺎﻓﻪ ﻛﻨﻴﺪ‪ .‬اﺑﺘﺪا اﺣﺘﻴﺎج ﺑﻪ اﺿﺎﻓﻪ‬
‫ﻛﺮدن ﻛﻨﺘﺮل ‪ ScriptManager‬ﺑﻪ ﺻﻔﺤﻪ ﺑﺮاي ﭘﺸﺘﻴﺒﺎﻧﻲ از ‪ ajax‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺣﺎل‪ ،‬ﻳﻚ ارﺟﺎع ﺑﻪ ﺳﺮوﻳﺲ‬
‫وب ﻣﺤﻠﻲ ﺗﻌﺮﻳﻒ ﻣﻲ ﻛﻨﻴﺪ‪ ،‬ﺑﺮاي اﻳﺠﺎد ﭘﺮوﻛﺴﻲ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺮاي ﺳﺮوﻳﺲ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﺎﻧﻨﺪ ﻛﺪ زﻳﺮ آن را‬
‫ﻓﺮاﺧﻮاﻧﻲ ﻛﻨﻴﺪ‪:‬‬

‫>"‪<asp:ScriptManager ID="ScriptManager1" runat="server‬‬

‫>‪<Services‬‬
‫>‪<asp:ServiceReference Path="HRService.asmx" /‬‬
‫>‪</Services‬‬
‫>‪</asp:ScriptManager‬‬
‫ﺑﺮاي ﻛﺎﻣﻞ ﺷﺪن اﻳﻦ ﻗﺴﻤﺖ ﻛﺪ زﻳﺮ را در ﺑﺮﻧﺎﻣﻪ ﺑﻨﻮﻳﺴﻴﺪ‪:‬‬
‫>‪<div‬‬
‫>"‪<select id="Departments" size="5‬‬
‫>‪<option value="Engineering">Engineering</option‬‬
‫>‪<option value="HR">Human Resources</option‬‬
 ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬ 4 ‫ ﻓﺼﻞ‬ 98

<option value="Sales">Sales</option>
<option value="Marketing">Marketing</option>
</select>
</div>
<br />
<div>
<span id="employeeResults"></span>
<span id="loading" style="display:none;">
<img src="images/indicator.gif" alt="" />
&nbsp;&nbsp;Loading ...
</span>
</div>

‫ ﭘﺮوﻛﺴﻲ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺮاي ﻓﺮﺧﻮاﻧﻲ ﺳﺮوﻳﺲ وب‬5-12 ‫ﺷﻜﻞ‬

‫ ﻣﻲ ﺗﻮاﻧﻴﺪ‬،‫ﺑﻪ اﻳﻦ ﻋﻠﺖ ﻛﻪ ﻧﻤﻲ ﺗﻮان ﺑﻪ ﻣﻨﻄﻖ واﺳﻂ ﻛﺎرﺑﺮي و ﻳﺎ ﻋﻤﻠﻴﺎﺗﻲ ﻛﻪ از ﺳﻤﺖ ﺳﺮور ﻣﻲ آﻳﺪ اﻋﺘﻤﺎد ﻛﻨﻴﺪ‬
‫ ﺑﺮاي ﻟﻴﺴﺖ دﭘﺎرﺗﻤﺎن‬select ‫ در اﻳﻨﺠﺎ ﻋﻨﺼﺮ‬.‫ ﺑﺠﺎي ﻛﻨﺘﺮل ﻫﺎي ﺳﻨﮕﻴﻦ ﺳﺮوري اﺳﺘﻔﺎده ﻛﻨﻴﺪ‬Html ‫از ﻋﻨﺎﺻﺮ‬
‫ ﺑﺮاي اﻳﺠﺎد ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮ‬.‫ ﺑﺮاي ﻧﻤﺎﻳﺶ ﻧﺘﻴﺠﻪ اﻃﻼﻋﺎت درﻳﺎﻓﺘﻲ از ﺳﻤﺖ ﺳﺮور ﺑﻜﺎر ﻣﻲ روﻧﺪ‬span ‫و ﻋﻨﺼﺮ‬
:‫ﻛﺪﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ زﻳﺮ را ﺑﻪ آن اﺿﺎﻓﻪ ﻛﻨﻴﺪ‬
<script type="text/javascript">
<!--
var departments = null;
Sys.Application.add_load(page_load);
Sys.Application.add_unload(page_unload);

function page_load(sender, e){

departments = $get("Departments");
‫ﻓﺼﻞ ‪99  4‬‬ ‫ﻛﺎر ﺑﺎ ‪ Ajax‬در ‪ASP.Net‬‬

‫‪$addHandler(departments, "change",‬‬
‫;)‪departments_onchange‬‬
‫}‬
‫{)‪function page_unload(sender, e‬‬
‫‪$removeHandler(departments, "change",‬‬
‫;)‪departments_onchange‬‬
‫}‬
‫{)‪function departments_onchange(sender, e‬‬
‫;"" = ‪$get("employeeResults").innerHTML‬‬
‫;"‪$get("loading").style.display = "block‬‬
‫;‪var selectedValue = departments.value‬‬
‫‪HRService.GetEmployeeCount(selectedValue,‬‬
‫;)‪onSuccess‬‬
‫}‬
‫{)‪function onSuccess(result‬‬
‫;"‪$get("loading").style.display = "none‬‬
‫‪$get("employeeResults").innerHTML = "Employee count:‬‬
‫;‪" + result‬‬
‫}‬
‫>‪//--‬‬
‫>‪</script‬‬
‫ﻫﻤﺎن ﻃﻮر ﻛﻪ ﻣﻲ ﺑﻴﻨﻴﺪ ﻣﺘﺪﻫﺎي ‪ load‬و ‪ unload‬در ﻣﺮورﮔﺮ ﺑﺎ ﻣﺪل ﺑﺮﻧﺎﻣﻪ ﺗﻨﻈﻴﻢ ﺷﺪه اﻧﺪ‪ .‬اﮔﺮ ﺑﻪ ﻛﺘﺎﺑﺨﺎﻧﻪ‬
‫ﻫﺴﺘﻪ ﻛﻪ ﻗﺒﻼ ﮔﻔﺘﻪ ﺷﺪ ﻧﮕﺎه ﺑﻴﺎﻧﺪازﻳﺪ ﺧﻮاﻫﻴﺪ دﻳﺪ ﻛﻪ ﻓﺮﻳﻢ ورك ﻛﻼﻳﻨﺖ ﻳﻚ ﭼﺮﺧﻪ ﺣﻴﺎت ﺻﻔﺤﻪ ﻣﺎﻧﻨﺪ آﻧﭽﻪ‬
‫در ‪ Asp.net‬اﺳﺖ ﻓﺮاﻫﻢ ﻣﻲ ﻛﻨﺪ‪ .‬در اﻳﻦ ﺻﻮرت از روﻳﺪاد ‪ load‬ﺑﺮاي ﺛﺒﺖ ﺗﻐﻴﻴﺮاﺗﻲ ﻛﻪ در ﻟﻴﺴﺖ دﭘﺎرﺗﻤﺎن‬
‫ﺻﻮرت ﻣﻲ ﮔﻴﺮد‪ ،‬اﺳﺘﻔﺎده ﻛﺮد‪ .‬ﻫﻤﭽﻨﻴﻦ از ﻣﺘﺪ ‪ unload‬ﺑﺮاي ﺣﺬف ﺗﻐﻴﻴﺮاﺗﻲ ﻛﻪ ﺛﺒﺖ ﺷﺪه اﺳﺖ اﺳﺘﻔﺎده ﻣﻲ‬
‫ﺷﻮد‪.‬‬
‫در اﻳﻦ ﻛﺪ ﺑﺮﺧﻲ ﻣﻮارد ﺟﺪﻳﺪ ﻣﻲ ﺑﺎﺷﻨﺪ‪ :‬دﺳﺘﻮراﺗﻲ ﻛﻪ ﺑﺎ ‪ $‬ﺷﺮوع ﻣﻲ ﺷﻮﻧﺪ‪ .‬اﻳﻦ دﺳﺘﻮرات ﻣﻴﺎﻧﺒﺮ ﻳﺎ ﻧﺎم ﻣﺴﺘﻌﺎر‬
‫ﻣﻌﺎدل دﺳﺘﻮر ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺷﺎن ﻣﻲ ﺑﺎﺷﻨﺪ ﻛﻪ در آﺧﺮ ﺑﻪ دﺳﺘﻮر ﻣﻌﺎدل ﺧﻮد ﺗﺮﺟﻤﻪ ﻣﻲ ﺷﻮﻧﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل ‪$get‬‬
‫ﻣﻌﺎدل دﺳﺘﻮر ‪ document.getElementById‬ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫زﻣﺎﻧﻴﻜﻪ ﻳﻚ دﭘﺎرﺗﻤﺎن در ﺻﻔﺤﻪ اﻧﺘﺨﺎب ﻣﻲ ﺷﻮد ﻣﺘﺪ زﻳﺮ ﺑﺮاي ﺑﺎزﻳﺎﺑﻲ ﺗﻌﺪاد ﻛﺎرﻣﻨﺪان ﺳﺮوﻳﺲ وب را ﻓﺮاﺧﻮاﻧﻲ‬
‫ﻣﻲ ﻛﻨﺪ‪.‬‬
‫;)‪HRService.GetEmployeeCount(selectedValue, onSuccess‬‬

‫ﭘﺎراﻣﺘﺮ اول در اﻳﻦ ﻣﺘﺪ دﭘﺎرﺗﻤﺎن اﻧﺘﺨﺎب ﺷﺪه از ﻟﻴﺴﺖ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﭘﺎراﻣﺘﺮ دوم ﻧﺎم ﺗﺎﺑﻌﻲ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﻫﻨﮕﺎم اﺗﻤﺎم‬
‫ﻣﻮﻓﻖ ﻣﺘﺪ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‪ .‬ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﺗﺎﺑﻊ ‪ onSuccess‬اﺟﺮا ﺷﻮد واﺳﻂ ﻛﺎرﺑﺮي ﺑﻪ روز )‪(update‬ﻣﻲ‬
‫ﺷﻮد‪.‬‬
ASP.Net ‫ در‬Ajax ‫ﻛﺎر ﺑﺎ‬ 4 ‫ ﻓﺼﻞ‬ 100
‫ﻓﺼﻞ ‪101  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫ﻓﺼﻞ ﭘﻨﺠﻢ‪ :‬ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫ﻳﻜﻲ از ﻣﺮاﺣﻞ ﻣﻬﻢ ﭼﺮﺧﻪ ﺗﻮﺳﻌﻪ ﻧﺮم اﻓﺰار‪ ،‬ﺗﺴﺖ ﻧﺮم اﻓﺰار ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻫﺮ ﻧﺮم اﻓﺰار ﻧﻮﺷﺘﻪ ﺷﺪه ﺑﺪون ﺧﻄﺎ ﻧﻴﺴﺖ ﺑﻪ‬
‫ﻫﻤﻴﻦ ﻋﻠﺖ ﻧﺮم اﻓﺰارﻫﺎي دﻳﺒﺎگ ﺑﻪ اﺑﺰارﻫﺎي ﺑﺎ ارزﺷﻲ ﺗﺒﺪﻳﻞ ﺷﺪﻧﺪ‪.‬‬
‫ﺑﻪ ﺻﻮرت ﺳﻨﺘﻲ دﻳﺒﺎگ ﻛﺪﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻣﺸﻜﻞ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺗﺎ ﭼﻨﺪي ﭘﻴﺶ ﻣﺮورﮔﺮﻫﺎ ﺑﻪ ﺻﻮرت ﻣﺤﺪودي‬
‫از دﻳﺒﺎگ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺣﻤﺎﻳﺖ ﻣﻲ ﻛﺮدﻧﺪ‪ .‬اوﻟﻴﻦ ﻧﺴﺨﻪ ‪ Safari‬ﻛﻨﺴﻮل ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻧﺪاﺷﺖ‪ Opera .‬ﺑﻌﺪ‬
‫از ﻧﺴﺨﻪ ‪ 8‬اﻳﻦ ﻛﻨﺴﻮل را اﺿﺎﻓﻪ ﻛﺮد‪ Firefox .‬از ﻛﻨﺴﻮل ﺟﺎوااﺳﻜﺮﻳﭙﺖ در ﻧﺴﺨﻪ ‪ 1,0‬ﺧﻮد ﺣﻤﺎﻳﺖ ﻛﺮد‪IE .‬‬
‫در ﻧﺴﺨﻪ ‪ 7,0‬ﻫﻢ ﻫﻨﻮزﻛﻨﺴﻮﻟﻲ ﺑﺮاي ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻧﺪارد‪ ،‬و ﺗﻨﻬﺎ ﻫﻨﮕﺎم اﻳﺠﺎد ﺧﻄﺎ ﭘﻨﺠﺮه اي ﺑﺮاي اﻋﻼم ﺧﻄﺎ‬
‫ﻧﺸﺎن ﻣﻲ دﻫﺪ‪.‬‬
‫اﻳﻨﺠﺎ ﻳﻜﻲ از اﺑﺰارﻫﺎي ﻣﻔﻴﺪ دﻳﺒﺎگ را ﻣﻌﺮﻓﻲ ﺧﻮاﻫﻴﻢ ﻛﺮد‪.‬‬

‫‪FireBug‬‬

‫‪ Firefox‬داري ﻗﺎﺑﻠﻴﺘﻲ ﺑﻪ ﻧﺎم ‪ add-on‬ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﻣﻲ ﺗﻮان ﻧﺮم اﻓﺰارﻫﺎﻳﻲ اﻳﺠﺎد ﻛﺮد ﻛﻪ از ﺗﻮاﻧﺎﻳﻲ ﻛﺎر ﺑﺎ‬
‫‪Joe‬‬ ‫‪ Firefox‬ﺑﺮﺧﻮردار ﻣﻲ ﺑﺎﺷﻨﺪ و اﻳﻦ ﻧﺮم اﻓﺰارﻫﺎ را ﺑﻪ ‪ Firefox‬اﺿﺎﻓﻪ ﻛﺮد‪ .‬در ﺳﺎل ‪،2006‬‬
‫‪ ،Hewitt‬ﻧﺮم اﻓﺰار ‪ Firebug‬را ﺑﻪ ﻋﻨﻮان اﺑﺰار ﺟﺪﻳﺪي ﺑﺮاي ﻛﻤﻚ ﺑﻪ ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن در اﻳﺠﺎد و دﻳﺒﺎگ‬
‫ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب ﻣﻌﺮﻓﻲ ﻛﺮد‪ Firebug .‬ﺑﻪ ﺻﻮرت ﺗﻮﻛﺎر اﺟﺎزه ﺑﺮرﺳﻲ و ﺑﺎزرﺳﻲ ‪ DOM‬ﺻﻔﺤﻪ اي ﻛﻪ اﻛﻨﻮن‬
‫ﻟﻮد ﺷﺪه اﺳﺖ را ﻣﻲ دﻫﺪ‪ ،‬اﻃﻼﻋﺎﺗﻲ در ﻣﻮرد ﻗﺎﻟﺐ ﻋﻨﺎﺻﺮ اراﺋﻪ ﻣﻲ ﻛﻨﺪ‪ ،‬و ﻗﺴﻤﺘﻲ ﻛﻪ ﺑﺮاي ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن‬
‫‪ Ajax‬ﺟﺎﻟﺐ ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻧﻈﺎرت)‪ (monitoring‬ﺑﺮ ﻫﻤﻪ ارﺳﺎل ﻫﺎ و درﻳﺎﻓﺖ ﻫﺎي ﻛﻪ از ﻃﺮﻳﻖ ﺷﻲ ‪XHR‬‬
‫اﻧﺠﺎم ﻣﻲ ﮔﻴﺮد‪.‬‬
‫ﻧﺼﺐ و آﻣﺎده ﺳﺎزي‬
‫‪ Firebug‬را ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ ﺻﻮرت راﻳﮕﺎن از ﺳﺎﻳﺖ ‪ www.getfirebug.com‬داﻧﻠﻮد ﻛﻨﻴﺪ‪Firebug .‬‬
‫ﺑﻪ ﺻﻮرت ﻳﻚ ‪ XPI‬داﻧﻠﻮد ﻣﻲ ﺷﻮد‪ ،‬ﺑﻪ اﻳﻦ ﻣﻌﻨﻲ ﻛﻪ ﺧﻮد ‪ Firefox‬ﻣﻲ داﻧﺪ ﻛﻪ ﭼﮕﻮﻧﻪ آن را ﻧﺼﺐ ﻛﻨﺪ‪ .‬در‬
‫ﻣﺮورﮔﺮ ‪ Firfox‬ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي ﻟﻴﻨﻚ داﻧﻠﻮد‪ ،‬ﺑﻪ ﺑﺴﺘﻪ اﺟﺎزه ﻧﺼﺐ ﺑﺪﻫﻴﺪ‪ .‬روي ﻛﻠﻴﺪ ‪ OK‬ﭘﻴﻐﺎم ﻧﺼﺐ‬
‫‪ Firebug‬ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪) .‬ﺑﻌﺪ از آن ﻧﻴﺎز ﺑﻪ ‪ Restart‬ﻣﺮورﮔﺮ دارﻳﺪ‪(.‬‬
‫‪ Firebug‬ﺑﻪ دو روش ﺑﻪ ﭘﻨﺠﺮه ‪ Firefox‬اﺿﺎﻓﻪ ﻣﻲ ﺷﻮد‪:‬‬
‫‪ -1‬اﺑﺘﺪا‪ ،‬در ﺳﻤﺖ راﺳﺖ ﻧﻮار وﺿﻌﻴﺖ‪ ،‬ﭘﺎﻧﻞ ﻛﻮﭼﻜﻲ را اﺿﺎﻓﻪ ﻣﻲ ﻛﻨﺪ ﻛﻪ ﺧﻄﺎﻫﺎي ﻣﺮﺑﻮط ﺑﻪ ﺻﻔﺤﻪ را ﻧﻤﺎﻳﺶ‬
‫ﻣﻲ دﻫﺪ‪).‬داﻳﺮه ﺗﻮﭘﺮ ﺳﺒﺰ در ﺻﻮرﺗﻲ ﻛﻪ ﺑﺪون ﺧﻄﺎ ﺑﺎﺷﺪ‪ ،‬و ﻋﻼﻣﺖ "‪ "x‬ﻗﺮﻣﺰ رﻧﮓ اﮔﺮ ﺧﻄﺎﺋﻲ داﺷﺘﻪ ﺑﺎﺷﺪ‪(.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  102‬ﻓﺼﻞ ‪5‬‬

‫‪ -2‬روش دوم‪ ،‬ﭘﺎﻧﻞ اﺻﻠﻲ ﻛﻪ اﻃﻼﻋﺎﺗﻲ درﺑﺎره ﺻﻔﺤﻪ ﻟﻮد ﺷﺪه ﻓﻌﻠﻲ را ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ و در ﭘﺎﺋﻴﻦ ﭘﻨﺠﺮه ﻧﻤﺎﻳﺶ‬
‫داده ﻣﻲ ﺷﻮد‪ .‬اﻳﻦ ﭘﺎﻧﻞ ﻣﻲ ﺗﻮاﻧﺪ ﺑﻪ ﺻﻮرت ﭘﻴﺶ ﻓﺮض ﻣﺨﻔﻲ ﻳﺎ آﺷﻜﺎر ﺑﺎﺷﺪ و ﻣﻲ ﺗﻮاﻧﺪ ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي ﭘﺎﻧﻞ‬
‫وﺿﻌﻴﺖ از ﻳﻚ ﺣﺎﻟﺖ ﺑﻪ ﺣﺎﻟﺖ دﻳﮕﺮ ﺑﺮود‪.‬‬
‫واﺳﻂ‬
‫واﺳﻂ ﻓﺎﻳﺮﺑﺎگ ﺷﺎﻣﻞ ﺷﺶ ﻧﻮار در ﭘﺎﻧﻞ اﺻﻠﻲ ﻣﻲ ﺑﺎﺷﺪ‪:‬‬
‫‪ -‬ﻧﻮار اوﻟﻲ ‪ Console‬ﻧﺎم دارد‪ ،‬و ﺷﺎﻣﻞ ﺧﻂ ﻓﺮﻣﺎن ﭘﺎﻳﻪ ﺑﺮاي ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻣﻲ ﺑﺎﺷﺪ‪ .‬در اﻳﻦ ﻧﻮار ﭘﻴﻐﺎم‬
‫ﻫﺎي ﺧﻄﺎ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮﻧﺪ‪ ،‬ﻫﻤﭽﻨﻴﻦ ﻣﻲ ﺗﻮان ﺑﺎ ﻧﻮﺷﺘﻦ دﺳﺘﻮرات ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺎ ﺻﻔﺤﻪ ﺗﻌﺎﻣﻞ داﺷﺖ‪.‬‬
‫‪ -‬ﻧﻮار دوﻣﻲ ‪ HTML‬ﻧﺎﻣﻴﺪه ﻣﻲ ﺷﻮد‪ ،‬و ﺷﺎﻣﻞ ﺑﺎزرس ‪ DOM‬ﭘﺎﻳﻪ ﻣﻲ ﺑﺎﺷﺪ‪ .‬در اﻳﻦ ﻧﻮار‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﮔﺮه ﻫﺎي‬
‫‪ Style،DOM‬و‪ Layout‬را ﺑﻪ ﺻﻮرت ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺒﻲ ﺑﺒﻴﻨﻴﺪ‪.‬‬
‫‪ -‬ﻧﻮار ﺳﻮم ‪ CSS‬ﻣﻲ ﺑﺎﺷﺪ‪ ،‬و ﺑﻌﻨﻮان ﺑﺎزرس ‪ ،CSS‬اﺟﺎزه ﻣﺸﺎﻫﺪه ﻫﻤﻪ ي ﺷﻴﻮه ﻧﺎﻣﻪ ﻫﺎ )‪ (CSS‬و وﻳﺮاﻳﺶ‬
‫ﻗﺎﻟﺐ ﻫﺎ)‪ (Style‬را ﺑﻪ ﺷﻤﺎ ﻣﻲ دﻫﺪ‪.‬‬
‫‪ -‬ﻧﻮار ﭼﻬﺎرم ‪ Script‬ﻣﻲ ﺑﺎﺷﺪ‪ ،‬و ﺷﺎﻣﻞ دﻳﺒﺎﮔﺮ ﻛﺪﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻣﻲ ﺗﻮاﻧﻴﺪ در ﻓﺎﻳﻞ‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻧﻘﺎط ﺗﻮﻗﻒ اﺟﺮا )‪ (breakpoint‬اﻳﺠﺎد ﻛﻨﻴﺪ‪.‬‬
‫‪ -‬ﻧﻮار ﭘﻨﺠﻢ ‪ DOM‬ﻧﺎﻣﻴﺪه ﻣﻲ ﺷﻮد‪ ،‬ﻛﻪ ﺗﻤﺎﻣﻲ اﺷﻴﺎ ﻣﻮﺟﻮد در ﺻﻔﺤﻪ را ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‪.‬‬
‫‪ -‬ﻧﻮار ﺷﺸﻢ‪ Net‬ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﺷﺎﻣﻞ ﻧﺸﺎﻧﻬﺎي ﮔﺮاﻓﻴﻜﻲ ﺑﺮاي ﺗﻤﺎﻣﻲ ﻣﻨﺎﺑﻌﻲ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﺗﻮﺳﻂ ﺻﻔﺤﻪ ﻟﻮد‬
‫ﺷﺪه اﻧﺪ‪ .‬زﻣﺎن ﻻزم ﺑﺮاي ﻟﻮد اﻳﻦ ﻣﻨﺎﺑﻊ را ﻧﻴﺰ ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‪.‬‬
‫در اداﻣﻪ ﻫﻤﻪ ﻧﻮارﻫﺎي ﻣﻮﺟﻮد در ﻓﺎﻳﺮﺑﺎگ ﻣﻔﺼﻼ ﺷﺮح داده ﺧﻮاﻫﻨﺪ ﺷﺪ‪.‬‬
‫واﻗﻌﻪ ﻧﮕﺎري )‪XHR (Logging‬‬
‫اﻏﻠﺐ اوﻗﺎت ﺷﻲ ‪ XHR‬ﺑﺮاي اﻳﺠﺎد درﺧﻮاﺳﺖ ‪ HTTP‬اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ ،‬اﻳﻦ اﻃﻼﻋﺎت در ﻧﻮار ﻛﻨﺴﻮل ﺑﻪ ﺻﻮرت‬
‫ﻳﻚ آﻳﺘﻢ ﻳﻚ ﺧﻄﻲ ﻧﻮﺷﺘﻪ ﻣﻲ ﺷﻮﻧﺪ‪ .‬اﻳﻦ ﺧﻂ ﺷﺎﻣﻞ ﻣﺘﺪ درﺧﻮاﺳﺖ )ﻋﻤﻮﻣﺎً ‪ GET‬و ﻳﺎ ‪ (POST‬و ﻫﻤﭽﻨﻴﻦ ﺑﻪ‬
‫دﻧﺒﺎل آن ‪ URL‬اﺳﺘﻔﺎده ﺷﺪه ﺑﺮاي درﺧﻮاﺳﺖ ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﻳﻦ ﺧﻂ ﻣﻲ ﺗﻮاﻧﺪ ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي ‪ URL‬ﺑﺴﻂ داده ﺷﺪه‬
‫و ﻧﻮارﻫﺎي ﺑﻴﺸﺘﺮي را ﻧﻤﺎﻳﺶ دﻫﺪ‪.‬‬
‫اﮔﺮ درﺧﻮاﺳﺖ ‪ GET‬ارﺳﺎل ﺷﺪه ﺑﺎﺷﺪ‪ ،‬ﺳﻪ ﻧﻮار ﻣﻮﺟﻮد ﺧﻮاﻫﺪ ﺑﻮد‪ Headers،Params :‬و‪. Respons‬‬
‫‪ -‬ﻧﻮار ‪ Params‬ﭘﺎراﻣﺘﺮﻫﺎي رﺷﺘﻪ ارﺳﺎﻟﻲ درﺧﻮاﺳﺖ ﻛﻪ ﺑﻪ ﺻﻮرت ﻧﺎم‪-‬ﻣﻘﺪار ﻣﻲ ﺑﺎﺷﺪ را در ﺑﺮدارد‪.‬‬
‫‪ -‬ﻧﻮار ‪ Header‬ﺷﺎﻣﻞ ﻫﺪرﻫﺎي ﭘﺎﺳﺦ ‪ HTTP‬ﻛﻪ ﻫﻤﺮاه ﺑﺎ داده ﻫﺎي درﺧﻮاﺳﺖ ارﺳﺎل ﻣﻲ ﺷﻮﻧﺪ‪ ،‬ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫اﻳﻦ ﻧﻮار ﺷﺎﻣﻞ اﻃﻼﻋﺎت ﻣﻔﻴﺪي ﻣﺎﻧﻨﺪ ﻛﻮﻛﻲ ﻫﺎ‪ ،‬ﻧﻮع ﻣﺤﺘﻮا‪ ،‬و زﻣﺎن ارﺳﺎل ﭘﺎﺳﺦ ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫‪ -‬ﻧﻮار ‪ Response‬ﺷﺎﻣﻞ اﻃﻼﻋﺎت ارﺳﺎﻟﻲ از ﺳﻤﺖ ﺳﺮور ﺑﻪ ﻛﻼﻳﻨﺖ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻣﻤﻜﻦ اﺳﺖ ﻛﻪ اﻳﻦ‬
‫اﻃﻼﻋﺎت ﻓﺮﻣﺖ ﻣﻨﺎﺳﺒﻲ ﻧﺪاﺷﺘﻪ ﺑﺎﺷﻨﺪ و ﻣﺠﺒﻮر ﺑﺎﺷﻴﺪ ﺑﺮاي ﻣﻄﺎﻟﻌﻪ‪ ،‬آن ﻫﺎ را در ﻳﻚ واﻳﺸﮕﺮ ﻛﭙﻲ ﻛﻨﻴﺪ‪.‬‬
‫ﻓﺼﻞ ‪103  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫در ﺻﻮرﺗﻲ ﻛﻪ ﻧﻮع درﺧﻮاﺳﺖ ‪ POST‬ﺑﺎﺷﺪ‪ ،‬ﺗﻌﺪار ﻧﻮارﻫﺎ ﭼﻬﺎر ﺗﺎ ﺧﻮاﻫﺪ ﺑﻮد‪ .‬ﻋﻼوه ﺑﺮ ﻣﻮارد ﻓﻮق ﻧﻮار ‪Post‬‬
‫ﻧﻴﺰ داده ارﺳﺎﻟﻲ ﺑﻪ ﺳﺮور را ﻧﻤﺎﻳﺶ ﺧﻮاﻫﺪ داد‪ .‬داده ﻫﺎ ﺑﺮاي درﺧﻮاﺳﺖ ‪ POST‬ﺑﻪ ﻋﻨﻮان ﺑﺪﻧﻪ درﺧﻮاﺳﺖ ارﺳﺎل‬
‫ﻣﻲ ﺷﻮﻧﺪ‪.‬‬

‫ﺧﻄﺎﻳﺎﺑﻲ‬
‫زﻣﺎﻧﻲ ﻛﻪ در ﺑﺮﻧﺎﻣﻪ ﺧﻄﺎ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‪ ،‬ﻓﺎﻳﺮﺑﺎگ ﻓﻮرا ﺑﻪ ﺷﻤﺎ ﺧﺒﺮ داده و اﻃﻼﻋﺎت ﺟﺎﻣﻊ و ﻣﻔﻴﺪي درﺑﺎره‬
‫ﺧﻄﺎﻫﺎي ﻣﻮﺟﻮد در ﺟﺎوااﺳﻜﺮﻳﭙﺖ‪ CSS ،‬و ‪ XML‬را ﺑﻪ ﺷﻤﺎ ﻣﻲ دﻫﺪ‪.‬‬

‫ﻧﻤﺎﻳﺶ ﺧﻄﺎ در ﻧﻮار وﺿﻌﻴﺖ‬

‫در ﺳﻤﺖ راﺳﺖ ﻧﻮار وﺿﻌﻴﺖ ﻣﺮورﮔﺮ ‪ Firefox‬ﻳﻚ آﻳﻜﻮن ﺳﺒﺰ رﻧﮓ را ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺒﻴﻨﻴﺪ‪) .‬ﺑﻌﺪ از ﻧﺼﺐ‬
‫‪ (Firebug‬اﻳﻦ آﻳﻜﻮن روش ﻓﺎﻳﺮﺑﺎگ ﺑﺮاي اﻋﻼم ﺻﺤﺖ ﻫﻤﻪ ﭼﻴﺰ ﻣﻲ ﺑﺎﺷﺪ‪ .‬زﻣﺎﻧﻲ ﻛﻪ اﻳﻦ آﻳﻜﻮن ﺑﻪ ﺿﺮﺑﺪر‬
‫ﻗﺮﻣﺰ ﺗﺒﺪﻳﻞ ﺷﻮد‪ ،‬ﻧﺸﺎن دﻫﻨﺪه اﻳﺠﺎد ﻣﺸﻜﻞ ﺧﻮاﻫﺪ ﺑﻮد‪ .‬ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي "‪ "x‬ﻓﺎﻳﺮﺑﺎگ ﻛﻨﺴﻮل ﺧﻄﺎ را ﺑﺎز ﻣﻲ‬
‫ﻛﻨﺪ ﻛﻪ ﺗﻤﺎﻣﻲ ﺧﻄﺎﻫﺎي ﻣﻮﺟﻮد در ﺻﻔﺤﻪ را ﺑﻪ ﺷﻤﺎ ﻧﺸﺎن ﺧﻮاﻫﺪ داد‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  104‬ﻓﺼﻞ ‪5‬‬

‫ﺗﻔﻜﻴﻚ ﺧﻄﺎ‬
‫اﻏﻠﺐ ﻣﺮورﮔﺮﻫﺎ ﺧﻄﺎﻫﺎ را در ﻳﻚ ﭘﻨﺠﺮه ﺑﻪ ﺻﻮرت ﻳﻚ ﻟﻴﺴﺘﻲ ﺷﺎﻣﻞ ﺧﻄﺎﻫﺎي ﺗﻤﺎم ﺻﻔﺤﺎﺗﻲ ﻛﻪ ﺗﺎ ﺑﻪ ﺣﺎل دﻳﺪه‬
‫اﻳﺪ ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﻨﺪ‪ .‬ﻓﺎﻳﺮﺑﺎگ ﺑﻪ ﮔﻮﻧﻪ دﻳﮕﺮي اﻳﻦ ﻛﺎر را اﻧﺠﺎم ﻣﻲ دﻫﺪ‪ ،‬ﻓﺎﻳﺮﺑﺎگ ﺗﻨﻬﺎ ﺧﻄﺎﻫﺎي ﻣﻮﺟﻮد در‬
‫ﺻﻔﺤﻪ اي را ﻛﻪ اﻛﻨﻮن در ﺣﺎل ﺗﻤﺎﺷﺎ ﻫﺴﺘﻴﺪ را ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‪.‬‬
‫اﻃﻼﻋﺎت ﻳﻚ ﺧﻄﺎ‬
‫در ﻣﻮرد ﺧﻄﺎﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ اﻃﻼﻋﺎت ﻛﺎﻣﻠﻲ درﺑﺎره ﺧﻄﺎي ﭘﻴﺶ آﻣﺪه را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ .‬در ﻣﻮرد ﺧﻄﺎ‬
‫ﺗﻮﺿﻴﺢ داده و ﻓﺎﻳﻞ و ﺷﻤﺎره ﺧﻄﻲ ﻛﻪ ﺧﻄﺎ در آن اﻳﺠﺎد ﺷﺪه را ﻧﻴﺰ اﻋﻼم ﻣﻲ ﻛﻨﺪ‪ .‬اﻏﻠﺐ ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي ﭘﻴﻜﺎن‬
‫ﻣﻲ ﺗﻮاﻧﻴﺪ ﺗﻮﺿﻴﺤﺎت را ﺑﺴﻂ داده و اﻃﻼﻋﺎت ﻛﺎﻣﻞ ﭘﺸﺘﻪ ي زﻣﺎن اﺟﺮا‪ ،‬ﺷﺎﻣﻞ ﻣﻘﺎدﻳﺮ آرﮔﻮﻣﺎن ﻫﺎي ﭘﺸﺘﻪ را ﺑﺒﻴﻨﻴﺪ‪.‬‬

‫ﭘﺮش ﺑﻪ ﻣﻮﻗﻌﻴﺖ ﺧﻄﺎ‬

‫ﺧﻄﺎﻫﺎي ﺑﻮﺟﻮد آﻣﺪه ﻳﻚ ﻟﻴﻨﻚ ﺑﻪ ﻓﺎﻳﻞ و ﺧﻄﻲ ﻛﻪ ﺧﻄﺎ در آن اﻳﺠﺎد ﺷﺪه اﺳﺖ دارﻧﺪ‪ .‬ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي اﻳﻦ‬
‫ﻟﻴﻨﻚ ﺑﻪ دﻳﺒﺎﮔﺮ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻓﺎﻳﺮﺑﺎگ و ﻳﺎ ‪ CSS inspector‬ﻣﻲ روﻳﺪ و ﺑﻌﺪ از آن ﺷﺮوع ﺑﻪ ﺣﻞ ﻣﺸﻜﻞ‬
‫ﭘﻴﺶ آﻣﺪه ﻣﻲ ﻛﻨﻴﺪ‪ .‬ﺑﺮﺧﻲ از ﺧﻄﺎﻫﺎ ﺷﺎﻣﻞ ﺗﻜﻪ ﻛﺪي از ﻛﺪ ﺧﻄﺎ دار ﻣﻲ ﺑﺎﺷﻨﺪ‪ ،‬ﻛﻪ آن ﻧﻴﺰ ﻟﻴﻨﻜﻲ ﺑﻪ ﻓﺎﻳﻞ اﺻﻠﻲ‬
‫ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫ﻓﺼﻞ ‪105  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫ﺟﺴﺘﺠﻮي ﺳﺮﻳﻊ‬
‫ﺑﺎ اﺳﺘﻔﺎده از ﺟﻌﺒﻪ ﺟﺴﺘﺠﻮي ﺳﺮﻳﻊ‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﻛﻨﺴﻮل ﻓﺎﻳﺮﺑﺎگ را ﺑﺮاي ﻧﻤﺎﻳﺶ ﺧﻄﺎﻫﺎﻳﻲ ﻛﻪ ﺑﺎ ﻣﺘﻨﻲ ﻛﻪ ﺷﻤﺎ‬
‫ﺟﺴﺘﺠﻮ ﻣﻲ ﻛﻨﻴﺪ ﻳﻜﺴﺎﻧﻨﺪ ﻓﻴﻠﺘﺮ ﻛﻨﻴﺪ‪ .‬ﺳﻄﺮﻫﺎي ﺟﺪﻳﺪي ﻛﻪ ﺑﻪ ﻛﻨﺴﻮل اﺿﺎﻓﻪ ﻣﻲ ﺷﻮﻧﺪ‪ ،‬ﺗﻨﻬﺎ زﻣﺎﻧﻲ ﻇﺎﻫﺮ ﻣﻲ ﺷﻮﻧﺪ‬
‫ﻛﻪ ﺑﺎ ﻣﺘﻦ ﻣﻮﺟﻮد در ﺟﻌﺒﻪ ﺟﺴﺘﺠﻮي ﺳﺮﻳﻊ ﻣﻄﺎﺑﻘﺖ داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪.‬‬

‫ﻓﻴﻠﺘﺮﻳﻨﮓ ﺧﻄﺎﻫﺎ‬
‫ﻓﺎﻳﺮﺑﺎگ ﺗﻮاﻧﺎﻳﻲ ﮔﺰارش دﻫﻲ درﺑﺎره ي ﺧﻄﺎﻫﺎي ﻣﻮﺟﻮد در ﻓﺎﻳﻞ ﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ‪ ،CSS ،‬ﻳﺎ ‪ XML‬را دارد‪.‬‬
‫اﮔﺮ ﺑﻪ ﺧﻄﺎﻫﺎي ﻳﻜﻲ از اﻳﻦ زﺑﺎن ﻫﺎ ﻋﻼﻗﻤﻨﺪ ﻧﺒﺎﺷﻴﺪ‪ ،‬ﺑﺎ اﻧﺘﺨﺎب ﻧﻜﺮدن ﻫﺮ ﻛﺪام ﻛﻪ ﻧﻤﻲ ﺧﻮاﻫﻴﺪ ﺑﺒﻴﻨﻴﺪ در ﻣﻨﻮي‬
‫‪ Options‬ﻛﻨﺴﻮل ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ اﻳﻦ ﻧﺘﻴﺠﻪ ﺑﺮﺳﻴﺪ‪.‬‬

‫ﺧﻂ ﻓﺮﻣﺎن ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫ﺧﻂ ﻓﺮﻣﺎن ﻳﻜﻲ از ﻗﺪﻳﻤﻲ ﺗﺮﻳﻦ اﺑﺰار در ‪ toolbox‬ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻓﺎﻳﺮﺑﺎگ ﻳﻚ ﺧﻂ ﻓﺮﻣﺎن ﻗﺪرﺗﻤﻨﺪ‬
‫ﺑﺮاي ﺟﺎوااﺳﻜﺮﻳﺖ را در اﺧﺘﻴﺎر ﺷﻤﺎ ﻗﺮار ﻣﻲ دﻫﺪ‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  106‬ﻓﺼﻞ ‪5‬‬

‫اﺣﺘﻤﺎﻻ ﺑﺎ اﻳﻦ ﻣﺴﺎﻟﻪ ﺑﺮﺧﻮرد ﻛﺮده اﻳﺪ ﻛﻪ ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ‪ DOM‬و ﻣﺸﺎﻫﺪه ﻧﺘﻴﺠﻪ آن ﺧﻴﻠﻲ آﺳﺎن ﻧﻴﺴﺖ اﻣﺎ ﺑﺎ ﺧﻂ‬
‫ﻓﺮﻣﺎن ﺑﺮاﺣﺘﻲ ﻣﻲ ﺗﻮاﻧﻴﺪ دﺳﺘﻮر ﺧﻮد را ﻧﻮﺷﺘﻪ و ﻧﺘﻴﺠﻪ اﺟﺮاي آن را ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪.‬‬

‫ﻛﺎﻣﻞ ﺷﺪن ﺧﻮدﻛﺎر ﻋﺒﺎرات)‪(Autocomplete‬‬

‫ﺑﺎ اﺳﺘﻔﺎده از ﻛﻠﻴﺪ ‪ tab‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ ﺻﻮرت ﺧﻮدﻛﺎر ﻧﺎم ﻣﺘﻐﻴﺮﻫﺎ و ﺧﺎﺻﻴﺖ اﺷﻴﺎ را ﻛﺎﻣﻞ ﻛﻨﻴﺪ‪ .‬ﻣﺠﻤﻮﻋﻪ ﻣﻤﻜﻦ‬
‫ﺑﻪ ﺻﻮرت ﭼﺮﺧﺸﻲ ﻧﺸﺎن داده ﻣﻲ ﺷﻮد‪ ،‬و ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺎ ‪ shift-tab‬ﺑﻪ ﻋﻘﺐ ﺑﺮﮔﺮدﻳﺪ‪.‬‬

‫وﻳﺮاﻳﺸﮕﺮ راﺣﺖ‬
‫اﮔﺮ ﻫﻨﮕﺎم ﻧﻮﺷﺘﻦ ﺧﻄﻲ اﺣﺴﺎس ﻣﻲ ﻛﻨﻴﺪ ﻛﻪ ﻣﺤﺪوده ﻛﺎرﺗﺎن ﻛﻮﭼﻚ ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻧﮕﺮان ﻧﺒﺎﺷﻴﺪ‪ .‬ﺧﻂ ﻓﺮﻣﺎن‬
‫ﻓﺎﻳﺮﺑﺎگ ﻣﻲ ﺗﻮاﻧﺪ ﺑﻪ ﻳﻚ وﻳﺮاﻳﺸﮕﺮ ﺑﺰرگ ﺗﺒﺪﻳﻞ ﺷﻮد ﭘﺲ از آن ﻣﻲ ﺗﻮاﻧﻴﺪ ﻛﺪﺗﺎن را در ﻳﻚ ﺧﻂ وارد ﻛﻨﻴﺪ‪.‬‬

‫ﻫﻮﺷﻤﻨﺪي ﺧﻂ ﻓﺮﻣﺎن‬
‫ﻳﻚ دﺳﺘﻪ ﻛﺪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ را ﻧﻮﺷﺘﻪ و ﻣﻲ ﺧﻮاﻫﻴﺪ ﺻﺤﺖ آﻧﻬﺎ را ﺗﺴﺖ ﻛﻨﻴﺪ‪ .‬ﺗﻨﻬﺎ ﻛﺎري ﻛﻪ ﺑﺎﻳﺪ اﻧﺠﺎم دﻫﻴﺪ‬
‫ﻛﭙﻲ آﻧﻬﺎ ﺑﻪ ﺧﻂ ﻓﺮﻣﺎن ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﮔﺮ ﺑﻴﺶ از ﻳﻚ ﺧﻂ ﺑﺎﺷﺪ‪ ،‬ﺑﻪ ﺻﻮرت ﺧﻮدﻛﺎر ﺗﻮﺳﻂ ﻓﺎﻳﺮﺑﺎگ ﻳﻚ وﻳﺮاﻳﺸﮕﺮ‬
‫ﺑﺰرگ ﺑﺮاي اﺳﻜﺮﻳﭙﺖ ﺷﻤﺎ آﻣﺎده ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬
‫ﻓﺼﻞ ‪107  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫ﻛﺎرﺑﺮد ﻛﻠﻴﺪ ﭼﭗ ﻣﻮس‬

‫ﺑﺮﺧﻼف ﺧﻂ ﻓﺮﻣﺎﻧﻬﺎي ﺳﻨﺘﻲ‪ ،‬ﺧﺮوﺟﻲ ﻫﺮ ﻓﺮﻣﺎن ﻳﻚ رﺷﺘﻪ اﻳﺴﺘﺎ ﻧﻤﻲ ﺑﺎﺷﺪ‪ ،‬ﺑﻠﻜﻪ ﺑﻪ ﺻﻮرت ‪ hypertext‬ﻣﻲ‬
‫ﺑﺎﺷﺪ‪ .‬ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي ﺧﺮوﺟﻲ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮرﺳﻲ ﻛﻨﻴﺪ ﻫﺮ ﻳﻚ از اﺷﻴﺎ در ﻛﺪام ﺗﺐ ﻓﺎﻳﺮﺑﺎگ ﻣﻨﺎﺳﺐ ﺗﺮ اﺳﺖ‪.‬‬

‫ﻛﺎرﺑﺮد ﻛﻠﻴﺪ ﻣﻴﺎﻧﻲ ﻣﻮس‬

‫اﮔﺮ ﺗﺎ ﺑﻪ ﺣﺎل ﺟﺎدو ﻛﻠﻴﻚ‪-‬ﻣﻴﺎﻧﻲ و ‪ tab‬ﻫﺎي ﻣﺮورﮔﺮ را ﻧﻴﺎﻣﻮﺧﺘﻪ اﻳﺪ‪ ،‬اﻛﻨﻮن زﻣﺎن ﺧﻮﺑﻲ ﺑﺮاي اﻳﻦ ﻛﺎر اﺳﺖ‪.‬‬
‫زﻣﺎﻧﻲ ﻛﻪ ﺑﺮ روي ﻳﻚ ﻟﻴﻨﻚ در ‪ Firefox‬ﻛﻠﻴﻚ‪-‬ﻣﻴﺎﻧﻲ را اﻧﺘﺨﺎب ﻣﻲ ﻛﻨﻴﺪ‪ ،‬ﻳﺎ ﻛﻠﻴﻚ‪-‬ﻣﻴﺎﻧﻲ ﺑﺮ روي ﻟﻴﻨﻚ‬
‫ﻳﻚ ﻓﺎﻳﻞ ﻳﺎ آدرس وب در ﻛﻨﺴﻮل ﻓﺎﻳﺮﺑﺎگ ‪ ،‬آن را در ‪ tab‬ﺟﺪﻳﺪي ﺑﺎز ﻣﻲ ﻛﻨﺪ‪ .‬ﺑﺮاي اﻧﺠﺎم اﻳﻦ ﻛﺎر ﺑﺪون‬
‫ﻛﻠﻴﻚ‪ -‬ﻣﻴﺎﻧﻲ ﻣﻮس‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﻛﻠﻴﺪ ‪ Ctrl‬را ﮔﺮﻓﺘﻪ و ﺑﺮاي ﮔﺮﻓﺘﻦ ﻧﺘﻴﺠﻪ ﻣﻮرد ﻧﻈﺮ ﺑﺮ روي آن ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪.‬‬

‫‪Inspect and command‬‬

‫ﭘﺲ از ﻳﺎﻓﺘﻦ ﻳﻚ ﻋﻨﺼﺮ ‪ HTML‬ﺑﺎ اﺳﺘﻔﺎده از اﺑﺰار ‪ ،Inspect‬ﻣﻲ ﺧﻮاﻫﻴﺪ از ﺧﻂ ﻓﺮﻣﺎن ﺑﺮاي ﻛﺎر ﺑﺮ روي آن‬
‫اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬ﻓﺎﻳﺮﺑﺎگ اﻧﺠﺎم اﻳﻦ ﻛﺎر را آﺳﺎن ﻛﺮده اﺳﺖ؛ ﺗﻨﻬﺎ ﺑﺎ اﺳﺘﻔﺎده از ﻣﺘﻐﻴﺮ "‪ "$1‬ﺑﺮاي اﺷﺎره ﺑﻪ آﺧﺮﻳﻦ‬
‫ﻋﻨﺼﺮي ﻛﻪ ﺑﺮرﺳﻲ ﻛﺮده اﻳﺪ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ ،‬ﻳﺎ از "‪ "$2‬ﺑﺮاي ﻳﻜﻲ ﻗﺒﻞ از آن اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬
‫ﻫﻤﭽﻨﻴﻦ‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ از "‪ "$$1‬و"‪ "$$2‬ﺑﺮاي اﺷﺎره ﺑﻪ اﺷﻴﺎﻳﻲ ﻛﻪ در ﻧﻮار ‪ DOM‬اﻧﺘﺨﺎب ﻛﺮده اﻳﺪ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  108‬ﻓﺼﻞ ‪5‬‬

‫واﻗﻌﻪ ﻧﮕﺎري ﺟﺎوااﺳﻜﺮﻳﭙﺖ)‪(JavaScript Logging‬‬

‫داﺷﺘﻦ ﻳﻚ دﻳﺒﺎﮔﺮ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺧﻴﻠﻲ ﺟﺎﻟﺐ اﺳﺖ‪ ،‬اﻣﺎ ﺑﻌﻀﻲ ﻣﻮاﻗﻊ روش ﺳﺮﻳﻊ ﺑﺮاي ﻳﺎﻓﺘﻦ ﺧﻄﺎﻫﺎ دﻳﺪن‬
‫اﻃﻼﻋﺎت زﻳﺎدي در ﻛﻨﺴﻮل ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻓﺎﻳﺮﺑﺎگ ﻣﺠﻤﻮﻋﻪ اي ﻗﺪرﺗﻤﻨﺪ ﺑﺮاي واﻗﻌﻪ ﻧﮕﺎري ﺗﻮاﺑﻊ را ﺑﻪ ﺷﻤﺎ ﻣﻲ دﻫﺪ‬
‫ﻛﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ آن ﻫﺎ را ﺑﺮاي ﺻﻔﺤﺎت وب ﺷﺨﺼﻲ ﺗﺎن ﻓﺮاﺧﻮاﻧﻲ ﻛﻨﻴﺪ‪.‬‬

‫ﺗﺎﺑﻊ)(‪console.log‬‬
‫روش آﺳﺎن ﺑﺮاي ﻧﻮﺷﺘﻦ در ﻛﻨﺴﻮل ﻓﺎﻳﺮﺑﺎگ ﻣﺎﻧﻨﺪ اﻳﻦ ﻣﻲ ﺑﺎﺷﺪ‪:‬‬
‫)"‪console.log("hello world‬‬
‫ﻣﻲ ﺗﻮاﻧﻴﺪ آرﮔﻮﻣﺎﻧﻬﺎي زﻳﺎدي را ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﺪ ﺑﺎ ﻫﻢ ﻛﺎري اﻧﺠﺎم دﻫﻨﺪ را وارد ﻛﻨﻴﺪ‪ ،‬ﻣﺎﻧﻨﺪ‪:‬‬
‫‪console.log(2,4,6,8,"foo",bar).‬‬

‫ﻫﺎﻳﭙﺮﻟﻴﻨﻚ اﺷﻴﺎ‬
‫‪ console.log‬و ﺗﻮاﺑﻊ ﻣﺮﺑﻮط ﺑﻪ آن ﻣﻲ ﺗﻮاﻧﻨﺪ ﻛﺎري ﺑﻴﺶ از ﻧﻮﺷﺘﻦ ﻣﺘﻦ در ﻛﻨﺴﻮل اﻧﺠﺎم دﻫﻨﺪ‪ .‬ﻣﻲ ﺗﻮاﻧﻴﺪ‬
‫ﻫﺮ ﻧﻮع ﺷﻲ را ﺑﻪ ‪ console.log‬ارﺳﺎل ﻛﻨﻴﺪ و آن را ﺑﻪ ﺻﻮرت ﻫﺎﻳﭙﺮﻟﻴﻨﻚ ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪ .‬ﻋﻨﺎﺻﺮ‪ ،‬ﺗﻮاﺑﻊ و‬
‫آراﻳﻪ ﻫﺎ ﻣﺎﻧﻨﺪ ﺷﻲ ﺧﻮاﻫﻨﺪ ﺑﻮد‪ ،‬و ﺷﻤﺎ ﺑﺎﻳﺪ ﻧﺎم آن ﻫﺎ را وارد ﻛﻨﻴﺪ‪ .‬ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي اﻳﻦ ﻟﻴﻨﻚ ﻫﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮ‬
‫روي ﻧﻮاري ﻛﻪ ﺑﻪ آن ﻫﺎ اﺧﺘﺼﺎص دارﻧﺪ ﺑﻪ ﺑﺮرﺳﻲ ﻣﻘﺎدﻳﺮ آن ﻫﺎ ﺑﭙﺮدازﻳﺪ‪.‬‬
‫رﺷﺘﻪ ﻓﺮﻣﺖ‬
‫ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ ﺳﺒﻚ دﺳﺘﻮر ‪ printf‬زﺑﺎن ‪ c‬دﺳﺘﻮر ‪ console.log‬را ﻧﻴﺰ ﻓﺮﻣﺖ ﺑﻨﺪي ﻛﻨﻴﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل‪ ،‬ﻣﻲ‬
‫ﺗﻮاﻧﻴﺪ ﺑﻪ ﺻﻮرت )‪ console.log("%s is %d years old.", "Bob", 42‬ﺑﻨﻮﻳﺴﻴﺪ‪.‬‬
‫ﻓﺼﻞ ‪109  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫ﺗﻮاﺑﻌﻲ ﺑﺮاي ﭼﺎپ رﻧﮕﻲ‬

‫ﻋﻼوه ﺑﺮ ‪ ،console.log‬ﭼﻨﺪﻳﻦ ﺗﺎﺑﻊ دﻳﮕﺮي وﺟﻮد دارﻧﺪ ﻛﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮاي ﭼﺎپ ﭘﻴﻐﺎم ﺑﻪ ﺻﻮرت رﻧﮕﻲ از‬
‫آن ﻫﺎ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬اﻳﻦ ﺗﻮاﺑﻊ ﺷﺎﻣﻞ ‪ console.warn ،console.info ،console.debug‬و‬
‫‪ console.error‬ﻣﻲ ﺑﺎﺷﻨﺪ‪.‬‬

‫زﻣﺎن اﺟﺮاي ﻛﺪ‬

‫ﻓﺎﻳﺮﺑﺎگ دو روش ﺳﺎده ﺑﺮاي ﺳﻨﺠﺶ ﺑﻬﻴﻨﻪ ﮔﻲ ﻛﺪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ در اﺧﺘﻴﺎر ﺷﻤﺎ ﻗﺮار ﻣﻲ دﻫﺪ‪ .‬روش ﻛﻢ ﻫﺰﻳﻨﻪ‬
‫اول ﻓﺮاﺧﻮاﻧﻲ )"‪ console.time("timing foo‬ﻗﺒﻞ از ﻛﺪي ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻣﻮرد ﺳﻨﺠﺶ ﻗﺮار‬
‫دﻫﻴﺪ ﻣﻲ ﺑﺎﺷﺪ‪ ،‬و ﭘﺲ از ﭘﺎﻳﺎن ﻛﺪ )"‪ console.timeEnd("timing foo‬را ﻓﺮاﺧﻮاﻧﻲ ﻛﻨﻴﺪ‪.‬‬
‫ﻓﺎﻳﺮﺑﺎگ زﻣﺎﻧﻲ ﻛﻪ در اﻳﻦ ﺑﻴﻦ ﺻﺮف ﺷﺪه را ﮔﺰارش ﺧﻮاﻫﺪ داد‪ .‬روش ﭘﺮ ﻫﺰﻳﻨﻪ اﺳﺘﻔﺎده از ‪plofiler‬‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺗﻨﻬﺎ ﻛﺎﻓﻲ اﺳﺖ ﻛﻪ )(‪ console.profile‬را ﻗﺒﻞ از ﻛﺪي ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻣﻮرد‬
‫ﺳﻨﺠﺶ ﻗﺮار دﻫﻴﺪ‪ ،‬و )(‪ console.profileEnd‬در ﭘﺎﻳﺎن آن ﻓﺮاﺧﻮاﻧﻲ ﻛﻨﻴﺪ‪ .‬ﻓﺎﻳﺮﺑﺎگ ﮔﺰارش ﻣﻔﺼﻠﻲ‬
‫درﺑﺎره زﻣﺎن ﺳﭙﺮي ﺷﺪه ﺑﺮاي ﻫﻤﻪ ﺗﻮاﺑﻊ ﺧﻮاﻫﺪ داد‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  110‬ﻓﺼﻞ ‪5‬‬

‫ﺑﺮرﺳﻲ ﭘﺸﺘﻪ‬
‫ﻓﺎﻳﺮﺑﺎگ ﺑﺎ ﻓﺮاﺧﻮاﻧﻲ )(‪ console.trace‬اﻃﻼﻋﺎت ﻛﺎﻣﻠﻲ درﺑﺎره ‪ stack trace‬در ﻛﻨﺴﻮل ﺧﻮاﻫﺪ‬
‫داد‪ .‬ﻧﻪ ﺗﻨﻬﺎ در ﻣﻮرد ﺗﻮاﺑﻊ ﻣﻮﺟﻮد در ﭘﺸﺘﻪ ﮔﺰارش ﺧﻮاﻫﺪ داد‪ ،‬ﺑﻠﻜﻪ در ﻣﻮرد آرﮔﻮﻣﺎن ﻫﺎي ﻛﻪ ﺑﻪ ﺗﻮاﺑﻊ ﭘﺎس داده‬
‫ﺷﺪه اﻧﺪ ﻧﻴﺰ اﻃﻼﻋﺎﺗﻲ ﺧﻮاﻫﺪ داد‪ .‬ﺑﺮاي ﺑﺮرﺳﻲ ﺗﻮاﺑﻊ و ﻳﺎ اﺷﻴﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮ روي آن ﻫﺎ ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪.‬‬

‫ﮔﺮوه ﺑﻨﺪي ﺗﻮدرﺗﻮ‬

‫ﺑﻌﻀﻲ اوﻗﺎت ﺧﻮاﻧﺪن ﻟﻴﺴﺖ ﻣﺴﻄﺤﻲ از ﭘﻴﻐﺎم ﻫﺎ ﺳﺨﺖ ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻓﺎﻳﺮﺑﺎگ راه ﺣﻠﻲ ﺑﺮاي دﻧﺪاﻧﻪ دار ﻛﺮدن ﭘﻴﻐﺎم‬
‫ﻫﺎ در ﻛﻨﺴﻮل را ﺑﺮاي ﺷﻤﺎ اراﺋﻪ ﻣﻲ دﻫﺪ‪ .‬ﺗﻨﻬﺎ ﺑﺎ ﻓﺮاﺧﻮاﻧﻲ )"‪ console.group("a title‬در ﺷﺮوع‬
‫ﻳﻚ ﺑﻠﻮك دﻧﺪاﻧﻪ دار ﺟﺪﻳﺪ‪ ،‬و)(‪ console.groupEnd‬ﺑﺮاي ﺑﺴﺘﻦ آن ﺑﻪ اﻳﻦ ﻫﺪف ﺧﻮاﻫﻴﺪ رﺳﻴﺪ‪ .‬ﻣﻲ‬
‫ﺗﻮاﻧﻴﺪ در ﺳﻄﻮح ﻣﺨﺘﻠﻔﻲ دﻧﺪاﻧﻪ دار ﺑﻮدن را اﻳﺠﺎد ﻛﻨﻴﺪ‪.‬‬

‫ﺑﺮرﺳﻲ ﺷﻲ‬
‫ﭼﻨﺪﻳﻦ ﺑﺎر ﺗﺎﺑﺤﺎل ﺑﺮاي ﻳﻚ ﻋﻨﺼﺮ ﻣﺠﺒﻮر ﺑﻪ ﻧﻮﺷﺘﻦ ﺗﻤﺎم ﺧﺎﺻﻴﺖ ﻫﺎﻳﺶ ﺷﺪه اﻳﺪ؟ ﺑﺎ ﻓﺎﻳﺮﺑﺎگ ﻧﻴﺎزي ﺑﻪ ﻧﻮﺷﺘﻦ‬
‫ﺗﻤﺎم ﺧﺎﺻﻴﺖ ﻫﺎ ﻧﻴﺴﺖ‪ .‬ﺑﺎ ﻓﺮاﺧﻮاﻧﻲ )‪ console.dir(object‬ﻟﻴﺴﺘﻲ از ﺧﺎﺻﻴﺖ ﻫﺎي ﻳﻚ ﺷﻲ را‬
‫ﺧﻮاﻫﻴﺪ داﺷﺖ‪.‬‬
‫ﻓﺼﻞ ‪111  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫ﺗﻮﺳﻌﻪ ‪HTML‬‬
‫ﻓﺎﻳﺮﺑﺎگ ﻳﺎﻓﺘﻦ ﻋﻨﺎﺻﺮ ‪ HTML‬ﻛﻪ داﺧﻞ ﺻﻔﺤﺎت ﭘﻨﻬﺎن ﺷﺪه اﻧﺪ را آﺳﺎن ﻛﺮده اﺳﺖ‪ .‬زﻣﺎﻧﻴﻜﻪ ﻋﻨﺼﺮي را ﻛﻪ ﺑﻪ‬
‫دﻧﺒﺎل آن ﻣﻲ ﮔﺮدﻳﺪ ﭘﻴﺪا ﻛﻨﻴﺪ‪ ،‬ﻓﺎﻳﺮﺑﺎگ اﻃﻼﻋﺎت ﻛﺎﻓﻲ از آن را در اﺧﺘﻴﺎرﺗﺎن ﻗﺮار ﺧﻮاﻫﺪ داد‪ ،‬و ﺑﻪ ﺷﻤﺎ اﺟﺎزه‬
‫ﻣﻲ دﻫﺪ ﻛﻪ ‪ HTML‬را وﻳﺮاﻳﺶ ﻛﻨﻴﺪ‪.‬‬

‫ﻧﻤﺎﻳﺶ ﻛﺪ ﺻﻔﺤﻪ‬
‫‪ Firefox‬داري ﭘﻨﺠﺮه "‪ "View Source‬ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ در آن ﻣﻲ ﺗﻮاﻧﻴﺪ ﻛﺪ ﺻﻔﺤﻪ را ﺑﺒﻴﻨﻴﺪ‪ ،‬اﻣﺎ ﻧﺤﻮه‬
‫ﺗﻐﻴﻴﺮ ﻛﺪ ﺗﻮﺳﻂ ﺟﺎوااﺳﻜﺮﻳﭙﺖ آن را ﺑﻪ ﺷﻤﺎ ﻧﺸﺎن ﻧﺨﻮاﻫﺪ داد‪ .‬ﻧﻮار ‪ HTML‬ﻣﻮﺟﻮد در ﻓﺎﻳﺮﺑﺎگ ﭼﻴﺰي را ﻛﻪ‬
‫اﻛﻨﻮن در ﺻﻔﺤﻪ وﺑﺘﺎن ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ را ﺑﻪ ﺷﻤﺎ ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ .‬ﺑﻌﻼوه‪ ،‬ﻧﻮارﻫﺎي ﺳﻤﺖ راﺳﺖ اﺟﺎزه ﻣﺸﺎﻫﺪه‬
‫ﺧﺎﺻﻴﺘﻬﺎي اﺧﺘﺼﺎﺻﻲ ﻋﻨﺼﺮ‪ ،‬ﺷﺎﻣﻞ ﻗﻮاﻧﻴﻦ ‪ CSS‬ﻛﻪ ﺳﺒﻚ ﻋﻨﺼﺮ را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ ،‬ﭘﻴﻜﺴﻞ ﻫﺎ ﻛﻪ ﻣﻮﻗﻌﻴﺖ و ﺳﺎﻳﺰ‬
‫ﻋﻨﺎﺻﺮ را ﻧﺸﺎن ﻣﻲ دﻫﻨﺪ‪ ،‬و ﺧﺎﺻﻴﺖ ﻫﺎي ‪ DOM‬ﻛﻪ ﺗﻮﺳﻂ ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ آﻧﻬﺎ دﺳﺘﺮﺳﻲ داﺷﺘﻪ ﺑﺎﺷﻴﺪ‬
‫را ﻣﻲ دﻫﺪ‪.‬‬

‫ﻧﻤﺎﻳﺶ ﺗﻐﻴﻴﺮات ﺻﻔﺤﻪ‬

‫در ﻫﺮ وب ﺳﺎﻳﺘﻲ ﻛﻪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ در آن ﺑﻪ ﻛﺎر رﻓﺘﻪ اﺳﺖ‪ ،‬ﻋﻨﺎﺻﺮ ‪ HTML‬اﻳﺠﺎد‪ ،‬ﺣﺬف و وﻳﺮاﻳﺶ ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
‫ﺟﺎﻟﺐ ﻧﺨﻮاﻫﺪ ﺑﻮد اﮔﺮ ﺷﻤﺎ ﻧﺪاﻧﻴﺪ ﻛﻪ واﻗﻌﺎً ﻛﻲ‪ ،‬ﭼﮕﻮﻧﻪ‪ ،‬و ﻛﺠﺎ اﻳﻦ ﺗﻐﻴﻴﺮات اﻧﺠﺎم ﻣﻲ ﮔﻴﺮﻧﺪ‪ .‬ﻓﺎﻳﺮﺑﺎگ ﺑﻪ ﻣﺤﺾ‬
‫اﻳﻨﻜﻪ اﻳﻦ ﺗﻐﻴﻴﺮات در ‪ HTML‬اﻧﺠﺎم ﻣﻲ ﺷﻮﻧﺪ ﺑﺎ رﻧﮓ زرد آن ﻫﺎ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  112‬ﻓﺼﻞ ‪5‬‬

‫وﻳﺮاﻳﺶ ﻛﺪ ‪Html‬‬
‫ﻓﺎﻳﺮﺑﺎگ روش ﺟﺎﻟﺒﻲ را ﺑﺮاي اﻳﺠﺎد ﺗﻐﻴﻴﺮات آزﻣﺎﻳﺸﻲ در ‪ HTML‬و دﻳﺪن ﻓﻮري ﺗﺎﺛﻴﺮ آن ﻫﺎ در اﺧﺘﻴﺎرﺗﺎن ﻗﺮار ﻣﻲ‬
‫دﻫﺪ‪ .‬ﺗﻨﻬﺎ ﺑﺎ ﻛﻠﻴﻚ آن ﻫﺎ و رﻓﺘﻦ از ﻳﻚ ﺻﻔﺖ ﺑﻪ دﻳﮕﺮي ﺑﺎ اﺳﺘﻔﺎده از ‪ tab‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﺻﻔﺎت و ﻣﺘﻦ ‪ HTML‬را‬
‫اﻳﺠﺎد‪ ،‬ﺣﺬف و ﻳﺎ وﻳﺮاﻳﺶ ﻛﻨﻴﺪ‪ .‬ﺗﻐﻴﻴﺮات ﺑﻪ ﻫﻤﺎن ﺻﻮرﺗﻲ ﻛﻪ ﺷﻤﺎ ﻧﻮﺷﺘﻪ اﻳﺪ اﻋﻤﺎل ﺧﻮاﻫﻨﺪ ﺷﺪ‪ .‬اﮔﺮ ﻫﺪﻓﺘﺎن‬
‫اﻧﺠﺎم ﺗﻐﻴﻴﺮاﺗﻲ ﺑﻴﺶ از ﻳﻚ ﺗﻐﻴﻴﺮ ﻛﻮﭼﻚ ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻓﺎﻳﺮﺑﺎگ اﺟﺎزه وﻳﺮاﻳﺶ ﺗﻤﺎم ﻛﺪ ‪ HTML‬ﺑﺮاي ﻫﺮ ﻋﻨﺼﺮي را‬
‫ﻣﻲ دﻫﺪ‪ .‬ﺗﻨﻬﺎ ﻛﺎﻓﻲ اﺳﺖ ﻛﻪ ﺑﺮ روي ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﻛﻠﻴﻚ‪ -‬راﺳﺖ ﻛﺮده و از ﻣﻨﻮ "‪ "Edit HTML...‬را‬
‫اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪.‬‬

‫ﻳﺎﻓﺘﻦ ﻋﻨﺎﺻﺮ ﺑﺎ اﺳﺘﻔﺎده از ﻣﻮس‬

‫ﺑﺮﺧﻲ اﺷﻴﺎ در ﺻﻔﺤﻪ وﺑﺘﺎن زﻳﺎد درﺳﺖ ﺑﻪ ﻧﻈﺮ ﻧﻤﻲ رﺳﻨﺪ و ﻣﻲ ﺧﻮاﻫﻴﺪ دﻟﻴﻞ آن را ﺑﺪاﻧﻴﺪ‪ .‬راه ﺳﺮﻳﻌﺘﺮي ﻧﺴﺒﺖ ﺑﻪ‬
‫ﻛﻠﻴﻚ ﺑﺮ روي دﻛﻤﻪ "‪ "Inspect‬در ﻧﻮار اﺑﺰار ﻓﺎﻳﺮﺑﺎگ و ﭘﺲ از آن آﻣﺎده ﺷﺪن ﺑﺮاي ﺟﺴﺘﺠﻮ در ﺻﻔﺤﻪ وب‬
‫ﺑﺮاي ﮔﺮﻓﺘﻦ ﺟﻮاب وﺟﻮد دارد‪ .‬اﮔﺮ ﺷﻤﺎ در اﻃﺮاف ﺻﻔﺤﻪ وب ﺣﺮﻛﺖ ﻛﻨﻴﺪ‪ ،‬ﻫﺮ ﭼﻴﺰي ﻛﻪ زﻳﺮ ﻣﻮس ﺷﻤﺎ ﺑﺎﺷﺪ‬
‫ﻓﻮراً داﺧﻞ ‪ Firebug‬ﻣﻌﻠﻮم ﻣﻲ ﺷﻮد‪ ،‬و ﺑﻪ ﺷﻤﺎ ‪ HTML‬و ‪ CSS‬ﭘﺸﺖ آن را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪.‬‬

‫ﺟﺴﺘﺠﻮ در ﻛﺪ‬
‫اﻏﻠﺐ اوﻗﺎت ﻣﻲ داﻧﻴﺪ ﻛﻪ دﻧﺒﺎل ﭼﻪ ﭼﻴﺰي ﻣﻲ ﮔﺮدﻳﺪ‪ ،‬اﻣﺎ ﻧﻤﻲ ﺗﻮاﻧﻴﺪ آن را در ﺻﻔﺤﻪ ﺑﺒﻴﻨﻴﺪ‪ .‬ﺑﺎ اﺳﺘﻔﺎده از ﺟﻌﺒﻪ‬
‫ﺟﺴﺘﺠﻮي ﺳﺮﻳﻊ در ‪ toolbar‬ﻣﻮﺟﻮد در ﻓﺎﻳﺮﺑﺎگ ﻣﻲ ﺗﻮاﻧﻴﺪ در ﻛﺪ ‪ HTML‬ﺟﺴﺘﺠﻮ ﻛﺮده و ﻧﺘﻴﺠﻪ را ﺑﻪ‬
‫ﺻﻮرت ﭘﺮرﻧﮓ ﺑﺒﻴﻨﻴﺪ‪.‬‬
‫ﻓﺼﻞ ‪113  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫ﻛﭙﻲ ﻛﺪ ‪Html‬‬
‫ﺑﺎ ﻛﻠﻴﻚ راﺳﺖ ﺑﺮ روي ﻫﺮ ﻋﻨﺼﺮ‪ ،‬ﭼﻨﺪﻳﻦ ﮔﺰﻳﻨﻪ ﺑﺮاي ﻛﭙﻲ ﻋﻨﺼﺮ از ﺟﻨﺒﻪ ﻫﺎي ﻣﺨﺘﻠﻔﻲ ﺧﻮاﻫﻴﺪ داﺷﺖ‪ ،‬ﻣﺎﻧﻨﺪ‬
‫ﻳﻚ ﻛﺪ ‪ ،HTML‬ﻣﻘﺪار ﻣﻮﺟﻮد در ﺧﺎﺻﻴﺖ ‪ innerHTML‬آن‪ ،‬و ﻳﺎ ﺑﻪ ﺻﻮرت ﻋﺒﺎرت ‪.Xpath‬‬

‫ﺗﻮﺳﻌﻪ ‪CSS‬‬
‫ﻗﺴﻤﺖ ‪ Firebug CSS‬ﻫﺮ ﭼﻴﺰي ﻛﻪ در ﻣﻮرد ﻗﺎﻟﺐ وب ﺳﺎﻳﺘﺘﺎن را ﺑﺨﻮاﻫﻴﺪ ﺑﻪ ﺷﻤﺎ ﻣﻲ ﮔﻮﻳﺪ‪ ،‬و اﮔﺮ ﭼﻴﺰي را‬
‫دوﺳﺖ ﻧﺪاﺷﺘﻪ ﺑﺎﺷﻴﺪ‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ آن را ﺗﻐﻴﻴﺮ داده و ﻧﺘﻴﺠﻪ ﻛﺎر را ﻓﻮراٌ ﺑﺒﻴﻨﻴﺪ‪.‬‬

‫ﺑﺮرﺳﻲ آﺑﺸﺎري )‪(cascade‬‬

‫ﺑﺪون ﻓﺎﻳﺮﺑﺎگ اﺣﺘﻤﺎﻻ زﻣﺎﻧﻲ ﻛﻪ ﺑﺎﻳﺴﺘﻲ ﺳﺮﺗﻴﺘﺮ ﺻﻔﺤﻪ وب ﺗﺎن ﺳﻴﺎه ﺑﺎﺷﺪ و آن را آﺑﻲ ﻣﻲ ﺑﻴﻨﻴﺪ‪ ،‬ﺑﺴﻴﺎر ﻋﺼﺒﺎﻧﻲ‬
‫ﺧﻮاﻫﻴﺪ ﺷﺪ‪ .‬اﻣﺎ ﺑﺎ ﻓﺎﻳﺮﺑﺎگ ﺑﺮرﺳﻲ ﻗﺴﻤﺖ ﻣﺸﻜﻞ دار ﺑﺴﻴﺎر آﺳﺎن ﻣﻲ ﺷﻮد‪ .‬ﻓﺎﻳﺮﺑﺎگ ﻗﻮاﻧﻴﻨﻲ ﻛﻪ ﺑﻪ ﺻﻮرت‬
‫آﺑﺸﺎري ﺑﺎﻫﻢ ﺑﺮ ﻗﺎﻟﺐ ﻳﻚ ﻋﻨﺼﺮ ﺗﺎﺛﻴﺮ ﻣﻲ ﮔﺬارﻧﺪ را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪.‬اﻳﻦ ﻗﻮاﻧﻴﻦ ﺑﻪ ﺗﺮﺗﻴﺐ اوﻟﻮﻳﺖ ذﺧﻴﺮه ﺷﺪه اﻧﺪ‪.‬‬
‫ﻫﺮ ﻗﺎﻧﻮن ﻳﻚ ﻟﻴﻨﻚ ﺑﻪ ﻓﺎﻳﻠﻲ ﻛﻪ در آن ﻗﺮار دارد را داراﺳﺖ ﻛﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺎ ﻛﻠﻴﻚ ﻛﺮدن ﺑﻪ آن ﺧﻂ ﻓﺎﻳﻞ ﺑﺮوﻳﺪ‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  114‬ﻓﺼﻞ ‪5‬‬

‫ﭘﻴﺶ ﻧﻤﺎﻳﺶ رﻧﮓ و ﺗﺼﻮﻳﺮ‬

‫اﮔﺮ داﺧﻞ ‪ CSSTab‬ﻣﻮس را روي رﻧﮓ و ﻳﺎ ﺗﺼﻮﻳﺮ ﺑﺒﺮﻳﺪ‪ ،‬ﻳﻚ ‪ tooltip‬ﻛﻮﭼﻚ ﭘﻴﺶ ﻧﻤﺎﻳﺸﻲ از رﻧﮓ و‬
‫ﻳﺎ ﺗﺼﻮﻳﺮ را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ Tooltip .‬ﺗﺼﻮﻳﺮ اﺑﻌﺎد ﻓﺎﻳﻞ ﺗﺼﻮﻳﺮي را ﻧﻴﺰ ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ ،‬ﻣﺨﺼﻮﺻﺎ وﻗﺘﻲ ﻛﻪ‬
‫اﺣﺘﻴﺎج ﺑﻪ ﻧﻮﺷﺘﻦ ‪ CSS‬ﺑﺮاي اﻳﺠﺎد ﻳﻚ ﻋﻨﺼﺮ دارﻳﺪ ﻛﻪ ﺣﺘﻤﺎ ﺑﺎ ﺳﺎﻳﺰ ﺗﺼﻮﻳﺮ ﻳﻜﺴﺎن ﺑﺎﺷﺪ‪.‬‬

‫وﻳﺮاﻳﺶ آﺳﺎن ﻛﺪﻫﺎي ‪CSS‬‬

‫ﻧﻮﺷﺘﻦ ‪ CSS‬ﻛﺎر ﺳﺎده اي ﻧﺒﻮده اﺳﺖ‪ .‬ﺑﺎ ﻛﻠﻴﻚ روي ﻫﺮ ﺧﺎﺻﻴﺖ ‪ CSS‬ﻳﻚ ‪ textbox‬ﻛﻮﭼﻚ ﻇﺎﻫﺮ ﻣﻲ‬
‫ﺷﻮد‪ .‬ﺑﺎ ﺗﺎﻳﭗ ﺷﻤﺎ‪ ،‬ﺗﻐﻴﻴﺮات ﻓﻮرا اﻋﻤﺎل ﻣﻲ ﺷﻮد‪ .‬ﻫﻤﭽﻨﻴﻦ در ﺣﻴﻦ ﻧﻮﺷﺘﻦ ﻓﺎﻳﺮﺑﺎگ ﻣﻘﺎدﻳﺮ ﻣﻤﻜﻦ را ﺑﻪ ﺷﻤﺎ ﭘﻴﺸﻨﻬﺎد‬
‫ﺧﻮاﻫﺪ داد )‪ .(autocompletes‬ﺑﺎ ﻛﻠﻴﺪ ‪ Esc‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﺗﻐﻴﻴﺮاﺗﻲ را ﻛﻪ اﻳﺠﺎد ﻛﺮده اﻳﺪ را ﻟﻐﻮ ﻛﻨﻴﺪ‪ ،‬ﻳﺎ ﺑﺎ‬
‫ﻛﻠﻴﺪ ‪ Tab‬از ﺧﺎﺻﻴﺘﻲ ﺑﻪ ﺧﺎﺻﻴﺖ دﻳﮕﺮ ﺑﺮوﻳﺪ‪.‬‬

‫ﻓﻌﺎل و ﻏﻴﺮ ﻓﻌﺎل ﻛﺮدن ﺧﺎﺻﻴﺖ ﻫﺎ‬

‫اﻏﻠﺐ راه ﺣﻞ ﻳﻚ ﻣﺸﻜﻞ را ﻣﻲ ﺗﻮان ﺑﺎ ﻏﻴﺮ ﻓﻌﺎل ﻛﺮدن ﭼﻨﺪﻳﻦ ﺧﺎﺻﻴﺖ ‪ CSS‬ﭘﻴﺪا ﻛﺮده و دﻳﺪ ﻛﻪ ﺑﺪون آن ﻫﺎ‬
‫ﭼﮕﻮﻧﻪ ﺑﻪ ﻧﻈﺮ ﻣﻲ رﺳﻨﺪ‪ .‬ﺑﺎ ﺑﺮدن ﻣﻮس روي ﻫﺮ ﺧﺎﺻﻴﺖ‪ ،‬ﻳﻚ آﻳﻜﻮن ﻣﺪور ﻛﻮﭼﻚ در ﺳﻤﺖ ﭼﭗ آن ﺧﻮاﻫﻴﺪ‬
‫دﻳﺪ‪ .‬ﻛﻠﻴﻚ ﺑﺮ روي آن‪ ،‬ﺧﺎﺻﻴﺖ را ﻏﻴﺮ ﻓﻌﺎل ﻣﻲ ﻛﻨﺪ‪ ،‬و ﻛﻠﻴﻚ دوﺑﺎره ﺑﺮ روي آن ﺑﺎﻋﺚ ﻓﻌﺎل ﺷﺪﻧﺶ ﻣﻲ ﺷﻮد‪.‬‬
‫ﻓﺼﻞ ‪115  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫ﺑﺮرﺳﻲ ﻛﻞ ﺻﻔﺤﻪ ‪CSS‬‬

‫در ﺣﺎﻟﻲ ﻛﻪ ﻧﻮار ‪ HTML‬ﺑﻪ ﺷﻤﺎ اﺟﺎزه ﺑﺎزرﺳﻲ )‪ (inspect‬از ‪ CSS‬ﻳﻚ ﻋﻨﺼﺮ را ﻣﻲ دﻫﺪ‪ ،‬ﻧﻮار ‪ CSS‬اﺻﻠﻲ‬
‫اﺟﺎزه دﻳﺪن ﻛﻞ ﻓﺎﻳﻞ ‪ CSS‬را ﻣﻲ دﻫﺪ‪ .‬ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي ﻟﻴﺴﺖ ﻓﺎﻳﻞ ﻫﺎ در‪ toolbar‬ﻫﻤﻪ ‪CSS‬ﻫﺎي ﻛﻪ ﺑﻪ‬
‫ﺻﻔﺤﻪ اﺿﺎﻓﻪ )‪ (imported‬ﺷﺪه اﻧﺪ را ﺧﻮاﻫﻴﺪ دﻳﺪ‪.‬‬

‫ﺗﻮﺳﻌﻪ راﺣﺖ ﺑﺮﻧﺎﻣﻪ وب‬

‫ﺑﺮاي ﺑﺴﻴﺎري از ﻣﺎ‪ Copy ،‬و ‪ Paste‬ﻣﻬﻤﺘﺮﻳﻦ ﻗﺴﻤﺖ ﻫﺮ ﺗﻮﺳﻌﻪ اﺳﺖ‪ .‬ﻓﺎﻳﺮﺑﺎگ‪ ،‬ﻛﭙﻲ دو ﻋﻨﺼﺮ ﻣﻬﻢ را آﺳﺎن‬
‫ﻛﺮده اﺳﺖ‪ URL ،‬ﺗﺼﻮﻳﺮ و رﻧﮓ‪ .‬ﻓﻘﻂ ﺑﺎ ﻛﻠﻴﻚ راﺳﺖ ﻣﻨﻮﻳﻲ ﺑﺎ اﻣﻜﺎﻧﺎت ‪clipboard‬ي ﺧﻮاﻫﻴﺪ دﻳﺪ‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  116‬ﻓﺼﻞ ‪5‬‬

‫ﻃﺮح ﺑﻨﺪي ﻗﺎﻟﺐ )‪(CSS Layout‬‬

‫زﻣﺎﻧﻲ ﻛﻪ ﺟﻌﺒﻪ ‪ CSS‬ﺷﻤﺎ ﺑﻪ درﺳﺘﻲ ﻃﺮح ﺑﻨﺪي ﻧﺸﺪه ﺑﺎﺷﺪ ﻓﻬﻤﻴﺪن دﻟﻴﻞ ﻣﺸﻜﻞ ﻛﻤﻲ ﺳﺨﺖ اﺳﺖ‪ .‬اﺟﺎزه ﺑﺪﻫﻴﺪ‬
‫ﻓﺎﻳﺮﺑﺎگ ﭼﺸﻤﺎن ﺷﻤﺎ ﺑﺎﺷﺪ و ‪ padding ،margin ،offset‬و‪ size‬را ﺑﺮاي ﺷﻤﺎ ﺗﻮﺿﻴﺢ دﻫﺪ‪.‬‬

‫ﺟﻌﺒﻪ ﻧﻤﺎﻳﺸﻲ ‪CSS‬‬

‫ﺑﺎ ‪ ،CSS‬ﻫﻤﻪ ﻋﻨﺎﺻﺮ ﺑﻪ ﺻﻮرت ﺟﻌﺒﻪ ﻫﺎي ﺗﻮدرﺗﻮ ﭼﻴﺪه ﻣﻲ ﺷﻮﻧﺪ‪ .‬ﺑﺎ ﺣﺮﻛﺖ ﻣﻮس ﺑﺮ روي ﻳﻚ ﻋﻨﺼﺮ ‪ HTML‬در‬
‫ﻫﺮ ﻳﻚ از ﻧﻮارﻫﺎي ﻓﺎﻳﺮﺑﺎگ‪ ،‬ﺟﻌﺒﻪ ﻫﺎي ﻋﻨﺼﺮ را ﻛﻪ ﺑﺎ رﻧﮓ ﻣﺘﻔﺎوﺗﻲ ﻣﺸﺨﺺ ﻣﻲ ﺷﻮﻧﺪ ﺧﻮاﻫﻴﺪ دﻳﺪ‪ .‬روش‬
‫ﺳﺮﻳﻌﺘﺮ ﺑﺮاي ﺗﻤﺎﻳﺰ ﺑﺼﺮي ﺑﻴﻦ ‪ Padding‬و ‪margin‬ﻫﺎ وﺟﻮد ﻧﺪارد‪.‬‬
‫ﻣﻮﻗﻌﻴﺖ ﻟﺒﻪ ﻫﺎي ﺟﻌﺒﻪ ﻫﺎ‬
‫‪ Layout‬ﻳﻚ ﻣﺪل ﺟﻌﺒﻪ ي ﺑﺮاي ﻧﻤﺎﻳﺶ ﻟﺒﻪ ﻫﺎي ﻣﺤﻴﻂ ﻫﺎي ‪ Padding‬و ‪ margin‬اراﺋﻪ ﻣﻲ ﻛﻨﺪ ﺑﻌﻼوه‪،‬‬
‫ﺑﻪ ﺷﻤﺎ ﻃﻮل و ﻋﺮض ﺟﻌﺒﻪ داﺧﻠﻲ ﺗﺮ را ﻣﻲ دﻫﺪ‪ ،‬و آﻓﺴﺖ ‪ x‬و ‪ y‬ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ از ﻋﻨﺼﺮ ﭘﺪر را ﻣﻲ دﻫﺪ‪.‬‬

‫ﺧﻂ ﻛﺶ راﻫﻨﻤﺎ‬
‫ﻣﻮﺳﺘﺎن را در ﻧﻮار ‪ Layout‬اﻃﺮاف ﺟﻌﺒﻪ ﻫﺎ ﺣﺮﻛﺖ دﻫﻴﺪ‪ ،‬ﺑﺎ اﻧﺠﺎم اﻳﻦ ﻛﺎر‪ ،‬ﺧﻂ ﻛﺶ ﻫﺎ و راﻫﻨﻤﺎﻳﻲ ﻫﺎ در‬
‫ﺻﻔﺤﻪ ﻇﺎﻫﺮ ﻣﻲ ﺷﻮﻧﺪ‪ .‬ﺑﺎ اﻳﻦ ﻛﺎر ﻣﻮﻗﻌﻴﺖ ﻋﻨﺎﺻﺮ را ﺧﻮاﻫﻴﺪ دﻳﺪ‪.‬‬
‫ﻓﺼﻞ ‪117  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫اﺷﻜﺎل زداﺋﻲ ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫ﻓﺎﻳﺮﺑﺎگ ﺷﺎﻣﻞ ﻳﻚ دﻳﺒﺎﮔﺮ ﻗﻮي ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﺑﻪ ﺷﻤﺎ اﺟﺎزه ﺗﻮﻗﻒ اﺟﺮا را در ﻫﺮ زﻣﺎن و ﺗﻤﺎﺷﺎي‬
‫اﻳﻨﻜﻪ ﻫﺮ ﻣﺘﻐﻴﺮ ﭼﻪ ﻣﻘﺪاري دارد را ﻣﻲ دﻫﺪ‪.‬‬

‫ﻳﺎﻓﺘﻦ آﺳﺎن اﺳﻜﺮﻳﭙﺘﻬﺎ‬

‫ﺻﻔﺤﺎت وب ﺗﺮﻛﻴﺒﻲ از ﭼﻨﺪﻳﻦ ﻓﺎﻳﻞ ﻣﻲ ﺑﺎﺷﻨﺪ‪ ،‬ﻳﺎﻓﺘﻦ ﻫﺮ ﻳﻚ از آن ﻫﺎ ﺑﺮاي دﻳﺒﺎگ ﻛﺎر ﺳﺨﺘﻲ ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫اﻧﺘﺨﺎﺑﮕﺮ ﻓﺎﻳﻞ اﺳﻜﺮﻳﭙﺘﻲ ﻓﺎﻳﺮﺑﺎگ‪ ،‬ﻓﺎﻳﻞ ﻫﺎ را داﺧﻞ ﻳﻚ ﻟﻴﺴﺖ ﻣﺮﺗﺐ و ﺳﺎزﻣﺎﻧﺪﻫﻲ ﻣﻲ ﻛﻨﺪ ﻛﻪ ﺑﺮاي دﺳﺘﺮﺳﻲ‬
‫ﺳﺮﻳﻊ ﺑﻪ ﻫﺮ ﻳﻚ از ﻓﺎﻳﻠﻬﺎ ﻛﻤﻚ ﻣﻲ ﻛﻨﺪ‪.‬‬

‫ﻣﺘﻮﻗﻒ ﻛﺮدن اﺟﺮا در ﻫﺮ زﻣﺎﻧﻲ‬

‫ﻓﺎﻳﺮﺑﺎگ ﺑﻪ ﺷﻤﺎ اﺟﺎزه ﻣﻲ دﻫﺪ ﻧﻘﺎط ﺗﻮﻗﻒ اﺟﺮا )‪ (breakpoints‬را ﺗﻨﻈﻴﻢ ﻛﻨﻴﺪ‪ ،‬ﻫﻨﮕﺎم رﺳﻴﺪن دﻳﺒﺎﮔﺮ ﺑﻪ آن‬
‫ﻧﻘﻄﻪ ﺧﺎص اﺟﺮاي ﻛﺪ‪ ،‬ﻣﺘﻮﻗﻒ ﻣﻲ ﺷﻮد‪ .‬ﺗﺎ زﻣﺎﻧﻲ ﻛﻪ اﺟﺮا ﻣﺘﻮﻗﻒ ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﻘﺪار ﻫﺮ ﻳﻚ از ﻣﺘﻐﻴﺮ ﻫﺎ‬
‫را ﻣﺸﺎﻫﺪه ﻛﺮده و ﺗﺎ زﻣﺎﻧﻲ ﻛﻪ اﺷﻴﺎ ﺑﺪون ﺗﻐﻴﻴﺮ ﻣﻲ ﺑﺎﺷﻨﺪ ﻣﻲ ﺗﻮان آن ﻫﺎ را ﺑﺮرﺳﻲ ﻛﺮد‪ .‬ﺑﺮاي ﺗﻨﻈﻴﻢ ﻧﻘﺎط ﺗﻮﻗﻒ‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  118‬ﻓﺼﻞ ‪5‬‬

‫اﺟﺮا‪ ،‬ﻓﻘﻂ ﺑﺮ روي ﺷﻤﺎره ﺧﻂ ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪ ،‬ﻳﻚ ﻧﻘﻄﻪ ﻗﺮﻣﺰ ﺑﺮاي ﻧﻤﺎﻳﺶ اﻳﻨﻜﻪ ﻧﻘﻄﻪ ﺗﻮﻗﻒ ﺗﻨﻈﻴﻢ ﺷﺪه ﻇﺎﻫﺮ ﻣﻲ‬
‫ﺷﻮد‪ .‬ﺑﺮاي ﺣﺬف ﻧﻘﻄﻪ ﺗﻮﻗﻒ دوﺑﺎره ﺑﺮ روي ﻧﻘﻄﻪ ﻗﺮﻣﺰ ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪.‬‬

‫ﺗﻮﻗﻒ ﺷﺮﻃﻲ اﺟﺮا‬

‫اﮔﺮ ﻧﻘﺎط ﺗﻮﻗﻒ را ﻫﺮ ﺑﺎر ﺑﺒﻴﻨﻴﺪ‪ ،‬آزار دﻫﻨﺪه ﺧﻮاﻫﻨﺪ ﺑﻮد‪ .‬ﺑﻌﻀﻲ اوﻗﺎت ﺷﻤﺎ در ﺣﺎﻟﺖ ﺧﺎﺻﻲ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻛﻪ‬
‫ﺗﻮﻗﻒ داﺷﺘﻪ ﺑﺎﺷﻴﺪ‪ .‬ﻓﺎﻳﺮﺑﺎگ ﺑﻪ ﺷﻤﺎ اﺟﺎزه ﻣﻲ دﻫﺪ ﻛﻪ ﺑﺮاي ﻧﻘﺎط ﺗﻮﻗﻒ ﺷﺮط ﻗﺮار دﻫﻴﺪ‪ ،‬ﻛﻪ ﺑﺎﻳﺴﺘﻲ ﻋﺒﺎرﺗﻲ را‬
‫ﺑﺮاي ﺗﻮﻗﻒ ﭼﻚ ﻛﻨﻨﺪ‪ .‬ﺑﺮاي ﺗﻨﻈﻴﻢ ﺷﺮط ﻧﻘﺎط ﺗﻮﻗﻒ ﺗﻨﻬﺎ ﻛﺎﻓﻲ اﺳﺖ ﻛﻪ ﺑﺮ روي ﻫﺮ ﺷﻤﺎره ﺧﻂ راﺳﺖ‪ -‬ﻛﻠﻴﻚ‬
‫ﻛﻨﻴﺪ‪ .‬ﺣﺒﺎﺑﻲ ﻇﺎﻫﺮ ﺧﻮاﻫﺪ ﺷﺪ ﻛﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ داﺧﻞ آن ﻋﺒﺎرت ﺟﺎوااﺳﻜﺮﻳﭙﺘﺘﺎن را وارد ﻛﻨﻴﺪ‪ .‬ﺑﺮاي ﺗﻐﻴﻴﺮ ﻋﺒﺎرت‬
‫ﺷﺮﻃﻲ ﻣﻲ ﺗﻮاﻧﻴﺪ دوﺑﺎره راﺳﺖ‪-‬ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪ ،‬و ﻳﺎ ﺑﺮاي ﺣﺬف ﻋﺒﺎرات از ﻛﻠﻴﻚ ﭼﭗ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬

‫ﻳﻚ ﮔﺎم در ﻳﻚ زﻣﺎن )‪(trace‬‬

‫زﻣﺎﻧﻲ ﻛﻪ دﻳﺒﺎﮔﺮ ﺗﻮﻗﻒ ﻣﻲ ﻛﻨﺪ‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ اﺟﺮا را ﺑﻪ ﺻﻮرت ﻳﻚ ﺧﻂ در ﻳﻚ زﻣﺎن اداﻣﻪ دﻫﻴﺪ‪ .‬اﻳﻦ ﻣﻮﺿﻮع ﺑﻪ‬
‫ﺷﻤﺎ اﺟﺎزه ﻣﻲ دﻫﺪ ﻛﻪ از وﺿﻌﻴﺖ ﻣﺘﻐﻴﺮﻫﺎ و اﺷﻴﺎ‪ ،‬زﻣﺎﻧﻲ ﻛﻪ ﺧﻂ ﺧﺎﺻﻲ اﺟﺮا ﻣﻲ ﺷﻮد اﻃﻼع داﺷﺘﻪ ﺑﺎﺷﻴﺪ‪.‬‬
‫ﻫﻤﭽﻨﻴﻦ ﻣﻲ ﺗﻮاﻧﻴﺪ اﺟﺮاي ﮔﺎم ﺑﻪ ﮔﺎم ﺑﻴﺶ از ﻳﻚ ﺧﻂ را اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪ .‬از ﻣﻨﻮي ‪ ،context‬ﮔﺰﻳﻨﻪ ‪"Run‬‬
‫"‪ to this Line‬ﺑﺮاي اداﻣﻪ اﺟﺮاي ﺗﺎ زﻣﺎﻧﻲ ﻛﻪ ﺑﻪ ﺧﻂ ﻣﻮرد ﻧﻈﺮ ﺷﻤﺎ ﺑﺮﺳﺪ را اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪.‬‬
‫ﻓﺼﻞ ‪119  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫ﭘﺸﺘﻪ زﻣﺎن اﺟﺮا‬

‫زﻣﺎﻧﻲ ﻛﻪ دﻳﺒﺎﮔﺮ ﻣﺘﻮﻗﻒ اﺳﺖ‪ ،‬ﻓﺎﻳﺮﺑﺎگ ﺑﻪ ﺷﻤﺎ ﭘﺸﺘﻪ ﻓﺮاﺧﻮاﻧﻲ را ﻧﺸﺎن ﻣﻲ ﻫﺪ‪ ،‬ﻛﻪ ﻣﺠﻤﻮﻋﻪ اي از ﺗﻮاﺑﻊ ﺗﻮدرﺗﻮ‬
‫ﻓﺮاﺧﻮاﻧﻲ ﺷﺪه ﻛﻪ اﻛﻨﻮن در ﺣﺎل اﺟﺮا و ﻣﻨﺘﻈﺮ اﺗﻤﺎم ﻣﻲ ﺑﺎﺷﻨﺪ را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ .‬ﭘﺸﺘﻪ ﻓﺮاﺧﻮاﻧﻲ ﺑﻪ ﺻﻮرت ﺗﺮﻛﻴﺒﻲ‬
‫از دﻛﻤﻪ ﻫﺎ ﻛﻪ ﻫﺮ ﻳﻚ ﻧﺎم ﻳﻚ ﺗﺎﺑﻊ در ﭘﺸﺘﻪ را ﺑﺮ ﺧﻮد دارﻧﺪ در ‪ toolbar‬ﻧﺸﺎن داده ﻣﻲ ﺷﻮد‪ .‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮاي‬
‫رﻓﺘﻦ ﺑﻪ ﻣﺤﻠﻲ ﻛﻪ ﺗﺎﺑﻌﻲ در آن ﺟﺎ ﺗﻮﻗﻒ ﻛﺮده ﺑﺮ روي دﻛﻤﻪ ﺑﺎ ﻧﺎم آن ﺗﺎﺑﻊ ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪ ،‬و ﺗﻮاﺑﻊ ﻣﺤﻠﻲ آن ﺗﺎﺑﻊ را‬
‫ﺑﺒﻴﻨﻴﺪ‪.‬‬

‫ﭘﻨﺠﺮه ‪Watch‬‬
‫در ﻃﻮل دﻳﺒﺎگ‪ ،‬ﻣﻲ ﺧﻮاﻫﻴﺪ ﻣﻘﺪار ﻋﺒﺎرات ﭘﻴﭽﻴﺪه و ﻳﺎ اﺷﻴﺎﺋﻲ ﻛﻪ داﺧﻞ ‪ DOM‬ﻣﻲ ﺑﺎﺷﻨﺪ را ﺑﺒﻴﻨﻴﺪ‪ .‬ﻓﺎﻳﺮﺑﺎگ ﺑﻪ‬
‫ﺷﻤﺎ اﺟﺎزه ﻣﻲ دﻫﺪ ﻛﻪ ﻋﺒﺎرات ﺟﺎوااﺳﻜﺮﻳﭙﺘﻲ را ﻛﻪ ﻫﻨﮕﺎم دﻳﺒﺎگ ﻣﻘﺎدﻳﺮﺷﺎن ﺑﺮوز ﻣﻲ ﺷﻮد را ﺑﻨﻮﻳﺴﻴﺪ‪ .‬ﻫﻨﮕﺎم‬
‫ﻧﻮﺷﺘﻦ اﻳﻦ ﻋﺒﺎرات‪ ،‬ﻓﺮاﻣﻮش ﻧﻜﻨﻴﺪ ﻛﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ از ﻛﻠﻴﺪ ‪ tab‬ﺑﺮاي اﻧﺘﺨﺎب ﺧﺎﺻﻴﺖ ﺷﻲ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬

‫‪ Tooltip‬ﻣﺘﻐﻴﺮﻫﺎ‬
‫زﻣﺎﻧﻲ ﻛﻪ دﻳﺒﺎﮔﺮ ﻣﺘﻮﻗﻒ ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﻮس را ﺑﺮ روي ﻫﺮ ﻳﻚ از ﻣﺘﻐﻴﺮﻫﺎ ﺗﺎﺑﻊ در ﺣﺎل اﺟﺮا ﺑﺮده ﺗﺎ ﻣﻘﺪار‬
‫آن ﻫﺎ را ﺑﻪ ﺻﻮرت ‪ tooltip‬ﺑﺒﻴﻨﻴﺪ‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  120‬ﻓﺼﻞ ‪5‬‬

‫ﻛﺎرآﻳﻲ ﻛﺪ ﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ‬

‫ﺑﺎ اﺳﺘﻔﺎده از ‪ profiler‬ﺑﺮﻧﺎﻣﻪ ﻓﺎﻳﺮﺑﺎگ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻛﺪﻫﺎي ﻛﻨﺪ را از ﻛﺪﻫﺎي ﺳﺮﻳﻊ ﺗﺸﺨﻴﺺ دﻫﻴﺪ‪ .‬ﺑﺮاي‬
‫اﺳﺘﻔﺎده از ‪ ،profiler‬ﺑﺎﻳﺴﺘﻲ ﺑﻪ ﻧﻮار ‪ Console‬رﻓﺘﻪ و ﺑﺮ روي ﻛﻠﻴﺪ ‪ profiler‬ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪ .‬ﺳﭙﺲ‬
‫ﺑﺮﻧﺎﻣﻪ ﺧﻮد را اﺟﺮا ﻛﻨﻴﺪ و ﻳﺎ ﺻﻔﺤﻪ را دوﺑﺎره ﻟﻮد ﻛﻨﻴﺪ و ﺳﭙﺲ دوﺑﺎره ﺑﺮ روي ﻛﻠﻴﺪ ‪ profiler‬ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪.‬‬
‫ﭘﺲ از آن ﮔﺰارش ﻣﻔﺼﻠﻲ از ﺗﻮاﺑﻊ ﻓﺮاﺧﻮاﻧﻲ ﺷﺪه و ﻣﺪت زﻣﺎن ﺻﺮف ﺷﺪه ﺑﺮاي اﺟﺮاﻳﺸﺎن را ﺧﻮاﻫﻴﺪ دﻳﺪ‪.‬‬

‫ﺑﺮرﺳﻲ ﻓﺮاﺧﻮاﻧﻲ ﻫﺎي ﻳﻚ ﺗﺎﺑﻊ‬

‫ﺑﺮﺧﻲ ﻣﻮاﻗﻊ ﺗﺎﺑﻊ ﻣﺸﻜﻞ داري ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد ﻛﻪ اﻏﻠﺐ اوﻗﺎت ﻧﻤﻲ ﺗﻮاﻧﻴﺪ ﺑﺮاي ﺣﻞ ﻣﺸﻜﻞ ﺑﻪ دﻳﺒﺎﮔﺮ ﺑﺮوﻳﺪ‪.‬‬
‫ﺷﻤﺎ ﺗﻨﻬﺎ ﻣﻲ ﺧﻮاﻫﻴﺪ ﺑﺪاﻧﻴﺪ ﻛﻪ اﻳﻦ ﺗﻮاﺑﻊ ﭼﻪ زﻣﺎﻧﻲ ﻓﺮاﺧﻮاﻧﻲ ﺷﺪه و ﻛﺪام ﭘﺎراﻣﺘﺮﻫﺎ ﺑﻪ آن ﻫﺎ ﭘﺎس داده ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
‫ﺑﺮاي ﭘﻴﮕﻴﺮي ﻫﻤﻪ ي ﻓﺮاﺧﻮاﻧﻲ ﻫﺎي ﻳﻚ ﺗﺎﺑﻊ‪ ،‬ﺑﻪ ﻧﻮار ‪ Script‬رﻓﺘﻪ و ‪"Log calls to 'function‬‬
‫"'‪ name‬را اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪ .‬ﺳﭙﺲ ﺑﻪ ﻧﻮار ‪ Console‬رﻓﺘﻪ و ﺟﺮﻳﺎن ﻓﺮاﺧﻮاﻧﻲ ﻫﺎي ﺗﺎﺑﻊ را ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪.‬‬

‫ﻣﺮاﺟﻌﻪ ﻣﺴﺘﻘﻴﻢ ﺑﻪ ﺧﻂ ﻣﺸﺨﺺ‬

‫ﮔﺎﻫﻲ اوﻗﺎت ﻣﻲ ﺧﻮاﻫﻴﺪ ﺑﻪ ﺻﻮرت ﻣﺴﺘﻘﻴﻢ ﺑﻪ ﺧﻂ ﺧﺎﺻﻲ از اﺳﻜﺮﻳﭙﺖ ﺗﺎن ﺑﺮوﻳﺪ‪ .‬اﻧﺠﺎم اﻳﻦ ﻛﺎر زﻳﺎد آﺳﺎن‬
‫ﻧﺨﻮاﻫﺪ ﺑﻮد‪ .‬ﺑﺮاي اﻳﻦ ﻛﺎر ﺗﻨﻬﺎ ﺷﻤﺎره ﺧﻂ ﻛﻪ ﻗﺒﻞ از آن ﻋﻼﻣﺖ ‪ #‬ﻗﺮار دارد را در ﺟﻌﺒﻪ ﺟﺴﺘﺠﻮي ﺳﺮﻳﻊ وارد‬
‫ﻛﻨﻴﺪ‪.‬‬
‫ﻓﺼﻞ ‪121  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫ﻧﻈﺎرت ﺑﺮ ﺷﺒﻜﻪ)‪(Network Monitoring‬‬

‫ﺑﻌﻀﻲ از ﺻﻔﺤﺎت زﻣﺎن زﻳﺎدي ﺑﺮاي ﻟﻮد ﺷﺪن اﺣﺘﻴﺎج دارﻧﺪ‪ ،‬اﻣﺎ ﺑﻪ ﭼﻪ دﻟﻴﻞ؟ آﻳﺎ ﻛﺪﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺖ زﻳﺎدي‬
‫ﻧﻮﺷﺘﻪ اﻳﺪ؟ آﻳﺎ ﻓﺮاﻣﻮش ﻛﺮده اﻳﺪ ﻛﻪ ﺗﺼﺎوﻳﺮﺗﺎن را ﻓﺸﺮده ﻛﻨﻴﺪ؟ آﻳﺎ ﻣﺸﻜﻞ از ﺳﺮور ﺷﻤﺎ ﻣﻲ ﺑﺎﺷﺪ؟ ﻓﺎﻳﺮﺑﺎگ ﻳﻚ‬
‫ﺑﻪ ﻳﻚ ﻓﺎﻳﻞ ﻫﺎ را ﺑﺮاﻳﺘﺎن ﺑﺮرﺳﻲ ﻣﻲ ﻛﻨﺪ‪.‬‬

‫ﻣﺸﺎﻫﺪه زﻣﺎن ﺑﺎر ﺷﺪن ﺻﻔﺤﺎت‬

‫ﻫﺮ ﻓﺎﻳﻠﻲ در ﺑﺨﺶ ‪ Net‬داري ﻳﻚ ﻣﻴﻠﻪ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﻧﺸﺎن دﻫﻨﺪه ﻣﺪت زﻣﺎن ﺷﺮوع و ﭘﺎﻳﺎن ﻟﻮد ﺷﺪن آن ﻓﺎﻳﻞ‬
‫ﻧﺴﺒﺖ ﺑﻪ ﻓﺎﻳﻞ ﻫﺎي دﻳﮕﺮ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل‪ ،‬ﺷﻤﺎ ﻣﻲ داﻧﻴﺪ ﻛﻪ ﻓﺎﻳﻞ ﻫﺎي ﺟﺎوااﺳﻜﺮﻳﭙﺘﻲ ﺗﻨﻬﺎ ﻳﻚ ﺑﺎر ﻟﻮد ﻣﻲ‬
‫ﺷﻮﻧﺪ‪ .‬اﻳﻦ ﻗﺴﻤﺖ ﺑﻪ ﺷﻤﺎ ﻛﻤﻚ ﻣﻲ ﻛﻨﺪ ﺗﺎ ﺗﺮﺗﻴﺐ ﻟﻮد ﺷﺪن ﻓﺎﻳﻞ ﻫﺎ در ﺻﻔﺤﻪ را ﻣﺸﺎﻫﺪه ﻧﻤﺎﻳﺪ‪.‬‬

‫ﺗﻘﺴﻴﻢ ﺑﻨﺪي ﺑﺮاﺳﺎس ﻧﻮع‬

‫ﺑﺮﺧﻲ اوﻗﺎت درﺑﺎره ﺑﻌﻀﻲ از اﻧﻮاع ﻓﺎﻳﻞ ﻫﺎ ﻧﮕﺮاﻧﻲ دارﻳﺪ‪ ،‬ﻣﺎﻧﻨﺪ ﺟﺎوااﺳﻜﺮﻳﭙﺖ و ﻳﺎ ﺗﺼﺎوﻳﺮ‪ .‬ﺑﺮاي ﻓﻴﻠﺘﺮ ﻛﺮدن ﻧﻮع‬
‫ﻣﻮرد ﻧﻈﺮﺗﺎن در ﻧﻮار اﺑﺰار ‪ Net‬ﺑﺮ روي آن ﻧﻮع ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪ .‬اﻳﻦ ﻣﻮرد روش ﻣﻨﺎﺳﺒﻲ ﺑﺮاي ﭘﻲ ﺑﺮدن ﺑﻪ زﻣﺎن‬
‫داﻧﻠﻮد ﺑﺮاي ﻫﺮ ﻛﺪام از اﻧﻮاع ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  122‬ﻓﺼﻞ ‪5‬‬

‫ﺣﺎﻓﻈﻪ ﻛﺶ )‪ (cache‬ﺳﺎﻳﺖ‬
‫ﻫﻤﻪ درﺧﻮاﺳﺖ ﻫﺎي ﺷﺒﻜﻪ اي ﻳﻜﺴﺎن ﻧﻤﻲ ﺑﺎﺷﻨﺪ‪ -‬ﺑﺮﺧﻲ از آﻧﻬﺎ ﺑﻪ ﺟﺎي ﺷﺒﻜﻪ از ﻗﺴﻤﺖ ﻛﺶ ﻣﺮورﮔﺮ ﻟﻮد ﻣﻲ‬
‫ﺷﻮﻧﺪ‪ .‬ﻓﺎﻳﺮﺑﺎگ درﺧﻮاﺳﺘﻬﺎي را ﻛﻪ از ﻛﺶ ﻟﻮد ﻣﻲ ﺷﻮﻧﺪ را ﺧﺎﻛﺴﺘﺮي روﺷﻦ ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ ﺑﻨﺎﺑﺮاﻳﻦ ﺑﻪ راﺣﺘﻲ‬
‫ﻣﻲ ﺗﻮاﻧﻴﺪ ﺗﺎﺛﻴﺮ ﻛﺶ را ﺑﺮ روي ﺳﺎﻳﺘﺘﺎن ﺑﺒﻴﻨﻴﺪ‪.‬‬

‫ﻣﺸﺎﻫﺪه ﻫﺪر ﻫﺎي ‪HTTP‬‬

‫ﻫﺪر ‪ HTTP‬ﺷﺎﻣﻞ اﻃﻼﻋﺎت ﺟﺎﻟﺒﻲ ﻣﺎﻧﻨﺪ ﻧﻮع ‪ mime‬ﻓﺎﻳﻞ‪ ،‬ﻧﻮع وب ﺳﺮور‪ ،‬ﻛﺶ ﻣﺴﺘﻘﻴﻢ‪ ،‬ﻛﻮﻛﻲ ﻫﺎ و ﻣﻮارد‬
‫دﻳﮕﺮ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺑﺮاي دﻳﺪن ﻫﺪر ‪ HTTP‬ﺑﺮ روي ﭘﻴﻜﺎن ﺳﻤﺖ ﭼﭗ ﻫﺮ درﺧﻮاﺳﺖ ﻛﻠﻴﻚ ﻛﻨﻴﺪ ﺗﺎ ﻧﻤﺎﻳﺶ داده‬
‫ﺷﻮﻧﺪ‪.‬‬

‫ﻧﻈﺎرت ﺑﺮ ﺷﻲ ‪XMLHttpRequest‬‬
‫ﭘﺪﻳﺪه ‪ Ajax‬ﺣﻮل ﻣﺤﻮر ﺷﻲ ﻛﻮﭼﻜﻲ ﺑﻪ ﻧﺎم ‪ XMLHttpRequest‬ﻣﻲ ﭼﺮﺧﺪ‪ .‬ﺟﺎﻟﺐ ﻧﺨﻮاﻫﺪ ﺑﻮد اﮔﺮ اﻳﻦ‬
‫درﺧﻮاﺳﺖ را ارﺳﺎل ﻛﺮده و ﻫﻴﭻ ﺑﺎزﺧﻮرد ﺑﺼﺮي از آن درﻳﺎﻓﺖ ﻧﺸﻮد‪ .‬ﻓﺎﻳﺮﺑﺎگ ﻫﻤﻪ ‪ XMLHttpRequest‬را‬
‫در ﻧﻮارﻫﺎي ‪ Console‬و ‪ Net‬ﺑﻪ ﻫﻤﺮاه ﻧﻮﺷﺘﻪ اي ﻛﻪ ارﺳﺎل ﺷﺪه و ﻧﻮﺷﺘﻪ اي ﻛﻪ درﻳﺎﻓﺖ ﺷﺪه ﺑﻪ ﺷﻤﺎ ﻧﺸﺎن ﻣﻲ‬
‫دﻫﺪ‪.‬‬
‫ﻓﺼﻞ ‪123  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫دﻳﺒﺎگ ﻫﻨﺮ ﺗﺸﺨﻴﺺ و ﺑﺮﻃﺮف ﺳﺎزي ﻣﺸﻜﻼت ﻛﺪ ﺑﺮﻧﺎﻣﻪ ﺗﺎن ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻫﻤﻪ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﺎن ﺑﻌﻀﻲ اوﻗﺎت در ﺣﻴﻦ‬
‫ﺗﻮﺳﻌﻪ ﺑﺮﻧﺎﻣﻪ اﺣﺘﻴﺎج ﺑﻪ ﻳﻚ درﺟﻪ از دﻳﺒﺎگ ﺑﺮﻧﺎﻣﻪ ﻫﺎﻳﺸﺎن ﺧﻮاﻫﻨﺪ داﺷﺖ‪.‬‬
‫‪ Asp.Net‬ﺑﻪ ﺗﻜﻨﻮﻟﻮژي ﺳﻤﺖ ﺳﺮور ﻣﺴﻠﺢ ﺑﻮده و ﺑﻪ ﺻﻮرت وﺳﻴﻊ از دﻳﺒﺎگ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪ ASP.Net‬ﺣﻤﺎﻳﺖ‬
‫ﻣﻲ ﻛﻨﺪ‪ .‬ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬ي ﺟﻨﺒﻪ ﻫﺎي ﺟﺪﻳﺪي را ﻣﻄﺮح ﻛﺮدﻧﺪ ﻛﻪ دﻳﺒﺎگ ﺑﺮﻧﺎﻣﻪ ﻫﺎ را ﺑﺴﻴﺎر ﭘﻴﭽﻴﺪه ﻛﺮده‬
‫اﺳﺖ‪ .‬اﺳﺘﻔﺎده وﺳﻴﻊ از ﺟﺎوااﺳﻜﺮﻳﭙﺖ و اﻳﻦ ﺣﻘﻴﻘﺖ ﻛﻪ داده ﺳﻔﺎرﺷﻲ ﺑﺎ اﺳﺘﻔﺎده از اﻧﺘﻘﺎل ﻏﻴﺮ ﻫﻤﺰﻣﺎن ارﺳﺎل ﻣﻲ‬
‫ﺷﻮد ﺑﻪ اﻳﻦ ﻣﻌﻨﻲ ﺧﻮاﻫﺪ ﺑﻮد ﻛﻪ ﺑﺎ ﭼﺎﻟﺶ ﺟﺪﻳﺪي ﻫﻨﮕﺎم دﻳﺒﺎگ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬ي در ‪ ASP.NET‬روﺑﺮو‬
‫ﺧﻮاﻫﻴﺪ ﺷﺪ‪.‬‬
‫در اﻳﻦ ﺑﺨﺶ ﺑﻪ روش دﻳﺒﺎگ ﺟﺎوااﺳﻜﺮﻳﭙﺖ از ﻃﺮﻳﻖ ‪ ASP.NET‬ﺳﻤﺖ ﺳﺮور ﺧﻮاﻫﻴﻢ ﭘﺮداﺧﺖ‪.‬‬
‫دﻳﺒﺎگ ﺳﻤﺖ ﺳﺮور‬
‫‪ ASP.Net‬ﻣﺤﻴﻂ ﺗﻮﺳﻌﻪ ﺳﻤﺖ ﺳﺮور ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻣﻮﺗﻮر ‪ runtime‬در ‪ ASP.NET‬ﺑﻪ ﺻﻮرت ﻣﺠﺎزي ﻫﻤﻪ‬
‫ﺻﻔﺤﺎت و ﻛﺪﻫﺎي اﺳﻤﺒﻠﻲ ‪ .NET‬را ﺗﺠﺰﻳﻪ و ﻛﺎﻣﭙﺎﻳﻞ ﻣﻲ ﻛﻨﺪ‪.‬‬
‫)ﻣﺎﻧﻨﺪ‪www.SomeSite.com/‬‬ ‫ﺷﻮد‬ ‫ﻣﻲ‬ ‫درﺧﻮاﺳﺖ‬ ‫‪ASP.NET‬‬ ‫وب‬ ‫ﺻﻔﺤﻪ‬ ‫زﻣﺎﻧﻴﻜﻪ‬
‫‪ ،( SomePage.aspx‬ﻣﻮﺗﻮر ‪ runtime‬ﻣﻮﺟﻮد در ‪ ASP.NET‬ﺻﻔﺤﻪ وب و ﻛﺪﻫﺎي ﻛﻪ ﺑﺎ آن در ارﺗﺒﺎط‬
‫ﻣﻲ ﺑﺎﺷﻨﺪ را ﺗﺠﺰﻳﻪ ﻣﻲ ﻛﻨﺪ‪ .‬اﻳﻦ ﻛﺪﻫﺎ ﻣﻌﻤﻮﻻ در ﻳﻚ ﻓﺎﻳﻞ ﻛﺪ در داﻳﺮﻛﺘﻮري ‪ App_Code‬وب ﺳﺎﻳﺖ ﻗﺮار‬
‫دارﻧﺪ‪ ،‬ﻳﺎ اﻳﻨﻜﻪ ﻣﻲ ﺗﻮاﻧﻨﺪ در ﺧﻮد ﺻﻔﺤﻪ وب )‪ ( ASPX‬ﺟﺎﮔﺬاري ﺷﻮﻧﺪ‪ .‬ﺻﻔﺤﻪ وب و ﻛﺪ ﻫﺎ در ﻳﻚ اﺳﻤﺒﻠﻲ‬
‫‪ .NET‬ﻛﺎﻣﭙﺎﻳﻞ ﺷﺪه و ﺑﺮاي اﺟﺮا داﺧﻞ ﻛﺶ )‪ (cache‬اﺳﻤﺒﻠﻲ ﻟﻮد ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
‫ﻓﻌﺎل ﺳﺎزي ﺑﺮا ي ﭘﺸﺘﻴﺒﺎﻧﻲ از دﻳﺒﺎگ‬
‫ﻗﺒﻞ از اﻳﻨﻜﻪ ﺑﺘﻮان از دﻳﺒﺎگ اﺳﺘﻔﺎده ﻛﺮد ﭘﺸﺘﻴﺒﺎﻧﻲ از دﻳﺒﺎگ ﻧﻴﺎز ﺑﻪ ﻓﻌﺎل ﺳﺎزي دارد‪ .‬در ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب‬
‫‪ ،ASP.NET‬ﺑﺮاي رﺳﻴﺪن ﺑﻪ اﻳﻦ ﻣﻨﻈﻮر ﺑﺎﻳﺴﺘﻲ ﺑﻪ ﺻﻮرت زﻳﺮ در ﻓﺎﻳﻞ ﭘﻴﻜﺮﺑﻨﺪي ﺑﺮﻧﺎﻣﻪ وب )‪(web.config‬‬
‫ﺗﻨﻈﻴﻤﺎت زﻳﺮ را اﻋﻤﺎل ﻛﺮد‪:‬‬
‫>‪<configuration‬‬
‫>‪<system.web‬‬
‫>”‪<compilation debug=“true‬‬
‫>‪</compilation‬‬
‫>‪</system.web‬‬
‫>‪</configuration‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  124‬ﻓﺼﻞ ‪5‬‬

‫در ﺻﻮرﺗﻴﻜﻪ ﺑﺨﻮاﻫﻴﺪ ﺑﺮﻧﺎﻣﻪ وب را ﺑﺎ اﺳﺘﻔﺎده از ‪ Visual Studio .NET 2005‬در ﺣﺎﻟﺖ دﻳﺒﺎگ اﺟﺮا‬
‫ﻛﻨﻴﺪ‪ ،‬و ﭘﻴﻜﺮﺑﻨﺪي >”‪ <compilation debug=“true‬ﺗﻨﻈﻴﻢ ﻧﺸﺪه ﺑﺎﺷﺪ‪ ،‬ﺷﻤﺎ ﺑﺎﻳﺪ آن را ﻓﻌﺎل ﺑﺎ ﻣﻘﺪار‬
‫‪ true‬ﺗﻨﻈﻴﻢ ﻛﻨﻴﺪ‪:‬‬

‫ﺑﺮاي ﺑﺮﻧﺎﻣﻪ ﻫﺎي دﻳﮕﺮ ﻣﺎﻧﻨﺪ ﻛﺘﺎﺑﺨﺎﻧﻪ ﻫﺎي ﻛﻼﺳﻲ‪ ،‬ﺑﺎﻳﺴﺘﻲ ﻣﺎﻧﻨﺪ ﺷﻜﻞ زﻳﺮ در ﻓﺎﻳﻞ ﭘﻴﻜﺮﺑﻨﺪي ‪ debug‬اﻧﺘﺨﺎب‬
‫ﺷﻮد‪.‬‬

‫در ﻫﺮﻳﻚ از اﻳﻦ ﺣﺎﻻت‪ ،‬زﻣﺎﻧﻲ ﻛﻪ ﻓﺎﻳﻞ ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻛﺎﻣﭙﺎﻳﻞ ﻣﻲ ﺷﻮﻧﺪ‪ ،‬اﻃﻼﻋﺎت ﺧﺎص دﻳﺒﺎگ ﺗﻮﻟﻴﺪ ﻣﻲ ﺷﻮﻧﺪ‬
‫ﻛﻪ دﻳﺒﺎﮔﺮ ‪ Visual Studio.NET‬را ﺑﺮاي ردﻳﺎﺑﻲ ﻓﻌﺎل ﺳﺎﺧﺘﻪ و دﻗﻴﻘﺎ ﻧﺸﺎن ﻣﻲ دﻫﻨﺪ ﻛﻪ ﻛﺪام ﺧﻂ در‬
‫ﺣﺎل اﺟﺮا ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻣﻲ ﺗﻮاﻧﻴﺪ اﻳﻦ ﻣﻮﺿﻮع را ﺑﺎ ﻧﮕﺎه ﺑﻪ داﻳﺮﻛﺘﻮري ﺧﺮوﺟﻲ ﺑﺮﻧﺎﻣﻪ اي ﻛﻪ ﻛﺎﻣﭙﺎﻳﻞ ﻣﻲ ﻛﻨﻴﺪ ﺑﺒﻴﻨﻴﺪ‪.‬‬
‫اﮔﺮ ‪ debug build‬اﻧﺘﺨﺎب ﺷﺪه ﺑﺎﺷﺪ‪ ،‬ﻳﺎ دﻳﺒﺎگ از ﻃﺮﻳﻖ ‪ web.config‬ﻫﻤﺎن ﻃﻮر ﻛﻪ ﻗﺒﻼ ﮔﻔﺘﻪ ﺷﺪ‬
‫ﺗﻨﻈﻴﻢ ﺷﺪه ﺑﺎﺷﺪ‪ ،‬آن ﺟﺎ ﻓﺎﻳﻞ ﻫﺎي ﻣﺮﺑﻮط ﺑﻪ دﻳﺒﺎگ ﻇﺎﻫﺮ ﺧﻮاﻫﺪ ﺷﺪ‪ ،‬ﻛﻪ ﭘﺴﻮﻧﺪ ﻓﺎﻳﻠﻲ ‪ .pdb‬را دارﻧﺪ‪ .‬ﺑﺮاي‬
‫ﻣﺜﺎل‪ ،‬اﮔﺮ ﺑﺮﻧﺎﻣﻪ ﺷﻤﺎ ‪ MyApp.exe‬را ﺗﻮﻟﻴﺪ ﻛﻨﺪ‪ ،‬ﻳﻚ ﻓﺎﻳﻞ ﻣﺘﻨﺎﻇﺮ ﺑﺎ آن ﺑﻪ ﻧﺎم ‪ MyApp.pdb‬اﻳﺠﺎد ﺧﻮاﻫﺪ‬
‫ﺷﺪ‪.‬‬
‫ﺗﻨﻈﻴﻢ ﻧﻘﺎط ﺗﻮﻗﻒ اﺟﺮا‬
‫ﺣﺎل ﻛﻪ دﻳﺒﺎگ ﻓﻌﺎل ﺷﺪه اﺳﺖ‪ ،‬اﺟﺮاي ﺑﺮﻧﺎﻣﻪ ﻫﺎ در ﺳﺮور ﻣﻲ ﺗﻮاﻧﻨﺪ ردﻳﺎﺑﻲ)‪ (track‬ﺷﻮﻧﺪ‪ .‬آﺳﺎن ﺗﺮﻳﻦ روش‬
‫ﺑﺮاي اﻳﻦ ﻛﺎر ﺗﻨﻈﻴﻢ ﻧﻘﺎط ﺗﻮﻗﻒ اﺟﺮا ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻧﻘﺎط ﺗﻮﻗﻒ اﺟﺮا ﻳﻚ ﺧﻂ ﻧﺸﺎﻧﺪار در ﻛﺪ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ ﺑﻪ دﻳﺒﺎﮔﺮ‬
‫اﻋﻼن ﺗﻮﻗﻒ اﺟﺮا در ﺧﻄﻲ ﻛﻪ ﺑﺎ ﻧﻘﻄﻪ ﺗﻮﻗﻒ اﺟﺮا ﻧﺸﺎﻧﺪار ﺷﺪه اﺳﺖ را ﻣﻲ دﻫﺪ‪ .‬ﻳﻚ ﻧﻘﻄﻪ ﺗﻮﻗﻒ اﺟﺮا ﻛﻪ ﺑﺎ ﻳﻚ‬
‫ﻧﻘﻄﻪ ﻗﺮﻣﺰ در ﺳﻤﺖ ﭼﭗ ﺧﻂ ﻧﺸﺎﻧﺪار ﺷﺪه اﺳﺖ‪ ،‬ﺑﺎ ورود ﺑﻪ ﺧﻂ آن ﻧﻴﺰ ﺑﻪ ﺻﻮرت ﻗﺮﻣﺰ رﻧﮓ در ﺧﻮاﻫﺪ آﻣﺪ‪.‬‬
‫ﺷﻜﻞ زﻳﺮ ﻳﻚ ﻧﻘﻂ ﺗﻮﻗﻒ اﺟﺮا را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪.‬‬
‫ﻓﺼﻞ ‪125  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫دﻳﺒﺎگ اﺳﻜﺮﻳﭙﺖ در ‪Visual Studio‬‬

‫ﺗﻬﻴﻪ ﻳﻚ ﻣﺤﻴﻂ دﻳﺒﺎگ ﻗﺪرﺗﻤﻨﺪ ﺑﺮاي ﺟﺎوااﺳﻜﺮﻳﭙﺖ‪ ،‬ﻣﺎﻧﻨﺪ ﻣﺤﻴﻂ ﺳﻤﺖ ﺳﺮور‪ ،‬در وﻳﮋوال اﺳﺘﻮدﻳﻮ ﻣﻤﻜﻦ ﻣﻲ‬
‫ﺑﺎﺷﺪ‪ .‬اﻣﺎ اﻳﻦ اﻣﺮ ﻧﻴﺎزﻣﻨﺪ ﺑﺮﺧﻲ ﺗﻌﺎﻣﻼت ﺑﻴﻦ ﻣﺮورﮔﺮ و وﻳﮋوال اﺳﺘﻮدﻳﻮ ﻣﻲ ﺑﺎﺷﺪ؛ ﺑﻪ ﻫﻤﻴﻦ ﺧﺎﻃﺮ ﻣﻘﺪاري‬
‫ﭘﻴﻜﺮﺑﻨﺪي ﺳﺮﻳﻊ ﺑﺮاي ﻓﻌﺎل ﺳﺎزي اﻳﻦ ﻋﻤﻠﻴﺎت ﻛﻪ ﺑﻪ ﺻﻮرت ﭘﻴﺶ ﻓﺮض ﻏﻴﺮ ﻓﻌﺎل ﻣﻲ ﺑﺎﺷﺪ ﻻزم اﺳﺖ‪.‬‬
‫‪ IE‬اﺣﺘﻴﺎج ﺑﻪ ﭘﻴﻜﺮﺑﻨﺪي ﺑﺮاي اﺟﺎزه ﺑﻪ دﻳﺒﺎگ را دارد‪ .‬ﺑﻪ ﺻﻮرت ﭘﻴﺶ ﻓﺮض ﻋﻤﻞ دﻳﺒﺎگ در ‪ IE‬ﻏﻴﺮ ﻓﻌﺎل ﻣﻲ‬
‫ﺑﺎﺷﺪ‪ .‬ﺑﺮاي ﻓﻌﺎل ﺳﺎزي اﻳﻦ ﺧﺼﻮﺻﻴﺖ در ‪ IE‬ﮔﺰﻳﻨﻪ ‪ Internet Options…  Tools‬را اﻧﺘﺨﺎب‬
‫ﻛﻨﻴﺪ‪ .‬ﻳﻚ ﺟﻌﺒﻪ ﮔﻔﺘﮕﻮ ﺑﺎ ﺗﻌﺪادي ﻧﻮار اﻧﺘﺨﺎﺑﻲ ﻇﺎﻫﺮ ﻣﻲ ﺷﻮد‪ .‬اﻧﺘﺨﺎب ﻧﻮار ‪ Advanced‬ﻣﻮﺟﺐ ﻧﻤﺎﻳﺶ ﺗﻌﺪادي‬
‫ﮔﺰﻳﻨﻪ ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬

‫ﻣﻄﻤﻴﻦ ﺑﺎﺷﻴﺪ ﻛﻪ ﻫﺮ دو ﮔﺰﻳﻨﻪ )‪ Disable Script Debugging(Internrt Explorer‬و‬

‫)‪ Disable Script Debugging(Other‬اﻧﺘﺨﺎب ﻧﺸﺪه ﺑﺎﺷﻨﺪ‪ .‬اﻟﺒﺘﻪ ﺑﺮاي اﻳﻨﻜﻪ دﻳﺒﺎگ ﻛﺎر ﻛﻨﺪ ﺗﻨﻬﺎ‬
‫ﻻزم اﺳﺖ ﻛﻪ )‪ Disable Script Debugging(Internrt Explorer‬اﻧﺘﺨﺎب ﻧﺸﺪه ﺑﺎﺷﺪ‪.‬‬
‫اﻧﺘﺨﺎب ﻧﻜﺮدن )‪ Disable Script Debugging(Other‬ﺑﺪﻳﻦ ﻣﻌﻨﻲ ﻣﻲ ﺑﺎﺷﺪ ﻛﻪ در اﺑﺰارﻫﺎي ﺑﻪ‬
‫ﻏﻴﺮ از ‪ IE‬ﻣﺎﻧﻨﺪ ‪ Microsoft Outlook‬دﻳﺒﺎگ ﻧﻴﺰ اﻣﻜﺎن ﭘﺬﻳﺮ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻋﻤﻠﻴﺎت ﺑﺎﻻ ﻫﻤﻪ ي ﭘﻴﻜﺮﺑﻨﺪي‬
‫ﻣﻮرد ﻧﻴﺎز ﺑﺮاي ﻓﻌﺎل ﺳﺎزي دﻳﺒﺎگ اﺳﻜﺮﻳﭙﺖ ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
 Ajax ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي‬ 5 ‫ ﻓﺼﻞ‬ 126

‫ اﻳﺠﺎد ﻛﻨﻴﺪ و ﻳﺎ‬ASPX ‫ ﻳﻚ ﻓﺮم ﺟﺪﻳﺪ‬.‫ﺑﺮاي اﻣﺘﺤﺎن اﻳﻦ ﻣﻮرد ﻳﻚ ﭘﺮوژه ﺟﺪﻳﺪ در وﻳﮋوال اﺳﺘﻮدﻳﻮ اﻳﺠﺎد ﻛﻨﻴﺪ‬
‫< ﻣﻮﺟﻮد در ﺻﻔﺤﻪ و‬html></html> ‫ اﻋﻼم‬.‫ داﺧﻞ ﭘﺮوژه را وﻳﺮاﻳﺶ ﻛﻨﻴﺪ‬،Default.aspx ‫ﺻﻔﺤﻪ‬
:‫ﻣﺤﺘﻮﻳﺎت آن را ﭘﺎك ﻛﺮده و ﻛﺪ زﻳﺮ را ﺟﺎﻳﮕﺰﻳﻦ آن ﻛﻨﻴﺪ‬

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
<title>Test Script Debugging</title>

<script type="text/javascript">

function DoSomeWork()
{
var cntrl =
document.getElementById("txtInput");
var number = cntrl.value;
number++;
var newValue = DoSomeMoreWork(number);
alert("New Value = " + newValue);
}

function DoSomeMoreWork(arg)
{
// Do some calculations
arg = arg * 2 + 32;
arg = arg + 18 / 2;
}
</script>
</head>

<body>
<form id="form1" runat="server">
<div>
<input type="text"id="txtInput" value="test"/>
<input type="button" value="Submit value"
onclick="DoSomeWork();" />
</div>
</form>
</body>
</html>

‫ )ﺑﺎ ﻛﻠﻴﻚ‬.‫ﻣﻄﻤﺌﻦ ﺑﺎﺷﻴﺪ ﻛﻪ ﺻﻔﺤﻪ ي ﺟﺪﻳﺪي ﻛﻪ اﻳﺠﺎد ﻛﺮده اﻳﺪ ﺑﻪ ﻋﻨﻮان ﺻﻔﺤﻪ ﺷﺮوع ﺗﻨﻈﻴﻢ ﺷﺪه اﺳﺖ‬
Set as ‫ ﺑﺮ روي ﺻﻔﺤﻪ و اﻧﺘﺨﺎب ﮔﺰﻳﻨﻪ‬Solution Explorer ‫راﺳﺖ در وﻳﮋوال اﺳﺘﻮدﻳﻮ ﻗﺴﻤﺖ‬
‫ را در ﺻﻔﺤﻪ‬F5 ‫ ﺑﺮاي اﺟﺮاي ﺑﺮﻧﺎﻣﻪ در ﺣﺎﻟﺖ دﻳﺒﺎگ ﺑﺮ روي ﻛﻠﻴﺪ ﺷﺮوع ﻛﻠﻴﻚ ﻛﻨﻴﺪ و ﻳﺎ‬.(Start page
Submit ‫( ﻛﻠﻴﻚ ﺑﺮروي ﻛﻠﻴﺪ‬.‫ ﺑﺮاي دﻳﺒﺎگ ﺗﻨﻈﻴﻢ ﺷﺪه اﺳﺖ‬web.config ‫ )ﻣﻄﻤﺌﻴﻦ ﺑﺎﺷﻴﺪ ﻛﻪ‬.‫ﻛﻠﻴﺪ ﺑﺰﻧﻴﺪ‬
.‫ ﺑﺎﻳﺴﺘﻲ ﺧﻄﺎﻳﻲ ﻣﺎﻧﻨﺪ ﺷﻜﻞ زﻳﺮ را ﺗﻮﻟﻴﺪ ﻛﻨﺪ‬Valure
‫ﻓﺼﻞ ‪127  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫اﻳﻦ ﻧﺘﻴﺠﻪ آن ﭼﻴﺰي ﻧﻴﺴﺖ ﻛﻪ ﺷﻤﺎ ﻣﻲ ﺧﻮاﺳﺘﻴﺪ‪ ،‬و اﺣﺘﻤﺎﻻ ﺷﻤﺎ اﻧﺘﻈﺎر ﭼﻴﺰي ﺑﻴﺶ از ‪ undefined‬داﺷﺘﻴﺪ‪.‬‬
‫ﺑﺮاي اﺻﻼح اﻳﻦ ﻣﻮﺿﻮع‪ ،‬ﺷﻤﺎ ﺑﺎﻳﺴﺘﻲ ﺑﻪ دﻳﺒﺎگ در ﺳﻤﺖ ﻛﻼﻳﻨﺖ ﺑﺮاي اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﺑﭙﺮدازﻳﺪ‪ .‬ﺑﺮاي اﻳﻦ ﻛﺎر ﺑﺎﻳﺪ از‬
‫ﻗﺎﺑﻠﻴﺖ دﻳﺒﺎگ اﺳﻜﺮﻳﭙﺖ ﻣﻮﺟﻮد در ‪ IE‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬
‫‪ -1‬ﺑﺮاي اﻳﺠﺎد ﻳﻚ ﺟﻠﺴﻪ دﻳﺒﺎگ ﺑﺮاي ﻳﻚ ﺻﻔﺤﻪ ‪ ،ASP.NET‬ﺑﻪ ﺻﻔﺤﻪ ي ﺑﺮﻧﺎﻣﻪ ﻣﻮرد ﻧﻈﺮ رﻓﺘﻪ و ﻃﺒﻖ ﺷﻜﻞ‬
‫زﻳﺮﮔﺰﻳﻨﻪ ‪ Script Debugger  View‬را در ‪ IE‬اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪.‬‬

‫‪Visual‬‬ ‫در اﻳﻨﺠﺎ ﺑﺎ دو ﮔﺰﻳﻨﻪ روﺑﺮو ﻣﻲ ﺷﻮﻳﺪ اﮔﺮ ‪ Open‬را اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪ ،‬ﻓﻮراً ﺷﺮوع ﺑﻪ اﺳﺘﻔﺎده از‬
‫‪Visual‬‬ ‫‪ Studio.NET‬ﺑﻪ ﻣﻨﻈﻮر دﻳﺒﺎگ ﺧﻮاﻫﻴﺪ ﻛﺮد ﻫﻤﺎﻧﻄﻮر ﻛﻪ در ﺷﻜﻞ زﻳﺮ ﻣﻲ ﺑﻴﻨﻴﺪ‪ .‬اﮔﺮ‬
‫‪Visual‬‬ ‫‪ Studio.NET‬ﺑﺎز ﺷﻮد ﻣﻲ ﺗﻮاﻧﻴﺪ ﺷﺮوع ﺑﻪ دﻳﺒﺎگ ﻛﻨﻴﺪ ﻳﺎ اﻳﻨﻜﻪ ﻳﻚ ﻧﻤﻮﻧﻪ ﺟﺪﻳﺪ از‬
‫‪ Studio.NET‬را ﺑﺮاي ﺷﺮوع دﻳﺒﺎگ اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪ .‬ﺑﺎ اﻧﺘﺨﺎب ‪ ،Break at Next Statement‬در‬
‫ﺣﻴﻦ اﺟﺮاي اﺳﻜﺮﻳﭙﺖ ﺻﻔﺤﻪ ﻫﻴﭻ اﺗﻔﺎﻗﻲ رخ ﻧﺨﻮاﻫﺪ داد‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  128‬ﻓﺼﻞ ‪5‬‬

‫‪ -2‬در وﻳﮋوال اﺳﺘﻮدﻳﻮ ﭘﻨﺠﺮه ‪ Scrit Explorer‬ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪ .‬اﮔﺮ ﻃﺮح ﺑﻨﺪي ﭘﻨﺠﺮه ﺷﻤﺎ ﺑﻪ‬
‫ﺻﻮرت ﺗﻨﻈﻴﻤﺎت ﭘﻴﺶ ﻓﺮض ﺑﺎﺷﺪ‪ ،‬در اﻳﻦ ﺻﻮرت ﭘﻨﺠﺮه ‪ Scrit Explorer‬ﺑﺎﻳﺴﺘﻲ در ﺳﻤﺖ راﺳﺖ‬
‫ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ داده ﺷﻮد ﻫﻤﺎﻧﻨﺪ ﺷﻜﻞ زﻳﺮ‪.‬‬

‫‪ -3‬در ﭘﻨﺠﺮه ‪ ،Scrit Explorer‬اﮔﺮ ﺑﻪ ﺗﻨﻬﺎ ﺻﻔﺤﻪ ‪ ASPX‬ﻣﻮﺟﻮد در ﻟﻴﺴﺖ ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﺧﻮاﻫﻴﺪ دﻳﺪ ﻛﻪ‬
‫ﺻﻔﺤﻪ ي در ﺣﺎل اﺟﺮاي ﻓﻌﻠﻲ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺑﺎ اﻧﺘﺨﺎب ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮ ﻛﺪ ﺻﻔﺤﻪ را ﺧﻮاﻫﻴﺪ دﻳﺪ‪ .‬ﻣﻲ ﺑﻴﻨﻴﺪ ﻛﻪ ﺑﺴﻴﺎر‬
‫ﺷﺒﻴﻪ ﺑﻪ ﺻﻔﺤﻪ زﻣﺎن ﻃﺮاﺣﻲ و ﺗﻮﺳﻌﻪ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺑﺰرﮔﺘﺮﻳﻦ ﺗﻔﺎوت اﻳﻦ اﺳﺖ ﻛﻪ اﻛﻨﻮن ﻣﻲ ﺗﻮاﻧﻴﺪ ﻧﻘﺎط ﺗﻮﻗﻒ اﺟﺮا‬
‫را در آن ﺗﻨﻈﻴﻢ ﻛﻨﻴﺪ و ﻣﻘﺪار ﻣﺘﻐﻴﺮﻫﺎي ﻣﻮﺟﻮد را ﺑﻪ روش ﻛﺪ ﻫﺎي ﺳﻤﺖ ﺳﺮور اﻣﺘﺤﺎن ﻛﻨﻴﺪ‪.‬‬
‫‪ -4‬در داﺧﻞ ﭘﻨﺠﺮه وﻳﺮاﻳﺶ‪ ،‬ﺑﻪ اﺑﺘﺪاي ﺗﺎﺑﻊ ‪ DoSomeWork‬رﻓﺘﻪ و ﻛﻠﻴﺪ ‪ F9‬را ﻓﺸﺎر دﻫﻴﺪ و ﻳﺎ ﺑﺮ روي ﻧﻮار‬
‫ﺧﺎﻛﺴﺘﺮي در ﺳﻤﺖ ﭼﭗ ﻛﻠﻴﻚ ﻛﻨﻴﺪ ﺗﺎ در آن ﺧﻂ ﻳﻚ ﻧﻘﻄﻪ ﺗﻮﻗﻒ اﺟﺮا اﻳﺠﺎد ﺷﻮد‪ .‬ﭘﻨﺠﺮه وﻳﺮاﻳﺶ ﺑﺎﻳﺴﺘﻲ‬
‫ﻣﺎﻧﻨﺪ ﺷﻜﻞ زﻳﺮ ﺑﺎﺷﺪ‪:‬‬
‫ﻓﺼﻞ ‪129  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫‪ -5‬ﺣﺎل ﺑﻪ ﻧﻤﻮﻧﻪ ‪ IE‬در ﺣﺎل اﺟﺮا‪ ،‬رﻓﺘﻪ و ﺑﺮ روي ﻛﻠﻴﺪ ‪ Submit Value‬ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪ .‬وﻳﮋوال اﺳﺘﻮدﻳﻮ‬
‫ﺑﺎﻳﺴﺘﻲ ﺑﻪ ﺻﻮرت ﺧﻮدﻛﺎر ﻓﻌﺎل ﺷﺪه و زﻣﺎﻧﻲ ﻛﻪ ﺑﻪ ﻧﻘﻄﻪ ﺗﻮﻗﻒ اﺟﺮا رﺳﻴﺪ اﺟﺮاي ﺑﺮﻧﺎﻣﻪ را ﻣﺘﻮﻗﻒ ﻛﻨﺪ‪ .‬اﻳﻦ ﺧﻂ‬
‫ﻫﻤﺎﻧﻨﺪ ﺷﻜﻞ زﻳﺮ ﺑﻪ ﺻﻮرت رﻧﮕﻲ ﻣﺸﺨﺺ ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬

‫‪ -6‬ﺑﺮاي رﻓﺘﻦ ﺑﻪ ﺧﻂ ﺑﻌﺪي ﻛﻠﻴﺪ ‪ F10‬را اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪ .‬ﺣﺎﻻ ﺧﻂ ﺑﻌﺪي رﻧﮕﻲ ﺧﻮاﻫﺪ ﺷﺪ‪ .‬ﺑﺎ ﻗﺮار دادن اﺷﺎره ﮔﺮ‬
‫ﻣﻮس ﺑﺮ روي ﻣﺘﻐﻴﺮ ‪ cntrl‬ﻛﻪ در ﺧﻄﻲ ﻛﻪ در ﺣﺎل ﺧﻮاﻧﺪه ﺷﺪن اﺳﺖ‪:‬‬
‫;)”‪var cntrl = document.getElementById(“txtInput‬‬
‫ﻳﻚ ﺟﻌﺒﻪ ﻣﺤﺎوره ﻛﻮﭼﻚ ﻧﻤﺎﻳﺶ داده ﺧﻮاﻫﺪ ﺷﺪ‪ ،‬اﻳﻦ ﺟﻌﺒﻪ‪ ،‬ﻣﺘﻐﻴﺮ ‪ cntrl‬را ﺑﺎ ﻳﻚ ﮔﺰﻳﻨﻪ ﺑﺮاي ﺑﺴﻂ ﻣﻘﺪار‬
‫ﻣﺘﻐﻴﺮ ﺑﻮﺳﻴﻠﻪ ﻛﻠﻴﻚ ﺑﺮ روي ﻧﻤﺎد ‪ +‬ﻧﺸﺎن ﻣﻲ دﻫﺪ‪) .‬ﺷﻜﻞ زﻳﺮ را ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ(‬
‫ﻛﻠﻴﻚ ﺑﺮ روي ﻧﻤﺎد ‪ +‬ﺑﻪ ﺗﻮﺳﻌﻪ دﻫﻨﺪه اﺟﺎزه ﻣﻲ دﻫﺪ ﺗﺎ ﻣﻘﺪار ﻣﺘﻐﻴﺮ را ﺑﺮرﺳﻲ ﻛﺮده و ﺧﺼﻮﺻﻴﺎت آن را در‬
‫وﺿﻌﻴﺖ ﻓﻌﻠﻲ ﺗﻤﺎﺷﺎ ﻛﻨﺪ‪ .‬اﻳﻦ روش ﺑﺮرﺳﻲ ﻣﺘﻐﻴﺮﻫﺎ‪ ،‬ﺑﺴﻴﺎر ﺷﺒﻴﻪ دﻳﺒﺎگ ﻛﺪﻫﺎي ﺳﻤﺖ ﺳﺮور ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  130‬ﻓﺼﻞ ‪5‬‬

‫ﺑﺎ ﻛﻠﻴﻚ راﺳﺖ ﺑﺮ روي ﻣﺘﻐﻴﺮ ‪ ،cntrl‬ﻣﻨﻮﻳﻲ ﻇﺎﻫﺮ ﻣﻲ ﺷﻮد ﻛﻪ ﺷﺒﻴﻪ ﺑﻪ ﻣﻨﻮي اراﺋﻪ ﺷﺪه در ﻛﺪﻫﺎي ﺳﻤﺖ ﺳﺮور‬
‫ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻣﻜﺎﻧﻴﺴﻢ دﻳﺒﺎگ ﻫﺎي ﺳﻨﺘﻲ ﻣﺎﻧﻨﺪ ‪ Add watch‬ﺑﺮاي اﺿﺎﻓﻪ ﻛﺮدن ﻣﺘﻐﻴﺮ ‪ cntrl‬ﺑﻪ ﭘﻨﺠﺮه ‪،Watch‬‬
‫در ﻗﺴﻤﺖ ﭘﺎﻳﻴﻦ ﺻﻔﺤﻪ در دﺳﺘﺮس ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﻳﻦ ﻣﻮﺿﻮع را در اداﻣﻪ ﻓﺼﻞ ﺑﻴﺸﺘﺮ ﺗﻮﺿﻴﺢ ﺧﻮاﻫﻴﻢ داد‪ .‬ﻫﻤﻴﻨﻄﻮر‪،‬‬
‫ﺗﻮﺳﻌﻪ دﻫﻨﺪه ﻣﻲ ﺗﻮاﻧﺪ ﭘﻨﺠﺮه ‪ Quick watch‬را ﺑﺎز ﻛﻨﺪ ﻛﻪ اﺟﺎزه ﺑﺎز ﻛﺮدن ﻳﻚ ﺟﻌﺒﻪ ﻣﺤﺎوره ﻛﻪ ﺑﺮاي‬
‫ﺑﺮرﺳﻲ آﺳﺎﻧﺘﺮ ﻣﺤﺘﻮﻳﺎت ﻣﺘﻐﻴﺮﻫﺎ ﺗﻬﻴﻪ ﺷﺪه اﺳﺖ را ﻣﻲ دﻫﺪ‪ .‬اﻳﻦ ﭘﻨﺠﺮه ﺷﺒﻴﻪ ﺑﻪ ﭘﻨﺠﺮه ‪ watch‬ﻣﻲ ﺑﺎﺷﺪ اﻣﺎ ﻳﻚ‬
‫روش ﻣﺴﺘﻘﻴﻢ و ﺑﺮﺗﺮي ﺑﺮاي ﻛﺎر ﺑﺮ روي ﻣﺘﻐﻴﺮ ﺧﺎﺻﻲ را ﻣﻲ دﻫﺪ‪ .‬ﺗﻨﻬﺎ ﻫﺪف اﻳﻦ ﭘﻨﺠﺮه ﻧﻤﺎﻳﺶ ﻣﺤﺘﻮﻳﺎت ﻣﺘﻐﻴﺮ‬
‫اﻧﺘﺨﺎب ﺷﺪه ﻣﻲ ﺑﺎﺷﺪ وﮔﺮﻧﻪ ﻋﻤﻠﻴﺎت آن ﻫﻤﺎﻧﻨﺪ ﭘﻨﺠﺮه ‪ Watch‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﺗﻨﻬﺎ ﺗﻔﺎوت واﻗﻌﻲ آﻣﺎده ﺳﺎزي ﻛﻠﻴﺪ‬
‫‪ Reevaluate‬اﺳﺖ ﻛﻪ اﺟﺎزه وارد ﻛﺮدن ﻣﺘﻐﻴﺮ ﺟﺪﻳﺪ داﺧﻞ ﻓﻴﻠﺪ ‪ text‬را ﻣﻲ دﻫﺪ‪.‬‬
‫‪ -1‬دوﺑﺎره ﻛﻠﻴﺪ ‪ F10‬را ﺑﺮاي ﭘﻴﺸﺮوي در ﻛﺪ ﺑﻪ ﺧﻂ ﺑﻌﺪي اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪ .‬اﺟﺮاي ﺑﺮﻧﺎﻣﻪ ﺑﺎﻳﺴﺘﻲ در ﺧﻄﻲ ﺑﺎ‬
‫ﻣﺤﺘﻮﻳﺎت زﻳﺮ ﺗﻮﻗﻒ ﻛﺮده ﺑﺎﺷﺪ‪:‬‬
‫;‪number++‬‬
‫‪ -2‬ﻣﻮس را ﺑﺮ روي ﻣﺘﻐﻴﺮ ‪ number‬ﻗﺮار دﻫﻴﺪ‪ .‬دﻳﺒﺎﮔﺮ ﺑﺎﻳﺴﺘﻲ ﻫﻤﺎﻧﻨﺪ ﺷﻜﻞ زﻳﺮ ﻣﻘﺪار ﻣﺘﻐﻴﺮ ‪ number‬را ﻧﺸﺎن‬
‫دﻫﺪ‪ .‬ﻣﻌﻤﻮﻻً ﻣﻘﺪاري ﻛﻪ اﻧﺘﻈﺎر ﻣﻲ رود در ﻣﺘﻐﻴﺮ ‪ number‬ﺑﺎﺷﺪ ﺑﺮاﺑﺮ ﺑﺎ ﻣﺤﺘﻮاي ﻛﻨﺘﺮل ‪ textbox‬ﻣﻮﺟﻮد در‬
‫ﺻﻔﺤﻪ ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫ﻓﺼﻞ ‪131  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫‪ -3‬دوﺑﺎره ﻛﻠﻴﺪ ‪ F10‬را ﺑﺮاي رﻓﺘﻦ اﺟﺮاي ﺑﺮﻧﺎﻣﻪ ﺑﻪ ﺧﻂ ﺑﻌﺪي اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪ .‬اﻛﻨﻮن دﻳﺒﺎﮔﺮ ﺑﺎﻳﺴﺘﻲ در ﺧﻂ زﻳﺮ‬
‫ﻣﺘﻮﻗﻒ ﺷﺪه ﺑﺎﺷﺪ‪:‬‬
‫;)‪var newValue = DoSomeMoreWork(number‬‬
‫ﺑﺮاي ﻧﻤﺎﻳﺶ ﻣﻘﺪار ﻓﻌﻠﻲ‪ ،‬ﻣﻮس را ﺑﺮ روي ﻣﺘﻐﻴﻴﺮ ‪ number‬ﺑﺒﺮﻳﺪ‪ .‬اﺣﺘﻤﺎﻻ ﭼﻴﺰي ﺷﺒﻴﻪ ﺷﻜﻞ زﻳﺮ ﻧﻤﺎﻳﺶ داده‬
‫ﺷﻮد‪:‬‬

‫اﻛﻨﻮن ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺒﻴﻨﻴﺪ ﻛﻪ ﻣﻘﺪار ﻛﺪام ﻣﺘﻐﻴﺮ ﻧﺎﻣﻌﺘﺒﺮ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻣﻌﻠﻮم ﻣﻲ ﺷﻮد ﻛﻪ ﻣﻘﺪار ‪ number‬ﻳﻚ ﻣﻘﺪار‬
‫ﻣﺘﻨﻲ ﺑﺎ ﻣﻘﺪار ‪ test‬ﺑﻮده اﺳﺖ‪ .‬ﻣﺮﺣﻠﻪ ﺑﻌﺪي اﺟﺮا اﻧﺠﺎم ﻋﻤﻠﻴﺎت رﻳﺎﺿﻲ ﺑﺮ روي ﻣﻘﺪار رﺷﺘﻪ اي ﻣﻲ ﺑﺎﺷﺪ‪ ،‬ﻛﻪ در‬
‫ﺣﻘﻴﻘﺖ ﻧﺎﻣﻌﺘﺒﺮ اﺳﺖ‪ .‬ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻫﻤﺎﻧﻨﺪ زﺑﺎﻧﻬﺎي ‪ VB‬و ‪ C#‬ﻧﻴﺴﺖ‪ .‬اﻳﻦ ﻋﻤﻠﻴﺎت ﻇﺎﻫﺮاً ﻧﺎﻣﻌﺘﺒﺮ‪ ،‬ﻫﻴﭻ اﺳﺘﺜﻨﺎﻳﻲ را‬
‫اﻳﺠﺎد ﻧﻤﻲ ﻛﻨﺪ‪ ،‬اﻣﺎ ﻣﻘﺪار ﻣﺘﻐﻴﺮ ‪ number‬ﺑﺎ ‪ undefined‬ﻣﻘﺪار دﻫﻲ ﻣﻲ ﺷﻮد‪ ،‬ﻛﻪ دﻗﻴﻘﺎً ﻫﻤﺎن ﭼﻴﺰي ﻣﻲ‬
‫ﺑﺎﺷﺪ ﻛﻪ ﺷﻤﺎ در ﺧﺮوﺟﻲ ﻣﺮورﮔﺮﺗﺎن ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ‪.‬‬
‫‪ -4‬ﻛﻠﻴﺪ ‪ F5‬را اﻧﺘﺨﺎب ﻛﻨﻴﺪ ﻳﺎ اﻳﻨﻜﻪ دﻛﻤﻪ ‪ Play‬را ﺑﺮاي اﺟﺮاي ﻣﻌﻤﻮﻟﻲ ﺑﺮﻧﺎﻣﻪ ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪ ،‬ﻫﻤﺎن ﻧﺘﻴﺠﻪ اي را‬
‫ﻛﻪ ﻗﺒﻼً دﻳﺪﻳﺪ ﻇﺎﻫﺮ ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬
‫ﺷﻤﺎ ﺑﺎ ﻣﻮﻓﻘﻴﺖ دﻳﺒﺎگ را ﺑﻪ اﺗﻤﺎم رﺳﺎﻧﺪﻳﺪ و ﻣﺘﻮﺟﻪ ﭼﺮاﻳﻲ رﻓﺘﺎر ﻣﺮورﮔﺮ ﺷﺪﻳﺪ‪ .‬دﻳﺒﺎگ ﺑﻪ اﻳﻦ روش ﺑﺴﻴﺎر ﻣﻔﻴﺪ‬
‫ﻣﻲ ﺑﺎﺷﺪ و ﺑﺮﻧﺎﻣﻪ ﻫﺎ ﻣﻲ ﺗﻮاﻧﻨﺪ ﺑﺎ ﺟﺰﺋﻴﺎت ﺑﻴﺸﺘﺮي ﻣﻮرد ﺑﺮرﺳﻲ ﻗﺮار ﮔﻴﺮﻧﺪ‪.‬‬
‫اﺳﺘﻔﺎده از ﭘﻨﺠﺮه ‪Watch‬‬
‫ﻫﻤﺎن ﻃﻮري ﻛﻪ ﻗﺒﻼ اﺷﺎره ﺷﺪ‪ ،‬در زﻣﺎن دﻳﺒﺎگ‪ ،‬ﺗﻮﺳﻌﻪ دﻫﻨﺪه ﻣﻲ ﺗﻮاﻧﺪ ﺑﻪ راﺣﺘﻲ ﻣﻮس را ﺑﺮ روي ﻣﺘﻐﻴﺮ ﻗﺮار‬
‫داده و ﻣﻘﺪار آن را ﻣﺸﺎﻫﺪه ﻛﻨﺪ‪ .‬اﻣﺎ اﻧﺠﺎم اﻳﻦ ﻛﺎر ﺑﺮاي ﺑﺮﺧﻲ از ﻣﺘﻐﻴﺮﻫﺎ و ﺛﺎﺑﺘﻬﺎ در ﻫﺮ ﺧﻂ ﻛﻪ ﻛﺪ اﺟﺮا ﻣﻲ ﺷﻮد‬
‫ﻣﻲ ﺗﻮاﻧﺪ ﺳﻨﮕﻴﻦ ﺑﺎﺷﺪ‪ .‬اﻣﺎ ﺷﻤﺎ ﮔﺰﻳﻨﻪ ﻫﺎي دﻳﮕﺮي ﻧﻴﺰ دارﻳﺪ‪.‬‬
‫ﻫﻤﺎﻧﻨﺪ ﺗﻜﻨﻴﻚ دﻳﺒﺎگ ﺳﻤﺖ ﺳﺮور‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ از ‪ Watch‬ﺑﺮاي ﻣﺸﺎﻫﺪه ﻣﻘﺪار ﻣﺘﻐﻴﺮﻫﺎ و ﻓﻌﻞ و اﻧﻔﻌﺎل ﻫﺎي آن ﻫﺎ‬
‫ﺑﺎ ﺑﺮﻧﺎﻣﻪ ﺗﺎن اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬
 ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  132‬ﻓﺼﻞ ‪5‬‬

‫ﺑﺎ اﺳﺘﻔﺎده از ﻣﺜﺎل ﻗﺒﻠﻲ‪ ،‬در ﺣﺎﻟﺖ دﻳﺒﺎگ ﺑﺮ روي ‪ number‬ﻛﻠﻴﻚ راﺳﺖ ﻛﻨﻴﺪ‪ .‬ﺑﺎ اﻧﺠﺎم اﻳﻦ ﻛﺎر ﻣﻨﻮﻳﻲ ﻇﺎﻫﺮ ﻣﻲ‬
‫ﺷﻮد‪ .‬از ﻣﻨﻮ ﮔﺰﻳﻨﻪ ‪ Add Watch‬را اﻧﺘﺨﺎب ﻛﻨﻴﺪ ﻛﻪ دراﻳﻨﺼﻮرت ﻣﺘﻐﻴﺮ ‪ number‬را ﺑﻪ ﭘﻨﺠﺮه ‪ watch‬اﺿﺎﻓﻪ‬
‫ﻣﻲ ﻛﻨﺪ‪ .‬ﭘﻨﺠﺮه ‪ watch‬ﺑﻪ ﺻﻮرت ﭘﻴﺶ ﻓﺮض درﭘﺎﻳﻴﻦ‪ ،‬ﻗﺴﻤﺖ ﭼﭗ ﻣﺤﻴﻂ وﻳﮋوال اﺳﺘﻮدﻳﻮ ﻗﺮار دارد‪ .‬ﻛﻪ در‬
‫ﺷﻜﻞ زﻳﺮ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﺸﺎﻫﺪ ﻛﻨﻴﺪ‪.‬‬

‫ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ ﻛﻪ ﻣﺘﻐﻴﺮ ‪ number‬ﻣﻘﺪار ‪ undefined‬را ﻧﺸﺎن ﻣﻲ دﻫﺪ‪ .‬ﺑﺎ دوﺑﺎر ﻓﺸﺮدن ‪ F10‬ﻣﻘﺪار ﻣﺘﻐﻴﺮ‬
‫‪ number‬ﺗﻐﻴﻴﺮ ﭘﻴﺪا ﻣﻲ ﻛﻨﺪ و ﻣﺘﻐﻴﺮ ‪ number‬داﺧﻞ ﭘﻨﺠﺮه ‪ Watch‬ﻧﻴﺰ ﺑﻪ روز ﻣﻲ ﺷﻮد‪ .‬ﭼﻨﺪﻳﻦ آﻳﺘﻢ ﻣﻲ‬
‫ﺗﻮاﻧﻨﺪ ﺑﻪ ﭘﻨﺠﺮه ‪ watch‬اﺿﺎﻓﻪ ﮔﺮدﻧﺪﻛﻪ ﺗﻮﺳﻌﻪ دﻫﻨﺪه را ﻗﺎدر ﺑﻪ ﭘﻴﮕﻴﺮي ﻣﻘﺎدﻳﺮ ﻣﺘﻐﻴﺮﻫﺎ ﻣﻲ ﻛﻨﺪ‪.‬‬
‫ﻓﺼﻞ ‪133  5‬‬ ‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬

‫اﺳﺘﻔﺎده از ﭘﻨﺠﺮه ‪Command‬‬

‫ﺗﻮﺳﻌﻪ دﻫﻨﺪه ﻣﻤﻜﻦ اﺳﺖ ﺑﺨﻮاﻫﺪ وﺿﻌﻴﺖ ﻗﺴﻤﺘﻲ از ﺑﺮﻧﺎﻣﻪ اش ﻛﻪ در ﺣﺎل اﺟﺮا ﻣﻲ ﺑﺎﺷﺪ را ارزﻳﺎﺑﻲ ﻛﻨﺪ‪ .‬ﺑﺮاي‬
‫اﻧﺠﺎم اﻳﻦ ﻛﺎر‪ ،‬ﺗﻮﺳﻌﻪ دﻫﻨﺪه ﻣﻲ ﺗﻮاﻧﺪ از ﭘﻨﺠﺮه ‪ Command‬اﺳﺘﻔﺎده ﻛﻨﺪ‪ .‬ﺑﺮاي اﻧﺠﺎم اﻳﻦ ﻛﺎر‪ ،‬در ﺣﺎﻟﺖ دﻳﺒﺎگ‪،‬‬
‫ﻣﻨﻮي ‪ Command Window  Other Windows  View‬را اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪) .‬و ﻳﺎ ‪ Ctrl+Alt+A‬را‬
‫اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪(.‬‬
‫ﭘﻨﺠﺮه ‪ Command‬داري ﻧﻤﺎد > ﺧﻮاﻫﺪ ﺑﻮد‪ .‬در ﭘﻨﺠﺮه ‪ Command‬دﺳﺘﻮر زﻳﺮ را وارد ﻛﺮده و ‪ Enter‬را ﺑﺰﻧﻴﺪ‪:‬‬
‫‪? number‬‬
‫اﺣﺘﻤﺎﻻ ﻣﻘﺪار ‪ test‬ﻧﺸﺎن داده ﺷﻮد‪ .‬ﺣﺎل ﺳﻌﻲ ﻛﻨﻴﺪ ﻛﻪ دﺳﺘﻮر زﻳﺮ را وارد ﻛﻨﻴﺪ‪:‬‬
‫)‪? alert(number‬‬
‫در اﻳﻨﺼﻮرت ﭘﻴﻐﺎﻣﻲ ﻛﻪ ﻣﻘﺪار ‪ test‬را ﻧﺸﺎن ﻣﻲ دﻫﺪ ﻇﺎﻫﺮ ﻣﻲ ﺷﻮد‪ .‬ﺑﻌﺪ از اﺟﺮاي اﻳﻦ دﺳﺘﻮرات وﻳﮋوال‬
‫اﺳﺘﻮدﻳﻮ ﻫﻤﺎﻧﻨﺪ ﺷﻜﻞ زﻳﺮ ﺧﻮاﻫﻴﺪ ﺑﻮد‪.‬‬

‫ﻋﻼﻣﺖ ﺳﻮال اﺧﺘﺼﺎر ‪ print‬و ﻳﺎ ‪ display‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﻳﻦ ﺗﻜﻨﻴﻚ ﻳﻚ روش ﺑﺴﻴﺎر ﻣﻔﻴﺪ ﺑﺮاي ارزﻳﺎﺑﻲ‬
‫وﺿﻌﻴﺖ ﻫﺎي ﻣﺨﺘﻠﻒ داﺧﻞ ﺑﺮﻧﺎﻣﻪ ﺗﺎن ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫ﺧﻄﺎﻳﺎﺑﻲ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ‪Ajax‬‬ ‫‪  134‬ﻓﺼﻞ ‪5‬‬
‫ﻓﺼﻞ ‪135  6‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪chatRoom‬‬

‫ﻓﺼﻞ ﺷﺸﻢ‪ :‬ﺑﺮﻧﺎﻣﻪ ‪ChatRoom‬‬

‫در اﻳﻦ ﻓﺼﻞ اﻳﺠﺎد ﻳﻚ ‪ chatroom‬را ﺑﺎ ﻛﻤﻚ ‪ Ajax‬ﺑﺮرﺳﻲ ﺧﻮاﻫﻴﻢ ﻛﺮد‪.‬ﻛﺪﻫﺎي ﻛﺎﻣﻞ اﻳـﻦ ﺑﺮﻧﺎﻣـﻪ در ‪CD‬‬
‫ﻛﺘـﺎب در ﻣــﺴﻴﺮ ‪ project\chat‬و ﺟـﺪول ﻫــﺎي آن در ﻣــﺴﻴﺮ ‪project\database\chatroom‬‬
‫ﻣﻮﺟﻮد ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﻳﻚ ‪ chatroom‬ﻋﻤﻮﻣﻲ اﺳﺖ‪ ،‬ﻳﻌﻨﻲ ﻫﺮﻛﺎرﺑﺮ ﺑﺎ داﺷﺘﻦ ﻳﻚ ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي وارد ﻣﺤـﻴﻂ ارﺳـﺎل ﭘﻴـﺎم‬
‫ﻣﻲ ﺷﻮد و ﻣﻲ ﺗﻮاﻧـﺪ ﭘﻴـﺎم ﻫـﺎي ﺧـﻮد را ارﺳـﺎل ﻛﻨـﺪ‪ .‬ﭘﻴـﺎم ارﺳـﺎل ﺷـﺪه ﺑـﺮاي ﺗﻤـﺎﻣﻲ ﻛـﺎرﺑﺮاﻧﻲ ﻛـﻪ ﻫﻤﺰﻣـﺎن در‬
‫‪ chatroom‬ﺣﻀﻮر داﺷﺘﻪ ﺑﺎﺷﻨﺪ ﻗﺎﺑﻞ روﻳﺖ اﺳﺖ‪ .‬ﺑﻄﻮر ﻛﻠﻲ در اﻳﻦ ﺑﺮﻧﺎﻣﻪ اﻣﻜـﺎن ارﺳـﺎل ﭘﻴـﺎم ﺑـﻪ ﻳـﻚ ﻛـﺎرﺑﺮ‬
‫ﺧﺎص ﺑﻪ ﮔﻮﻧﻪ اي ﻛﻪ دﻳﮕﺮ ﻛﺎرﺑﺮان ﻧﺘﻮاﻧﻨﺪ آن ﭘﻴﺎم را ﻣﺸﺎﻫﺪه ﻛﻨﻨـﺪ وﺟـﻮد ﻧـﺪارد‪ .‬ﻛـﺎرﺑﺮان در ﺻـﻮرت ﻧﺪاﺷـﺘﻦ‬
‫ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي ﻣﻲ ﺗﻮاﻧﻨﺪ ﻳﻚ ﺷﻨﺎﺳﻪ ﺑﺮاي ﺧﻮد اﻳﺠﺎد ﻛﻨﻨﺪ‪.‬‬
‫در ﺳﺎﻳﺖ ﻟﻴﺴﺘﻲ از ﻛﺎرﺑﺮان ﻓﻌﺎل در ‪ chatroom‬ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪ ،‬ﻫﺮﻛﺎرﺑﺮ ﺑﺎ ورود ﺑـﻪ ‪ chatroom‬ﻣـﻲ‬
‫ﺗﻮاﻧﺪ اﻳﻦ ﻟﻴﺴﺖ ﻛﺎرﺑﺮان را ﻣﺸﺎﻫﺪه ﻧﻤﺎﻳﺪ‪ .‬ﺑﺎ ﻛﻠﻴﻚ ﻛﺮدن ﺑﺮ روي آﻳﻜﻮن ﻫﺮ ﻛﺎرﺑﺮ از ﻟﻴـﺴﺖ ﻧﻤـﺎﻳﺶ داده ﺷـﺪه‪،‬‬
‫اﻃﻼﻋﺎت ﺷﺨﺼﻲ آن ﻛﺎرﺑﺮ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬
‫ﻓﺮض ﻛﻨﻴﺪ ﺑﺨﻮاﻫﻴﺪ اﻳﻦ ‪ chatroom‬را ﺑﻄﻮر ﻣﻌﻤﻮل در وب ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ ﻛﻨﻴﺪ‪ ،‬ﻫﺮ زﻣﺎن ﻛـﻪ ﭘﻴـﺎﻣﻲ از ﺳـﻤﺖ‬
‫ﻳﻚ ﻛﺎرﺑﺮ ﺑﻪ ﻛﺎرﺑﺮ دﻳﮕﺮي ارﺳﺎل ﻣﻲ ﺷﻮد ﺑﺮاي ﻧﻤﺎﻳﺶ ﭘﻴﺎم ﺟﺪﻳﺪ ﺑﺎﻳﺪ ﺻﻔﺤﻪ ي ﮔﻴﺮﻧﺪه ﭘﻴﺎم دوﺑـﺎره ﺑﺎرﮔـﺬاري‬
‫ﺷﻮد ﻳﺎ زﻣﺎﻧﻴﻜﻪ ﻳﻚ ﻛﺎرﺑﺮ ﺟﺪﻳﺪ ﺑﻪ ﺳﺎﻳﺖ وارد ﻣﻲ ﺷﻮد ﺑﺎﻳﺪ ﻟﻴـﺴﺖ ﻛـﺎرﺑﺮان ﻓﻌـﺎل دوﺑـﺎر ﺑﺎرﮔـﺬاري ﺷـﻮد‪ .‬اﻳـﻦ‬
‫ﻋﻤﻠﻴﺎت در ﭼﻨﻴﻦ ﺑﺮﻧﺎﻣﻪ ي ﺧﻴﻠﻲ ﺧﺴﺘﻪ ﻛﻨﻨﺪه اﺳﺖ در ﻧﺘﻴﺠﻪ ﻧﻮﺷﺘﻦ اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﺑﺼﻮرت ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳـﺴﻲ ﻣﻌﻤـﻮل وب‬
‫ﻳﻚ ﺗﺼﻤﻴﻢ ﻧﺎدرﺳﺖ اﺳﺖ‪.‬‬
‫ﺟﺪاول ﻣﻮﺟﻮد در ﺑﺮﻧﺎﻣﻪ ‪ChatRoom‬‬
‫ﺗﺎ اﻳﻨﺠﺎ ﺗﻘﺮﻳﺒﺎ ﺑﺎ ﺷﻜﻞ ﻛﻠﻲ ﺑﺮﻧﺎﻣﻪ آﺷﻨﺎ ﺷﺪﻳﺪ اﻣﺎ ﻣﺮﺣﻠﻪ ﺑﻌﺪ اﻳﺠﺎد ﺟﺪول ﻫﺎي ﻣﻮرد ﻧﻴﺎز ﺑﺮاي اﻳﻦ ﺑﺮﻧﺎﻣـﻪ اﺳـﺖ‪ .‬ﺑـﺎ‬
‫ﻧﮕﺎﻫﻲ ﺑﻪ ﻣﻄﺎﻟﺐ ﺑﺎﻻ ﻣﻲ ﺗﻮان ﻣﺘﻮﺟﻪ ﺷﺪ ﻛﻪ ﻧﻴﺎز ﺑﻪ ﺟﺪوﻟﻲ ﺑـﺮاي ﻧﮕﻬـﺪاري اﻃﻼﻋـﺎت ﻛـﺎرﺑﺮي از ﺟﻤﻠـﻪ ﺷﻨﺎﺳـﻪ‬
‫ﻛﺎرﺑﺮي‪ ،‬ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﻃﻼﻋﺎت ﻛﺎرﺑﺮ ﺑﺎﻳﺪ ﻫﻨﮕﺎم اﻳﺠﺎد ﻳﻚ ﺷﻨﺎﺳﻪ ﺑﺮاي ﻛـﺎرﺑﺮ از او درﺧﻮاﺳـﺖ ﺷـﻮد و در ﺟـﺪول‬
‫ﺛﺒﺖ ﺷﻮد‪ .‬اﻃﻼﻋﺎت ﻣﻮرد ﻧﻴﺎز از ﻳﻚ ﻛﺎرﺑﺮ را ﻣﻲ ﺗﻮان ﺑﻌﻨﻮان ﻓﻴﻠﺪ ﻫﺎي ﺟﺪول در ﻧﻈﺮ ﮔﺮﻓـﺖ‪ .‬ﻓﻴﻠـﺪﻫﺎي داده اي‬
‫ﻛﻪ ﺑﺮاي ﻳﻚ ﻛﺎرﺑﺮ ﺑﻄﻮر ﻣﻌﻤﻮل ﻧﻴﺎز اﺳﺖ در ﺟﺪول ‪ 7-1‬آورده ﺷﺪه اﺳﺖ‪ .‬ﻣﺎ ﻳﻚ ﺟـﺪوﻟﻲ ﺑـﻪ ﻧـﺎم ‪ user‬ﺑـﺎ ‪8‬‬
‫ﻓﻴﻠﺪ داده اي ﺑﺮاي ﻧﮕﻬﺪاري اﻃﻼﻋﺎت ﻛﺎرﺑﺮان در ﻧﻈﺮﮔﺮﻓﺘﻪ اﻳﻢ‪.‬‬
‫‪ -‬ﻓﻴﻠﺪ ‪ ID‬ﺷﻤﺎره ﻣﻨﺤﺼﺮ ﺑﻔﺮدي اﺳـﺖ ﻛـﻪ ﺑـﻪ ﻛـﺎرﺑﺮ در ﺟـﺪول ﺗﺨـﺼﻴﺺ داده ﻣـﻲ ﺷـﻮد‪ .‬اﻳـﻦ ﻓﻴﻠـﺪ ﺑـﺼﻮرت‬
‫ﺧﻮردﻛﺎر ﻣﻘﺪار دﻫﻲ ﻣﻲ ﺷﻮد)ﺑﻌﻨﻮان ﻛﻠﻴﺪ اﺻﻠﻲ(‪.‬‬
‫‪ -‬ﻓﻴﻠﺪ ‪ username‬و ‪ password‬ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي ﻓﺮد و رﻣﺰﻋﺒﻮر در ﺳﻴﺴﺘﻢ ‪ chat‬ﻣﻲ ﺑﺎﺷـﺪ ﻛـﻪ ﺑـﻪ ﻫﻨﮕـﺎم‬
‫ورود ﺑﻪ ﺳﺎﻳﺖ ﺑﻪ آن ﻫﺎ ﻧﻴﺎز ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
 ‫ﺑﺮﻧﺎﻣﻪ ‪chatRoom‬‬ ‫‪  136‬ﻓﺼﻞ ‪6‬‬

‫‪ -‬ﻓﻴﻠﺪ ‪ firstname,lastname,age,gender‬ﻣﺸﺨﺼﺎت ﺷﺨﺼﻲ ﻓـﺮد اﺳـﺖ ﻛـﻪ ﻫﻨﮕـﺎم ﺛﺒـﺖ ﻧـﺎم‬

‫ﻛﺮدن‪ ،‬از او درﺧﻮاﺳﺖ ﻣﻲ ﺷﻮد‪.‬‬
‫‪ -‬ﻓﻴﻠﺪ ‪ status‬وﺿﻌﻴﺖ ﻛﺎرﺑﺮ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ‪ .‬در اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﻣﺎ ﻗﺮارداد ﻛـﺮدﻳﻢ ﻛـﻪ در ﺻـﻮرت ‪ 0‬ﺑـﻮدن‪،‬‬
‫ﻛﺎرﺑﺮ در ﺳﻴﺴﺘﻢ وارد ﻧﺸﺪه ﻳﺎ ﺧﺎرج ﺷﺪه)‪ (offline‬و در ﺻﻮرت ‪ 1‬ﺑﻮدن ﻛﺎرﺑﺮ ﺑـﻪ ﺳﻴـﺴﺘﻢ ‪ login‬ﻛـﺮده‬
‫اﺳﺖ)‪ .(online‬اﻳﻦ ﻓﻴﻠﺪ ﺑﺮاي اﻳﻦ اﺳﺖ ﻛﻪ ﺑﺎ ﻳﻚ ﺷﻨﺎﺳﻪ ﻛـﺎرﺑﺮي اﻣﻜـﺎن ورود ﻣﺠـﺪد ﺑـﻪ ﺳـﺎﻳﺖ را ﻧﺪاﺷـﺘﻪ‬
‫ﺑﺎﺷﻴﻢ و ﻫﻤﭽﻨﻴﻦ ﻛﺎرﺑﺮان ﻓﻌﺎل را ﺑﺘﻮاﻧﻴﻢ ﻣﺸﺨﺺ ﻛﻨﻴﻢ‪.‬‬
‫ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺎ اﺟﺮاي اﻳﻦ ﻛﺪ ﺟﺪول را ﺑﺮاﺣﺘﻲ اﻳﺠﺎد ﻛﻨﻴﺪ‪.‬‬
‫( `‪CREATE TABLE `user‬‬
‫`‪`ID‬‬ ‫‪INT NOT NULL AUTO_INCREMENT ,‬‬
‫‪`username` VARCHAR(50) NOT NULL ,‬‬
‫‪`firstname` VARCHAR(50) NOT NULL ,‬‬
‫‪`firstname` VARCHAR(50) NOT NULL ,‬‬
‫‪`lastname` VARCHAR(50) NOT NULL ,‬‬
‫‪`password` VARCHAR(50) NOT NULL ,‬‬
‫`‪`age‬‬ ‫‪INT NOT NULL ,‬‬
‫`‪`gender‬‬ ‫‪CHAR(1) NOT NULL ,‬‬
‫`‪`status‬‬ ‫‪TINYINT NOT NULL ,‬‬
‫)`‪PRIMARY KEY (`ID‬‬
‫;)‬

‫‪auto_increment‬‬ ‫)‪int(10‬‬ ‫*‪ID‬‬

‫)‪varchar(50‬‬ ‫‪username‬‬
‫)‪varchar(50‬‬ ‫‪firstname‬‬
‫)‪varchar(50‬‬ ‫‪lastname‬‬
‫)‪varchar(50‬‬ ‫‪password‬‬
‫)‪int(10‬‬ ‫‪age‬‬
‫)‪Char(1‬‬ ‫‪gender‬‬
‫)‪tinyint(1‬‬ ‫‪status‬‬
‫ﺟﺪول ‪ 7-1‬ﻓﻴﻠﺪﻫﺎي ﺟﺪول ‪user‬‬
‫اﻣﺎ ﻧﻜﺘﻪ دﻳﮕﺮي ﻛﻪ در اﻳﻦ ﺑﺮﻧﺎﻣﻪ وﺟﻮد دارد‪ ،‬ﭘﻴﺎم اﺳﺖ‪ .‬ﭘﻴﺎم ﺑﺎﻳﺪ از ﺳﻤﺖ ﻳﻚ ﻛﺎرﺑﺮ ﺑﻪ ﺳﺮور ارﺳﺎل و از آن ﺟـﺎ‬
‫ﺑﺮاي ﺗﻤﺎﻣﻲ ﻛﺎرﺑﺮان ﻓﻌﺎل ارﺳﺎل ﺷﻮد در ﻧﺘﻴﺠﻪ ﻣﺎ ﻧﻴﺎز ﺑﻪ ﺟﺪوﻟﻲ ﺑﺮاي ﻧﮕﻬﺪاري اﻃﻼﻋﺎت ﭘﻴﺎم دارﻳـﻢ ﺗـﺎ ﻣـﺸﺨﺺ‬
‫ﺷﻮد‪ :‬ارﺳﺎل ﻛﻨﻨﺪه ﭘﻴﺎم ﭼﻪ ﻛﺴﻲ اﺳﺖ؟ در ﭼﻪ زﻣﺎﻧﻲ اﻳﻦ ﭘﻴﺎم ارﺳﺎل ﺷﺪه اﺳﺖ؟ ﻣﺘﻦ ﭘﻴﺎم ﭼﻴﺴﺖ؟‬
‫در اﻳﻦ ﻗﺴﻤﺖ ﺑﻪ ﺑﺮرﺳﻲ ﺟﺪول ﭘﻴﺎم و ﻓﻴﻠﺪﻫﺎي داده اي آن ﻣﻲ ﭘﺮدازﻳﻢ‪ .‬اﻳـﻦ ﺟـﺪول ﺣـﺎوي ‪ 4‬ﻓﻴﻠـﺪ داده اي ﻣـﻲ‬
‫ﺑﺎﺷﺪ‪.‬‬
‫‪ -‬ﻓﻴﻠﺪ ‪ id‬ﺑﺮاي اﺧﺘﺼﺎص ﻳﻚ ﺷﻤﺎره ﻣﻨﺤﺼﺮﺑﻔﺮد ﺑﻪ ﭘﻴﺎم اﺳﺖ)ﺑﻌﻨﻮان ﻛﻠﻴﺪ اﺻﻠﻲ(‪.‬‬
‫‪ -‬ﻓﻴﻠﺪ ‪ Message‬ﺣﺎوي ﻣﺘﻦ ﭘﻴﺎم اﺳﺖ‪.‬‬
‫ﻓﺼﻞ ‪137  6‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪chatRoom‬‬

‫‪ -‬ﻓﻴﻠﺪ ‪ senderId‬ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي)‪(username‬ﻓﺮد ارﺳﺎل ﻛﻨﻨﺪه اﺳﺖ‪.‬‬

‫‪ -‬ﻓﻴﻠﺪ ‪ Date‬ﺗﺎرﻳﺦ و زﻣﺎن ارﺳﺎل ﭘﻴﺎم اﺳﺖ‪.‬‬
‫( `‪CREATE TABLE `message‬‬
‫‪`senderId` VARCHAR(50) NOT NULL ,‬‬
‫‪`message` VARCHAR(50) NOT NULL ,‬‬
‫`‪`date‬‬ ‫‪DATETIME NOT NULL ,‬‬
‫`‪`Id‬‬ ‫‪INT NOT NULL AUTO_INCREMENT ,‬‬
‫)`‪PRIMARY KEY (`Id‬‬
‫;)‬

‫)‪varchar(50‬‬ ‫‪senderId‬‬
‫)‪varchar(50‬‬ ‫‪message‬‬
‫‪datetime‬‬ ‫‪date‬‬
‫‪auto_increment‬‬ ‫)‪int(10‬‬ ‫*‪Id‬‬
‫ﺟﺪول ‪ 7-2‬ﻓﻴﻠﺪﻫﺎي ﺟﺪول ﭘﻴﺎم‬
‫ﭼﮕﻮ ﻧﮕﻲ ﭘﻴﺎده ﺳﺎزي ‪ChatRoom‬‬
‫در اﻳﻦ ﻣﺮﺣﻠﻪ از ﻛﺎر ﺑﺎﻳﺪ ﺑﻪ ﻃﺮاﺣﻲ ﺑﺮﻧﺎﻣﻪ ﺑﭙﺮدازﻳﺪ‪ .‬در ﻣﺮﺣﻠـﻪ اول ﺑﺎﻳـﺪ ﻋﻤﻠﻴـﺎت اﺟﺮاﻳـﻲ در ﺑﺮﻧﺎﻣـﻪ را ﺷﻨﺎﺳـﺎﻳﻲ‬
‫ﻛﻨﻴﺪ‪ .‬اﻳﺠﺎد ﻳﻚ ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي‪ ،‬ورود ﺑﻪ ﺳﺎﻳﺖ‪ ،‬ارﺳﺎل ﭘﻴﺎم‪ ،‬ﻣﺸﺎﻫﺪه ﻟﻴﺴﺘﻲ از ﻛﺎرﺑﺮان ﻓﻌـﺎل‪ ،‬ﻣـﺸﺎﻫﺪه اﻃﻼﻋـﺎت‬
‫ﻛﺎرﺑﺮان‪ ،‬درﻳﺎﻓﺖ ﭘﻴﺎم و ﺧﺮوج از ﺳﺎﻳﺖ ﻋﻤﻠﻴﺎﺗﻲ ﻫﺴﺘﻨﺪ ﻛﻪ در اﻳﻦ ﺑﺮﻧﺎﻣﻪ اﻧﺠﺎم ﻣﻲ ﮔﻴﺮﻧﺪ‪.‬‬
‫در ﻣﺮﺣﻠﻪ ﺑﻌﺪ ﺑﺎﻳﺪ ﻋﻤﻠﻴﺎت را دﺳﺘﻪ ﺑﻨﺪي ﻛﻨﻴﺪ ﺗﺎ ﺑﺪاﻧﻴﺪ در ﻫﺮ ﺻﻔﺤﻪ اي ﻛﻪ ﻃﺮاﺣﻲ ﻣﻲ ﻛﻨﻴﺪ ﭼـﻪ ﻋﻤﻠﻴـﺎﺗﻲ اﺟـﺮا‬
‫ﺷﻮد و ﺗﻌﺪاد ﺻﻔﺤﺎت ﻣﻮرد ﻧﻴﺎز ﺑﺮﻧﺎﻣﻪ ﭼﻪ ﺗﻌﺪاد اﺳﺖ‪ .‬اﻳﻦ دﺳﺘﻪ ﺑﻨﺪي‪ ،‬ﺑﻪ ﻣﺠﻤﻮﻋﻪ ﻋﻤﻠﻴﺎت ﻣـﺸﺎﺑﻪ و ﻳـﺎ ﻣـﺮﺗﺒﻂ ﺑـﺎ‬
‫ﻳﻜﺪﻳﮕﺮ‪ ،‬ﻧﻈﺮ و ﺗﻔﻜﺮ ﻃﺮاح ﺳﺎﻳﺖ ﺑﺴﺘﮕﻲ دارد‪ .‬دﺳﺘﻪ ﺑﻨﺪي ﻛﻪ در اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﺻﻮرت ﮔﺮﻓﺘﻪ ﺑﺪﻳﻦ ﺷﻜﻞ اﺳﺖ‪:‬‬
‫‪ -1‬ورود ﺑﻪ ﺳﺎﻳﺖ و اﻳﺠﺎد ﻳﻚ ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي‪.‬‬
‫ﺑﺮاي اﻳﻨﻜﻪ ﻛﺎرﺑﺮ ﺟﺪﻳﺪ ﻫﻨﮕﺎم ﻣﺮاﺟﻌﻪ ﺑﻪ ﺑﺮﻧﺎﻣﻪ دﭼﺎر ﺳﺮدرﮔﻤﻲ ﻧﺸﻮد اﻳﻦ دو ﺑﺨﺶ در ﻛﻨﺎر ﻫﻢ ذﻛﺮ ﺷـﺪه اﺳـﺖ‬
‫ﺗﺎ ﻛﺎرﺑﺮ ﺑﻼﻓﺎﺻﻠﻪ ﺑﻌﺪ از اﻳﺠﺎد ﻳﻚ ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي ﺑﺘﻮاﻧﺪ ﺑﻪ ﺳﺎﻳﺖ وارد ﺷﻮد‪.‬‬
‫‪ -2‬ﻣﺠﻤﻮﻋﻪ ﻋﻤﻠﻴﺎت ارﺳﺎل ﭘﻴﺎم‪ ،‬ﻣﺸﺎﻫﺪه ﻟﻴﺴﺘﻲ از ﻛـﺎرﺑﺮان ﻓﻌـﺎل‪ ،‬ﻣـﺸﺎﻫﺪه اﻃﻼﻋـﺎت ﻛـﺎرﺑﺮان‪ ،‬درﻳﺎﻓـﺖ ﭘﻴـﺎم و‬
‫ﺧﺮوج از ﺳﺎﻳﺖ را ﻣﻲ ﺗﻮان در ﻳﻚ دﺳﺘﻪ ﻗﺮار داد زﻳﺮا ﺑﻪ ﻧﻈﺮ ﻣﻲ رﺳﺪ ﻫﻤﻪ ي اﻳﻦ ﻋﻤﻠﻴﺎت ﺑﺎﻳـﺪ در ﻳـﻚ ﺻـﻔﺤﻪ‬
‫ﻗﺮار ﺑﮕﻴﺮﻧﺪ اﻣﺎ ﺑﺮﺧﻲ از اﻳﻦ ﻋﻤﻠﻴﺎت ﻣﺎﻧﻨﺪ ﻧﻤﺎﻳﺶ ﻟﻴﺴﺖ ﻛﺎرﺑﺮان ﻓﻌﺎل ﻣﺮﺗﺒﻂ ﺑﺎ ﻧﻤﺎﻳﺶ ﭘﻴﺎم ﻫﺎ ﻧﻴﺴﺖ‪ .‬در اﻳﻦ ﻣﻮرد‬
‫ﻫﻨﮕﺎم ﭘﻴﺎده ﺳﺎزي ﺑﻴﺸﺘﺮ ﺑﺤﺚ ﻣﻲ ﻛﻨﻴﻢ‪.‬‬

‫ﺻﻔﺤﻪ‪Login.html‬‬
‫ﻫﻤﺎن ﻃﻮر ﻛﻪ ﺑﻴﺎن ﺷﺪ ﻫﺮ دﺳﺘﻪ از ﻋﻤﻠﻴﺎت ﻣﻨﺠﺮ ﺑﻪ ﻃﺮاﺣﻲ ﻳﻚ ﺻﻔﺤﻪ وب ﻣﻲ ﺷـﻮﻧﺪ در ﻧﺘﻴﺠـﻪ ﺑـﺮاي دﺳـﺘﻪ اول‬
‫ﻳﻚ ﺻﻔﺤﻪ ورود ﺑﻪ ﺳﺎﻳﺖ ﺑﺎ ﻧﺎم ‪ login.html‬اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‪ .‬اﻳﻦ ﺻﻔﺤﻪ داراي دو ﺑﺨﺶ اﺳﺖ‪:‬‬
‫‪ signup -‬ﺑﺨﺶ اﻳﺠﺎد ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي ﺑﺮاي ﻛﺴﺎﻧﻲ ﻛﻪ ‪ username‬ﻧﺪارﻧﺪ‪.‬‬
‫‪ signon -‬ﺑﺨﺶ ورود ﺑﻪ ﺑﺮﻧﺎﻣﻪ ﺑﺮاي ﻛﺎرﺑﺮاﻧﻲ ﻛﻪ داراي ‪ username‬ﻣﻲ ﺑﺎﺷﻨﺪ‪.‬‬
 ‫ﺑﺮﻧﺎﻣﻪ ‪chatRoom‬‬ ‫‪  138‬ﻓﺼﻞ ‪6‬‬

‫در ﺷﻜﻞ ‪ ،7-1‬ﻧﻤﺎي از ﻃﺮاﺣﻲ اﻳﻦ ﺻﻔﺤﻪ را ﻣﺸﺎﻫﺪه ﻣﻲ ﻧﻤﺎﻳﺪ‪ .‬اﻳﻦ ﺻﻔﺤﻪ ﻣﻲ ﺗﻮاﻧﺪ ﺑﺎ ﻃﺮاﺣﻲ ﺷﻤﺎ ﻣﺘﻔﺎوت ﭘﻴـﺎده‬
‫ﺳﺎزي ﺷﻮد‪.‬‬
‫در اﻳﻦ ﻗﺴﻤﺖ ﺑﻪ ﻧﻮﺷﺘﻦ ﻛﺪﻫﺎي ﻣﻮرد ﻧﻴﺎز اﻳﻦ ﺑﺨﺶ ﻫﺎ ﻣﻲ ﭘﺮدازﻳﻢ‪ .‬ﻛﺎرﺑﺮ در ﺻﻮرت ﻧﺪا ﺷـﺘﻦ ‪ username‬ﺑـﺎ‬
‫وارد ﻛﺮدن اﻃﻼﻋﺎت ﺷﺨﺼﻲ ﺧﻮد و ‪ signup‬ﻛﺮدن ﻣﻲ ﺗﻮاﻧﺪ ﻳﻚ ‪ username‬ﺑـﺮاي ﺧـﻮد اﻳﺠـﺎد ﻛﻨـﺪ‪ .‬ﺑـﺎ‬
‫ﻓﺸﺮده ﺷﺪن دﻛﻤﻪ ‪ signup‬ﺑﺎﻳﺪ اﻃﻼﻋﺎت ﻛﺎرﺑﺮ ﺑﻪ ﺟﺪول ‪ user‬اﺿﺎﻓﻪ ﺷﻮد‪ .‬ﭘﺲ ﺑﺎ ﻓﺸﺮدن دﻛﻤـﻪ ‪signup‬‬
‫ﺑﺎﻳﺪ ﻋﻤﻠﻴﺎﺗﻲ اﻧﺠﺎم ﮔﻴﺮد ﻛﻪ ﻣﺎ اﺟﺮاي آن ﻋﻤﻠﻴﺎت را ﺑﺎ اﺟﺮاي ﺗﺎﺑﻊ )(‪ signUp‬ﻣﺤﻘﻖ ﻣﻲ ﺳﺎزﻳﻢ اﻣﺎ ﻣﺮﺣﻠﻪ ﺑﻌـﺪ‬
‫ﺑﺎﻳﺪ ﺗﺼﻤﻴﻢ ﺑﮕﻴﺮﻳﻢ اﻳﻦ ﺗﺎﺑﻊ ﭼﻪ ﻋﻤﻠﻴﺎﺗﻲ را ﺑﺮاي ﻣﺎ اﻧﺠﺎم دﻫﺪ‪ .‬در اﻳﻨﺠﺎ ﻣﺎ ﻗﺼﺪ دارﻳﻢ اﻃﻼﻋﺎت ﻛﺎرﺑﺮان ﺑـﺼﻮرت‬
‫‪ Ajax‬ﺑﻪ ﺳﺮور ارﺳﺎل ﺷﻮد ﺗﺎ آن ﺟﺎ اﻳﻦ اﻃﻼﻋﺎت ﺑﻪ ﺟﺪول ﻛﺎرﺑﺮان اﺿﺎﻓﻪ ﮔﺮدد‪ .‬ﺑﺮاي ارﺳﺎل اﻃﻼﻋﺎت ﺑﻪ ﺳﺮور‬
‫در ﺗﻤﺎم ﻃﻮل اﻳﻦ ﺑﺮﻧﺎﻣﻪ از ﻣﺘﺪ ‪ GET‬اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ .‬اﺑﺘـﺪا ﻣﻘـﺎدﻳﺮ داده اي درون ﻓـﺮم ﺛﺒـﺖ ﻧـﺎم را ﺑـﻪ ﻣﺘﻐﻴﺮﻫـﺎي‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ اﻧﺘﺴﺎب ﻣﻲ دﻫﻴﻢ‪ .‬ﺑﻪ ﻫﺮ ﻋﻨﺼﺮ ﺑﺮ روي ﺻﻔﺤﻪ ﻳـﻚ ‪ Id‬ﻧـﺴﺒﺖ ﻣـﻲ دﻫـﻴﻢ ﺗـﺎ ﺑﺘـﻮاﻧﻴﻢ ﺑـﺎ اﺳـﺘﻔﺎده از‬
‫دﺳﺘﻮر‪ document.getElementById(id).value‬ﺑﻪ ﻣﻘﺪار آن ﻋﻨﺼﺮ دﺳﺘﺮﺳﻲ داﺷﺘﻪ ﺑﺎﺷﻴﻢ‪.‬‬

‫ﺷﻜﻞ‪ 7-1‬ﻧﻤﺎي از ﻃﺮاﺣﻲ ﺻﻔﺤﻪ ‪login.html‬‬

‫{)(‪function signUp‬‬
‫‪var textSignupUserName = document.‬‬
‫;‪getElementById('textSignupUserName').value‬‬
‫;‪var textName=document.getElementById('textName').value‬‬
‫)'‪var textLastName=document.getElementById('textLastName‬‬
‫;‪.value‬‬
‫‪var signupPassword = document‬‬
‫;‪.getElementById('signupPassword').value‬‬
‫;‪var textAge=document.getElementById('textAge').value‬‬
‫)'‪var selectGender =document.getElementById('selectGender‬‬
‫)'‪.options[document.getElementById('selectGender‬‬
‫;‪.selectedIndex].value‬‬
‫ﻓﺼﻞ ‪139  6‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪chatRoom‬‬

‫ﻫﻤﺎن ﻃﻮر ﻛﻪ ﮔﻔﺘﻪ ﺷﺪ در اﻳﻦ ﺑﺮﻧﺎﻣﻪ از ﻣﺘﺪ ‪ GET‬ﺑﺮاي ارﺳﺎل اﻃﻼﻋﺎت ﺑﻪ ﺳﻤﺖ ﺳﺮور اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﻢ ﺑﻪ ﻫﻤـﻴﻦ‬
‫ﺧﺎﻃﺮ ﺑﺎﻳﺪ ﺑﻪ ﻧﺎم ﺻﻔﺤﻪ اي ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﻢ در ﺳﻤﺖ ﺳﺮور اﺟﺮا ﺷﻮد اﻳﻦ اﻃﻼﻋﺎت را اﺿﺎﻓﻪ ﻛﻨـﻴﻢ در ﻧﺘﻴﺠـﻪ ﻳـﻚ‬
‫رﺷﺘﻪ ﺑﻪ ﻧﺎم ‪ snd‬ﺑﺎ ﻣﻘﺎدﻳﺮ ﻣﺘﻐﻴﺮﻫﺎ اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
‫‪var snd = '?textSignupUserName=' + textSignupUserName‬‬
‫‪+'&textName=' + textName + '&textLastName=' +‬‬
‫‪textLastName +'&signupPassword=' + signupPassword‬‬
‫'=‪+'&textAge=' + textAge + '&selectGender‬‬
‫;‪+ selectGender +'&textAge=' + textAge‬‬
‫در ﻧﻈﺮ ﺑﮕﻴﺮﻳﺪ ﻛﻪ ﺑﺮاي ارﺳﺎل اﻃﻼﻋﺎت ﺑـﻪ ﺳـﺮور و درﻳﺎﻓـﺖ ﺟـﻮاب از ﺳـﺮور ﺑـﺎ اﺳـﺘﻔﺎده از روش ‪ Ajax‬ﻳـﻚ‬
‫ﻛﻼس ﺑﻪ ﻧﺎم ‪ Asynchronous‬ﻧﻮﺷﺘﻪ اﻳﻢ‪ .‬از ﻛﻼس ‪ Asynchronous‬ﻳﻚ ﺷﻲ اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ و ﺻـﻔﺤﻪ‬
‫ﻣﻮرد ﻧﻈﺮ در ﺳﺮور را ﺑﻪ ﻫﻤﺮاه آن رﺷﺘﻪ ﺗﻮﻟﻴﺪي در ﻗﺴﻤﺖ ﻗﺒﻞ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
‫;)(‪Asynchronous = new Asynchronous‬‬

‫ﻣﺘﺪي در اﻳﻦ ﻛﻼس ﺑﺮاي ﻓﺮاﺧﻮاﻧﻲ ﺻﻔﺤﻪ از ﺳﻤﺖ ﺳﺮور ﺑﻪ ﻧﺎم ‪ call‬ﻧﻮﺷﺘﻪ ﺷﺪه اﺳﺖ‪ .‬ﻣﺘﺪ ‪ call‬ﺑـﺮاي اﺷـﻴﺎ‬
‫ﻛﻼس داراي ﺳﻪ ﭘﺎراﻣﺘﺮ اﺳﺖ ﻛﻪ ﭘﺎراﻣﺘﺮ اول آن ﻧﺎم ﺻﻔﺤﻪ ي اﺳﺖ ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﻢ در ﺳـﻤﺖ ﺳـﺮور اﺟـﺮا ﺷـﻮد‬
‫ﭘﺎراﻣﺘﺮ دوم ﻳﻚ ﻣﻘﺪار ﺗﻬﻲ اﺳﺖ و ﭘﺎراﻣﺘﺮ ﺳﻮم ﻧﺎم روش ارﺳﺎل اﻃﻼﻋﺎت ﺑﻪ ﺳﺮور ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫;)'‪Asynchronous.call('SignUp.php'+snd,'','GET‬‬

‫}‬
‫در اﻳﻦ ﺟﺎ ﺑﻬﺘﺮ اﺳﺖ ﻛﻼس ‪ Asynchronous‬را ﺑﺮرﺳﻲ ﻛﻨﻴﻢ‪ .‬ﻛﻼس ‪ Asynchronous‬ﻛﻼﺳﻲ اﺳﺖ ﻛﻪ‬
‫در ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺗﻌﺮﻳﻒ ﻣﻲ ﺷﻮد و ﺗﻮاﺑﻊ ﻻزم ﺑﺮاي ﻛﺎر ﺑﺎ ﺷﻲ ‪ XmlHttpRequest‬را درﻛﻨﺎر ﻫﻢ ﻗﺮار ﻣـﻲ‬
‫دﻫﺪ اﻳﻦ ﻛﻼس را در ﻳﻚ ﻓﺎﻳﻞ دﻳﮕﺮ ﺑﻪ ﻧﺎم ‪ Asynchronous.js‬ﺗﻌﺮﻳﻒ ﻣﻲ ﻛﻨﻴﻢ‪ .‬ﺑﺮاي ﺗﻌﺮﻳﻒ ﻛﻼس در‬
‫ﺟﺎوااﺳﻜﺮﻳﭙﺖ اﺑﺘﺪا ﻳﻚ ﺗﺎﺑﻊ ﺑﺎ ﻧﺎم ﻛﻼس ﺗﻌﺮﻳﻒ ﻣﻲ ﻛﻨﻴﻢ‪ .‬اﻳﻦ ﺗﺎﺑﻊ در واﻗﻊ ﺳﺎزﻧﺪه ﻛﻼس اﺳﺖ‪.‬‬
‫{ ) (‪function Asynchronous‬‬
‫‪//...‬‬
‫}‬
‫ﺑﺮاي ﺗﻌﺮﻳﻒ ﻣﺘﺪ ﻫﺎ ي ﻛﻼس از ﻛﻠﻤﻪ ‪ prototype‬اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﻢ ﺑﺪﻳﻦ ﺻﻮرت‪:‬‬
‫;ﻧﺎم ﻳﻚ ﺗﺎﺑﻊ = ﻧﺎم ﻣﺘﺪ‪.prototype.‬ﻧﺎم ﻛﻼس‬
‫ﻣﺘﺪ ﻛﻼس را ﺑﻪ ﻧﺎم ﻳﻚ ﺗﺎﺑﻊ ﻧﺴﺒﺖ ﻣﻲ دﻫﻴﻢ ﻛﻪ درﻧﺘﻴﺠﻪ ﻓﺮاﺧﻮاﻧﻲ ﻣﺘﺪ ﻣﻮﺟﺐ ﻓﺮاﺧﻮاﻧﻲ آن ﺗﺎﺑﻊ ﻣﻲ ﺷﻮد‪.‬‬
‫اﻳﻦ ﺗﻌﺮﻳﻒ ﻫﺎ ﺧﺎرج از ﺗﺎﺑﻊ ﺳﺎزﻧﺪه و ﻣﺠﺰا ﻧﻮﺷﺘﻪ ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
‫ﻣﻲ ﺗﻮان ﻣﺘﺪﻫﺎ را ﺑﺼﻮرت دﻳﮕﺮ ﻧﻴﺰ ﺗﻌﺮﻳﻒ ﻛﺮد‪ ،‬ﻣﺘﺪﻫﺎ را ﺑﺪون ﻛﻠﻤﻪ ‪ prototype‬در داﺧﻞ ﺳـﺎزﻧﺪه ﻛـﻼس‬
‫ﺑﻪ ﻧﺎم ﻳﻚ ﺗﺎﺑﻊ ﻧﺴﺒﺖ داد اﻣﺎ ﺗﻔﺎوﺗﻲ ﺑﻴﻦ اﻳﻦ دو روش اﺳﺖ‪ .‬در روش اول ﻣﺘﺪﻫﺎي ﻛﻼس ﺑﺼﻮرت ﻣﺸﺘﺮك ﺑـﺮاي‬
‫ﺗﻤﺎم ﻧﻤﻮﻧﻪ ﻫﺎي ﻛﻼس اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ اﻣﺎ در روش دوم ﻫﺮ ﻧﻤﻮﻧﻪ ﻛﻼس از ﻫﺮ ﺗﺎﺑﻊ ﻣـﺮﺗﺒﻂ ﺑـﻪ اﻳـﻦ ﻣﺘـﺪﻫﺎ ﻳـﻚ‬
‫ﻛﭙﻲ ﻣﻲ ﮔﻴﺮد‪ .‬در اﻳﻦ ﻛﻼس ﻣﺎ ‪ 5‬ﺗﺎ ﻣﺘﺪ ﺑﺪﻳﻦ ﺷﻜﻞ ﺗﻌﺮﻳﻒ ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
 ‫ﺑﺮﻧﺎﻣﻪ ‪chatRoom‬‬ ‫‪  140‬ﻓﺼﻞ ‪6‬‬

‫;‪Asynchronous.prototype.loading = Asynchronous_loading‬‬
‫;‪Asynchronous.prototype.loaded = Asynchronous_loaded‬‬
‫;‪Asynchronous.prototype.interactive = Asynchronous_interactive‬‬
‫;‪Asynchronous.prototype.complete = Asynchronous_complete‬‬
‫;‪Asynchronous.prototype.call = Asynchronous_call‬‬

‫ﺗﺎﺑﻊ ﻫﺎي ﻣﺮﺗﺒﻂ ﺑﺎ اﻳﻦ ﻣﺘﺪﻫﺎ را ﻧﻴﺰ ﺗﻌﺮﻳﻒ ﻣﻲ ﻛﻨﻴﻢ‪.‬‬

‫‪function‬‬ ‫)(‪Asynchronous_loading‬‬
‫{‬
‫}‬
‫‪function‬‬ ‫)(‪Asynchronous_loaded‬‬
‫{‬
‫}‬
‫‪function‬‬ ‫)(‪Asynchronous_interactive‬‬
‫{‬
‫}‬
‫‪function‬‬ ‫‪Asynchronous_complete(status, statusText,‬‬
‫)‪responseText, responseHTML‬‬
‫{‬
‫}‬

‫ﻣﺘﺪ ‪ complete‬را ﺑﺎ ﻳﻚ ﺗﺎﺑﻌﻲ ﻣﺮﺗﺒﻂ ﻣﻲ ﺳﺎزﻳﻢ ﻛﻪ داراي ﭼﻬﺎر ﺗﺎ ﭘﺎراﻣﺘﺮ اﺳﺖ‪ .‬اﻳﻦ ﻣﺘﺪ زﻣﺎﻧﻲ اﺟﺮا ﻣﻲ ﺷـﻮد‬
‫و ﻣﻮﺟﺐ ﻓﺮاﺧﻮاﻧﻲ ﺗﺎﺑﻊ ﻣﺮﺗﺒﻂ ﺑﻪ ﺧﻮد ﻣﻲ ﺷﻮد ﻛﻪ درﺧﻮاﺳﺖ در ﺳﺮور اﺟﺮا ﺷﺪه ﺑﺎﺷﺪ و اﻃﻼﻋﺎت ﺑﺮاي ﻛﻼﻳﻨﺖ‬
‫ارﺳﺎل ﺷﻮد‪ .‬در ﺳﺎزﻧﺪه ﻛﻼس ﻳﻚ ﻋﻀﻮ داده اي ﺑﻪ ﻧﺎم ‪ _xmlhttp‬ﺗﻌﺮﻳﻒ ﻣﻲ ﻛﻨﻴﻢ ﻛﻪ ﺑﻪ ﻳﻚ ﻧﻤﻮﻧـﻪ از ﺷـﻲ‬
‫‪ XMLHttpRequest‬ﻧﺴﺒﺖ داده ﻣﻲ ﺷﻮد‪ .‬ﻻزم ﺑﺬﻛﺮ اﺳﺖ ﻛـﻪ ﺑـﺮاي دﺳﺘﺮﺳـﻲ ﺑـﻪ اﻋـﻀﺎي داده اي در ﻳـﻚ‬
‫ﻛﻼس ﺑﺎﻳﺪ از ﻛﻠﻤﻪ ﻛﻠﻴﺪي ‪ this‬اﺳﺘﻔﺎده ﺷﻮد‪.‬‬
‫) (‪function Asynchronous‬‬
‫{‬
‫;)(‪this._xmlhttp = new XmlHttpRequest‬‬
‫}‬

‫اﻳﺠﺎد ﻧﻤﻮﻧﻪ از ﺷﻲ ‪ XmlHttpRequest‬ﻣﻮﺟﺐ اﺟﺮاي ﺗﺎﺑﻊ ﺳﺎزﻧﺪه ‪ XmlHttpRequest‬ﻣﻲ ﺷﻮد‪.‬‬

‫در اﻳﻦ ﺗﺎﺑﻊ‪ ،‬ﻧﻮع ﺷﻲ ‪ XmlHttpRequest‬ﻣﺘﻨﺎﺳﺐ ﺑﺎ ﻣﺮورﮔﺮ اﻧﺘﺨﺎب ﻣﻲ ﺷﻮد‪ .‬اﻳـﻦ دﺳـﺘﻮرات ﻗـﺒﻼ ﺗﻮﺿـﻴﺢ‬
‫داده ﺷﺪه ﺑﻮدﻧﺪ‪ .‬اﻳﻦ ﺗﺎﺑﻊ ﻳﻚ ﻛﻼس ‪ XmlHttpRequest‬اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ و ﺧـﻮد ﺗـﺎﺑﻊ‪ ،‬ﺳـﺎزﻧﺪه ﻛـﻼس ﻣـﻲ‬
‫ﺑﺎﺷﺪ‪ .‬در دﺳﺘﻮر ‪ if‬اول ﺑﺮرﺳﻲ ﻣﻲ ﻛﻨﻴﻢ ﻛﻪ ﺷﻲ ‪ XMLHttpRequest‬ﻣﻮﺟﻮد اﺳـﺖ؟ اﮔـﺮ ﻣﻮﺟـﻮد ﺑﺎﺷـﺪ از‬
‫آن ﻳﻚ ﻧﻤﻮﻧﻪ ﻣﻲ ﮔﻴﺮﻳﻢ‪ .‬دﺳﺘﻮر ‪ window.XMLHttpRequest‬ﺑﺮاي ﺗﻤﺎم ﻣﺮورﮔﺮﻫﺎ ﺑﺠﺰ ‪Internet‬‬
‫‪ Explorer‬ﻛﺎر ﻣﻲ ﻛﻨـﺪ‪ .‬در دﺳـﺘﻮر ‪ if‬دوم ﺑـﺎ دﺳـﺘﻮر ‪ window.ActiveXObject‬ﻣﺮورﮔـﺮ ‪ IE‬را‬
‫ﺑﺮرﺳﻲ ﻣﻲ ﻛﻨﻴﻢ در ﺣﻠﻘﻪ ‪ for‬ﺗﻚ ﺗﻚ ﻧﺴﺨﻪ ﻫﺎي ﻣﺮورﮔﺮ ‪ IE‬ﺑﺮرﺳﻲ ﻣﻲ ﺷﻮد و از ﺷﻲ ﻣﻮرد ﻧﻈـﺮ ﻧﻤﻮﻧـﻪ ﻣـﻲ‬
‫ﮔﻴﺮﻳﻢ‪ .‬در ﺻﻮرﺗﻲ ﻛﻪ ﻣﺮورﮔﺮ ﺷﻨﺎﺧﺘﻪ ﻧﺸﻮد ﭘﻴﻐﺎم ﺧﻄﺎي را اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
141  6 ‫ﻓﺼﻞ‬ chatRoom ‫ﺑﺮﻧﺎﻣﻪ‬

function XmlHttpRequest()
{
if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
var msxmls = new Array(
'Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0',
'Msxml2.XMLHTTP',
'Microsoft.XMLHTTP');
for (var i = 0; i < msxmls.length; i++)
{
try
{
return new ActiveXObject(msxmls[i]);
} catch (e)
{
}
}
}
throw new Error("Could not instantiate XMLHttpRequest");
}

‫ ﺑﻌــﺪ از ﻓﺮاﺧــﻮاﻧﻲ اﻳــﻦ ﻣﺘــﺪ ﺗــﺎﺑﻊ‬.‫ ﺑــﺮاي اﻳﺠــﺎد ﻳــﻚ درﺧﻮاﺳــﺖ در ﺳــﻤﺖ ﻛﻼﻳﻨــﺖ ﻣــﻲ ﺑﺎﺷــﺪ‬call ‫ﻣﺘــﺪ‬
Asynchronous ‫ ﺑﺮاي اﻳﻨﻜﻪ ﻧﻤﻮﻧﻪ ﻫﺎي ﻣﺘﻌـﺪد از ﻛـﻼس‬.‫ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‬Asynchronous_call
‫ ﺗﻌﺮﻳﻒ ﻛﺮدﻳﻢ ﻛﻪ ﺑﻪ ﺷﻲ ﺟﺎري ﻣـﺮﺗﺒﻂ ﻣـﻲ ﺷـﻮد در‬instance ‫ﺑﺘﻮاﻧﻨﺪ ﺑﺎ ﻳﻜﺪﻳﮕﺮ ﻛﺎر ﻛﻨﻨﺪ ﻳﻚ ﻣﺘﻐﻴﺮ ﺑﻪ ﻧﺎم‬
.‫ ﺟﺪاﮔﺎﻧﻪ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‬Asynchronous_call ‫ ﺗﺎﺑﻊ‬،‫اﻳﻦ ﺻﻮرت ﺑﺮاي درﺧﻮاﺳﺖ ﻫﺎي ﻣﺘﻔﺎوت‬

function Asynchronous_call(url,send,method)
{
var instance = this;
this._xmlhttp.open(method, url, true);
this._xmlhttp.onreadystatechange = function()
{
switch(instance._xmlhttp.readyState)
{
case 1:
instance.loading();
break;
case 2:
instance.loaded();
 ‫ﺑﺮﻧﺎﻣﻪ ‪chatRoom‬‬ ‫‪  142‬ﻓﺼﻞ ‪6‬‬

‫;‪break‬‬
‫‪case 3:‬‬
‫;)(‪instance.interactive‬‬
‫;‪break‬‬
‫‪case 4:‬‬
‫{‪try‬‬

‫‪instance.complete(instance._xmlhttp.status,‬‬
‫‪instance._xmlhttp.statusText,‬‬
‫‪instance._xmlhttp.responseText,‬‬
‫;)‪instance._xmlhttp.responseXML‬‬

‫{)‪}catch(e‬‬
‫;) ''‪instance.complete('','','Error',‬‬
‫;‪}break‬‬
‫}‬
‫}‬
‫;)‪this._xmlhttp.send(send‬‬
‫}‬

‫ﺑﺮاي اﺳﺘﻔﺎده از ﻛﻼس ‪ Asynchronous‬ﺑﺎﻳﺪ اﻳﻦ ﻛﻼس ﺑﻪ ﺻﻔﺤﻪ وب اﺿﺎﻓﻪ ﮔﺮدد اﻳﻦ ﻋﻤﻠﻴﺎت را ﺑﺎ دﺳـﺘﻮر‬
‫زﻳﺮ اﻧﺠﺎم ﻣﻲ دﻫﻴﻢ‪.‬‬
‫"‪<script type="text/javascript‬‬
‫>‪src="Java_script/Asynchronous.js"></script‬‬

‫رﺷﺘﻪ ‪ snd‬ﺑﻪ ﻧﺎم ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮ اﻟﺤـﺎق ﻣـﻲ ﺷـﻮد‪ .‬ﺑﻌـﺪ از ﻓﺮاﺧـﻮاﻧﻲ ﺻـﻔﺤﻪ ‪ signUp.php‬ﺗﻮﺳـﻂ دﺳـﺘﻮر‬
‫)'‪ asynchronous.call('SignUp.php'+snd,'','GET‬اﻃﻼﻋﺎت ﻛـﺎرﺑﺮ ﺑـﻪ ﺳـﺮور و اﻳـﻦ‬
‫ﺻﻔﺤﻪ ارﺳﺎل ﻣﻲ ﺷﻮد‪ .‬در اﻳﻦ ﺻﻔﺤﻪ ﻣﺎ ﺑﺎﻳﺪ اﻃﻼﻋﺎت ﻛﺎرﺑﺮ را درﻳﺎﻓﺖ و ﺑﻌﺪ از اﻳﻨﻜﻪ ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي ﭼـﻚ ﺷـﺪ‬
‫ﻛﻪ ﺗﻜﺮاري ﻧﺒﺎﺷﺪ ﺑﻪ ﺟﺪول ‪ user‬اﺿﺎﻓﻪ ﺷﻮد‪ .‬در اﻳﻦ ﺟﺎ ﺑﻪ ﺑﺮرﺳﻲ ﻛﺪ ﺻﻔﺤﻪ ‪ signup.php‬ﻣﻲ ﭘﺮدازﻳﻢ‪.‬‬
‫‪<?php‬‬
‫در اﻳﻦ ﻗﺴﻤﺖ اﻃﻼﻋـﺎت ﻛـﺎرﺑﺮ ﻛـﻪ از ﺳـﻤﺖ ﻛﻼﻳﻨـﺖ ارﺳـﺎل ﺷـﺪه‪ ،‬درﻳﺎﻓـﺖ ﻣـﻲ ﺷـﻮد و در ﻣﺘﻐﻴﺮﻫـﺎي ﻣـﺮﺗﺒﻂ‬
‫ﻧﮕﻬﺪاري ﻣﻲ ﺷﻮد‪.‬‬
‫;]'‪$UserName=$_GET['textSignupUserName‬‬
‫;]'‪$FirstName =$_GET['textName‬‬
‫;]'‪$LastName =$_GET['textLastName‬‬
‫;]'‪$Password =$_GET['signupPassword‬‬
‫;]'‪$Age =$_GET['textAge‬‬
‫;]'‪$Gender =$_GET['selectGender‬‬

‫دﺳـﺘﻮر )''‪mysql_connect('localhost','root',‬‬ ‫ﻣﺮﺣﻠﻪ ﺑﻌﺪ اﺗﺼﺎل ﺑﻪ ﺑﺎﻧﻚ اﻃﻼﻋـﺎﺗﻲ اﺳـﺖ ﻛـﻪ ﺑـﺎ‬
‫اﻧﺠﺎم ﻣﻲ ﺷﻮد‪ .‬ﭘﺎراﻣﺘﺮ اول اﻳﻦ دﺳﺘﻮر آدرس ﺳﺮوﻳﺲ دﻫﻨﺪه وب اﺳﺖ ﭘﺎراﻣﺘﺮ دوم ﻧﺎم ﻛـﺎرﺑﺮي ﺑـﺮاي اﺗـﺼﺎل ﺑـﻪ‬
‫ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ و ﭘﺎراﻣﺘﺮ ﺳﻮم اﻳﻦ دﺳﺘﻮر رﻣﺰ ﻋﺒﻮر ﺑﺮاي اﺗﺼﺎل ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫ﻓﺼﻞ ‪143  6‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪chatRoom‬‬

‫;)''‪$link = mysql_connect('localhost' ,'root',‬‬

‫ﺑﻌﺪ از اﺗﺼﺎل ﺑﻪ ﺳﺮور ﺑﺎﻳﺪ ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ ﻣﻮرد ﻧﻈﺮ را اﻧﺘﺨﺎب ﻛﻨﻴﻢ‪.‬‬
‫;)‪mysql_select_db('chatroom',$link‬‬

‫در اﻳﻦ ﻣﺮﺣﻠﻪ ﻳﻚ دﺳﺘﻮر ﭘﺮس و ﺟﻮ ﺑﺮاي ﺑﺮرﺳﻲ ﺗﻜﺮاري ﻧﺒﻮدن ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي ﻣﻲ ﻧﻮﻳﺴﻴﻢ‪.‬‬
‫‪// search for Duplicate userName.‬‬
‫;"'‪$cmd = "Select id from User where UserName='$UserName‬‬

‫ﭘﺮس و ﺟﻮ ﻣﻮرد ﻧﻈﺮ را ﺑﺎ دﺳﺘﻮر زﻳﺮ اﺟﺮا ﻣﻲ ﻛﻨﻴﻢ‪.‬‬

‫;)‪$res = mysql_query($cmd,$link‬‬
‫ﺑﺮاي اﻳﻨﻜﻪ ﺑﺪاﻧﻴﻢ آﻳﺎ رﻛﻮدي ﭘﻴﺪا ﺷـﺪ ﻳـﺎ ﻧـﻪ؟ از دﺳـﺘﻮر)‪ mysql_num_rows($res‬اﺳـﺘﻔﺎده ﻣـﻲ ﻛﻨـﻴﻢ‪.‬‬
‫ﭘﺎراﻣﺘﺮ ارﺳﺎل ﺷﺪه ﺑﻪ اﻳﻦ ﺗﺎﺑﻊ ﻣﺠﻤﻮﻋﻪ رﻛﻮرد ﺣﺎﺻﻞ از ﭘﺮس وﺟﻮ ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﮔـﺮ ﺗﻌـﺪاد رﻛﻮردﻫـﺎي ﺣﺎﺻـﻞ از‬
‫اﻳﻦ ﺟﺴﺘﺠﻮ ﺑﺮاﺑﺮ ‪ 1‬ﺑﺎﺷﺪ ﭘﺲ ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي در ﺟﺪول ﻛﺎرﺑﺮان ﻣﻮﺟﻮد اﺳﺖ‪.‬‬
‫)‪if(mysql_num_rows($res)==1‬‬
‫{‬
‫;"'‪echo "Duplicate '$UserName‬‬
‫;)(‪exit‬‬
‫}‬
‫اﻣﺎ اﮔﺮ ﺣﺎﺻﻞ اﻳﻦ ﺟﺴﺘﺠﻮ ﻳﻚ ﻧﺒﺎﺷﺪ)ﻣﻨﻈﻮر ﺻﻔﺮ ﺑﺎﺷﺪ( در ﻧﺘﻴﺠـﻪ ﺷﻨﺎﺳـﻪ ﻛـﺎرﺑﺮي ﺗﻜـﺮاري ﻧﻴـﺴﺖ و اﻃﻼﻋـﺎت‬
‫ﻛﺎرﺑﺮي ﺑﺎﻳﺪ ﺑﻪ ﺟﺪول ‪ user‬اﺿﺎﻓﻪ ﺷﻮد‪.‬‬

‫‪// Insert new account to user table.‬‬

‫‪$q = "insert into User‬‬
‫)‪(UserName,FirstName,LastName,Password,Age,Gender‬‬
‫;"‪values‬‬

‫'‪$q.="'$UserName','$FirstName','$LastName','$Password‬‬
‫;")'‪,$Age,'$Gender‬‬
‫;)‪$res = mysql_query($q,$link‬‬

‫)‪if (!$res‬‬
‫اﮔﺮ ﺧﻄﺎﻳﻲ ﺣﻴﻦ اﺟﺮاي دﺳﺘﻮر ‪ insert‬رخ دﻫﺪ دﺳﺘﻮر)(‪ echo mysql_error‬ﺗﻮﺿـﻴﺤﺎت ﺧﻄـﺎ را‬
‫ﺑﺮ روي ﺻﻔﺤﻪ وب ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‪.‬‬
‫;)(‪echo mysql_error‬‬
‫‪else‬‬
‫;‪echo 200‬‬
‫;)‪mysql_close($link‬‬

‫>?‬
 chatRoom ‫ﺑﺮﻧﺎﻣﻪ‬ 6 ‫ ﻓﺼﻞ‬ 144

‫ﺑﺎ اﺳﺘﻔﺎده از دﺳﺘﻮرات ﻗﺒﻞ اﻃﻼﻋﺎت ﻛﺎرﺑﺮ ﺑﻪ ﺟـﺪول ﻛـﺎرﺑﺮان اﺿـﺎﻓﻪ ﺷـﺪ اﻣـﺎ ﻣـﺪﻳﺮﻳﺘﻲ ﺑـﺮاي ﺻـﺤﺖ اﻃﻼﻋـﺎت‬
‫ﭘـﺲ‬.‫ ﺑﺎﻳـﺪ ﻋـﺪد ﺑﺎﺷـﺪ‬age ‫ ﺑﺎﺷﺪ و ﻳﺎ اﻳﻨﻜﻪ ﻓﻴﻠـﺪ‬email ‫ ﺑﺼﻮرت ﻳﻚ آدرس‬email ‫ﻧﺪاﺷﺘﻴﻢ ﻣﺜﻼ اﻳﻨﻜﻪ ﻓﻴﻠﺪ‬
‫ در ﻗﺴﻤﺖ دﻳﮕﺮ ﺑﺮﻧﺎﻣﻪ ﻣﻜﺎﻧﻲ ﺑﺮاي ورود‬.‫ اﺣﺴﺎس ﻣﻲ ﺷﻮد‬،‫ﻧﻴﺎز ﺑﻪ ﻗﺴﻤﺖ ﻛﺪي ﺑﺮاي ﻣﺪﻳﺮﻳﺖ ﺑﺮ روي اﻳﻦ ﻓﻴﻠﺪﻫﺎ‬
‫ وارد‬chatroom ‫ ﻛﺎرﺑﺮ ﺑﺎ ﺗﺎﻳﭗ ﻛﺮدن ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي و رﻣﺰ ﻋﺒﻮر ﺧﻮد ﻣﻲ ﺧﻮاﻫﺪ ﺑﻪ ﺑﺮﻧﺎﻣﻪ‬.‫ﺑﻪ ﺳﺎﻳﺖ ﻗﺮار دارد‬
‫ اﻳـﻦ ﺗـﺎﺑﻊ‬.‫ در ﻧﺘﻴﺠﻪ ﻧﻴﺎز ﺑﻪ ﺗﺎﺑﻌﻲ ﺑﺮاي ارﺳﺎل اﻃﻼﻋﺎت ﻛﺎرﺑﺮ ﺑﻪ ﺳﺮور ﺑﺮاي ﺑﺮرﺳﻲ ﺻﺤﺖ اﻃﻼﻋـﺎت دارﻳـﻢ‬.‫ﺷﻮد‬
.‫ ارﺳﺎل ﻣﻲ ﻛﻨﺪ‬SignOn.php ‫اﻃﻼﻋﺎت وارد ﺷﺪه ﺗﻮﺳﻂ ﻛﺎرﺑﺮ را ﺑﻪ ﺻﻔﺤﻪ‬
function signOn(e){

var textUserName = document

.getElementById('textUserName').value;
var signOnPassword = document
.getElementById('signOnPassword').value;
var snd = "?textUserName=" + textUserName +
"&signOnPassword=" + signOnPassword ;

asynchronous = new Asynchronous();

asynchronous.complete = signOncomplete;
asynchronous.call('SignOn.php'+snd,'','GET');
}
function signOncomplete(status, statusText, responseText,
responseXML){

if (responseText == '200'){
window.location.href = "./HomePage.html";
}
else{

Var textSignupUserName = document

.getElementById('buttonSignon');

var errorMsg = document.createElement( 'span' );

errorMsg.className = 'error';
errorMsg.appendChild( document.createTextNode
( responseText ) );

textSignupUserName.parentNode.insertBefore(
errorMsg, textSignupUserName );

var errorMsg = document.createElement( 'br' );

errorMsg.className = 'error';

textSignupUserName.parentNode.insertBefore(
errorMsg, textSignupUserName );
}

}
‫ﻓﺼﻞ ‪145  6‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪chatRoom‬‬

‫ﺑﺎ ﻛﻠﻴﻚ ﻛﺮدن دﻛﻤﻪ ‪ login‬ﺻﻔﺤﻪ ‪ signon.php‬ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷـﻮد‪ .‬در اﻳـﻦ ﺻـﻔﺤﻪ اﺑﺘـﺪا ﺟـﺴﺘﺠﻮ ﻣـﻲ‬
‫ﺷﻮد ﻛﻪ ﻛﺎرﺑﺮي ﺑﺎ ‪ username‬و‪ password‬وارد ﺷﺪه دارﻳﻢ‪ ،‬ﻛﻪ ﺑﻪ ﺳﺎﻳﺖ وارد ﻧﺸﺪه اﺳـﺖ‪ .‬در اﻳﻨـﺼﻮرت‬
‫‪ session‬را اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ و ﻣﺘﻐﻴﺮ آن را ﺑﻪ ‪ Username‬اﻧﺘﺴﺎب ﻣﻲ دﻫﻴﻢ‪:‬‬
‫‪<?php‬‬

‫;]'‪$UserName=$_GET['textUserName‬‬
‫;]'‪$Password =$_GET['signOnPassword‬‬
‫;)''‪$link = mysql_connect('localhost' ,'root',‬‬
‫;)‪mysql_select_db('chatroom',$link‬‬

‫ﻳﻚ ﭘﺮس و ﺟﻮ ﺑﺮاي اﻳﻨﻜﻪ ﺑـﺪاﻧﻴﻢ ﻛـﺎرﺑﺮي ﺑـﺎ ﻣﺸﺨـﺼﺎت وارد ﺷـﺪه وﺟـﻮد دارد در ﺣﺎﻟﻴﻜـﻪ ﻓﻌـﺎل ﻧﺒﺎﺷـﺪ ﻳﻌﻨـﻲ‬
‫‪ Status=0‬ﺑﺎﺷﺪ‪.‬‬
‫‪// search for Valid userName & PassWord.‬‬
‫‪$cmd = " Select id,userName from user where‬‬
‫'‪UserName='$UserName' and Password='$Password‬‬
‫;"‪and Status=0‬‬
‫;)‪$res = mysql_query($cmd,$link‬‬
‫;)‪$r=mysql_fetch_array($res‬‬

‫) ‪if( mysql_num_rows($res)==0‬‬
‫{‬
‫;"‪echo "Invalid Username & Password‬‬
‫;)(‪exit‬‬
‫}‬
‫‪ Session‬را ﺑﺎز ﻣﻲ ﻛﻨﻴﻢ و ﻣﺘﻐﻴﺮ ‪ Session‬را ﺑﺎ ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي ﻣﻘﺪار ﻣﻲ دﻫﻴﻢ‪.‬‬
‫;)(‪Session_start‬‬
‫;]‪$_SESSION['UserName'] = $r[1‬‬

‫وﺿﻌﻴﺖ ﻛﺎرﺑﺮ ﻫﻨﮕﺎم ورود ﺑﻪ ﺳﺎﻳﺖ از ﺣﺎﻟﺖ ﻏﻴﺮ ﻓﻌﺎل ﺑﻪ ﻓﻌﺎل ﺗﻐﻴﻴﺮ ﻣﻲ ﻛﻨﺪ ﻳﻌﻨﻲ ﻓﻴﻠﺪ ‪ status‬را ‪ 1‬ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
‫‪$q = "update User set status=1 where‬‬
‫;" '‪UserName='$UserName‬‬
‫;)‪$updateRes = mysql_query($q,$link‬‬

‫;'‪echo '200‬‬
‫;)‪mysql_close($link‬‬
‫>?‬
‫در اﻳﻦ ﺟﺎ ﻃﺮاﺣﻲ و ﭘﻴﺎده ﺳﺎزي دﺳﺘﻪ اول ﺑﻪ ﭘﺎﻳﺎن رﺳﻴﺪ اﻣﺎ ﻫﻤﺎن ﻃـﻮر ﻛـﻪ ﻗـﺒﻼ اﺷـﺎره ﻛـﺮدﻳﻢ دﺳـﺘﻪ دوم ﺷـﺎﻣﻞ‬
‫ﻣﺠﻤﻮﻋﻪ ﻋﻤﻠﻴﺎت ارﺳﺎل ﭘﻴﺎم‪ ،‬ﻣﺸﺎﻫﺪه ﻟﻴﺴﺘﻲ از ﻛﺎرﺑﺮان ﻓﻌﺎل‪ ،‬ﻣﺸﺎﻫﺪه اﻃﻼﻋﺎت ﻛﺎرﺑﺮان‪ ،‬درﻳﺎﻓﺖ ﭘﻴﺎم و ﺧﺮوج از‬
‫ﺳﺎﻳﺖ ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﻳﻦ ﻋﻤﻠﻴﺎت ﺑﻄﻮر ﻣﺠﺰاي ﺑﺎﻳﺪ اﺟﺮا ﺷﻮﻧﺪ وﻟﻲ ﻣﺠﻤﻮﻋﻪ اﻳﻦ ﻋﻤﻠﻴﺎت ﺑﺎﻳﺪ ﻗﺎﺑﻞ دﺳﺘﺮس ﺑـﻪ آﺳـﺎﻧﻲ‬
‫ﺑﺮاي ﻛﺎرﺑﺮان ﺑﺎﺷﺪ‪ .‬ﺑﺮاي اﻳﻨﻜﻪ ﺑﺘﻮاﻧﻴﻢ ﻫﺮ ﻋﻤﻠﻴﺎت را ﺑﻄﻮر ﺟﺪاﮔﺎﻧﻪ ي اﺟﺮا ﻛﻨـﻴﻢ و ﺗﻤـﺎﻣﻲ ﻣﺠﻤﻮﻋـﻪ ﻋﻤﻠﻴـﺎت در‬
 ‫ﺑﺮﻧﺎﻣﻪ ‪chatRoom‬‬ ‫‪  146‬ﻓﺼﻞ ‪6‬‬

‫ﻳﻚ ﺻﻔﺤﻪ ﻗﺎﺑﻞ دﺳﺘﺮس ﺑﺎﺷﺪ ﺑﺎﻳﺪ ﺑﺘﻮاﻧﻴﻢ ﺻﻔﺤﻪ را ﺑﻪ ﭼﻨﺪ ﺑﺨﺶ ﺗﻘﺴﻴﻢ ﻛﻨـﻴﻢ ﻛـﻪ ﻫـﺮ ﺑﺨـﺶ ﻳـﻚ ﺻـﻔﺤﻪ وب‬
‫ﺟﺪاﮔﺎﻧﻪ اي ﺑﺎﺷﺪ‪.‬‬
‫ﺑﺮاي ﻋﻤﻠﻲ ﻛﺮدن اﻳـﻦ اﻳـﺪه در ‪ html‬از >‪ <iframe‬اﺳـﺘﻔﺎده ﻣـﻲ ﻛﻨـﻴﻢ‪ <iframe> .‬ﺑـﺮاي ﻧﻤـﺎﻳﺶ ﻳـﻚ‬
‫ﺻﻔﺤﻪ ﺑﻌﻨﻮان ﺑﺨﺸﻲ در ﻳﻚ ﺻﻔﺤﻪ دﻳﮕﺮ اﺳﺘﻔﺎده ﻣﻲ ﺷـﻮد‪ .‬از >‪ <iframe‬زﻣـﺎﻧﻲ اﺳـﺘﻔﺎده ﻣـﻲ ﺷـﻮد ﻛـﻪ ﻣـﻲ‬
‫ﺧﻮاﻫﻴﻢ ﻃﺮح ﻛﻠـﻲ ﺳـﺎﻳﺖ ﺛﺎﺑـﺖ ﺑﺎﺷـﺪ و ﺗﻐﻴﻴﺮاﺗـﻲ در ﺑﺨـﺸﻲ از ﺳـﺎﻳﺖ ﻫـﺮ زﻣـﺎن ﻛـﻪ ﻧﻴـﺎز ﺑﺎﺷـﺪ روي دﻫـﺪ‪ .‬ﺑـﺎ‬
‫>‪ <iframe‬ﻣﻲ ﺗﻮان ﻋﻤﻠﻴﺎﺗﻲ ﻛـﻪ ﻣﺠـﺰا ﺑﺎﺷـﻨﺪ ﺑـﺎ ‪ Ajax‬را در ﺻـﻔﺤﺎت ﻣﺘﻔـﺎوت ﻗـﺮار داد‪ .‬ﺗـﮓ ‪iframe‬‬
‫داراي ﺧﺎﺻﻴﺘﻲ ﺑﻪ ﻧﺎم ‪ src‬اﺳﺖ ﻛﻪ در آن ﻣﺴﻴﺮ ﺻﻔﺤﻪ اي ﻛﻪ ﻣـﻲ ﺧـﻮاﻫﻴﻢ در ‪ iframe‬ﻧﻤـﺎﻳﺶ داده ﺷـﻮد را‬
‫ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
‫ﺻﻔﺤﻪ ‪homepage.html‬‬
‫در ﻗــﺴﻤﺖ ‪ title‬اﻳــﻦ ﺻــﻔﺤﻪ ﺷﻨﺎﺳــﻪ ﻛــﺎرﺑﺮي‪ ،‬ﻛــﺎرﺑﺮ وارد ﺷــﺪه ﺑــﻪ ﺳــﺎﻳﺖ ﻧﻤــﺎﻳﺶ داده ﻣــﻲ ﺷــﻮد‪ .‬ﺗــﺎﺑﻊ‬
‫‪ setTitle‬ﺑﻌﺪ از ﻓﺮاﺧﻮاﻧﻲ ﺻﻔﺤﻪ‪ GetInfo.php‬ﻋﻨﻮان ﺻﻔﺤﻪ ‪ homepage.html‬را ﺗﻐﻴﻴﺮ ﻣﻲ دﻫﺪ‪.‬‬
‫{)(‪function setTitle‬‬
‫;)(‪asynchronous = new Asynchronous‬‬
‫ﻣﺘﺪ ‪ complete‬زﻣﺎﻧﻲ اﺟﺮا ﻣﻲ ﺷﻮد ﻛﻪ اﻃﻼﻋﺎت از ﺳﺮور درﻳﺎﻓﺖ ﻣﻲ ﺷﻮد‪ .‬اﻃﻼﻋﺎت درﻳﺎﻓﺖ ﺷـﺪه از ﺳـﺮور‬
‫در ﭘﺎراﻣﺘﺮ ‪ responseText‬ﺗﺎﺑﻊ ﻣﺮﺗﺒﻂ ﺑﻪ آن ﻗﺮار ﻣﻲ ﮔﻴﺮد ﻛﻪ ﺣﺎوي ‪ username‬ﻛﺎرﺑﺮ ﻣﻲ ﺑﺎﺷـﺪ ﻛـﻪ ﻣـﺎ‬
‫آن را ﺑﻪ رﺷﺘﻪ اي ﺑﺮاي ﻧﻤﺎﻳﺶ در ﻋﻨﻮان ﺳﺎﻳﺖ اﺿﺎﻓﻪ ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
‫‪Asynchronous.complete = function(status, statusText,‬‬
‫{)‪responseText, responseXML‬‬
‫)‪if (responseText!=0‬‬
‫‪document.title= "Welcome‬‬ ‫‪"+responseText‬‬
‫‪else‬‬
‫;)"‪location.href("login.html‬‬
‫;}‬
‫;)'‪asynchronous.call('GetInfo.php','','GET‬‬
‫}‬

‫در ﺻـﻔﺤﻪ ‪ GetInfo.php‬ﺑﻌــﺪ از ﺑﺮرﺳــﻲ ﻣﻮﺟــﻮد ﺑــﻮدن ﺷﻨﺎﺳــﻪ ﻛــﺎرﺑﺮي )‪ (username‬در ‪،session‬‬
‫ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي ﺑﺮاي ﻛﻼﻳﻨﺖ ﺑﺎ اﺳﺘﻔﺎده از دﺳﺘﻮر ‪ echo‬ارﺳﺎل ﻣﻲ ﺷﻮد‪.‬‬
‫‪<?php‬‬
‫;)(‪session_start‬‬
‫))]'‪if(isset($_SESSION['UserName‬‬
‫;]'‪echo $_SESSION['UserName‬‬
‫‪else‬‬
‫; '‪echo '0‬‬
‫>?‬
‫ﺻﻔﺤﻪ ‪ homepage.html‬ﺷﺎﻣﻞ دو ﻗﺴﻤﺖ اﺳﺖ ﻛﻪ ﻫﺮ ﻗﺴﻤﺖ ﻳﻚ >‪ <iframe‬ﻣﻲ ﺑﺎﺷﺪ‪.‬‬

‫‪<iframe‬‬ ‫‪src ="messageBox.html" id='List' style=" margin-‬‬

147  6 ‫ﻓﺼﻞ‬ chatRoom ‫ﺑﺮﻧﺎﻣﻪ‬

top:10px; width:750px;height:555px" ></iframe>

homepage.html ‫ ﻃﺮاﺣﻲ ﺻﻔﺤﻪ‬7-2 ‫ﺷﻜﻞ‬

messagebox.html ‫ﺻﻔﺤﻪ‬
‫ﻳﻚ ﺻﻔﺤﻪ ﺣﺎوي ﻳﻚ ﻗﺴﻤﺖ ﺑﺮاي ﻧﻮﺷﺘﻦ ﭘﻴﺎم ﻫﺎ و دﻛﻤﻪ ي ﺑﺮاي ارﺳﺎل ﭘﻴﺎم ﻫـﺎ و ﻳـﻚ ﺗـﺼﻮﻳﺮ ﺿـﺮﺑﺪر ﺑـﺮاي‬
‫ ﺑﺪﻳﻦ‬.‫ ارﺳﺎل ﺷﻮد‬TextBox ‫ ﭘﻴﺎم داﺧﻞ‬،‫ ﻣﻲ ﺧﻮاﻫﻴﻢ ﺑﻌﺪ از ﻓﺸﺮده ﺷﺪن دﻛﻤﻪ ارﺳﺎل‬.‫ﺧﺮوج از ﺳﺎﻳﺖ ﻣﻲ ﺑﺎﺷﺪ‬
‫ در اﻳﻦ ﺗﺎﺑﻊ ﻣـﺘﻦ ﭘﻴـﺎم ﺑـﻪ ﺻـﻔﺤﻪ‬.‫ﻣﻨﻈﻮر ﺗﺎﺑﻌﻲ ﺑﺪﻳﻦ ﺻﻮرت ﻧﻮﺷﺘﻪ اﻳﻢ ﺗﺎ زﻣﺎﻧﻴﻜﻪ دﻛﻤﻪ ﻓﺸﺮده ﺷﺪ ﻓﺮاﺧﻮاﻧﻲ ﺷﻮد‬
.‫ ارﺳﺎل ﻣﻲ ﺷﻮد‬sendMessage.php
function SendMessage(){
asynchronous = new Asynchronous();
asynchronous.complete = function(status, statusText,
responseText, responseXML){
document.getElementById("message").value = "";
document.getElementById("message").focus();
};

var mssg = document.getElementById("message").value;

asynchronous.call('sendMessage.php?msg='+mssg,'','GET');

}
 chatRoom ‫ﺑﺮﻧﺎﻣﻪ‬ 6 ‫ ﻓﺼﻞ‬ 148

messagebox.html ‫ ﻃﺮاﺣﻲ ﺻﻔﺤﻪ‬7-3 ‫ﺷﻜﻞ‬

‫ ﻧﻴﺰ ﭘﻴـﺎم ارﺳـﺎل ﻣـﻲ ﺷـﻮد ﻛـﻪ ﻣﻮﺟـﺐ ﻓﺮاﺧـﻮاﻧﻲ ﺗـﺎﺑﻊ‬Enter ‫ﺑﺮاي ﺳﻬﻮﻟﺖ ﻛﺎر در ﺑﺮﻧﺎﻣﻪ ﺑﺎ ﻓﺸﺮده ﺷﺪن دﻛﻤﻪ‬
.‫ ﻣﻲ ﺷﻮد‬SendMessagekey
function SendMessagekey(e){
if (e.keyCode == '13'){
asynchronous = new Asynchronous();
asynchronous.complete = function(status,
statusText, responseText, responseXML){

document.getElementById("message").value = "";
document.getElementById("message").focus();
}
};
var mssg = document.getElementById("message").value;
asynchronous.call('sendMessage.php?msg='+mssg,'','GET');
}
‫ ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮ ﺧﻮاﻧﺪه ﻣﻲ ﺷﻮد ﺳﭙﺲ ﻣﺘﻦ ﭘﻴـﺎم درﻳﺎﻓـﺖ‬session ‫ اﺑﺘﺪا از‬sendMessage.php ‫در ﺻﻔﺤﻪ‬
‫ در ﺻﻮرﺗﻲ ﻛﻪ ﻋﻤﻠﻴﺎت ﺑﺎ ﻣﻮﻓﻘﻴﺖ ﺻﻮرت ﭘـﺬﻳﺮﻓﺖ‬.‫ﻣﻲ ﺷﻮد و ﺗﺎرﻳﺦ درﻳﺎﻓﺖ ﭘﻴﺎم ﻧﻴﺰ از ﺳﻴﺴﺘﻢ درﻳﺎﻓﺖ ﻣﻲ ﺷﻮد‬
.‫ را ﺑﺮاي ﻛﻼﻳﻨﺖ ﺟﻬﺖ اﻃﻼع از اﻧﺠﺎم ﺷﺪن ﻣﻮﻓﻖ ﻋﻤﻠﻴﺎت ارﺳﺎل ﻣﻲ ﻛﻨﻴﻢ‬200 ‫ﻣﻘﺪار‬
<?php
session_start();
$usrName = $_SESSION["UserName"];

$msg = $_GET["msg"];
$date = date("Y-m-d H:i:s");

$link = mysql_connect('localhost','root','');
mysql_select_db("chatroom",$link);
149  6 ‫ﻓﺼﻞ‬ chatRoom ‫ﺑﺮﻧﺎﻣﻪ‬

.‫ اﺿﺎﻓﻪ ﻣﻲ ﺷﻮد‬message ‫ﺑﺎ اﻳﻦ دﺳﺘﻮر اﻃﻼﻋﺎت ﭘﻴﺎم ﺑﻪ ﺟﺪول‬

$q="insert into message (SenderId, Message ,Date) values
('$usrName','$msg','$date')";

$res=mysql_query($q,$link);
if ($res)
echo '200';
mysql_close($link);
?>
.‫ اﺟﺮا ﻣﻲ ﺷﻮد‬logout.php ‫ ﺻﻔﺤﻪ‬،logOut ‫در اﻳﻦ ﺻﻔﺤﻪ ﺑﺎ زدن ﻋﻼﻣﺖ ﺿﺮﺑﺪر ﺑﺎ ﻓﺮاﺧﻮاﻧﻲ ﺗﺎﺑﻊ‬

function logOut(){
asynchronous = new Asynchronous();
asynchronous.complete = function(status,
statusText, responseText, responseXML){
.‫زﻣﺎ ﻧﻴﻜﻪ ﻛﺎرﺑﺮ از ﺑﺮﻧﺎﻣﻪ ﺧﺎرج ﺷﺪ ﺻﻔﺤﻪ ورود ﺑﻪ ﺳﺎﻳﺖ ﺑﺎر ﻣﻲ ﺷﻮد‬
if(responseText == '200')
parent.location.href("login.html");

};
asynchronous.call('LogOut.php','','GET');
}
‫ دﺳﺘﻮر ﭘﺎك ﻛـﺮدن‬.(‫ ﻣﻲ ﺷﻮد‬status=0 ‫ اﺑﺘﺪا ﻛﺎرﺑﺮ از ﺣﺎﻟﺖ ﻓﻌﺎل ﺧﺎرج ﻣﻲ ﺷﻮد)ﻓﻴﻠﺪ‬logout.php ‫در‬
‫ ﺑﻪ ﻛﻼﻳﻨﺖ ارﺳﺎل ﻣـﻲ‬200 ‫ ﻧﻴﺰ اﺟﺮا ﻣﻲ ﺷﻮد و ﺟﻬﺖ اﻃﻼع ﻛﻼﻳﻨﺖ از اﻧﺠﺎم ﻣﻮﻓﻖ ﺧﺮوج از ﺳﺎﻳﺖ‬session
.‫ﺷﻮد‬
<?php
session_start();
$u = $_SESSION['UserName'];
$link = mysql_connect('localhost','root','');
mysql_select_db("chatroom",$link);
$q=" update User set status=0 where UserName='$u'";
$res = mysql_query($q,$link);
mysql_close($link);
session_destroy();
if($res)
echo '200';
?>
‫ داراي ﻳﻚ ﻗﺴﻤﺘﻲ ﺑﺮاي ﻧﻤﺎﻳﺶ ﭘﻴﺎم ﻫﺎ ﻣـﻲ ﺑﺎﺷـﺪ ﻛـﻪ در واﻗـﻊ ﻳـﻚ ﺻـﻔﺤﻪ‬messagebox.html ‫ﻫﻤﭽﻨﻴﻦ‬
.‫دﻳﮕﺮ اﺳﺖ‬
<iframe src="message.html" id='List' style=" margin-top:10px;
width:650px;height:420px" ></iframe>
 ‫ﺑﺮﻧﺎﻣﻪ ‪chatRoom‬‬ ‫‪  150‬ﻓﺼﻞ ‪6‬‬

‫ﺻﻔﺤﻪ ‪message.html‬‬
‫ﺻﻔﺤﻪ ‪ message.html‬ﺻﻔﺤﻪ ي اﺳﺖ ﻛﻪ در داﺧﻞ ‪ messagebox.html‬ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬
‫در اﻳﻦ ﺻﻔﺤﻪ ﺑﺼﻮرت ‪ ajax‬ﻫﺮ ﺛﺎﻧﻴﻪ ﺻﻔﺤﻪ ‪ showmessage.php‬ﺑﺮاي ﻧﻤﺎﻳﺶ ﭘﻴﺎم ﻫﺎ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‪.‬‬
‫در ﺻﻔﺤﻪ ‪ showmessage.php‬ﭘﻴﺎم ﻫﺎي اﻧﺘﺨﺎب ﻣﻲ ﺷﻮﻧﺪ ﻛﻪ دﻗﻴﻘﺎ در آن ﻟﺤﻈﻪ درﻳﺎﻓﺖ ﻣﻲ ﺷﻮﻧﺪ و ﺳﭙﺲ‬
‫ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮﻧﺪ‪ .‬ﺷﻨﺎﺳﻪ ﻛﺎرﺑﺮي ارﺳﺎل ﻛﻨﻨﺪه ﭘﻴﺎم ﺑﺮاي ﺧﻮدش ﺑﻪ رﻧﮓ ﻗﺮﻣﺰ و ﺑﺮاي دﻳﮕﺮ ﻛﺎرﺑﺮان ﺑﻪ رﻧﮓ‬
‫آﺑﻲ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪ .‬ﻣﺘﻦ ﭘﻴﺎم ﺟﺪﻳﺪ ﺑﻪ ﻣﺘﻦ ﭘﻴﺎم ﻫﺎي دﻳﮕﺮ ﻛﻪ در داﺧﻞ ﻳﻚ >‪ <span‬ﺑـﺎ '‪id='show‬‬
‫ﻗﺮار دارﻧﺪ‪ ،‬اﺿﺎﻓﻪ ﻣﻲ ﺷﻮد‪.‬‬
‫{)(‪function showMessage‬‬
‫;)(‪asynchronous = new Asynchronous‬‬
‫‪asynchronous.complete = function(status,‬‬
‫{)‪statusText, responseText, responseXML‬‬
‫)‪if(responseText !=null‬‬
‫=‪document.getElementById('show').innerHTML +‬‬
‫; ‪responseText‬‬
‫;}‬
‫;)'‪asynchronous.call('showMessage.php','','GET‬‬
‫;)‪setTimeout(showMessage,1000‬‬
‫}‬

‫در ﻳﻚ ﺑﺮﻧﺎﻣﻪ ‪ Chatroom‬ﻫﺮ زﻣﺎن اﻣﻜﺎن ﺗﻮﻟﻴﺪ و ارﺳﺎل ﻳﻚ ﭘﻴﺎم ﺟﺪﻳﺪ ﻣﻲ ﺑﺎﺷﺪ ﺑﻪ ﻫﻤﻴﻦ ﻣﻨﻈﻮر ﺑﺎﻳﺪ ﻋﻤﻠﻴـﺎت‬
‫ﻧﻤﺎﻳﺶ ﭘﻴﺎم ﻫﺎ ﻣﺘﻨﺎوﺑﺎ در ﻳﻚ ﺑﺎزه زﻣﺎﻧﻲ ﺧﺎص اﺟﺮا ﮔﺮدد‪ .‬ﺑﺎ اﺳﺘﻔﺎده از ﺗﺎﺑﻊ ‪ setTimeout‬ﻣﻲ ﺗﻮان ﻣـﺸﺨﺺ‬
‫ﻛﺮد ﻳﻚ ﻋﻤﻠﻴﺎت ﻣﺸﺨﺺ در ﭼﻪ ﺑﺎزه ﻫﺎي زﻣﺎﻧﻲ اﺟﺮا ﺷﻮد‪ .‬ﭘﺎراﻣﺘﺮ اول اﻳﻦ ﺗﺎﺑﻊ ﻧﺎم ﺗﺎﺑﻌﻲ اﺳﺖ ﻛﻪ ﻣـﻲ ﺧـﻮاﻫﻴﻢ‬
‫اﺟﺮا ﺷﻮد و ﭘﺎراﻣﺘﺮ دوم زﻣﺎن اﺟﺮا آن در ﺑﺎزه ﻫﺎي زﻣﺎﻧﻲ) ﺑﺮﺣﺴﺐ ﻫﺰارم ﺛﺎﻧﻴﻪ(‬
‫;)‪setTimeout(showMessage,1000‬‬
‫>‪</script‬‬
‫>‪</head‬‬
‫> ‪<body‬‬
‫>‪<span id='show' style="width:100% ;height:320px"></span‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫در ﺗﺎﺑﻊ ‪ ShowMessage‬ﺻﻔﺤﻪ ‪ ShowMessage.php‬ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‪.‬‬

‫‪<?php‬‬
‫;)(‪session_start‬‬
‫))]"‪if(isset($_SESSION["UserName‬‬
‫;]"‪$user = $_SESSION["UserName‬‬
‫‪else‬‬
‫{‬
‫;)‪exit(0‬‬
‫}‬

‫;)''‪$link = mysql_connect('localhost','root',‬‬
151  6 ‫ﻓﺼﻞ‬ chatRoom ‫ﺑﺮﻧﺎﻣﻪ‬

mysql_select_db("chatroom",$link);

‫در اﻳﻦ ﺟﺎ ﭘﺮس و ﺟﻮي ﻣﻲ ﻧﻮﻳﺴﻴﻢ ﻛﻪ ﭘﻴﺎم ﻫﺎي ﻛـﻪ ﻫـﻢ اﻛﻨـﻮن درﻳﺎﻓـﺖ ﺷـﺪﻧﺪ اﻧﺘﺨـﺎب ﺷـﻮﻧﺪ ﺗـﺎ ﺑـﺮاي ﺗﻤـﺎﻣﻲ‬
.‫ اﻧﺠﺎم ﻣﻲ ﮔﻴﺮد‬echo $str ‫ارﺳﺎل ﭘﻴﺎم ﺑﺎ دﺳﺘﻮر‬.‫ﻛﺎرﺑﺮان ارﺳﺎل ﺷﻮﻧﺪ‬

$q="select * from message Where( day(now())-day(date)=0

and month(now())-month(date)=0 and year(now())-
year(date)=0 and hour( now()) -hour(date)=0 ) and
(( MINUTE( now()) -MINUTE(date)=0 and second(
now()) - second(date) = 1) or
( minute(now())- minute(date)=1 and 60
+second(now())- second(date) = 1) )";

$res=mysql_query($q,$link);
$row=mysql_fetch_array($res);

$str = NULL;
while ($row){
if ($user == $row[0])
{
$str.="<font style=\"color:#FF0000;\">$row[0]:
</font> $row[1]<br>" ;
}
else
{
$str.="<font style=\"color:#0099FF;\">$row[0]:
</font> $row[1]<br>";
}
$row = mysql_fetch_array($res);
}

echo $str;
mysql_close($link);
?>

.‫( ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮﻧﺪ‬online) ‫ ﻛﺎرﺑﺮان ﻓﻌﺎل‬homepage.html ‫در ﻗﺴﻤﺖ دﻳﮕﺮ ﺻﻔﺤﻪ‬
<iframe src="userList.html" id='List' style=" background-
color:#FFFFFF;margin-top:0px;width:200px;
border:thin;height:380px" >
</iframe>

‫ اﻳﻦ ﺻـﻔﺤﻪ ﺑـﺮاي ﻧﻤـﺎﻳﺶ ﻟﻴـﺴﺘﻲ از ﻛـﺎرﺑﺮان‬.‫ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‬userList.html‫ ﺻﻔﺤﻪ‬،‫در اﻳﻦ ﻗﺴﻤﺖ‬
‫ اﻣﺎ دﻟﻴـﻞ اﺳـﺘﻔﺎده‬.‫ اﻧﺠﺎم ﻣﻲ دﻫﺪ‬showlist.php ‫ﻓﻌﺎل در ﺳﻴﺴﺘﻢ ﻣﻲ ﺑﺎﺷﺪ و اﻳﻦ ﻋﻤﻞ را ﺑﺎ ﻓﺮاﺧﻮاﻧﻲ ﺻﻔﺤﻪ‬
‫ در اﻳﻦ ﺟﺎ ﺑﺮاي آن اﺳﺖ ﻛﻪ ﻫﺮ ﻟﺤﻈﻪ اﻣﻜـﺎن ورود ﻳـﻚ ﻛـﺎرﺑﺮ ﺟﺪﻳـﺪ ﺑـﻪ ﺳـﺎﻳﺖ و ﻳـﺎ‬setTimeout ‫از ﺗﺎﺑﻊ‬
 chatRoom ‫ﺑﺮﻧﺎﻣﻪ‬ 6 ‫ ﻓﺼﻞ‬ 152

‫ ﻫﻨﮕـﺎﻣﻲ ﻛـﻪ‬.‫ﺧﺮوج ﻳﻚ ﻛﺎرﺑﺮ وﺟﻮد دارد در ﻧﺘﻴﺠﻪ اﻳﻦ ﻟﻴﺴﺖ ﻛﺎرﺑﺮان ﻓﻌﺎل ﺑﺎﻳﺪ ﻫﺮ ﭼﻨﺪ ﺛﺎﻧﻴﻪ دوﺑﺎره ﭼﻚ ﺷﻮد‬
‫ اﺟــﺮا ﻣــﻲ ﺷــﻮد و ﻟﻴــﺴﺖ ﻛــﺎرﺑﺮان را ﻛــﻪ در ﭘــﺎراﻣﺘﺮ‬complete ‫ﻟﻴــﺴﺖ ﻛــﺎرﺑﺮان از ﺳــﺮور ارﺳــﺎل ﺷــﻮد ﻣﺘــﺪ‬
.‫ اﻧﺘﺴﺎب ﻣﻲ دﻫﺪ‬id='divList' ‫< ﺑﺎ‬div> ‫ ﻗﺮار دارد ﺑﺮاي ﻧﻤﺎﻳﺶ ﺑﻪ ﻣﺤﺘﻮاي ﻳﻚ‬responseText
function setLIst(){

asynchronous = new Asynchronous();

asynchronous.complete = function(status, statusText,
responseText, responseXML){
document.getElementById('divList').innerHTML =
responseText;
};
asynchronous.call('ShowList.php','','GET');
setTimeout(setLIst, 5000);
}
setTimeout(setLIst, 1000);
function showInfo(){
alert(parent.value);
parent.handleResponse;
}
‫ ﻣﺎ ﻣﻲ ﺧﻮاﻫﻴﻢ ﻛﺎرﺑﺮ ﺑﺎ اﻧﺘﺨﺎب آﻳﻜﻮن ﻳﻜﻲ از ﻛـﺎرﺑﺮان ﺑﺘﻮاﻧـﺪ اﻃﻼﻋـﺎت ﻓـﺮدي آن ﻛـﺎرﺑﺮ را ﻣـﺸﺎﻫﺪه‬،‫در ﻟﻴﺴﺖ‬
‫ اﻃﻼﻋﺎت آن ﻫﺎ را در ﺳﻄﺮ ﻫـﺎي ﻳـﻚ‬،‫' ﺑﻌﺪ از ﺟﺴﺘﺠﻮي ﻛﺎرﺑﺮان ﻓﻌﺎل‬ShowList.php' ‫ در ﺻﻔﺤﻪ‬.‫ﻧﻤﺎﻳﺪ‬
‫ را ﻗـﺮار‬showInfo ‫ ﺧﺎﻧﻪ ﻫﺎي ﺟﺪول دﺳـﺘﻮر ﻓﺮاﺧـﻮاﻧﻲ ﺗـﺎﺑﻊ‬onclick ‫ﺟﺪول ﻗﺮار ﻣﻲ دﻫﻴﻢ و در ﺧﺎﺻﻴﺖ‬
.‫ ﺑﻪ ﺳﻤﺖ ﻛﻼﻳﻨﺖ ارﺳﺎل ﻣﻲ ﺷﻮد‬echo ‫ ﻗﺮار دارد ﺑﺎ دﺳﺘﻮر‬$str ‫ ﻟﻴﺴﺖ ﻛﺎرﺑﺮان ﻓﻌﺎل ﻛﻪ در رﺷﺘﻪ‬.‫ﻣﻲ دﻫﻴﻢ‬
<?php
$link=mysql_connect('localhost','root','');
mysql_select_db('chatroom',$link);
$q = "select * from User where status=1";
$res = mysql_query($q,$link);
$r = mysql_fetch_array($res);
$str= NULL;
$str = "<table>";

while($r != NULL)
{
if ($r[6]=='M')
$str.= "<tr > <td> <img
src='Image\m2.ico'></td><td
style=\"cursor:pointer\"
onclick='parent.showInfo
(this)'>$r[1]</td></tr>";
else
$str.= "<tr > <td> <img
src='Image\f2.ico'></td>
<td style=\"cursor:pointer
\"onclick='parent.showInfo
(this)'>$r[1]</td></tr>";
153  6 ‫ﻓﺼﻞ‬ chatRoom ‫ﺑﺮﻧﺎﻣﻪ‬

$r = mysql_fetch_array($res);
}
$str.="</table>";
echo $str;
mysql_close($link);
?>
‫ ﺟﻬـﺖ ﻧﻤـﺎﻳﺶ ﻣﺸﺨـﺼﺎت‬،showlist.php ‫ﺑﺎ ﻛﻠﻴﻚ ﻛـﺮدن ﺑـﺮ روي ﺧﺎﻧـﻪ ﻫـﺎي ﺟـﺪول ﺗﻮﻟﻴـﺪي ﺻـﻔﺤﻪ‬
‫ اﺟــﺮا ﻣــﻲ ﺷــﻮد ﻛــﻪ ﻣﻮﺟــﺐ ﻓﺮاﺧــﻮاﻧﻲ ﺻــﻔﺤﻪ‬showInfo ‫ ﺗــﺎﺑﻊ‬،‫ﺷﺨــﺼﻲ ﻛــﺎرﺑﺮان در ﻗــﺴﻤﺖ ﭘــﺎﺋﻴﻦ ﺻــﻔﺤﻪ‬
‫<ﺑــﺎ‬div> ‫ ﻫﻤﭽﻨــﻴﻦ ﻣــﻲ ﺧــﻮاﻫﻴﻢ ﻟﻴــﺴﺖ ارﺳــﺎﻟﻲ از ﺳــﻤﺖ ﺳــﺮور در ﻳــﻚ‬.‫ ﻣــﻲ ﺷــﻮد‬userinfo.php
.‫ ﻗﺮار ﮔﻴﺮد‬id='UserInfo'
function showInfo(e){
asynchronous = new Asynchronous();
asynchronous.complete = function(status, statusText,
responseText, responseXML){
document.getElementById("UserInfo").innerHTML =
responseText;
};
asynchronous.call('UserInfo.php?UserName='+e.innerHTML,'',
'GET');
}
‫ اﻃﻼﻋﺎت ﻛﺎرﺑﺮ ﻣﻮرد ﻧﻈﺮ در ﺟﺪوﻟﻲ ﻗﺮار ﻣـﻲ ﮔﻴـﺮد و ﺑـﺮاي ﻧﻤـﺎﻳﺶ ﺑـﺎ دﺳـﺘﻮر‬userinfo.php ‫در ﺻﻔﺤﻪ‬
.‫ ﺑﻪ ﻛﻼﻳﻨﺖ ارﺳﺎل ﻣﻲ ﺷﻮد‬echo $str
<?php
$userName=$_GET['UserName'];

$link=mysql_connect('localhost','root','');
mysql_select_db('chatroom',$link);

$q="select * from user where UserName='$userName'";

$res = mysql_query($q,$link);
$r = mysql_fetch_array($res);

$str = "<table>";
$str .="<tr><td>FirstName</td> <td> $r[1] </td></tr>" ;
$str .= "<tr><td>LastName</td> <td> $r[2] </td></tr>";
if($r['Gender']=='M')
$str .= "<tr><td>Gender</td> <td>Male</td></tr>";
else
$str .= "<tr><td>Gender</td> <td>Female</td></tr>";

$str .= "<tr><td>Age</td> <td>$r[5]</td></tr>";

$str .="</table>";
echo $str;
mysql_close($link);
?>
.‫اﻳﻦ ﺑﺮﻧﺎﻣﻪ در ﺣﻴﻦ ﺳﺎدﮔﻲ ﺑﺴﻴﺎر ﻛﺎرآﻣﺪ و زﻳﺒﺎﺳﺖ‬
chatRoom ‫ﺑﺮﻧﺎﻣﻪ‬ 6 ‫ ﻓﺼﻞ‬ 154
‫ﻓﺼﻞ ‪155  7‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬

‫ﻓﺼﻞ ﻫﻔﺘﻢ‪ :‬ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬

‫‪ BookStore‬ﻳﻚ وب ﺳﺎﻳﺖ ﻧﻤﺎﻳﺸﮕﺎه و ﻓﺮوﺷﮕﺎه اﻳﻨﺘﺮﻧﺘﻲ ﻛﺘﺎب ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﺑﻴﺸﺘﺮ ﺑﺮاي آﺷﻨﺎﻳﻲ‬
‫ﺧﻮاﻧﻨﺪه ﺑﺎ ﭼﮕﻮﻧﮕﻲ اﺳﺘﻔﺎده از ‪ Ajax‬در ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺗﺠﺎري ﻣﻲ ﺑﺎﺷﺪ‪ .‬در اﻳﻦ ﺑﺮﻧﺎﻣﻪ از زﺑﺎن ‪ PHP‬ﺑﺮاي‬
‫ﻛﺪﻧﻮﻳﺴﻲ ﺳﻤﺖ ﺳﺮور اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ‪ .‬ﻛﺪﻫﺎي ﻛﺎﻣﻞ اﻳﻦ ﺑﺮﻧﺎﻣﻪ در ‪ CD‬ﻛﺘﺎب در ﻣﺴﻴﺮ‬
‫‪ project\bookstore‬و ﺟﺪول ﻫﺎي آن در ﻣﺴﻴﺮ ‪ project\database\bookstore‬ﻣﻮﺟﻮد‬
‫ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﺑﺘﺪا ﺑﻬﺘﺮ اﺳﺖ ﺑﺎ ﻛﻠﻴﺎت و ﻋﻤﻠﻴﺎت اﺟﺮاﻳﻲ ﺑﺮﻧﺎﻣﻪ ﺑﻴﺸﺘﺮ آﺷﻨﺎ ﺷﻮﻳﺪ‪.‬‬
‫در اﻳﻦ ﭘﺮوژه ‪ 3‬ﻧﻮع ﻛﺎرﺑﺮ ﺗﻌﺮﻳﻒ ﺷﺪه اﺳﺖ‪:‬‬
‫‪ -1‬ﻛﺎرﺑﺮ ﻣﺪﻳﺮ ﺳﺎﻳﺖ‬
‫‪ -2‬ﻛﺎرﺑﺮ ﻋﻀﻮ ﺳﺎﻳﺖ‬
‫‪ -3‬ﻛﺎرﺑﺮ ﻣﻴﻬﻤﺎن‬
‫ﻋﻤﻠﻴﺎت اﺟﺮاﻳﻲ ﺑﺮﻧﺎﻣﻪ‪ :‬ﻛﺎرﺑﺮان ﻫﻨﮕﺎم ورود ﺑﻪ ﺳﺎﻳﺖ و ﻣﺸﺎﻫﺪه ﺻﻔﺤﻪ اﺻﻠﻲ ﺳﺎﻳﺖ ﻣﻲ ﺗﻮاﻧﻨﺪ اﻃﻼﻋﺎت ﻣﻮرد ﻧﻴﺎز‬
‫ﺧﻮد را در ﻣﻮرد ﻛﺘﺎب ﺟﺴﺘﺠﻮ ﻧﻤﺎﻳﻨﺪ‪ .‬اﻣﻜﺎن داﻧﻠﻮد ﻛﺮدن ﻓﺎﻳﻞ از وب ﺳـﺎﻳﺖ ﺑـﺮاي ﻛـﺎرﺑﺮان ﻓـﺮاﻫﻢ اﺳـﺖ‪ .‬اﻳـﻦ‬
‫ﻓﺎﻳﻞ ﻫﺎ ﻣﻲ ﺗﻮاﻧﻨﺪ ﻧﺴﺨﻪ اﻟﻜﺘﺮوﻧﻴﻜﻲ ﻛﻞ ﻛﺘﺎب ﻳﺎ ﭼﻨﺪ ﻓﺼﻞ ﺑﺮاي ﻧﻤﻮﻧﻪ ﺑﺎﺷﻨﺪ‪ .‬در ﺻﻮرﺗﻴﻜﻪ ﻛﺎرﺑﺮان ﺑـﺮاي ﺧﺮﻳـﺪ‬
‫ﻛﺘﺎﺑﻲ ﺗﻤﺎﻳﻞ داﺷﺘﻪ ﺑﺎﺷﻨﺪ ﺑﺎﻳﺪ ﺑﻪ ﺳﺎﻳﺖ ‪ login‬ﻛﻨﻨﺪ ﺗﺎ ﺑﺘﻮاﻧﻨﺪ ﻛﺘﺎب ﻣﻮرد ﻧﻈﺮ ﺧـﻮد را ﺧﺮﻳـﺪاري ﻧﻤﺎﻳﻨـﺪ‪ .‬ﺑﻄـﻮر‬
‫ﻛﻠﻲ ﺧﺮﻳﺪ ﺑﺪون ﻋﻀﻮﻳﺖ در ﺳﺎﻳﺖ اﻣﻜﺎن ﭘﺬﻳﺮ ﻧﻴﺴﺖ‪ .‬ﺑﺮاي ورود ﺑﻪ ﺳﺎﻳﺖ ﻧﻴﺎز ﺑﻪ ﻛـﺪﻛﺎرﺑﺮي و رﻣـﺰ ﻋﺒـﻮر ﻣـﻲ‬
‫ﺑﺎﺷﺪ‪ .‬ﻛﺎرﺑﺮاﻧﻲ ﻛﻪ ﻛﺪﻛﺎرﺑﺮي ﻧﺪارﻧﺪ ﻣﻲ ﺗﻮاﻧﻨـﺪ ﺑـﺎ رﻓـﺘﻦ ﺑـﻪ ﺻـﻔﺤﻪ ﺛﺒـﺖ ﻧـﺎم و ﭘـﺮ ﻛـﺮدن ﻓـﺮم ﺛﺒـﺖ ﻧـﺎم‪ ،‬ﻳـﻚ‬
‫ﻛﺪﻛﺎرﺑﺮي ﺑﺮاي ﺧﻮد اﻳﺠﺎد و ﺑﻪ ﺳﺎﻳﺖ وارد ﺷﻮﻧﺪ‪ .‬در ﻫﻨﮕﺎم ﺛﺒﺖ ﻧﺎم ﺑﻄـﻮر ﭘـﻴﺶ ﻓـﺮض ﻣﻘـﺪار ‪ 50000‬ﺑﻌﻨـﻮان‬
‫ﻣﻮﺟﻮدي اوﻟﻴﻪ ﺑﻪ ﻛﺎرﺑﺮان داده ﻣﻲ ﺷﻮد‪ .‬در زﻣﺎن ورود ﺑﻪ ﺳﺎﻳﺖ اﮔﺮ اﻃﻼﻋﺎت ﻛﺪ ﻛﺎرﺑﺮي ﻳﺎ ﻛﻠﻤﻪ ﻋﺒﻮر اﺷﺘﺒﺎﻫﻲ‬
‫وارد ﺷﻮد ﺑﺪون اﻳﻨﻜﻪ ﺻﻔﺤﻪ ﺗﻐﻴﻴﺮي ﻛﻨﺪ ﭘﻴﻐﺎم ﻫﺸﺪاري ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷـﻮد ﻧﻤـﺎﻳﺶ اﻳـﻦ ﭘﻴﻐـﺎم ﺗﻮﺳـﻂ ‪Ajax‬‬
‫ﭘﻴﺎده ﺳﺎزي ﺷﺪه اﺳﺖ‪.‬‬
‫زﻣﺎﻧﻴﻜﻪ ﻛﺎرﺑﺮ ﺑﻪ ﺳﺎﻳﺖ وارد ﻣﻲ ﺷﻮد‪ ،‬اﻃﻼﻋﺎت ﺷﺨﺼﻲ ﻛﺎرﺑﺮ ﺑﻪ ﻫﻤﺮاه ﻣﻴﺰان ﻣﻮﺟﻮدﻳﺶ‪ ،‬ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷـﻮد‪.‬‬
‫ﻛﺎرﺑﺮ ﻣﻲ ﺗﻮاﻧﺪ ﻛﺘﺎب ﻣﻮرد ﻧﻈﺮ ﺧﻮد را در ﻗﺴﻤﺖ ﻣﺸﺨﺺ‪ ،‬ﺟﺴﺘﺠﻮ ﻛﻨﺪ و ﺑﺎ وارد ﻛﺮدن ﺗﻌﺪاد ﺧﺮﻳـﺪ و ﻓـﺸﺮدن‬
‫دﻛﻤﻪ ﺧﺮﻳﺪ‪ ،‬آن ﻛﺘﺎب را ﺑﻪ ﺳﺒﺪ ﺧﺮﻳﺪ ﺧﻮد اﺿﺎﻓﻪ ﻧﻤﺎﻳﺪ‪ .‬ﺳﺒﺪ ﺧﺮﻳـﺪ در ﺳـﺎﻳﺖ ﻗﺎﺑـﻞ روﻳـﺖ اﺳـﺖ و ﻛـﺎرﺑﺮ ﻣـﻲ‬
‫ﺗﻮاﻧﺪ ﻫﺮ زﻣﺎن ﻧﺴﺒﺖ ﺑﻪ ﺣﺬف ﺧﺮﻳﺪ از ﺳﺒﺪ ﺧﺮﻳﺪ اﻗﺪام ﻧﻤﺎﻳﺪ‪ .‬در ﭘﺎﻳﺎن ﻋﻤﻠﻴﺎت ﺧﺮﻳﺪ‪ ،‬ﻛﺎرﺑﺮ ﺑﺎﻳﺪ ﺧﺮﻳـﺪ را ﺗﺎﻳﻴـﺪ‬
‫ﻛﻨﺪ در اﻳﻦ ﺻﻮرت ﻣﺒﻠﻎ ﻛﺘﺎب ﻫﺎي ﻣﻮﺟﻮد در ﺳﺒﺪ ﺧﺮﻳﺪ از ﻣﻮﺟﻮدي ﻛﺎرﺑﺮ ﻛﻢ ﻣـﻲ ﺷـﻮد‪ .‬اﻧﺠـﺎم اﻳـﻦ ﻋﻤﻠﻴـﺎت‬
‫ﺑﺼﻮرت ‪ Ajax‬ﻣﻲ ﺑﺎﺷﺪ ﺗﺎ ﺻﻔﺤﻪ دوﺑﺎره ﺑﺎرﮔﺬاري ﻧﺸﻮد‪ .‬ﻫﻤﭽﻨـﻴﻦ ﻫـﺮ ﻛﺘـﺎب ﻣـﻲ ﺗﻮاﻧـﺪ داراي ﻳـﻚ ﻓﺎﻳـﻞ ﺑـﻪ‬
‫ﻣﻨﻈﻮر اراﺋﻪ ﺳﺮﻓﺼﻞ ﻫﺎي ﻛﺘﺎب ﺑﻪ ﻣﺸﺘﺮﻳﺎن‪ ،‬ﺑﺎﺷﺪ‪.‬ﻛﺎرﺑﺮان اﻣﻜﺎن داﻧﻠﻮد اﻳﻦ ﻓﺎﻳﻞ را دارﻧﺪ‪ .‬ﻛﺎرﺑﺮان ﻣـﻲ ﺗﻮاﻧﻨـﺪ در‬
‫ﺳﺎﻳﺖ ﻟﻴﺴﺖ ﻛﺘﺎب ﻫﺎي ﻛﻪ ﻗﺒﻼ ﺗﻮﺳﻂ آن ﻫﺎ ﺧﺮﻳﺪاري ﺷﺪه اﺳﺖ ﺑﻪ ﻫﻤﺮاه ﺗـﺎرﻳﺦ ﺧﺮﻳـﺪ ﻛﺘـﺎب ﻫـﺎ‪ ،‬را ﻣـﺸﺎﻫﺪه‬
‫ﻧﻤﺎﻳﻨﺪ‪.‬‬
 ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬ ‫‪  156‬ﻓﺼﻞ ‪7‬‬

‫ﻛﺎرﺑﺮان ﻧﻮع دﻳﮕﺮ‪ ،‬ﻛﺎرﺑﺮان ﻣﻴﻬﻤﺎن ﻫﺴﺘﻨﺪ ﻛﻪ ﺑﺪون داﺷﺘﻦ ﻛـﺪ ﻛـﺎرﺑﺮي ﻣـﻲ ﺧﻮاﻫﻨـﺪ اﻃﻼﻋـﺎﺗﻲ از ﻛﺘـﺎب ﻫـﺎ را‬
‫ﺟﺴﺘﺠﻮ و ﻣﺸﺎﻫﺪه ﻳﺎ ﻓﺎﻳﻞ ﻣﺮﺑﻮط ﺑﻪ ﻛﺘﺎب را داﻧﻠﻮد ﻧﻤﺎﻳﻨﺪ‪ .‬ﻛﺎرﺑﺮ ﻧﻮع ﻣﻴﻬﻤﺎن در ﺻـﻔﺤﻪ اﺻـﻠﻲ ﺳـﺎﻳﺖ ﺷـﺮوع ﺑـﻪ‬
‫ﺟﺴﺘﺠﻮي ﻛﺘﺎب ﻣﻲ ﻧﻤﺎﻳﺪ و اﻃﻼﻋﺎت ﻛﺘﺎب درﺧﻮاﺳﺘﻲ او در ﺻﻔﺤﻪ دﻳﮕﺮ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬
‫ﻛﺎرﺑﺮ ﻧﻮع دﻳﮕﺮ ﻣﺪﻳﺮ ﺳﺎﻳﺖ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻣﺪﻳﺮ ﺳﺎﻳﺖ ﻣﻲ ﺗﻮاﻧـﺪ ﻟﻴـﺴﺘﻲ از ﻛـﺎرﺑﺮان ﻋـﻀﻮ ﺳـﺎﻳﺖ را ﻣـﺸﺎﻫﺪه ﻧﻤﺎﻳـﺪ‪.‬‬
‫ﻫﻤﭽﻨﻴﻦ ﻣﻲ ﺗﻮاﻧﺪ اﻃﻼﻋﺎت ﺧﺮﻳﺪ ﻳﻚ ﻛﺎرﺑﺮ ﺧﺎص را ﻣﺸﺎﻫﺪه‪ ،‬ﺑﺮاي ﻳﻚ ﻛﺎرﺑﺮ ﺧﺎص اﻗﺪام ﺑﻪ ﺷﺎرژ ﻣﻮﺟﻮدﻳﺶ‬
‫ﻧﻤﺎﻳﺪ و ﻫﻤﭽﻨﻴﻦ ﻟﻴﺴﺘﻲ از ﺗﺎرﻳﺦ ﻫﺎ و ﻣﻘﺎدﻳﺮ ﺷﺎرژ ﺣﺴﺎب ﻫﺎي ﻣﺸﺘﺮﻳﺎن را ﻣﺸﺎﻫﺪه ﻧﻤﺎﻳـﺪ‪ .‬ﻫﻤﭽﻨـﻴﻦ اﻣﻜـﺎن اﻧﺠـﺎم‬
‫ﻋﻤﻠﻴﺎت اﺿﺎﻓﻪ ﻛﺮدن‪ ،‬ﺣﺬف‪ ،‬وﻳﺮاﻳﺶ را ﺑﺮ روي ﻛﺘﺎب ﻫﺎ و اﻣﻜﺎن ‪ Upload‬ﻛﺮدن ﺗﺼﻮﻳﺮ و ﻓﺎﻳﻞ اﻟﻜﺘﺮوﻧﻴﻜـﻲ‬
‫ﻛﺘﺎب ﻫﺎ را داراﺳﺖ‪.‬‬
‫ﺟﺪاول ﻣﻮﺟﻮد در ﺳﻴﺴﺘﻢ‬
‫در اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﻣﺎ ﻧﻴﺎز ﺑﻪ ﺟﺪول ﻫﺎي ﺑﺮاي ﻧﮕﻬـﺪاري اﻃﻼﻋـﺎت ﻛﺘـﺎب ﻫـﺎ‪ ،‬اﻃﻼﻋـﺎت ﻛـﺎرﺑﺮان‪ ،‬اﻃﻼﻋـﺎت ﺧﺮﻳـﺪ و‬
‫اﻃﻼﻋﺎت ﺷﺎرژ ﻣﻮﺟﻮدي ﻛﺎرﺑﺮان دارﻳﻢ‪ .‬در اﻳﻨﺠﺎ ﺑﻪ ﺑﺮرﺳﻲ ﺟﺪول ﻫﺎي ﻻزم در اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﻣﻲ ﭘﺮدازﻳﻢ‪.‬‬
‫ﺟﺪول ﻛﺘﺎب‬
‫ﺟﺪول ﻛﺘﺎب‪ ،‬ﺟﺪوﻟﻲ ﺑﺮاي ﻧﮕﻬﺪاري ﻣﺸﺨﺼﺎت ﻛﺘﺎب ﻫﺎ ﻣﻲ ﺑﺎﺷﺪ‪.‬‬

‫ﺟﺪول ‪ 8-1‬ﺟﺪول ﻛﺘﺎب‬

‫‪ Code -‬ﻳﻚ ﺷﻤﺎره ﻣﻨﺤﺼﺮ ﺑﻔﺮد ﺑﺮاي ﻫﺮ ﻛﺘﺎب‬
‫‪ Isbn -‬ﺷﺎﺑﻚ ﻛﺘﺎب‬
‫‪ Name -‬ﻧﺎم ﻛﺘﺎب‬
‫‪ Subject -‬ﻣﻮﺿﻮع ﻛﺘﺎب‬
‫‪ Author -‬ﻧﺎم ﻧﻮﻳﺴﻨﺪه ﻛﺘﺎب‬
‫‪ Translater -‬ﻧﺎم ﻣﺘﺮﺟﻢ ﻛﺘﺎب‬
‫‪ Press -‬ﻧﺎم اﻧﺘﺸﺎرات ﻛﺘﺎب‬
‫‪ Price -‬ﻗﻴﻤﺖ ﻛﺘﺎب‬
‫‪ Image -‬ﻣﺴﻴﺮ ﺗﺼﻮﻳﺮ ‪ upload‬ﺷﺪه ﻛﺘﺎب‬
‫‪ Language -‬زﺑﺎن ﻛﺘﺎب‬
‫‪ Path -‬ﻣﺴﻴﺮ ﻓﺎﻳﻞ اﻟﻜﺘﺮوﻧﻴﻜﻲ ﻛﺘﺎب ﺑﺮاي داﻧﻠﻮد ﻛﺮدن‪.‬‬
‫ﺟﺪول ﺳﺒﺪ ﺧﺮﻳﺪ‬
‫ﻓﺼﻞ ‪157  7‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬

‫ﺟﺪول ﺳﺒﺪ ﺧﺮﻳﺪ ﺣﺎوي اﻃﻼﻋﺎت اﻗﻼم ﺧﺮﻳﺪ ﻛﺎرﺑﺮان ﻣﻲ ﺑﺎﺷﺪ‪ .‬اﻃﻼﻋﺎت اﻳﻦ ﺟﺪول ﻣﻮﻗﺘﻲ اﺳﺖ‪ ،‬ﺗﺎ زﻣـﺎﻧﻲ ﻛـﻪ‬
‫ﻛﺎرﺑﺮ ﺧﺮﻳﺪ ﺧﻮد را ﺗﺎﻳﻴﺪ ﻧﻤﺎﻳﺪ‪ .‬ﺑﻪ ازاي ﻫﺮ ﺧﺮﻳﺪ ﻛﺎرﺑﺮ ﻳﻚ رﻛﻮرد ﺑﻪ اﻳﻦ ﺟﺪول اﺿﺎﻓﻪ ﻣﻲ ﺷﻮد‪ .‬ﻋﻠـﺖ اﺳـﺘﻔﺎده‬
‫از ﺟﺪول ﺳﺒﺪ ﺧﺮﻳﺪ ﺑﻌﻨﻮان ﻳﻚ ﺟﺪول ﻣﻮﻗﺘﻲ اﻳﻦ اﺳﺖ ﻛﻪ اﻳﻦ اﻣﻜﺎن در ﺳـﺎﻳﺖ ﻓـﺮاﻫﻢ اﺳـﺖ ﻛـﻪ ﻛـﺎرﺑﺮ ﺑـﺪون‬
‫ﺗﺎﻳﻴﺪ ﺧﺮﻳﺪ از اﻧﺠﺎم ﻛﻞ ﺧﺮﻳﺪ ﻣﻨﺼﺮف ﺷﻮد و از ﺳﺎﻳﺖ ﺧﺎرج ﺷﻮد‪.‬‬

‫ﺟﺪول ‪ 8-2‬ﺟﺪول ﺳﺒﺪ ﺧﺮﻳﺪ‬

‫‪ bookCode -‬ﻛﺪ ﻛﺘﺎب‬
‫‪ Price -‬ﻗﻴﻤﺖ ﻛﺘﺎب‬
‫‪ Number -‬ﺗﻌﺪاد ﺧﺮﻳﺪ‬
‫‪ total_price -‬ﻗﻴﻤﺖ ﻛﻞ‬
‫‪ customerid -‬ﺷﻤﺎره ﻣﺸﺘﺮي‬
‫‪ date -‬ﺗﺎرﻳﺦ ﺧﺮﻳﺪ‪.‬‬
‫ﺟﺪول آرﺷﻴﻮ ﺧﺮﻳﺪ‬
‫ﭘﺲ از ﺗﺎ ﺋﻴﺪ ﺧﺮﻳﺪ ﺗﻮﺳﻂ ﺧﺮﻳﺪار اﻃﻼﻋﺎت ﺳﺒﺪ ﺧﺮﻳﺪ ﺑﻪ اﻳﻦ ﺟﺪول وارد ﻣـﻲ ﺷـﻮد‪ .‬ﺳـﺎﺧﺘﺎر اﻳـﻦ ﺟـﺪول ﻣـﺸﺎﺑﻪ‬
‫ﺟﺪول ﺳﺒﺪ ﺧﺮﻳﺪ ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫ﺟﺪول ﻛﺎرﺑﺮان‬
‫ﻣﺸﺨﺼﺎت ﻛﺎرﺑﺮان در اﻳﻦ ﺟﺪول ﻧﮕﻬﺪاري ﻣﻲ ﺷﻮد‪.‬‬

‫ﺟﺪول ‪ 8-3‬ﺟﺪول اﻃﻼﻋﺎت ﻛﺎرﺑﺮان‬

‫‪ Customerid -‬ﺷﻤﺎره ﻛﺎرﺑﺮ‬
‫‪ Customername -‬ﻧﺎم ﻛﺎرﺑﺮ‬
‫‪ Customerfamily -‬ﻧﺎم ﺧﺎﻧﻮادﮔﻲ ﻛﺎرﺑﺮ‬
‫‪ Address -‬آدرس ﻛﺎرﺑﺮ‬
 ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬ ‫‪  158‬ﻓﺼﻞ ‪7‬‬

‫‪ Tel -‬ﺷﻤﺎره ﺗﻠﻔﻦ ﻛﺎرﺑﺮ‬

‫‪ Mail -‬آدرس ﭘﺴﺖ اﻟﻜﺘﺮوﻧﻴﻜﻲ ﻛﺎرﺑﺮ‬
‫‪ Account -‬ﻣﻮﺟﻮدي ﻛﺎرﺑﺮ‬
‫‪ Username -‬ﻛﺪ ﻛﺎرﺑﺮي‬
‫‪ Pass -‬رﻣﺰ ﻋﺒﻮر‬
‫‪ Status -‬ﺣﺎﻟﺖ ﻛﺎرﺑﺮ ‪1=online, 0=offline‬‬
‫‪ Type -‬ﻧﻮع ﻛﺎرﺑﺮ‪ -1 ،‬ﻣﺪﻳﺮ‪ =0 ،‬ﻛﺎرﺑﺮ ﻣﻌﻤﻮﻟﻲ‬
‫ﺟﺪول ﺷﺎرژ‬
‫در اﻳﻦ ﺟﺪول ﺗﺎرﻳﺦ ﺷﺎرژ‪ ،‬ﻣﻴﺰان ﺷﺎرژ ﻣﻮﺟﻮدي و ﺷﻤﺎره ﻣﺸﺘﺮي ﻧﮕﻬﺪاري ﻣﻲ ﺷﻮد‪ .‬اﻳﻦ ﺟﺪول ﺑﻴﺸﺘﺮ ﺑـﻪ داﺷـﺘﻦ‬
‫آﻣﺎرﻫﺎي دﻗﻴﻖ ﻓﺮوﺷﮕﺎه ﻛﻤﻚ ﻣﻲ ﻛﻨﺪ‪.‬‬

‫ﺟﺪول ‪ 8-4‬ﺟﺪول اﻃﻼﻋﺎت ﺷﺎرژ‬

‫‪ Customerid -‬ﺷﻤﺎره ﻛﺎرﺑﺮ‬
‫‪ Value -‬ﻣﻴﺰان ﺷﺎرژ‬
‫‪ Date -‬ﺗﺎرﻳﺦ ﺷﺎرژ‬
‫ﻧﻤﻮدار راﺑﻄﻪ ي ﺟﺪول ﻫﺎ‬
‫ﻓﺼﻞ ‪159  7‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬

‫ﺑﻌﺪ از ﻣﺮوري ﺑﺮ ﺑﺮﻧﺎﻣﻪ ﺑﻬﺘﺮ اﺳﺖ ﺑﻪ ﻃﺮاﺣﻲ ﺳﺎﻳﺖ و ﻧﺤﻮي ﻛﺪﻧﻮﻳﺴﻲ آن ﺑﭙﺮدازﻳﻢ‪.‬‬
‫ﺑﻬﺘﺮ اﺳﺖ ﺻﻔﺤﻪ اﺻﻠﻲ ﺳﺎﻳﺖ ﻳﻚ ﺻﻔﺤﻪ ﻛﻢ ﺣﺠﻢ ﺑﺎﺷﺪ ﺗﺎ اﻳﻦ ﺻـﻔﺤﻪ ﺑـﻪ ﺳـﺮﻋﺖ ‪ load‬ﺷـﻮد و ﻛـﺎرﺑﺮ ﺑـﺮاي‬
‫ﻣﺸﺎﻫﺪه ﺳﺎﻳﺖ ﻣﻨﺘﻈﺮ ﻧﺸﻮد و ﻋﻤﻠﻴﺎت اﺻﻠﻲ ﺳﺎﻳﺖ را ﺑﻪ ﺻﻔﺤﺎت دﻳﮕﺮ ﻣﻨﺘﻘﻞ ﻛﻨـﻴﻢ ﻫﻤﭽﻨـﻴﻦ ﺑـﺮاي آﻧﻜـﻪ ﺻـﻔﺤﻪ‬
‫اﺻﻠﻲ ﺳﺎﻳﺖ ﻳﻚ ﻗﺎﻟﺐ ﻣﺸﺨﺺ داﺷﺘﻪ ﺑﺎﺷﺪ‪ ،‬ﺑﻪ ﻣﺎﻧﻨﺪ ﺷﻜﻞ ‪ 8-1‬ﻃﺮاﺣﻲ ﺷﺪه اﺳـﺖ‪ .‬اﻣـﺎ ﺑﻬﺘـﺮ اﺳـﺖ در اول ﻛـﺎر‬
‫ﻳﻚ دﺳﺘﻪ ﺑﻨﺪي از ﻋﻤﻠﻴﺎت ﻣﻮﺟﻮد در اﻳﻦ ﺑﺮﻧﺎﻣﻪ داﺷﺘﻪ ﺑﺎﺷﻴﻢ ﺗﺎ ﺑﺘﻮاﻧﻴﻢ ﺑﺮ روي ﻃﺮاﺣﻲ ﺻﻔﺤﺎت ﺑﻬﺘﺮ ﻋﻤـﻞ ﻛﻨـﻴﻢ‪.‬‬
‫ﻋﻤﻠﻴﺎت را ﻧﺴﺒﺖ ﺑﻪ ﻧﻮع ﻛﺎرﺑﺮان ﺗﻘﺴﻴﻢ ﺑﻨﺪي ﻣﻲ ﻛﻨﻴﻢ‪:‬‬
‫‪ .1‬ﻋﻤﻠﻴﺎت ﻣﺮﺑﻮط ﺑﻪ ﻛﺎرﺑﺮ ﻧﻮع ﻣﻴﻬﻤﺎن‬
‫‪ .2‬ﻋﻤﻠﻴﺎت ﻣﺸﺘﺮك ﺑﺮاي ﻛﺎرﺑﺮان‬
‫‪ .3‬ﻋﻤﻠﻴﺎت ﻛﺎرﺑﺮ ﻋﻀﻮ ﺳﺎﻳﺖ‬
‫‪ .4‬ﻋﻤﻠﻴﺎت ﻣﺮﺑﻮط ﺑﻪ ﻣﺪﻳﺮ ﺳﺎﻳﺖ‬
‫ﻋﻤﻠﻴﺎت ﻣﺮﺑﻮط ﺑﻪ ﻛﺎرﺑﺮ ﻧﻮع ﻣﻴﻬﻤﺎن‬
‫اﻳﻦ ﻛﺎرﺑﺮ در ﺻﻔﺤﻪ اﺻﻠﻲ ﺳﺎﻳﺖ ﺗﻨﻬﺎ ﻣﻲ ﺗﻮاﻧﺪ ﻛﺘﺎﺑﻲ را ﺟﺴﺘﺠﻮ ﻧﻤﺎﻳﺪ ﺗﺎ اﻃﻼﻋﺎﺗﻲ از آن ﻛﺘﺎب را ﻣﺸﺎﻫﺪه ﻧﻤﺎﻳـﺪ‬
‫و ﻳﺎ ﻓﺎﻳﻞ اﻟﻜﺘﺮوﻧﻴﻜﻲ ﻛﺘﺎب را داﻧﻠﻮد ﻧﻤﺎﻳﺪ در ﻧﺘﻴﺠﻪ در ﺻﻔﺤﻪ اﺻﻠﻲ ﺳﺎﻳﺖ ﻧﻴﺎز ﺑﻪ ﻗﺴﻤﺘﻲ ﺑﺮاي ﺟﺴﺘﺠﻮي ﻛﺘـﺎب‬
‫دارﻳﻢ اﻣﺎ ﻧﺘﺎﻳﺞ ﺟﺴﺘﺠﻮ را در ﺻﻔﺤﻪ ي دﻳﮕﺮ ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﻴﻢ‪.‬‬

‫ﺷﻜﻞ ‪ 8-1‬ﻧﻤﺎي از ﻃﺮاﺣﻲ ﺻﻔﺤﻪ ‪home.html‬‬

‫ﺻﻔﺤﻪ ‪ ،home.html‬ﺻﻔﺤﻪ اﺻﻠﻲ ﺳﺎﻳﺖ ﻣﻲ ﺑﺎﺷﺪ‪ .‬ﻛﺎرﺑﺮ ﻣﻲ ﺗﻮاﻧﺪ در اﻳﻦ ﺻـﻔﺤﻪ ﻣـﺴﺘﻘﻴﻤﺎ و ﺑـﺪون ‪Login‬‬
‫ﻛﺮدن ﺑﻪ ﺳﺎﻳﺖ ﺑﻪ ﺟﺴﺘﺠﻮي ﻛﺘﺎب ﻣﻮرد ﻧﻈﺮ ﺧﻮد ﺑﭙﺮدازد وﻟﻲ اﻣﻜﺎن ﺧﺮﻳﺪ ﻛﺘﺎب را ﻧﺪارد‪ .‬در اﻳﻦ ﺻﻔﺤﻪ اﻣﻜـﺎن‬
‫ﻓﺮﺳﺘﺎدن ﭘﻴﺎم ﺑﻪ ﻣﺪﻳﺮ ﺳﺎﻳﺖ‪ ،‬ورود ﺑﻪ ﺻﻔﺤﻪ ي ﺷﺨﺼﻲ و ﺛﺒﺖ ﻧﺎم ﻛﺮدن ﻛﺎرﺑﺮ ﻧﻴﺰ ﻓﺮاﻫﻢ اﺳﺖ‪.‬‬
 ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬ ‫‪  160‬ﻓﺼﻞ ‪7‬‬

‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ ‪home.html‬‬

‫زﻣﺎﻧﻴﻜﻪ ﻛﻪ ﻛﺎرﺑﺮ در ﺻﻔﺤﻪ اﺻﻠﻲ ﺳﺎﻳﺖ ﺑﺮ روي دﻛﻤﻪ ﺟﺴﺘﺠﻮ ﻛﻠﻴـﻚ ﻛﻨـﺪ‪ .‬ﺗـﺎﺑﻊ )(‪ senddata‬ﻓﺮاﺧـﻮاﻧﻲ‬
‫ﻣﻲ ﺷﻮد و ﺑﺮاي ارﺳﺎل ﻧﻮع ﺟﺴﺘﺠﻮ )ﺑﺮاﺳﺎس ﻧﺎم ﻳﺎ ﻣﻮﺿﻮع( ﻣﻘﺪار)‪ (value‬ﺧﺎﻧﻪ ي اﻧﺘﺨـﺎب ﺷـﺪه را ﺑـﻪ ﻳـﻚ‬
‫‪ input‬از ﻧﻮع ‪ hidden‬ﺑﺎ ’‪ id=’var1‬اﻧﺘﺴﺎب ﻣـﻲ دﻫـﺪ از اﻳـﻦ ‪ input‬ﺑـﻪ ﻋﻨـﻮان ﻳـﻚ ﻣﺘﻐﻴـﺮ ﻛﻤﻜـﻲ‬
‫اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬
‫{)(‪function senddata‬‬

‫‪var t = document.form1.select1.options[document.form1‬‬
‫;‪.select1.selectedIndex].value‬‬

‫;‪document.getElementById('var1').value=t‬‬
‫}‬
‫ﺻﻔﺤﻪ‪ home.html‬اﻃﻼﻋﺎت را از ﻃﺮﻳﻖ>‪ <form‬و ﺑﺼﻮرت ﻣﺘﺪ ‪ GET‬ﺑﻪ ﺻﻔﺤﻪ ‪ ViewBook.php‬ﺑﺮاي‬
‫ﺟﺴﺘﺠﻮي ﻛﺘﺎب ارﺳﺎل ﻣﻲ ﻛﻨﺪ‪ .‬ﭼﻮن ﻧﻮع دﻛﻤﻪ ﺟﺴﺘﺠﻮ ‪ Submit‬ﻣﻲ ﺑﺎﺷﺪ اﻃﻼﻋﺎت ﺑﺎ ﻛﻠﻴﻚ ﺷﺪن اﻳﻦ دﻛﻤﻪ‬
‫ارﺳﺎل ﻣﻲ ﮔﺮدد‪ .‬در اﻳﻦ ﺻﻔﺤﻪ ﻣﺘﻐﻴﺮ ﻛﻤﻜﻲ دﻳﮕﺮ ﺑﻪ ﻧﺎم ‪ h2‬ﺑﺎ '‪ id='var2‬ﻣﻮﺟﻮد ﻣﻲ ﺑﺎﺷﺪ و ﺑﺮاي آن اﺳﺖ‬
‫ﻛﻪ ﺑﺎ ﻣﻘﺪار دﻫﻲ ﺻﻔﺮ ﺑﻪ آن ﺑﺘﻮاﻧﻴﻢ در ﺻﻔﺤﻪ ‪ ViewBook.php‬ﺗـﺎﺑﻊ ‪ newsearch‬را ﺑـﺎ ﭘـﺎراﻣﺘﺮ ﺻـﻔﺮ ﺑـﻪ‬
‫ﻣﻨﻈﻮر ﺷﺮوع ﺟﺴﺘﺠﻮ ﻓﺮاﺧﻮاﻧﻲ ﻛﺮد‪.‬‬
‫>"‪<form method=GET action="ViewBook.php" name="form1‬‬

‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ ‪ViewBook.php‬‬

‫اﻳﻦ ﺻﻔﺤﻪ ﻃﺮاﺣﻲ و ﻛﺪ آن ﺗﻘﺮﻳﺒﺎ ﻣﺎﻧﻨﺪ ﺻﻔﺤﻪ ‪ Home.html‬ﻣﻲ ﺑﺎﺷﺪ ﺑﺎ اﻳﻦ ﺗﻔﺎوت ﻛﻪ ﺑﺮاي ﺟﺴﺘﺠﻮي ﻛﺘﺎب‬
‫و ﻧﻤﺎﻳﺶ ﻧﺘﺎﻳﺞ ﻛﺪﻫﺎي ‪ php‬در آن ﻧﻮﺷﺘﻪ ﺷﺪه اﺳﺖ‪ .‬ﺑﺎ ﻛﻠﻴﻚ ﺷﺪن دﻛﻤﻪ ﺟﺴﺘﺠﻮ ﺗﺎﺑﻊ ‪ senddata‬ﻓﺮاﺧﻮاﻧﻲ‬
‫ﻣﻲ ﺷﻮد‪ .‬ﺑﺪﻧﻪ اﻳﻦ ﺗﺎﺑﻊ ﻫﻤﺎﻧﻨﺪ ﺗﺎﺑﻊ ‪ senddata‬در ﺻﻔﺤﻪ ‪ home.html‬ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫{)(‪function senddata‬‬

‫‪var t = document.form1.select1.options[document.form1.‬‬
‫;‪select1.selectedIndex].value‬‬
‫;‪document.getElementById('var1').value=t‬‬
‫}‬
‫ﻧﺘﺎﻳﺞ ﺟﺴﺘﺠﻮ در ﻗﺎﻟﺒﻲ ﺧﺎص ﺗﻘﺴﻴﻢ ﺑﻨﺪي )ﺻﻔﺤﻪ ﺑﻨﺪي( ﻣﻲ ﺷﻮﻧﺪ ﺑﺮاي آن ﻛﻪ ﺑﺘﻮاﻧﻴﻢ ﺑﺎ ﻛﻠﻴـﻚ ﺑـﺮ روي ﺷـﻤﺎره‬
‫ﺻﻔﺤﻪ اﻃﻼﻋﺎت آن ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ داده ﺷﻮد‪ ،‬ﺗﺎﺑﻊ )‪ newsearch(e‬را ﺑﺎ ﭘﺎراﻣﺘﺮ ﺷـﻤﺎره رﻛـﻮردي ﻛـﻪ از آن‬
‫رﻛﻮرد ﺑﻪ ﺑﻌﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ ﻳﻚ ﺗﻌﺪاد رﻛﻮرد را از ﻣﺠﻤﻮﻋﻪ ﺟﻮاب ﺑﺎزﻳﺎﺑﻲ ﻛﻨﻴﻢ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﻴﻢ‪ .‬ﺑﺎ ﻣﻘـﺪاردﻫﻲ‬
‫‪ ،e=0‬از اﺑﺘﺪاي ﻣﺠﻤﻮﻋﻪ ﺟﻮاب رﻛﻮردﻫﺎ را ﺑﺎزﻳﺎﺑﻲ ﻣﻲ ﻛﻨﻴﻢ‪.‬‬

‫{)‪function newsearch(e‬‬
‫;‪document.getElementById('var2').value = e‬‬
‫}‬
‫ﻓﺼﻞ ‪161  7‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬

‫ﺻﻔﺤﻪ ‪ ViewBook.php‬ﺧﻮدش را ﺑﻪ ﻫﻨﮕﺎم ﻛﻠﻴﻚ ﻛﺮدن دﻛﻤﻪ ﺟﺴﺘﺠﻮ ﻓﺮاﺧـﻮاﻧﻲ ﻣـﻲ ﻛﻨـﺪ‪ .‬ﺑـﺮاي ارﺳـﺎل‬
‫اﻃﻼﻋﺎت از ﻣﺘﺪ ‪ GET‬اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ‪.‬‬
‫>'‪<form method=GET action="ViewBook.php" name='form1‬‬

‫ﺷﻜﻞ‪ 8-2‬ﻧﻤﺎي از ﻃﺮاﺣﻲ ﺻﻔﺤﻪ ‪viewBook.php‬‬

‫در ﺻﻔﺤﻪ‪ ViewBook.php‬ﻗﺴﻤﺖ ﻛﺪي ﺑﻪ زﺑﺎن ‪ php‬ﺑﺮاي ﺟﺴﺘﺠﻮي ﻛﺘﺎب ﻗﺮار دارد‪.‬‬
‫‪<?php‬‬
‫اﻳﻦ دﺳﺘﻮر ﺑﺮاي ﭼﻚ ﻛﺮدن ﺗﻬﻲ )ﺧﺎﻟﻲ( ﻧﺒﻮدن ﻓﻴﻠﺪ )اﻳﻦ ﻓﻴﻠﺪ ﻫﻤﺎن ﻣﺘﻨﻲ اﺳﺖ ﻛـﻪ ﻛـﺎرﺑﺮ ﻣـﻲ ﻧﻮﻳـﺴﺪ( ﺟـﺴﺘﺠﻮ‬
‫اﺳﺖ‪.‬‬
‫))]'‪if (isset($_GET['text1‬‬
‫{‬
‫در اﻳﻦ ﻗﺴﻤﺖ اﻃﻼﻋﺎﺗﻲ ﻛﻪ ﺗﻮﺳﻂ ﻣﺘﺪ ‪ GET‬ارﺳﺎل ﺷﺪه اﻧﺪ‪ ،‬درﻳﺎﻓﺖ ﻣﻲ ﺷﻮﻧﺪ‪.‬‬
‫;]'‪$index = $_GET['h1‬‬
‫;]'‪$name = $_GET['text1‬‬
‫‪ $count‬ﺷﻤﺎره رﻛﻮردي اﺳﺖ ﻛﻪ ﺑﺎﻳﺪ اﻃﻼﻋﺎت از آن ﺟﺎ ﺑﺎزﻳﺎﺑﻲ ﺷﻮد‪ .‬اﻳﻦ ﺷﻤﺎره ﺗﻮﺳﻂ ﻳﻚ ﻣﺘﻐﻴﺮ ﺑﺎ ﻧـﺎم ‪h2‬‬
‫و ﻳﺎ '‪ id='var2‬در ﺗﺎﺑﻊ )(‪ newsearch‬ﻣﻘﺪاردﻫﻲ ﺷﺪه اﺳﺖ‪.‬‬
‫;]'‪$count =$_GET['h2‬‬
‫در اﻳﻦ ﺟﺎ دﺳﺘﻮر اﺗﺼﺎل ﺑﻪ وب ﺳﺮور ﻣﺤﻠﻲ را ﻣﻲ ﻧﻮﻳﺴﻴﻢ‪.‬‬
‫;)''‪$link = mysql_connect('localhost','root',‬‬
‫ﻣﺮ ﺣﻠﻪ ﺑﻌﺪ اﻧﺘﺨﺎب ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ ‪ BookStore‬ﺑﺎ دﺳﺘﻮر زﻳﺮ ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫;)'‪mysql_select_db('BookStore‬‬
‫ﺑﻌﺪ ﻧﻮﺑﺖ ﻧﻮﺷﺘﻦ دﺳﺘﻮر ‪ SQL‬ﺑﺮاي ﺟﺴﺘﺠﻮي ﻛﺘﺎب ﻣـﻮرد ﻧﻈـﺮ اﺳـﺖ اﮔـﺮ ‪ $index=0‬ﺑﺎﺷـﺪ ﻛـﺎرﺑﺮ ﺟـﺴﺘﺠﻮ‬
‫ﺑﺮاﺳﺎس ﻧﺎم را اﻧﺘﺨﺎب ﻛﺮده و اﮔﺮ ﺑﺮاﺑﺮ ﻳﻚ ﺟﺴﺘﺠﻮ ﺑﺮاﺳﺎس ﻣﻮﺿﻮع را اﻧﺘﺨﺎب ﻛﺮده اﺳﺖ‪.‬‬
‫;" ‪$q = "select * from book where‬‬
‫)'‪if ($index == '0‬‬
 ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬ ‫‪  162‬ﻓﺼﻞ ‪7‬‬

‫;" ‪$q.= "'$name' = name‬‬

‫)'‪else if ($index == '1‬‬
‫;" ‪$q.= "'$name' = subject‬‬
‫ﻣﺮﺣﻠﻪ ﺑﻌﺪ اﺟﺮاي دﺳﺘﻮر ‪ sql‬اﺳﺖ‪.‬‬
‫;)‪$res = mysql_query($q,$link‬‬
‫دﺳﺘﻮر زﻳﺮ ﺗﻌﺪاد رﻛﻮردﻫﺎي ﺟﻮاب دﺳﺘﻮر ‪ Sql‬را ﺑﺮﻣﻲ ﮔﺮداﻧﺪ‪.‬‬
‫;)‪$num = mysql_num_rows($res‬‬
‫ﺑﺮاي اﻳﻨﻜﻪ اﮔﺮ ﻧﺘﺎﻳﺞ ﺟﺴﺘﺠﻮ زﻳﺎد ﺑﺎﺷﺪ ﺻﻔﺤﻪ داراي ﻧﻮار ﻣـﺮور ﻋﻤـﻮدي ﻧـﺸﻮد‪ ،‬از ﺗﻜﻨﻴـﻚ ﺻـﻔﺤﻪ ﺑﻨـﺪي ﺑـﺮاي‬
‫ﻧﻤﺎﻳﺶ ﻧﺘﺎﻳﺞ ﺟﺴﺘﺠﻮ اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﻢ‪ .‬در اﻳﻦ روش ﺑﻌـﺪ از اﻳﻨﻜـﻪ ﺗﻌـﺪاد رﻛﻮردﻫـﺎي ﻛـﻪ ﻣـﻲ ﺧﻮاﻫﻴـﺪ در ﻳـﻚ‬
‫ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ دﻫﻴﺪ را ﻣﺸﺨﺺ ﻛﺮدﻳﺪ‪)،‬دﺳﺘﻮر)‪ mysql_num_rows($res‬ﺗﻌﺪاد رﻛﻮدﻫﺎي ﺟﻮاب را ﺑﻪ‬
‫ﻣﺎ ﻣﻲ دﻫﺪ‪ (.‬ﺗﻌﺪاد ﻛﻞ رﻛﻮدﻫﺎي ﻧﺘﺎﻳﺞ ﺟﺴﺘﺠﻮ را ﺑﺮ آن ﺗﻘـﺴﻴﻢ ﻛـﺮده و ﺗﻌـﺪاد ﺻـﻔﺤﺎت را ﺑﺪﺳـﺖ ﻣـﻲ آورﻳـﺪ‬
‫آﻧﮕﺎه دﺳﺘﻮر ﭘﺮس ﺟﻮي را ﺑﻪ آن ﺗﻌﺪاد رﻛﻮرد ﻣﺤﺪود ﻣـﻲ ﻛﻨﻴـﺪ‪ $num .‬ﺗﻌـﺪاد ﻛـﻞ رﻛﻮردﻫـﺎي ﺟـﻮاب‪$k ،‬‬
‫ﺗﻌﺪاد ﺻﻔﺤﺎﺗﻲ ﻛﻪ ﺟﺴﺘﺠﻮ ﺗﻮاﻧﺴﺘﻪ ﺑﺮﮔﺮداﻧﺪ‪.‬‬
‫;‪$k = $num/3‬‬
‫در اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﻣﺎ ﻗﺼﺪ دارﻳﻢ ﻛﻪ ﻫﺮ ﺻﻔﺤﻪ را ﺑﻪ ﺗﻌﺪاد ‪ 3‬رﻛﻮرد ﺟﻮاب ﻣﺤﺪود ﻛﻨﻴﻢ‪ .‬ﺑﺮاي اﻳﻦ ﻛـﺎر ﻻزم اﺳـﺖ در‬
‫اﻧﺘﻬﺎي دﺳﺘﻮر ‪ select‬از ﻋﺒـﺎرت ‪ limit $count,3‬اﺳـﺘﻔﺎده ﻛﻨـﻴﻢ‪ .‬اﻳـﻦ ﻋﺒـﺎرت ﻣـﺸﺨﺺ ﻣـﻲ ﻛﻨـﺪ از‬
‫رﻛﻮردي ﺑﻪ ﺷﻤﺎره ‪ $count‬در ﻣﺠﻤﻮﻋﻪ ﺟﻮاب ﺳﻪ ﺗﺎ رﻛﻮرد ﺑﺎزﻳﺎﺑﻲ ﺷﻮد‪ .‬اﮔﺮ در اﻳﻦ ﻋﺒﺎرت ﭘﺎراﻣﺘﺮ دوم ذﻛﺮ‬
‫ﻧﺸﻮد ﺑﺪﻳﻦ ﻣﻌﻨﻲ اﺳﺖ ﻛﻪ رﻛﻮردﻫﺎي ﻛﻪ ﺑﻌﺪ از رﻛﻮرد ﺑﻪ ﺷﻤﺎره ‪ $count‬ﻗﺮار دارﻧﺪ )در ﻣﺠﻤﻮﻋـﻪ ﺟـﻮاب( را‬
‫ﻧﻤﺎﻳﺶ دﻫﺪ‪.‬‬
‫;"‪$q.=" limit $count,3‬‬

‫;)‪$res = mysql_query($q,$link‬‬
‫ﺑﺮاي ﻧﻤﺎﻳﺶ ﺟﻮاب ﻫﺎ ﻳﻚ ﺟﺪول ‪ html‬اﻳﺠﺎد ﻣﻲ ﻛﻨﻴﻢ‪ .‬در اﺑﺘﺪا ﻗﺴﻤﺖ ﻫﺪر ﺟﺪول را ﻣﻲ ﺳﺎزﻳﻢ‪.‬‬
‫;)‪$row = mysql_fetch_array($res‬‬
‫‪$str = '<table width=100% ><tr><th align=left‬‬
‫‪</th><th align=left‬ﻧﺎم ﻛﺘﺎب>"‪style="color:#660000‬‬
‫‪</th><th align=left‬ﻧﺎم ﻧﻮﻳﺴﻨﺪه>"‪style="color:#660000‬‬
‫;'>‪</th></tr‬ﻗﻴﻤﺖ ﻛﺘﺎب>"‪style="color:#660000‬‬
‫ﺣﺎل ﺑﺎﻳﺪ از اﻳﻦ ﻣﺠﻤﻮﻋﻪ ﺟﻮاب ﺳﻪ ﻋﻨﺼﺮي ﺗﻚ ﺗﻚ رﻛﻮردﻫﺎ ﺑﺮاي ﻧﻤﺎﻳﺶ‪ ،‬ﺑﺎزﻳﺎﺑﻲ ﺷﻮﻧﺪ‪.‬‬
‫رﻛﻮردﻫﺎي ﺣﺎﺻﻞ از ﺟﺴﺘﺠﻮ را در ﺳﻄﺮ ﻫﺎي ﻳﻚ ﺟﺪول ‪ html‬ﻗﺮار ﻣﻲ دﻫﻴﻢ ﺗﺎ آن ﺟﺪول را ﻧﻤﺎﻳﺶ دﻫﻴﻢ‪.‬‬

‫)‪while( $row != NULL‬‬

‫{‬
‫;]‪$p='number'.$row[0‬‬
‫>‪$str.="<tr><td>$row[2]</td><td>$row[4]</td‬‬
‫>']‪<td>$row[7]</td><td><a href='$row[10‬‬
‫;">‪download</a></td><td><img src='$row[8]'></td></tr‬‬
‫ﻓﺼﻞ ‪163  7‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬

‫;)‪$row = mysql_fetch_array($res‬‬
‫}‬
‫;'>‪$str.='</table><br><p align=center‬‬
‫ﺑﺎ اﺳﺘﻔﺎده از ﻳﻚ ﺣﻠﻘﻪ ﺗﻜﺮار از ﺻﻔﺮ ﺗﺎ ﺗﻌﺪاد ﺻﻔﺤﺎت ﺟﻮاب ﻫﺎ )‪ ($k‬ﻳـﻚ ﺷـﻤﺎره ﻛـﻪ ﻫﻤـﺎن ﺷـﻤﺎره ﺻـﻔﺤﻪ‬
‫اﺳﺖ )‪ ($m‬را ﺑﻌﻨﻮان ﻳﻚ ﻟﻴﻨﻚ در ﻧﻈﺮ ﻣﻲ ﮔﻴﺮﻳﻢ و ﺑﺮاي روﻳﺪاد ‪ onclick‬ﻟﻴﻨﻚ ﺗﺎﺑﻊ ‪ newsearch‬را ﺑﺎ‬
‫ﭘﺎراﻣﺘﺮ ‪ $i*3‬ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﻴﻢ ) ﺑﺮاي ﺻﻔﺤﻪ اول ﺑﺎﻳﺪ رﻛﻮردﻫﺎي از ‪ 0‬ﺗـﺎ ‪ 3‬وﻟـﻲ ‪ $m‬ﺑـﺮاي ﺻـﻔﺤﻪ اول ﻳـﻚ‬
‫اﺳﺖ ﭘﺲ از ‪ $i‬اﺳﺘﻔﺎده ﻣـﻲ ﻛﻨـﻴﻢ‪ .‬ﺑـﺮاي ﺻـﻔﺤﻪ اول ‪ $i=0‬اﺳـﺖ ﭘـﺲ ‪ $count=0‬ﻳﻌﻨـﻲ دﺳـﺘﻮر ﺑـﺼﻮرت‬
‫‪ limit 0,3‬ﺑﺮاي ﺻﻔﺤﻪ دوم ‪ $i=1‬ﻳﻌﻨﻲ ‪ .limit 3,3‬ﭼﻮن ﻫﺮ ﺻﻔﺤﻪ داراي ﺳﻪ رﻛﻮرد اﺳـﺖ ﺷـﻤﺎره‬
‫ﺻﻔﺤﻪ در ﻋﺪد ﺳﻪ ﺿﺮب ﻣﻲ ﺷﻮد ﺗﺎ آدرس ﺷﺮوع رﻛﻮردي ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﻢ از آن آدرس رﻛﻮردﻫﺎي ﺟـﻮاب را‬
‫ﺑﺎزﻳﺎﺑﻲ ﻛﻨﻴﻢ ﺑﺪﺳﺖ آورﻳﻢ(‪.‬‬
‫{)‪for($i=0;$i < $k; $i++‬‬
‫;‪$m = $i+1‬‬
‫';)‪$str.= "<a onclick='newsearch(($i)*3‬‬
‫;";‪style='cursor:pointer'>$m</a>&nbsp‬‬
‫}‬
‫;'>‪$str.='</p‬‬
‫;‪echo $str‬‬
‫در اﻳﻦ ﻗﺴﻤﺖ رﺷﺘﻪ ﺣﺎوي ﺟﺪول ﻧﺘـﺎﻳﺞ ﺟـﺴﺘﺠﻮ از ﺳـﻤﺖ ﺳـﺮور ﺑـﻪ ﻛﻼﻳﻨـﺖ ﺑـﺎ دﺳـﺘﻮر ‪ echo $str‬ﺑـﺮاي‬
‫ﻧﻤﺎﻳﺶ‪ ،‬ارﺳﺎل ﻣﻲ ﺷﻮد‪.‬‬
‫;)‪mysql_close($link‬‬
‫}‬
‫>?‬
‫اﮔﺮ ﻛﺎرﺑﺮ ﻣﻬﻴﻤﺎن ﺑﺨﻮاﻫﺪ ﻋﻀﻮ ﺳﺎﻳﺖ ﺷﻮد ﺑﺎﻳﺪ ﺛﺒﺖ ﻧﺎم ﻛﻨﺪ‪ .‬ﻋﻤﻠﻴﺎت ﺛﺒﺖ ﻧﺎم را ﻣﻲ ﺗﻮان در ﻳﻚ ﺻـﻔﺤﻪ ﻣﺠـﺰا‬
‫ﻗﺮار داد‪ .‬ﻛﺎرﺑﺮان در ﺻﻔﺤﻪ ﺛﺒﺖ ﻧﺎم‪ ،‬ﻓﺮم ﺛﺒﺖ ﻧﺎم را ﺑﺎ اﻃﻼﻋﺎت ﺷﺨﺼﻲ ﺧﻮد ﭘﺮ ﻣﻲ ﻛﻨﻨـﺪ ﻛـﻪ اﻳـﻦ اﻃﻼﻋـﺎت در‬
‫ﺟﺪول ‪ customers‬ذﺧﻴﺮه ﻣﻲ ﺷﻮﻧﺪ‪ .‬ﻫﻨﮕﺎم ﺛﺒﺖ اﻃﻼﻋﺎت ﻛﺎرﺑﺮ ﺑﻪ ﺟﺪول‪ ،‬ﻳﻚ ﻛﺪ ﻣﻨﺤـﺼﺮ ﺑﻔـﺮد ﺑـﻪ ﻛـﺎرﺑﺮ‬
‫ﺗﻌﻠﻖ ﻣﻲ ﮔﻴﺮد‪ .‬اﻳﻦ ﺻﻔﺤﻪ ﻧﻴﺎزي ﻧﺪارد ﺑﺼﻮرت ‪ Ajax‬ﭘﻴﺎده ﺳﺎزي ﺷﻮد‪.‬‬
‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ ‪RegisterUser.php‬‬
‫در اﻳﻦ ﺻﻔﺤﻪ ﺑﻌﺪ از درﻳﺎﻓﺖ اﻃﻼﻋﺎت ﻛﺎرﺑﺮي ﺑﺎ ﻓﺸﺮدن دﻛﻤﻪ ﺛﺒﺖ ﺻﻔﺤﻪ ‪ register.php‬ﻓﺮاﺧـﻮاﻧﻲ ﻣـﻲ‬
‫ﺷﻮد‪ .‬ﺗﺎﺑﻊ ‪ check‬در اﻳﻦ ﺻﻔﺤﻪ ﺑﺮاي ﺑﺮرﺳﻲ ﻳﻜﺴﺎن ﺑﻮدن رﻣﺰ ﻋﺒﻮر وﺗﻜﺮار آن ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫{)(‪function check‬‬

‫‪if(document.getElementById('pas1').value!=document‬‬
‫)‪.getElementById('pas2').value‬‬
‫رﻣﺰ و ﺗﻜﺮار آن را ' = ‪document.getElementById('error').innerHTML‬‬
‫;'ﻳﻜﺴﺎن وارد ﻧﻤﺎﻳﺪ‬
‫‪else‬‬
‫;'' = ‪document.getElementById('error').innerHTML‬‬
‫}‬
 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 164

.‫ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‬POST ‫ ﺑﺎ ﻣﺘﺪ‬register.php ‫ﻫﻤﺎن ﻃﻮر ﻛﻪ ﻣﺸﺨﺺ اﺳﺖ ﻫﻨﮕﺎم ﺛﺒﺖ اﻃﻼﻋﺎت ﺻﻔﺤﻪ‬
<form action="register.php" method=POST >
Register.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
.‫ ( ﺑﻪ اﻳﻦ ﺻﻔﺤﻪ درﻳﺎﻓﺖ ﻣﻲ ﺷﻮﻧﺪ‬POST ‫ ﺷﺪه )ارﺳﺎل ﺷﺪه ﺗﻮﺳﻂ ﻣﺘﺪ‬post ‫در اﻳﻦ ﺻﻔﺤﻪ اﺑﺘﺪا ﻣﻘﺎدﻳﺮ‬
<?php
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$address = $_POST['address'];
$tel = $_POST['tel'];
$mail = $_POST['mail'];
$username = $_POST['username'];
$pass1 = $_POST['pass1'];

$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');

RegisterUser.php ‫ ﻧﻤﺎي از ﻃﺮاﺣﻲ ﺻﻔﺤﻪ‬8-3 ‫ﺷﻜﻞ‬

(‫ )ﻛﺪ ﻛﺎرﺑﺮي ﻏﻴﺮ ﺗﻜﺮاري‬.‫ ﺑﺮرﺳﻲ ﻣﻲ ﻛﻨﺪ ﻛﻪ ﻛﺪ ﻛﺎرﺑﺮي وارد ﺷﺪه در ﺟﺪول ﻣﻮﺟﻮد ﻧﺒﺎﺷﺪ‬sql ‫ﻳﻚ دﺳﺘﻮر‬
$q = "select * from customers where Username = '$username'";
$r = mysql_query($q);
$t = mysql_num_rows($r);
.‫اﮔﺮ ﻛﺪ ﻛﺎرﺑﺮي ﺗﻜﺮاري ﻧﺒﺎﺷﺪ اﻃﻼﻋﺎت ﻛﺎرﺑﺮ ﺟﺪﻳﺪ ﺑﻪ ﺟﺪول اﺿﺎﻓﻪ ﻣﻲ ﺷﻮد‬
if ($t==0){
$q = " insert into customers(customername ,customerfamily
,address ,tel,mail,account ,Username ,pass ,status
,type)values('$firstname','$lastname','$address','$tel'
,'$mail',50000,'$username','$pass1',0,0)";

$res = mysql_query($q);
‫ﻓﺼﻞ ‪165  7‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬

‫}‬
‫‪else‬‬
‫;‪$res=NULL‬‬
‫ﻧﻬﺎﻳﺘﺎ اﮔﺮ ﻛﺪ ﻛﺎرﺑﺮي ﺗﻜﺮاري ﺑﻮد ﭘﻴﻐﺎم ‪ unsuccessful‬را ﺑﺮﻣﻲ ﮔـﺮداﻧﻴﻢ و در ﺻـﻮرت ﺻـﺤﺖ اﻃﻼﻋـﺎت‬
‫ورودي ﺑﻌﺪ از ﺛﺒﺖ ﺷﺪن ﻛﺎرﺑﺮ‪ ،‬ﺑﻪ ﺻﻔﺤﻪ ‪ login.html‬ﻣﻲ روﻳﻢ‪.‬‬
‫) ‪if($res‬‬
‫;">‪echo "<script> window.location='login.html'</script‬‬
‫‪else‬‬
‫‪echo "<script> window.location='registerUser.php?msg‬‬
‫;">‪=unsuccessful'</script‬‬
‫;)‪mysql_close($link‬‬
‫>?‬
‫ﻋﻤﻠﻴﺎت ﻣﺸﺘﺮك ﺑﺮاي ﻛﺎرﺑﺮان‬
‫ﻳﻜﻲ از اﻳﻦ ﻋﻤﻠﻴﺎت ﻫﺎ‪ login ،‬اﺳﺖ ﻣﻲ ﺗﻮاﻧﻴﻢ ﺑﺮاي اﻳﻦ ﻗﺴﻤﺖ ﻳﻚ ﺻـﻔﺤﻪ ﻣﺠـﺰا ﻃﺮاﺣـﻲ ﻛﻨـﻴﻢ و ﻳـﺎ آن را‬
‫ﺑﻌﻨﻮان ﺑﺨﺸﻲ در ﺻﻔﺤﻪ اﺻﻠﻲ ﺳﺎﻳﺖ ﻗﺮار دﻫﻴﻢ‪ .‬در اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﻳﻚ ﺻﻔﺤﻪ ﻣﺠﺰا ﺑﺮاي ‪ login‬در ﻧﻈﺮﮔﺮﻓﺘﻪ ﺷـﺪه‬
‫اﺳﺖ‪ .‬ﺷﺎﻳﺪ در ﻧﻈﺮ ﮔﺮﻓﺘﻦ ﻳﻚ ﺻﻔﺤﻪ ﻣﺠﺰا ﻛﻤﻲ ﺑﻬﺘﺮ ﺑﺎﺷﺪ زﻳﺮا ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ داﺷﺘﻦ ﻳﻚ ﺻـﻔﺤﻪ ﺗﻘﺮﻳﺒـﺎ ﺧـﺎﻟﻲ ﻣـﻲ‬
‫ﺗﻮاﻧﻴﺪ ﺧﻄﺎﻫﺎي زﻣﺎن ورود ﺑﻪ ﺳﺎﻳﺖ را در ﻫﻤﺎن ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ دﻫﻴﺪ و ﻧﻴﺎز ﻧﺒﺎﺷﺪ ﺻﻔﺤﻪ ي دﻳﮕـﺮي را ﺑﺎرﮔـﺬاري‬
‫ﻛﻨﻴﺪ‪ .‬ﻳﻚ ﻣﺰﻳﺖ دﻳﮕﺮ ﻛﻪ ﺻﻔﺤﻪ ورود ﺟﺪاﮔﺎﻧﻪ ﻃﺮاﺣﻲ ﺷﻮد اﻳـﻦ اﺳـﺖ ﻛـﻪ در ﺻـﻔﺤﻪ اﺻـﻠﻲ و ﺻـﻔﺤﻪ ورود‪،‬‬
‫ﻓﻀﺎي ﺧﺎﻟﻲ ﺑﻴﺸﺘﺮي ﺑﺮاي ﻗﺮار ﮔﺮﻓﺘﻦ ﮔﺰﻳﻨﻪ ﻫﺎي دﻳﮕﺮ )ﻣﺎﻧﻨﺪ ﺗﺒﻠﻴﻐﺎت( ﻣﻮﺟﻮد ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫ﺑﻌﺪ از ﺛﺒﺖ اﻃﻼﻋﺎت‪ ،‬ﻛﺎرﺑﺮ ﻣﻲ ﺗﻮاﻧﺪ ﺑﻪ ﺻﻔﺤﻪ ﺷﺨﺼﻲ ﺧﻮد در ﺳﺎﻳﺖ وارد ﺷﻮد‪ .‬در ﺻﻔﺤﻪ ورود ﺑﻪ ﺳـﺎﻳﺖ ﻛـﺪ‬
‫ﻛﺎرﺑﺮي و رﻣﺰ ﻋﺒﻮر را وارد ﻣﻲ ﻛﻨﺪ‪ .‬ﭼﻚ ﺷﺪن ﺻﺤﺖ اﻃﻼﻋﺎت ﻛﺎرﺑﺮي ﺑـﺎ ﻓﺮاﺧـﻮاﻧﻲ ﺻـﻔﺤﻪ ‪login.php‬‬
‫اﻧﺠﺎم ﻣﻲ ﮔﻴﺮد‪ .‬ارﺳﺎل اﻃﻼﻋﺎت ﻛﺎرﺑﺮي ﺑﻪ ﺳﻤﺖ ﺳﺮور ﺑﺎ ‪ Ajax‬ﭘﻴﺎده ﺳﺎزي ﺷﺪه اﺳﺖ‪.‬‬
‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ ‪login.html‬‬
‫در اﻳﻦ ﺑﺮﻧﺎﻣﻪ ﻧﻴﺰ از ﻛﻼﺳﻲ ﻛﻪ ﺑﺮاي ‪ Ajax‬در ﻓﺼﻞ ﻗﺒﻞ ﻧﻮﺷﺘﻪ اﻳﻢ اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
‫"‪<script type="text/javascript‬‬
‫>‪src="Java_script/Asynchronous.js"></script‬‬
‫اﻳﻦ ﺻﻔﺤﻪ ﺑﺮاي درﻳﺎﻓﺖ اﻃﻼﻋﺎت ﻛﺪﻛﺎرﺑﺮي و رﻣﺰ ﻋﺒﻮر ﺑﺮاي ورود ﺑﻪ ﺳﺎﻳﺖ ﻣـﻲ ﺑﺎﺷـﺪ‪ .‬ﺑﻌـﺪ از ﻓـﺸﺮدن دﻛﻤـﻪ‬
‫' ورود' ﺗـﺎﺑﻊ ‪ login‬ﻓﺮاﺧــﻮاﻧﻲ ﻣــﻲ ﺷــﻮد و اﻃﻼﻋــﺎت را از ‪ textBox‬ﻫـﺎي ﻣــﺮ ﺑﻮﻃــﻪ ﮔﺮﻓﺘــﻪ و ﺑــﻪ ﺻــﻔﺤﻪ‬
‫‪ login.php‬ﺑﺼﻮرت ‪ GET‬ارﺳﺎل ﻣﻲ ﻛﻨﺪ‪.‬‬
‫در ﺗﺎﺑﻊ )(‪ login‬اﮔﺮ ﻣﺸﺨﺼﺎت ﻛﺎرﺑﺮ ﺻﺤﻴﺢ ﺑﺎﺷﺪ و ﻛﺎرﺑﺮ ﻋﻀﻮ ﺳﺎﻳﺖ ﺑﺎﺷـﺪ از ﺳـﺮور ﻣﻘـﺪار ‪ 200‬ﺑﻌﻨـﻮان‬
‫ﭘﺎﺳﺦ ارﺳﺎل ﻣﻲ ﺷﻮدﻛﻪ اﻳﻦ ﭘﺎﺳﺦ در ‪ responseText‬ﻗﺮار ﻣﻲ ﮔﻴﺮد‪ ،‬اﮔﺮ ﻛﺎرﺑﺮ‪ ،‬ﻣـﺪﻳﺮ ﺳـﺎﻳﺖ ﺑﺎﺷـﺪ ﻣﻘـﺪار‬
‫‪ 500‬ارﺳﺎل ﻣﻲ ﺷﻮد و در ﻏﻴﺮ اﻳﻨﺼﻮرت ﻳﻚ ﭘﻴﻐﺎم ﺧﻄﺎ در ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﻴﻢ‪.‬‬
‫{)(‪function login‬‬
‫;)(‪asynchronous = new Asynchronous‬‬
‫‪asynchronous.complete = function(status, statusText‬‬
‫)‪,responseText,responseXML‬‬
‫{‬
 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 166

if (responseText=='200')

location.href("personal.html");
else if(responseText=='500')

location.href("admin.html");
else
document.getElementById('div1').innerHTML=
'‫;'ﻟﻄﻔﺎ ﻛﺪ ﻛﺎرﺑﺮي ورﻣﺰ ﻋﺒﻮر را ﺻﺤﻴﺢ وارد ﻧﻤﺎﻳﻴﺪ‬
};
var txt = 'user='+document.getElementById('user').value
+'&pass='+document.getElementById('pass').value+'';
‫ اﺳﺖ ﺑﺎﻳﺪ داده ﻫﺎي ارﺳﺎﻟﻲ را ﺑﻪ رﺷﺘﻪ ﻓﺮاﺧﻮاﻧﻲ ﺻﻔﺤﻪ‬GET ‫ﺑﻪ اﻳﻦ ﻋﻠﺖ ﻛﻪ ﻣﺘﺪ ارﺳﺎل داده ﻫﺎ ﺑﻪ ﺳﺮور ﺑﺼﻮرت‬
.‫اﺿﺎﻓﻪ ﺷﻮد‬
asynchronous.call('login.php?'+txt,'','GET');
}

login.html ‫ ﻧﻤﺎي از ﻃﺮاﺣﻲ ﺻﻔﺤﻪ‬8-4 ‫ﺷﻜﻞ‬

Login.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
‫ ﺗﻐﻴﻴـﺮ وﺿـﻌﻴﺖ ﻛـﺎرﺑﺮ از ﺣﺎﻟـﺖ‬،‫در اﻳﻦ ﺻﻔﺤﻪ ﺑﻌﺪ از ﺟﺴﺘﺠﻮي ﻛﺎرﺑﺮ و اﻃﻤﻴﻨـﺎن از ﺻـﺤﺖ اﻃﻼﻋـﺎت ﻛـﺎرﺑﺮي‬
‫ ﺑـﻪ ﻛﻼﻳﻨـﺖ‬echo ‫ ﻋـﻀﻮ ﺳـﺎﻳﺖ( ﺑـﺎ دﺳـﺘﻮر‬-‫ ﺻﻮرت ﻣﻲ ﮔﻴﺮد و ﻧﻮع ﻛـﺎرﺑﺮ )ﻣـﺪﻳﺮ‬online ‫ ﺑﻪ‬offline
.‫ارﺳﺎل ﻣﻲ ﺷﻮد‬
<?php
$user = $_GET['user'];
$pass = $_GET['pass'];
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
‫ﻓﺼﻞ ‪167  7‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬

‫ﺑﺎ اﻳﻦ دﺳﺘﻮر ‪ sql‬ﻛﺎرﺑﺮاﻧﻲ را ﺟﺴﺘﺠﻮ ﻣﻲ ﻛﻨـﻴﻢ ﻛـﻪ ‪ offline‬ﻫـﺴﺘﻨﺪ ﻳﻌﻨـﻲ‪ .status=0‬در ﺻـﻮرﺗﻲ ﻛـﻪ‬
‫‪ status=1‬ﺑﺎﺷﺪ ﻛﺎرﺑﺮ ﻗﺒﻼ وارد ﺳﺎﻳﺖ ﺷﺪه و ﺧﺎرج ﻧﺸﺪه و دﺳﺘﺮﺳﻲ ﺑﺎ ﻧﺎم ﻛﺎرﺑﺮﻳﻲ ﻛﻪ ﻫﻢ اﻛﻨـﻮن در ﺳـﺎﻳﺖ‬
‫اﺳﺖ ﻏﻴﺮﻣﺠﺎز اﺳﺖ‪.‬‬
‫‪$q = "select * from customers where '$user'=Username and‬‬
‫;" ‪'$pass'=pass and status=0‬‬
‫;)‪$res = mysql_query($q,$link‬‬
‫;)‪$row = mysql_fetch_array($res‬‬
‫‪//‬‬
‫{)‪if(mysql_num_rows($res) == 1‬‬

‫;)(‪session_start‬‬
‫ﺷﻤﺎره ﻛﺎرﺑﺮ را در ‪ session‬ﺑﺮاي ﻣﺮاﺟﻌﺎت ﺑﻌﺪي ذﺧﻴﺮه ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
‫;]'‪$_SESSION['id'] = $row['customerid‬‬

‫زﻣﺎﻧﻲ ﻛﻪ ﻛﺎرﺑﺮ ﺑﻪ ﺳﺎﻳﺖ وارد ﻣﻲ ﺷﻮد ﻓﻴﻠﺪ ‪ status‬آن ﻳﻚ ﻣﻲ ﺷﻮد‪.‬‬

‫= ‪$q = " update customers set status=1 where customerid‬‬
‫;" ]‪$row[0‬‬
‫;)‪$r = mysql_query($q,$link‬‬

‫{)'‪if($row['type']=='1‬‬
‫;'‪echo '500‬‬
‫}‬
‫ﻫﻨﮕﺎم ورود ﺑﻪ ﺳﺎﻳﺖ ﺗﻤﺎم رﻛﻮردﻫﺎي ﻫﻢ ﺷﻤﺎره ﺑﺎ اﻳﻦ ﻛﺎرﺑﺮ در ﺻﻮرت وﺟﻮد از ﺳﺒﺪ ﺧﺮﻳـﺪ ﺣـﺬف ﻣـﻲ ﺷـﻮد‪.‬‬
‫ﺟﺪول ﺳﺒﺪ ﺧﺮﻳﺪ ﻳﻚ ﺟﺪول ﻣﻮﻗﺘﻲ ﺑﺮاي ﻧﮕﻬﺪاري اﻃﻼﻋﺎت ﺧﺮﻳﺪ اﺳﺖ‪ .‬اﻣﺎ ﻋﻠـﺖ ﺣـﺬف رﻛﻮردﻫـﺎ در ﻫﻨﮕـﺎم‬
‫ورود‪ ،‬ﺑﺮاي آن اﺳﺖ ﻛﻪ اﻣﻜﺎن دارد ﻛﺎرﺑﺮي ﺑﺪون ﻗﻄﻌﻲ ﻛﺮدن ﺧﺮﻳﺪ از ﺳﺎﻳﺖ ﺧﺎرج ﺷﻮد در ﻧﺘﻴﺠـﻪ در ﻣﺮاﺟﻌـﻪ‬
‫ﺑﻌﺪي ﺑﻪ ﺳﺎﻳﺖ ﻧﻴﺎزي ﺑﻪ اﻗﻼم ﺧﺮﻳﺪ ﻗﺒﻠﻲ ﺧﻮد ﻧﺪارد‪.‬‬
‫{‪else‬‬
‫;" ]‪$cmd = "delete from sabad where customerid = $row[0‬‬
‫;)‪$r = mysql_query($cmd,$link‬‬
‫;'‪echo '200‬‬
‫}‬
‫}‬
‫;'‪else echo '50‬‬
‫;)‪mysql_close($link‬‬
‫>?‬
‫ﻋﻤﻠﻴﺎت ﻛﺎرﺑﺮ ﻋﻀﻮ ﺳﺎﻳﺖ‬
‫دﺳﺘﻪ دﻳﮕﺮ ﻋﻤﻠﻴﺎت ﻣﺮ ﺑﻮط ﺑﻪ ﻛﺎرﺑﺮ ﻋﻀﻮ ﺳﺎﻳﺖ ﻣـﻲ ﺑﺎﺷـﺪ‪ .‬اﻳـﻦ ﻛـﺎرﺑﺮ ﻣـﻲ ﺧﻮاﻫـﺪ ﺑﻌـﺪ از ﺟـﺴﺘﺠﻮي ﻛﺘـﺎب و‬
‫ﻣﺸﺎﻫﺪه اﻃﻼﻋﺎت ﻛﺘﺎب آن را ﺧﺮﻳﺪاري ﻛﻨﺪ‪ ،‬ﺑﺘﻮاﻧﺪ ﻛﺘﺎﺑﻬﺎي ﺧﺮﻳﺪاري ﺷﺪه را در ﺳﺒﺪ ﺧﺮﻳـﺪ ﻣـﺸﺎﻫﺪه ﻧﻤﺎﻳـﺪ‪ ،‬از‬
‫ﻣﻴﺰان ﻣﻮﺟﻮدي ﺧﻮد آﮔﺎه ﺷﻮد و ﻟﻴﺴﺖ ﺧﺮﻳﺪ ﻫﺎي ﻗﺒﻠﻲ ﺧﻮد را ﻣﺸﺎﻫﺪه ﻛﻨﺪ‪ .‬ﻣﺎ اﻳﻦ ﻋﻤﻠﻴـﺎت را در ﻳـﻚ ﺻـﻔﺤﻪ‬
‫ﻗﺮار دادﻳﻢ‪ .‬ﻃﺮاﺣﻲ اﻳﻦ ﺻﻔﺤﻪ را ﻣﻲ ﺗﻮاﻧﻴﺪ در ﺷﻜﻞ ‪ 8-5‬ﻣﺸﺎﻫﺪه ﻧﻤﺎﻳﺪ‪.‬‬
 ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬ ‫‪  168‬ﻓﺼﻞ ‪7‬‬

‫اﻳﻦ ﺻﻔﺤﻪ‪ ،‬ﺻﻔﺤﻪ ي ﺷﺨﺼﻲ ﻛﺎرﺑﺮ اﺳﺖ ﻛﻪ ﺑﻌﺪ از ورود ﺑﻪ ﺳﺎﻳﺖ ﻣﺸﺎﻫﺪه ﻣـﻲ ﺷـﻮد در ﺳـﻤﺖ راﺳـﺖ ﺻـﻔﺤﻪ‬
‫اﻃﻼﻋﺎت ﺷﺨﺼﻲ ﻛﺎرﺑﺮ ﺑﻬﻤﺮاه ﻣﻴﺰان ﻣﻮﺟﻮدﻳﺶ ﻧﺸﺎن داده ﻣﻲ ﺷـﻮد و اﻳـﻦ ﺻـﻔﺤﻪ اﻣﻜﺎﻧـﺎﺗﻲ از ﻗﺒﻴـﻞ ﺟـﺴﺘﺠﻮي‬
‫ﻛﺘﺎب‪ ،‬ﺧﺮﻳﺪ ﻛﺘﺎب‪ ،‬ﻣﺸﺎﻫﺪه ﻟﻴﺴﺖ ﺧﺮﻳﺪ ﻗﺒﻠﻲ‪ ،‬ﻣﺸﺎﻫﺪه ﺳﺒﺪ ﺧﺮﻳﺪ‪ ،‬ﺣﺬف از ﺳـﺒﺪ ﺧﺮﻳـﺪ‪ ،‬ارﺳـﺎل ﭘﻴـﺎم ﺑـﻪ ﻣـﺪﻳﺮ‬
‫ﺳﺎﻳﺖ را ﻓﺮاﻫﻢ ﻣﻲ ﻛﻨﺪ‪ .‬ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﺻﺤﺖ اﻃﻼﻋﺎت در ﺻـﻔﺤﻪ ‪ login‬ﭼـﻚ ﺷـﻮد اﻳـﻦ ﺻـﻔﺤﻪ ‪ load‬ﻣـﻲ‬
‫ﺷﻮد‪.‬‬
‫ﺑﺮرﺳﻲ ﻗﺴﻤﺖ اول ﻛﺪﻫﺎي ﺻﻔﺤﻪ ‪Personal.HTML‬‬
‫ﺗﺎ ﺑﻊ ‪ show‬ﺑﺮاي ﻧﻤﺎﻳﺶ اﻃﻼﻋﺎت ﻛﺎرﺑﺮ در ﻛﺎدري در ﺳﻤﺖ راﺳﺖ ﺳﺎﻳﺖ ﻫﻨﮕﺎم ورود ﺑﻪ ﺳﺎﻳﺖ ﻓﺮاﺧـﻮاﻧﻲ ﻣـﻲ‬
‫ﺷﻮد‪ .‬ﺑﺮاي اﻳﻨﻜﻪ ﺑﺘﻮاﻧﻴﻢ اﻳﻦ ﺗﺎﺑﻊ در زﻣﺎن ﺑﺎر ﺷﺪن ﺻﻔﺤﻪ اﺟﺮا ﺷﻮد ﻓﺮاﺧﻮاﻧﻲ آن را در ﺧﺎﺻﻴﺖ ‪ onload‬ﺗـﮓ‬
‫>‪ <body‬ﻗﺮار ﻣﻲ دﻫﻴﻢ‪.‬‬
‫"‪<body bgcolor="#fbf9f3‬‬ ‫>";)(‪onLoad="show‬‬
‫ﺗﺎﺑﻊ ‪ show‬ﺻﻔﺤﻪ ‪ showInfo.php‬را ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨـﺪ و اﻃﻼﻋـﺎت درﻳـﺎﻓﺘﻲ از اﻳـﻦ ﻓﺮاﺧـﻮاﻧﻲ را ﻛـﻪ در‬
‫‪ responseText‬ﻗﺮار دارد در ﻳﻚ ‪ div‬ﺑﺎ ’‪ id=’div1‬ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‪.‬‬

‫ﺷﻜﻞ ‪ 8-5‬ﻧﻤﺎي از ﻃﺮاﺣﻲ ﺻﻔﺤﻪ ‪personal.html‬‬

‫{)(‪function show‬‬
‫;)(‪asynchronous = new Asynchronous‬‬
‫‪asynchronous.complete = function(status, statusText,‬‬
‫{)‪responseText, responseXML‬‬

‫;‪document.getElementById('div1').innerHTML=responseText‬‬

‫;}‬
‫;)'‪asynchronous.call('showInfo.php','','GET‬‬
‫}‬
‫ﻓﺼﻞ ‪169  7‬‬ ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬

‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‪ShowInfo.php‬‬

‫ﺑﻮﺳﻴﻠﻪ ﻛﺪﻫﺎي اﻳﻦ ﺻﻔﺤﻪ ﻫﻨﮕﺎم ورود ﺑﻪ ﺳﺎﻳﺖ اﻃﻼﻋﺎت ﺷﺨﺼﻲ ﻓﺮد از ﺟـﺪول ﺧﻮاﻧـﺪه ﺷـﺪه و ﺑـﺮاي ﻛﻼﻳﻨـﺖ‬
‫ارﺳﺎل ﻣﻲ ﺷﻮد‪.‬‬
‫‪<?php‬‬
‫;)(‪session_start‬‬
‫))]'‪if (isset($_SESSION['id‬‬
‫{‬
‫;]'‪$u=$_SESSION['id‬‬
‫;)''‪$link = mysql_connect('localhost','root',‬‬
‫;)'‪mysql_select_db('BookStore‬‬
‫;" ‪$q ="select * from customers where $u=customerid‬‬
‫;)‪$res = mysql_query($q‬‬
‫;)‪$row = mysql_fetch_array($res‬‬
‫)‪if($row‬‬
‫{‬
‫اﺑﺘﺪا رﺷﺘﻪ اي ﺑﺮاي ارﺳﺎل اﻃﻼﻋﺎت ﻓﺮدي ﻛﺎرﺑﺮ در ﻧﻈﺮ ﻣﻲ ﮔﻴﺮﻳﻢ‪ ،‬اﻳﻦ رﺷﺘﻪ را ﺑﺎ ﻳﻚ ﺟﺪول ‪html‬ي ﭘﺮ ﻛـﺮده‬
‫و ارﺳﺎل ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
‫>'‪$t = "<table><tr><td style='color:#660000‬‬
‫'‪$row[1] </td><td style='color:#660000‬‬
‫;">‪ </td></tr‬ﻧﺎم >‪align=right‬‬
‫>‪$t.="<tr><td style='color:#660000'>$row[2]</td‬‬
‫>‪<td style='color:#660000' align=right‬‬
‫‪ </td></tr><tr><td‬ﻧﺎم ﺧﺎﻧﻮادﮔﻲ‬
‫‪style='color:#660000'>$row[7]</td><td‬‬
‫>‪style='color:#660000' align=right‬‬
‫‪ </td></tr><tr><td‬ﻛﺪﻛﺎرﺑﺮي‬
‫>‪style='color:#660000'>$row[6]</td‬‬
‫ﻣﻮﺟﻮدي>‪<td style='color:#660000' align=right‬‬
‫;">‪</td></tr></table‬‬
‫;‪echo $t‬‬
‫ارﺳﺎل اﻃﻼﻋﺎت ﻓﺮدي ﻛﺎرﺑﺮ ﺑﺎ دﺳﺘﻮر ‪.echo‬‬
‫}‬
‫;)‪mysql_close($link‬‬
‫}‬
‫‪else‬‬
‫;'‪echo '-50‬‬
‫>?‬
‫ﺑﺮرﺳﻲ ﻗﺴﻤﺖ دوم ﻛﺪﻫﺎي ﺻﻔﺤﻪ ‪Personal.HTML‬‬
‫زﻣﺎﻧﻴﻜــﻪ ﻛــﺎرﺑﺮ دﻛﻤــﻪ ﺟــﺴﺘﺠﻮ را ﻛﻠﻴــﻚ ﻛﻨــﺪ ﺗــﺎﺑﻊ ‪ searchBook‬اﺟــﺮا ﻣــﻲ ﺷــﻮد‪ .‬اﻳــﻦ ﺗــﺎﺑﻊ ﺻــﻔﺤﻪ‬
‫‪ searchUserBook.php‬را ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﺪ و اﻃﻼﻋﺎت ﻣﻮرد ﻧﻴﺎز ﺑﺮاي ﺟﺴﺘﺠﻮ را از ﻃﺮﻳﻖ ﻣﺘﺪ ‪ GET‬ﺑﻪ‬
‫آن ﺻﻔﺤﻪ ارﺳﺎل ﻣﻲ ﻛﻨﺪ‪ .‬اﻳﻦ اﻃﻼﻋﺎت ﺑﺎ ﻳﻚ رﺷﺘﻪ )در اﻳﻦ ﻛﺪ رﺷﺘﻪ ‪ ( msg‬ﺑﻪ ‪ URL‬ﺻـﻔﺤﻪ ﻓﺮاﺧـﻮاﻧﻲ ﺷـﻮﻧﺪه‬
 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 170

‫ ﺷﻤﺎره رﻛـﻮردي اﺳـﺖ ﻛـﻪ ﺑﻌﻨـﻮان آدرس ﺷـﺮوع‬searchBook ‫ از ﺗﺎﺑﻊ‬Counter ‫ ﭘﺎراﻣﺘﺮ‬.‫اﻟﺤﺎق ﻣﻲ ﺷﻮد‬
.‫ ﻧﺘﺎﻳﺞ ﺟﺴﺘﺠﻮ را ﺑـﺮاي ﻣـﺸﺎﻫﺪه ﺑﻬﺘـﺮ ﺻـﻔﺤﻪ ﺑﻨـﺪي ﻣـﻲ ﻛﻨـﻴﻢ‬.‫ ﺑﺮاي ﺑﺎزﻳﺎﺑﻲ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‬،‫رﻛﻮردﻫﺎي ﺟﻮاب‬
‫ ﻧﻤـﺎﻳﺶ داده ﻣـﻲ‬id='div2' ‫ ﺑـﺎ‬div ‫رﻛﻮردﻫﺎي ﺟﻮاب ﺑﺮاي ﻧﻤﺎﻳﺶ در ﻗـﺴﻤﺖ ﻣﺮﻛـﺰي ﺻـﻔﺤﻪ در ﻳـﻚ‬
.‫ﺷﻮﻧﺪ‬
function searchBook(counter){
asynchronous = new Asynchronous();
asynchronous.complete = function(status, statusText,
responseText, responseXML){

document.getElementById('div2').innerHTML=responseText;

};

var t=document.form1.select1.options[document.form1.select1
.selectedIndex].value;
var searchTxt = document.getElementById('txt1').value;
var msg = 'number=' +t+'&txt1=' +searchTxt+'&count=
'+counter+'';

asynchronous.call( 'searchBookUser.php?'+msg,'','GET');
}

SearchBookUser.php‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬

.‫اﻳﻦ ﺻﻔﺤﻪ ﻋﻤﻠﻴﺎت ﺟﺴﺘﺠﻮي ﻛﺘﺎب در ﺻﻔﺤﻪ ﺷﺨﺼﻲ ﻛﺎرﺑﺮ را اﻧﺠﺎم ﻣﻲ دﻫﺪ‬
<?php
if (isset($_GET['txt1']))
{
$index = $_GET['number'];
$name = $_GET['txt1'];
$count =$_GET['count'];
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
$q = "select * from book where ";
.‫ ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ‬sql ‫اﻃﻼﻋﺎت ﻓﻴﻠﺪﻫﺎي ﺟﺴﺘﺠﻮ درﻳﺎﻓﺖ ﻣﻲ ﺷﻮد و در دﺳﺘﻮر‬
if ($index == '0')
$q.= "'$name' = name ";
else if ($index == '1')
$q.= "'$name' = subject ";

$res = mysql_query($q,$link);
$num = mysql_num_rows($res);
$k = $num/3;
.‫ رﻛﻮرد ﺑﺮاي ﻧﻤﺎﻳﺶ اﻧﺘﺨﺎب ﻣﻲ ﺷﻮﻧﺪ‬3 ‫در ﻫﺮ ﺻﻔﺤﻪ‬
$q.=" limit $count,3";
$res = mysql_query($q,$link);
171  7 ‫ﻓﺼﻞ‬ BookStore ‫ﺑﺮﻧﺎﻣﻪ‬

$row = mysql_fetch_array($res);

$str = '<table width=100% ><tr><th align=left

style="color:#660000">‫<ﻧﺎم ﻛﺘﺎب‬/th><th
align=left style="color:#660000">
‫<ﻧﺎم ﻧﻮﻳﺴﻨﺪه‬/th><th align=left
style="color:#660000">‫<ﻗﻴﻤﺖ ﻛﺘﺎب‬/th></tr>';

while( $row != NULL)

{
$p='number'.$row[0];
$str.="<tr><td> $row[2]</td><td>$row[4]</td>
<td>$row[7]</td><td><a href='$row[10]'>
download</a></td><td><img src='$row[8]'>
</td></tr><tr><td><img src='picture/buy.gif'
onclick='buy($row[0]);'
style='cursor:pointer' ></td><td>
<input style='width:20px' type=text id='$p'
value=1></td><td>‫<ﺗﻌﺪاد ﺧﺮﻳﺪ‬/td></tr>";
$row = mysql_fetch_array($res);
}
$str.='</table><br><p align=center>';
for($i=0;$i < $k; $i++){
$m = $i+1;
$str.= "<a onclick='searchBook(($i)*3);'
style='cursor:pointer'>$m</a>&nbsp;";
}
$str.='</p>';
echo $str;
mysql_close($link);
}
?>
Personal.HTML ‫ﺑﺮرﺳﻲ ﻗﺴﻤﺖ ﺳﻮم ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
‫ ﺑـﺼﻮرت ﻳـﻚ ﺟـﺪول‬sabad.php ‫ ﻣﺤﺘﻮاي ﺳﺒﺪ ﺧﺮﻳﺪ را ﺑﺎ اﺳﺘﻔﺎده از ﻓﺮاﺧﻮاﻧﻲ ﺻﻔﺤﻪ‬showSabad ‫ﺗﺎﺑﻊ‬
‫ ﺷـﻤﺎره ﺷـﺮوع رﻛـﻮرد ﺑـﺮاي‬e ‫ ﭘـﺎراﻣﺘﺮ‬.‫ در ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ ﻣـﻲ دﻫـﺪ‬،id='row2' ‫در ﻳﻚ ﺧﺎﻧﻪ از ﺟﺪوﻟﻲ ﺑﺎ‬
‫ اﺳﺖ‬e=0 ‫ در ﺻﻔﺤﻪ اول‬.‫ ﺑﺮاي ﻧﻤﺎﻳﺶ در ﺻﻔﺤﺎت ﻣﺘﻮاﻟﻲ ﺳﺒﺪ ﺧﺮﻳﺪ اﺳﺖ‬،‫ﺑﺎزﻳﺎﺑﻲ رﻛﻮردﻫﺎ از ﻣﺠﻤﻮﻋﻪ ﺟﻮاب‬
.‫ ارﺳﺎل ﻣﻲ ﺷﻮد‬sabad.php ‫ اﻳﻦ ﭘﺎراﻣﺘﺮ ﺑﻪ ﺻﻔﺤﻪ‬.(‫)ﺑﺎزﻳﺎﺑﻲ رﻛﻮردﻫﺎ از اول ﻣﺠﻤﻮﻋﻪ ﺟﻮاب‬
function showSabad(e){

asynchronous = new Asynchronous();

asynchronous.complete = function(status, statusText,
responseText, responseXML){

document.getElementById('row2').innerHTML=responseText;
};
 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 172

var msg = 'num=' +e+'';

asynchronous.call( 'sabad.php?'+msg,'','GET');
}
Sabad.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
‫ اﻃﻼﻋـﺎت ﻛـﺎرﺑﺮ از‬.‫اﻳﻦ ﺻـﻔﺤﻪ ﺑـﺮاي ﺑﺎزﻳـﺎﺑﻲ اﻃﻼﻋـﺎت ﺧﺮﻳـﺪ از ﺳـﺒﺪ ﺧﺮﻳـﺪ ﺑـﺮاي ﻳـﻚ ﻛـﺎرﺑﺮ ﺧـﺎص اﺳـﺖ‬
.‫ درﻳﺎﻓﺖ ﻣﻲ ﺷﻮد‬session
<?php
$count = $_GET['num'];
session_start();
$u = $_SESSION['id'];
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
//
.‫ﺗﻤﺎﻣﻲ رﻛﻮردﻫﺎي ﻛﻪ ﺑﺮاي اﻳﻦ ﻛﺎرﺑﺮ ﻣﻲ ﺑﺎﺷﻨﺪ از ﺟﺪول ﺳﺒﺪ ﺧﺮﻳﺪ ﺑﺎزﻳﺎﺑﻲ ﻣﻲ ﺷﻮﻧﺪ‬
$q = "select * from sabad where customerid = $u";
$rs = mysql_query($q,$link);
$num = mysql_num_rows($rs);
$k = $num/5;
.‫ﺗﺎ ﺻﻔﺤﻪ ﺑﻨﺪي ﺷﺪه و ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮﻧﺪ‬5 ‫ ﺗﺎ‬5 ‫اﻳﻦ رﻛﻮردﻫﺎ ﺑﺼﻮرت‬
$q = "select * from sabad where customerid = $u
limit $count,5";
$res = mysql_query($q,$link);
$row = mysql_fetch_array($res);
//
$str = "<table width=100%><tr><th ></th>
<th style='color:#660000 'align=left>‫<ﻗﻴﻤﺖ‬/th>
<th style='color:#660000 'align=left>‫<ﻧﺎم ﻛﺘﺎب‬/th>
</tr>";
while($row){
.‫ ﻣﺎﻧﻨﺪ ﻗﻴﻤﺖ ﻛﺘﺎب ﻛﻪ ﻻزم اﺳﺖ از ﺟﺪول ﻛﺘﺎب ﺧﻮاﻧﺪه ﻣﻲ ﺷﻮد‬،‫اﻃﻼﻋﺎت ﻛﺘﺎب‬
$q = "select * from book where code= $row[0]";
$rt = mysql_query($q,$link);
$r = mysql_fetch_array($rt);
//
$str.="<tr><td onclick='del($row[0]);'
style='cursor:pointer;color:#0000ff'>‫<ﺣﺬف‬/td>
<td>$row[3]</td><td>$r[2]</td></tr>";
$row = mysql_fetch_array($res);
}
$str .= '</table><br><p align=center>';
for($i=0;$i < $k; $i++){
$m = $i+1;
$str.= "<a onclick='showSabad(($i)*5);'
style='cursor:pointer'>$m</a>&nbsp;";
173  7 ‫ﻓﺼﻞ‬ BookStore ‫ﺑﺮﻧﺎﻣﻪ‬

}
$str.='</p>';
echo $str;
mysql_close($link);
?>
Personal.HTML ‫ﺑﺮرﺳﻲ ﻗﺴﻤﺖ ﭼﻬﺎرم ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
‫ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد و اﻃﻼﻋـﺎت ﻛـﺪ ﻛﺘـﺎب را ﺑـﺮاي اﺿـﺎﻓﻪ‬buy ‫ﻫﻨﮕﺎﻣﻲ ﻛﻪ دﻛﻤﻪ ﺧﺮﻳﺪ ﻛﺘﺎب ﻛﻠﻴﻚ ﺷﻮد ﺗﺎﺑﻊ‬
‫ ﻛﺪ ﻛﺘﺎﺑﻲ اﺳﺖ ﻛﻪ ﻗـﺼﺪ‬،‫ در اﻳﻦ ﺗﺎﺑﻊ‬e ‫ ﭘﺎراﻣﺘﺮ‬.‫ ارﺳﺎل ﻣﻲ ﻛﻨﺪ‬BuyBook.php ‫ﺷﺪن ﺑﻪ ﺳﺒﺪ ﺧﺮﻳﺪ ﺑﻪ ﺻﻔﺤﻪ‬
‫ ﺑـﺮاي‬.‫ ارﺳـﺎل ﻣـﻲ ﺷـﻮد‬BuyBook.php ‫ ﺑﻪ ﺻﻔﺤﻪ‬num ‫ اﻳﻦ ﭘﺎراﻣﺘﺮ و ﺗﻌﺪاد ﺧﺮﻳﺪ ﺑﻮﺳﻴﻠﻪ‬.‫ﺧﺮﻳﺪ آن را دارﻳﻢ‬
.‫ ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‬showSabad(0)‫ﻧﻤﺎﻳﺶ اﻃﻼﻋﺎت ﺧﺮﻳﺪ در ﺳﺒﺪ ﺧﺮﻳﺪ ﺑﻌﺪ از ﺧﺮﻳﺪ ﻛﺘﺎب ﺗﺎﺑﻊ‬

function buy(e){

asynchronous = new Asynchronous();

asynchronous.complete = function(status, statusText,
responseText, responseXML){
showSabad(0);
};
var id='number'+e;
var num = document.getElementById(id).value;
var msg = 'code=' +e+'&num=' + num+'';
asynchronous.call( 'buyBook.php?'+msg,'','GET');
}
BuyBook.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
<?php
.‫ را درﻳﺎﻓﺖ ﻣﻲ ﺷﻮد‬personal.html ‫اﻃﻼﻋﺎت ﻛﺪ ﻛﺘﺎب و ﺗﻌﺪاد ﺧﺮﻳﺪ از ﺻﻔﺤﻪ‬
$code = $_GET['code'];
$num = $_GET['num'];
//
session_start();
.‫ ﺧﻮاﻧﺪه ﻣﻲ ﺷﻮد‬SESSION ‫ﺷﻤﺎره ﻣﺸﺘﺮي از داﺧﻞ ﻣﺘﻐﻴﺮ‬
$u = $_SESSION['id'];
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
//
.‫ﺗﺎرﻳﺦ ﺧﺮﻳﺪ از ﺳﻴﺴﺘﻢ ﺧﻮاﻧﺪه ﻣﻲ ﺷﻮد‬
$date = date("Y-m-d H:i:s");
.‫ ﻣﺎﻧﻨﺪ ﻗﻴﻤﺖ ﻛﻪ ﻻزم اﺳﺖ از ﺟﺪول ﻛﺘﺎب ﺧﻮاﻧﺪه ﻣﻲ ﺷﻮد‬،‫اﻃﻼﻋﺎت ﻛﺘﺎب‬
$q = "select * from book where code= $code";
//
$res = mysql_query($q,$link);
$row = mysql_fetch_array($res);
.‫ﻗﻴﻤﺖ ﻛﺘﺎب را در ﺗﻌﺪاد ﺧﺮﻳﺪ ﺿﺮب ﻣﻲ ﻛﻨﻴﻢ ﺗﺎ ﺟﻤﻊ ﻛﻞ ﺣﺎﺻﻞ ﺷﻮد‬
 ‫ﺑﺮﻧﺎﻣﻪ ‪BookStore‬‬ ‫‪  174‬ﻓﺼﻞ ‪7‬‬

‫;‪$totalp = $row[7]*$num‬‬
‫‪//‬‬
‫ﺑﻪ ﺳﺒﺪ ﺧﺮﻳﺪ رﻛﻮردي را ﺣﺎوي ﻛﺪ ﻛﺘﺎب‪ ،‬ﻗﻴﻤﺖ ﻛﺘﺎب‪ ،‬ﺗﻌﺪاد ﺧﺮﻳﺪ‪ ،‬ﺟﻤﻊ ﻛﻞ‪ ،‬و ﺗﺎرﻳﺦ وﺳﺎﻋﺖ ﺧﺮﻳـﺪ اﺿـﺎﻓﻪ‬
‫ﻣﻲ ﻛﻨﻴﻢ‪.‬‬
‫‪$q = "insert into sabad values‬‬
‫;")'‪($row[0],$row[7],$num,$totalp,$u,'$date‬‬
‫;)‪$r = mysql_query($q,$link‬‬
‫;'‪echo '200‬‬
‫;)‪mysql_close($link‬‬
‫>?‬

‫ﺷﻜﻞ ‪ 8-6‬ﻧﻤﺎي از ﺳﺒﺪ ﺧﺮﻳﺪ ﺑﻌﺪ از ﺧﺮﻳﺪ‬

‫ﺑﺮرﺳﻲ ﻗﺴﻤﺖ ﭘﻨﭽﻢ ﻛﺪﻫﺎي ﺻﻔﺤﻪ ‪Personal.HTML‬‬
‫ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﻳﻚ ﻗﻠﻢ ﺧﺮﻳﺪ را از ﺳﺒﺪ ﺧﺮﻳﺪ ﺣﺬف ﻛﻨﻴﻢ ﺗﺎﺑﻊ‪ del‬ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‪ .‬اﻳﻦ ﺗﺎﺑﻊ ﻛﺪ ﻛﺘـﺎب را ﺑـﺮاي‬
‫ﺣﺬف ﺑﻪ ﺻﻔﺤﻪ ي ‪ DelSabad.php‬ارﺳﺎل ﻣﻲ ﻛﻨﺪ‪ .‬ﭘﺎراﻣﺘﺮ ‪ e‬ﻛﺪ ﻛﺘﺎﺑﻲ اﺳﺖ ﻛﻪ ﻗﺼﺪ ﺣﺬف آن را از ﺳﺒﺪ‬
‫دارﻳﻢ‪ .‬ﺑﺮاي ﻧﻤﺎﻳﺶ دوﺑﺎره ﺳﺒﺪ ﺑﻌﺪ ﺣﺬف ﺗﺎﺑﻊ )‪ showSabad(0‬ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﺷﻮد‪.‬‬
‫{)‪function del(e‬‬

‫;)(‪asynchronous = new Asynchronous‬‬

‫‪asynchronous.complete = function(status, statusText,‬‬
‫{)‪responseText, responseXML‬‬

‫;)‪showSabad(0‬‬
‫;}‬
‫;''‪var msg = 'code=' +e+‬‬
‫;)'‪asynchronous.call( 'DelSabad.php?'+msg,'','GET‬‬
‫}‬
175  7 ‫ﻓﺼﻞ‬ BookStore ‫ﺑﺮﻧﺎﻣﻪ‬

DelSabad.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬

<?php
session_start();
‫در اﻳﻦ ﻗﺴﻤﺖ ﻛﺪ ﻛﺘﺎﺑﻲ ﻛﻪ ﻣﻲ ﺧﻮاﻫﺪ از ﺳﺒﺪ ﺧﺮﻳﺪ ﺣﺬف ﺷﻮد درﻳﺎﻓﺖ ﻣﻲ ﺷﻮد و ﺷﻤﺎره ﻛﺎرﺑﺮ را ﻧﻴﺰ از داﺧﻞ‬
.‫ ﺧﻮاﻧﺪه ﻣﻲ ﺷﻮد‬SESSION ‫ﻣﺘﻐﻴﺮ‬
$code = $_GET['code'];
$u = $_SESSION['id'];
//
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
.‫ رﻛﻮرد ﻣﺬﻛﻮر ﺣﺬف ﻣﻲ ﺷﻮد‬،‫از ﺟﺪول ﺳﺒﺪ ﺧﺮﻳﺪ‬
$q = "delete from sabad where customerid = $u and
bookcode = $code ";
$rs = mysql_query($q,$link);
//
echo '200';
mysql_close($link);
?>
Personal.HTML ‫ﺑﺮرﺳﻲ ﻗﺴﻤﺖ ﺷﺸﻢ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
‫ﭼﻮن ﺟﺪول ﺳﺒﺪ ﺧﺮﻳﺪ ﻳﻚ ﺟﺪول ﻣﻮﻗﺘﻲ اﺳﺖ ﻫﻨﮕﺎم ﻗﻄﻌﻲ ﻛﺮدن ﺧﺮﻳﺪ ﺑﺎﻳﺪ اﻃﻼﻋـﺎت ﺳـﺒﺪ ﺧﺮﻳـﺪ ﺑـﻪ ﺟـﺪول‬
‫ در‬finalBuy.php ‫ ﻛﻪ ﻣﻨﺠﺮ ﺑـﻪ اﺟـﺮاي ﺻـﻔﺤﻪ‬sabt ‫ اﻳﻦ ﻋﻤﻞ ﺑﺎ ﻓﺮاﺧﻮاﻧﻲ ﺗﺎﺑﻊ‬.‫آرﺷﻴﻮ ﺧﺮﻳﺪ ﻣﻨﺘﻘﻞ ﺷﻮد‬
.‫ اﻧﺠﺎم ﻣﻲ ﮔﻴﺮد‬،‫ﺳﺮور ﻣﻲ ﺷﻮد‬
function sabt(){

asynchronous = new Asynchronous();

asynchronous.complete = function(status, statusText,
responseText, responseXML){
if (responseText == '200'){
show();
document.getElementById('row2').innerHTML='';
document.getElementById('link1').innerHTML='‫;'ﻗﻄﻌﻲ ﻛﺮدن ﺧﺮﻳﺪ‬
}
else
document.getElementById('link1').innerHTML=
'‫<ﻗﻄﻌﻲ ﻛﺮدن ﺧﺮﻳﺪ‬br>‫;'ﻣﻮﺟﻮدي ﺑﻪ اﻧﺪازه ﻛﺎﻓﻲ ﻣﻮﺟﻮد ﻧﻴﺴﺖ‬
};
asynchronous.call( 'finalBuy.php','','GET');
show();
}
 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 176

finalBuy.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬

‫ﻫﻨﮕﺎم ﻗﻄﻌﻲ ﻛﺮدن ﺧﺮﻳﺪ اﻳﻦ ﺻﻔﺤﻪ اﺟﺮا ﻣﻲ ﺷﻮد و رﻛﻮردﻫﺎي ﺳﺒﺪ ﺧﺮﻳﺪ ﺑﺮاي ﻳﻚ ﻛـﺎرﺑﺮ ﺧﻮاﻧـﺪه ﺷـﺪه و ﺑـﻪ‬
‫ ﻫﻤﭽﻨﻴﻦ ﺑﻪ ﻣﻴﺰان ﻣﺒﻠﻎ‬.‫ ﻧﻬﺎﻳﺘﺎ رﻛﻮردﻫﺎ از ﺟﺪول ﺳﺒﺪ ﺧﺮﻳﺪ ﺣﺬف ﻣﻲ ﺷﻮﻧﺪ‬.‫ اﺿﺎﻓﻪ ﻣﻲ ﮔﺮدد‬Archive ‫ﺟﺪول‬
.‫ﻛﻞ ﺧﺮﻳﺪ از ﺣﺴﺎب ﻣﺸﺘﺮي ﻛﺎﺳﺘﻪ ﻣﻲ ﺷﻮد‬
<?php
session_start();
$u = $_SESSION['id'];
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
$q = "select * from customers where customerid = $u ";
$res = mysql_query($q,$link);
$user = mysql_fetch_array($res);
.‫ ﻗﻴﻤﺖ ﻛﻞ ﺧﺮﻳﺪ ﻣﺤﺎﺳﺒﻪ ﻣﻲ ﺷﻮد‬sql ‫ﺑﺎ اﻳﻦ دﺳﺘﻮر‬
$q = "select sum(total_price) from sabad where
customerid = $u";
$t = mysql_query($q,$link);
$row = mysql_fetch_array($t);
$account = $user['account'];
//
if ($user['account'] >= $row[0])
{
$q = "insert into archive select * from sabad
where customerid = $u";
$res = mysql_query($q,$link);
//
.‫از ﻣﻮﺟﻮدي ﻛﺎرﺑﺮ ﺑﻪ ﻣﻴﺰان ﻗﻴﻤﺖ ﻛﻞ ﺧﺮﻳﺪ ﻛﺎﺳﺘﻪ ﻣﻲ ﺷﻮد‬
$account -=$row[0];
$q = "update customers set account = $account
where customerid = $u";
$res = mysql_query($q,$link);
//
.‫ﺑﺎ ﻳﻚ دﺳﺘﻮر اﻃﻼﻋﺎت ﺧﺮﻳﺪ از ﺳﺒﺪ ﺧﺮﻳﺪ ﺣﺬف ﻣﻲ ﺷﻮد‬
$q = "delete from sabad where customerid = $u";
$res = mysql_query($q,$link);
echo '200';
}
else
echo'-50';
mysql_close($link);
?>
177  7 ‫ﻓﺼﻞ‬ BookStore ‫ﺑﺮﻧﺎﻣﻪ‬

Personal.HTML ‫ﺑﺮرﺳﻲ ﻗﺴﻤﺖ ﻫﻔﺘﻢ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬

‫ اﻳﻦ ﺗﺎﺑﻊ ﻟﻴﺴﺖ ﺗﻤﺎم ﺧﺮﻳﺪ ﻫﺎي ﻗﺒﻠﻲ ﻳـﻚ‬.‫ اﺟﺮا ﻣﻲ ﺷﻮد‬list ‫اﮔﺮ ﻛﺎرﺑﺮ دﻛﻤﻪ ﻟﻴﺴﺖ ﺧﺮﻳﺪ را ﻛﻠﻴﻚ ﻛﻨﺪ ﺗﺎﺑﻊ‬
‫ ﺷﻤﺎره ﺷﺮوع رﻛﻮردي ﺑـﺮاي ﺑﺎزﻳـﺎﺑﻲ از‬e ‫ ﭘﺎراﻣﺘﺮ‬.‫ ﻧﺸﺎن ﻣﻲ دﻫﺪ‬buyList.php ‫ﻛﺎرﺑﺮ را ﺑﺎ ﻓﺮاﺧﻮاﻧﻲ ﺻﻔﺤﻪ‬
.‫ﻣﺠﻤﻮﻋﻪ ﺟﻮاب ﻟﻴﺴﺖ ﺧﺮﻳﺪ ﻫﺎ ﻣﻲ ﺑﺎﺷﺪ‬
function list(e){

asynchronous = new Asynchronous();

asynchronous.complete = function(status, statusText,
responseText, responseXML){

document.getElementById('div2').innerHTML=responseText;
};

var msg = 'count=' +e+'';

asynchronous.call( 'buyList.php?'+msg,'','GET');
}
BuyList.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
‫ ﺷﻤﺎره ﻛﺎرﺑﺮ از داﺧـﻞ‬.‫زﻣﺎﻧﻴﻜﻪ ﻓﺮد ﻣﻲ ﺧﻮاﻫﺪ اﻃﻼﻋﺎت ﺧﺮﻳﺪﻫﺎي ﻗﺒﻠﻲ را ﻣﺸﺎﻫﺪه ﻛﻨﺪ اﻳﻦ ﺻﻔﺤﻪ اﺟﺮا ﻣﻲ ﺷﻮد‬
.‫ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‬ARCHIVE ‫ ﺧﻮاﻧﺪه ﻣﻲ ﺷﻮد و رﻛﻮردﻫﺎي ﻣﺘﻨﺎﻇﺮ ﺑﺎ آن از ﺟﺪول‬SESSION ‫ﻣﺘﻐﻴﺮ‬
<?php
$count = $_GET['count'];
session_start();
$u = $_SESSION['id'];
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
//
$q = "select * from archive where customerid=$u ";
$r = mysql_query($q,$link);
$num = mysql_num_rows($r);
$k = $num/5;

$q.="limit $count,5";
$res = mysql_query($q,$link);
$row = mysql_fetch_array($res);

$str = '<table width=100% ><tr >

<th align=left style="color:#660000">‫<ﻧﺎم ﻛﺘﺎب‬/th>
<th align=left style="color:#660000">‫<ﺗﻌﺪاد ﺧﺮﻳﺪ‬/th>
<th align=left style="color:#660000">‫<ﻗﻴﻤﺖ ﺧﺮﻳﺪ‬/th>
<th align=left style="color:#660000">‫<ﺗﺎرﻳﺦ ﺧﺮﻳﺪ‬/th>
</tr>';

while( $row != NULL)

 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 178

{
$q="select * from book where code =$row[0]";
$rs = mysql_query($q,$link);
$r = mysql_fetch_array($rs);
$str.="<tr><td> $r[2]</td><td>$row[2]</td>
<td>$row[3]</td><td>$row[5]</td></tr>";
$row = mysql_fetch_array($res);
}
$str.='</table><br><p align=center>';
for($i=0;$i < $k; $i++){
$m = $i+1;
$str.= "<a onclick='list(($i)*5);'
style='cursor:pointer'>$m</a>&nbsp;";
}
$str.='</p>';
echo $str;
mysql_close($link);
?>

‫ ﻟﻴﺴﺖ ﺧﺮﻳﺪ ﻗﺒﻠﻲ ﻛﺎرﺑﺮان‬8-7 ‫ﺷﻜﻞ‬

logout.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
offline ‫ ﺣﺎﻟـﺖ ﻛـﺎرﺑﺮ را در ﺟـﺪول ﺑـﻪ‬Session ‫در اﻳﻦ ﺻﻔﺤﻪ اﺑﺘﺪا ﺑﺎ ﺧﻮاﻧﺪن اﻃﻼﻋﺎت ﻛـﺎرﺑﺮ از ﻣﺘﻐﻴـﺮ‬
.‫ﺗﺒﺪﻳﻞ ﻣﻲ ﻛﻨﺪ‬
<?php
session_start();
$u=$_SESSION['id'];
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
$q = " update customers set status=0
where customerid = $u ";
$res = mysql_query($q,$link);
179  7 ‫ﻓﺼﻞ‬ BookStore ‫ﺑﺮﻧﺎﻣﻪ‬

session_destroy();
echo "<script> window.location='login.html'</script>";
mysql_close($link);
?>
‫ﻋﻤﻠﻴﺎت ﻣﺮﺑﻮط ﺑﻪ ﻣﺪﻳﺮ ﺳﺎﻳﺖ‬
‫ وﻳـﺮاﻳﺶ‬،‫ ﺣـﺬف ﻛﺘـﺎب‬،‫ ﺻﻔﺤﻪ ي ﻣﺪﻳﺮ ﺳﺎﻳﺖ ﻣﻲ ﺑﺎﺷﺪ ﻛـﻪ اﻣﻜﺎﻧـﺎﺗﻲ از ﻗﺒﻴـﻞ اﺿـﺎﻓﻪ ﻛـﺮدن ﻛﺘـﺎب‬8-8 ‫ﺷﻜﻞ‬
،‫ ﺷﺎرژ ﻣﻮﺟـﻮدي ﻛـﺎرﺑﺮان‬،‫ ﻣﺸﺎﻫﺪه ﺗﻤﺎﻣﻲ ﻛﺎرﺑﺮان‬،‫ ﻣﺸﺎﻫﺪه ﻟﻴﺴﺖ ﺧﺮﻳﺪ ﻛﺎرﺑﺮان‬،‫ ﻛﺮدن ﻓﺎﻳﻞ‬upload ،‫ﻛﺘﺎب‬
.‫ﻣﺸﺎﻫﺪه ﻟﻴﺴﺖ ﺷﺎرژ و ﺟﺴﺘﺠﻮي ﻛﺘﺎب را داراﺳﺖ‬
Admin.html ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬

<script type="text/javascript"
src="Java_script/Asynchronous.js"></script>
searchBookAd.php ‫ ﺑـﺎ ﻓﺮاﺧـﻮاﻧﻲ ﺻـﻔﺤﻪ‬Admin ‫ ﺟﺴﺘﺠﻮي ﻛﺘﺎب را در ﺻﻔﺤﻪ‬searchBook‫ﺗﺎﺑﻊ‬
.‫ ﺑﺮ ﻋﻬﺪه دارد‬Ajax ‫ﺑﺼﻮرت‬
function searchBook(counter){
asynchronous = new Asynchronous();
asynchronous.complete = function(status, statusText,
responseText, responseXML){

document.getElementById('div2').innerHTML=responseText;
};
var t=document.form1.select1.options[document.form1.
select1.selectedIndex].value;
var searchTxt = document.getElementById('txt1').value;
var msg = 'number=' +t+'&txt1=' +
searchTxt+'&count='+counter+'';
asynchronous.call( 'searchBookAd.php?'+msg,'','GET');
}
.‫ را ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﺪ‬searchUser.php ‫اﻳﻦ ﺗﺎﺑﻊ ﺑﺮاي ﻣﺸﺎﻫﺪه اﻃﻼﻋﺎت ﺧﺮﻳﺪ ﻳﻚ ﻛﺎرﺑﺮ ﺻﻔﺤﻪ‬
function InfoCustomer(e){
ajax = new Asynchronous();
ajax.complete = function(status, statusText,
responseText, responseXML){

document.getElementById('div2').innerHTML=responseText;
};
var user=document.getElementById('txt2').value;
var msg ='user='+user+'&count='+e;
ajax.call('searchuser.php?'+msg,'','GET');
};
‫ اﻳــﻦ ﺗــﺎﺑﻊ ﺻــﻔﺤﻪ‬.‫ زﻣــﺎﻧﻲ ﻓﺮاﺧــﻮاﻧﻲ ﻣــﻲ ﺷــﻮدﻛﻪ ﻳــﻚ ﻛﺘــﺎب را ﻣــﻲ ﺧــﻮاﻫﻴﻢ ﺣــﺬف ﻛﻨــﻴﻢ‬Del ‫ﺗــﺎﺑﻊ‬
.‫ را ﻓﺮاﺧﻮاﻧﻲ ﻣﻲ ﻛﻨﺪ‬deleteBook.php
function Del(e){
ajax = new Asynchronous();
 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 180

ajax.complete = function(status, statusText,

responseText, responseXML){
searchBook(0);
};

var msg ='code='+e;

ajax.call('deleteBook.php?'+msg,'','GET');
};

Admin.html ‫ ﻧﻤﺎي از ﻃﺮاﺣﻲ ﺻﻔﺤﻪ‬8-8 ‫ﺷﻜﻞ‬

.‫ ﺑﺮاي ﻧﻤﺎﻳﺶ ﻗﺴﻤﺖ ﺷﺎرژ ﻣﻮﺟﻮدي ﺑﺮاي ﻛﺎرﺑﺮ ﻣﻲ ﺑﺎﺷﺪ‬show ‫ﺗﺎﺑﻊ‬

function show(){
if (document.getElementById('div4').style.display=='block' ){
document.getElementById('div2').innerHTML='';
document.getElementById('div4').style.display='none';
}
else
document.getElementById('div4').style.display='block';
}

function sharj(i){

if(document.getElementById(i).style.display=='none'){
document.getElementById(i).style.display='block';
}
else
document.getElementById(i).style.display='none';
}
.‫ ارﺳﺎل ﻣﻲ ﻛﻨﺪ‬sharj.php ‫ ﻣﻘﺎدﻳﺮ ﺑﺮاي ﺷﺎرژ را درﻳﺎﻓﺖ و ﺑﻪ ﺻﻔﺤﻪ‬getData ‫ﺗﺎﺑﻊ‬
function getData(te){
ajax = new Asynchronous();
181  7 ‫ﻓﺼﻞ‬ BookStore ‫ﺑﺮﻧﺎﻣﻪ‬

ajax.complete = function(status, statusText,

responseText, responseXML){
showUser(0);
};
var f=te+'a';
var acc=document.getElementById(f).value * 1;
var msg ='code='+te+'&account='+acc;
ajax.call('sharj.php?'+msg,'','GET');
}
‫ را ﻓﺮاﺧـﻮاﻧﻲ‬ShowUser.php ‫ ﺑﺮاي ﻧﻤﺎﻳﺶ ﻛﻠﻴﻪ ﻛﺎرﺑﺮان ﻋﻀﻮ ﺳﺎﻳﺖ ﻣﻲ ﺑﺎﺷﺪﻛﻪ ﺻﻔﺤﻪ‬showUser ‫ﺗﺎﺑﻊ‬
.‫ﻣﻲ ﻛﻨﺪ‬
function showUser(e){
ajax = new Asynchronous();
ajax.complete = function(status, statusText,
responseText, responseXML){

document.getElementById('div2').innerHTML=responseText;
};
var msg ='u='+e;
ajax.call('showUser.php?'+msg,'','GET');
}
.‫ ﻟﻴﺴﺖ ﺷﺎرژ ﻫﺎ و ﺗﺎرﻳﺦ آن ﻫﺎ را ﺑﺮاي ﻫﺮ ﻛﺎرﺑﺮ ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‬listSharj ‫ﺗﺎﺑﻊ‬
function listSharj(e){
if(document.getElementById('div8').style.display=='none')
document.getElementById('div8').style.display='block';
else
document.getElementById('div8').style.display='none';
ajax = new Asynchronous();
ajax.complete = function(status, statusText,
responseText, responseXML){
document.getElementById('div8').innerHTML=responseText;
};
var msg ='u='+e;
ajax.call('listSharj.php?'+msg,'','GET');

}
searchUser.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
.‫ﺟﺴﺘﺠﻮي ﻳﻚ ﻛﺎرﺑﺮ و ﻧﻤﺎﻳﺶ اﻃﻼﻋﺎت آن ﻛﺎرﺑﺮ ﺗﻮﺳﻂ اﻳﻦ ﺻﻔﺤﻪ اﻧﺠﺎم ﻣﻲ ﮔﻴﺮد‬
<?php
$u=$_GET['user'];
if($u){
$count=$_GET['count'];
session_start();
$link=mysql_connect('localhost','root','');
mysql_select_db('bookstore');
$q="select * from customers where username='$u'";
$rs = mysql_query($q,$link);
 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 182

$t=mysql_fetch_array($rs);
if($t){
$id=$t[0];
//
$str="<p align=center ><table
width=100%><tr>
<td onclick='listSharj($id);'
style='color=#660000;font-size:18px;
cursor:pointer'>‫<ﻟﻴﺴﺖ ﺷﺎرژﻫﺎ‬/td>
<td >$t[6]</td><td style='color
=#660000;font-size:18px'> ‫ﻣﻮﺟﻮدي‬
</td><td >$t[7]</td><td style=
'color=#660000;font-size:18px'>
‫< ﻛﺪﻛﺎرﺑﺮي‬/td><td >$t[1]</td>
<td style='color=#660000;
font-size:18px'>‫<ﻧﺎم‬/td></tr>
</table></p><div id='div8'
style='display:none'></div>";
//
.‫ ﻣﻲ ﺑﺎﺷﺪ‬archive ‫ از ﺟﺪول‬$id ‫ زﻳﺮ ﺑﺮاي ﺑﺎزﻳﺎﺑﻲ اﻃﻼﻋﺎت ﻛﻞ ﺧﺮﻳﺪ ﻳﻚ ﻛﺎرﺑﺮ ﺑﺎ ﻛﺪ‬sql‫دﺳﺘﻮر‬
$q="select * from archive where ustomerid=$id";
$res=mysql_query($q,$link);
$num = mysql_num_rows($res);
$k = $num/5;
$row=mysql_fetch_array($res);
$q=" select * from archive where
customerid=$id limit $count,5";
$r=mysql_query($q);
$rs=mysql_fetch_array($r);
//
$str.="<table width=100%><tr><th
style='color:#660000 '
align=left>‫<ﻧﺎم ﻛﺘﺎب‬/th><th
style='color:#660000 '
align=left>‫<ﺗﻌﺪاد ﻛﺘﺎب‬/th><th
style='color:#660000 '
align=left>‫<ﻗﻴﻤﺖ ﻛﺘﺎب‬/th><th
style='color:#660000 '
align=left>‫<ﺗﺎرﻳﺦ ﺧﺮﻳﺪ‬/th></tr>";
while ($rs!=NULL)
{
.‫ زﻳﺮ ﺑﺮاي ﺑﺎزﻳﺎﺑﻲ اﻃﻼﻋﺎت ﻛﺘﺎب ﻫﺎي ﺧﺮﻳﺪاري ﺷﺪه اﺳﺖ‬sql‫دﺳﺘﻮر‬
$q1= "select * from book where
code=$rs[0]";
183  7 ‫ﻓﺼﻞ‬ BookStore ‫ﺑﺮﻧﺎﻣﻪ‬

$t=mysql_query($q1);
$rt=mysql_fetch_array($t);
$str.="<tr><td>$rt[2]</td><td>
$rs[2]</td><td>$rs[3]</td>
<td>$rs[5]</td></tr>";
$rs=mysql_fetch_array($r);
}
$str .= '</table><br><p align=center>';
for($i=0;$i < $k; $i++){
$m = $i+1;
$str.="<a
onclick='InfoCustomer(($i)*5);'
style='cursor:pointer'>$m</a>&nbsp;";
}
$str.='</p>';
echo $str;
}
mysql_close($link);
}
?>
‫ ﻧﻤﻮ ﻧﻪ ي از اﻃﻼﻋﺎت ﻛﺎرﺑﺮان ﺑﻬﻤﺮاه اﻃﻼﻋﺎت ﺧﺮﻳﺪ ﻛﺎرﺑﺮان و اﻃﻼﻋﺎت ﻟﻴـﺴﺖ ﺷـﺎرژ را ﻣـﺸﺎﻫﺪه‬8-9 ‫در ﺷﻜﻞ‬
.‫ﻣﻲ ﻛﻨﻴﺪ‬
ShowUser.Php‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
.‫ﺟﺴﺘﺠﻮي ﺗﻤﺎﻣﻲ ﻛﺎرﺑﺮان ﻋﻀﻮ ﺳﺎﻳﺖ ﺑﺮ ﻋﻬﺪه اﻳﻦ ﺻﻔﺤﻪ اﺳﺖ‬
<?php
$count=$_GET['u'];
session_start();
$link=mysql_connect('localhost','root','');
mysql_select_db('bookstore');
$q="select *from customers where type=0";
$res=mysql_query($q,$link);
$num=mysql_num_rows($res);
$k=$num/5;
$q="select *from customers where type=0 limit $count,5";
$res=mysql_query($q,$link);
$row=mysql_fetch_array($res);
$id = $row[0];
$str='<table width=100% ><tr><th></th><th align=left
style="color:#660000">‫<ﻣﻮﺟﻮدي‬/th><th align=left
style="color:#660000">‫<ﺗﻠﻔﻦ‬/th><th align=left
style="color:#660000">‫<ﻛﺪﻛﺎرﺑﺮي‬/th><th align=left
style="color:#660000">‫<ﻧﺎم‬/th></tr>';
while ($row!=NULL){
$id = $row[0];
$tid = $id.'a';
 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 184

$str.="<tr><td onclick='sharj($id);'
style='cursor:pointer;color:#FF3300;
font-size:18px'>‫<ﺷﺎرژ ﻣﻮﺟﻮدي‬/td><td>$row[6]</td>
<td>$row[4]</td><td>$row[7]</td><td>$row[1]
</td></tr><tr><td><div id='$id'
style='display:none'>&nbsp<input type=button
value='‫ 'ﺛﺒﺖ‬style='font-family:Tahoma;
font-size:12px;color:#660000;width:50px'
onclick='getData($id);'>&nbsp<input type=text
id='$tid' style='width=70px'>
</div>
<hr style='color:#660000'></hr></td></tr>";
$row=mysql_fetch_array($res);
}
$str.='</table><p align=center >';
for ($i=0;$i<$k;$i++){
$m=$i+1;
$str.="<a onclick='showUser($i*5)'
style='cursor:pointer'>$m</a>";
}
$str.='</p>';
echo $str;
?>

‫ ﻧﻤﺎﻳﺶ اﻃﻼﻋﺎت ﻳﻚ ﻛﺎرﺑﺮ‬8-9 ‫ﺷﻜﻞ‬

.(8-10 ‫ﺑﺮاي ﺷﺎرژ ﻣﻮﺟﻮدي ﻛﺎرﺑﺮ ﻛﺎﻓﻲ اﺳﺖ ﻣﻴﺰان ﺷﺎرژ را ﻧﻮﺷﺘﻪ و ﺛﺒﺖ ﻧﻤﺎﻳﺪ )ﺷﻜﻞ‬
185  7 ‫ﻓﺼﻞ‬ BookStore ‫ﺑﺮﻧﺎﻣﻪ‬

sharj.php‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬

.‫ اﺳﺖ‬Sharj ‫ﻋﻤﻠﻴﺎت اﻳﻦ ﺻﻔﺤﻪ ﺗﻐﻴﻴﺮ ﻣﻮﺟﻮدي ﻛﺎرﺑﺮ و ذﺧﻴﺮه ﻛﺮدن اﻃﻼﻋﺎت ﺷﺎرژ در ﺟﺪول‬
<?php
session_start();
$u = $_GET['code'];
$t = $_GET['account'];
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
$cmd = "select * from customers where customerid=$u";
$r = mysql_query($cmd);
$row = mysql_fetch_array($r);
$g = $t + $row['account'];
$q = " update customers set account = $g
where customerid=$u ";
$res = mysql_query($q,$link);
$date = date("Y-m-d H:i:s");
$q1 = " insert into sharj(customerid,value,date)
values($u,$t,'$date')";
mysql_query($q1,$link);
echo '50';
mysql_close($link);
?>

‫ ﻣﺸﺎﻫﺪه ﻟﻴﺴﺖ ﺗﻤﺎم ﻛﺎرﺑﺮان‬8-10 ‫ﺷﻜﻞ‬

sharjList.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
.‫ﻋﻤﻠﻴﺎت اﻳﻦ ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ ﻟﻴﺴﺖ ﺷﺎرژ ﻫﺎي اﻧﺠﺎم ﺷﺪه ﺑﺮاي ﻳﻚ ﻛﺎرﺑﺮ اﺳﺖ‬
<?php
$u = $_GET['u'];
session_start();
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
$q = "select * from sharj where customerid=$u";
$res = mysql_query($q);
 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 186

$row = mysql_fetch_array($res);
$str='<table width=100%>';
while($row){
$str.="<tr><td>$row[2]</td><td>$row[1]</td></tr>";
$row = mysql_fetch_array($res);
}
$str.='</table>';
echo $str;
?>
‫ ﺻﻔﺤﻪ ي اﺳﺖ ﻛﻪ ﻣﺪﻳﺮ ﻣﻲ ﺗﻮاﻧﺪ ﺑﺎ ﻛﻠﻴﻚ ﻛﺮدن ﺑـﺮ روي ﻫـﺮ ﻛـﺪام ﻳـﻚ از ﮔﺰﻳﻨـﻪ ﻫـﺎي ﺣـﺬف و‬8-11‫ﺷﻜﻞ‬
.‫وﻳﺮاﻳﺶ ﻋﻤﻠﻴﺎت را اﻧﺘﺨﺎب ﻧﻤﺎﻳﺪ‬
serachBookad.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
.‫ﻋﻤﻠﻴﺎت اﻳﻦ ﺑﺨﺶ ﺟﺴﺘﺠﻮي اﻃﻼﻋﺎت ﻛﺘﺎب ﺑﺮاي ﺻﻔﺤﻪ ﻣﺪﻳﺮ اﺳﺖ‬

‫ اﻃﻼﻋﺎت ﻧﻤﺎﻳﺶ داده ﺷﺪه ﺑﻌﺪ از ﺟﺴﺘﺠﻮ‬8-11 ‫ﺷﻜﻞ‬

<?php
session_start();
if (isset($_GET['txt1']))
{
$index = $_GET['number'];
$name = $_GET['txt1'];
$count =$_GET['count'];
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
//
$q = "select * from book where ";
if ($index == '0')
$q.= "'$name' = name ";
else if ($index == '1')
$q.= "'$name' = subject ";
//
if(isset($_SESSION['code'])){
187  7 ‫ﻓﺼﻞ‬ BookStore ‫ﺑﺮﻧﺎﻣﻪ‬

$u=$_SESSION['code'];
$q.=" and code != $u ";
}
$res = mysql_query($q,$link);
$num = mysql_num_rows($res);
$k = $num/3;
//
$q.="limit $count,3";
$res = mysql_query($q,$link);

$row = mysql_fetch_array($res);

$str = '<table width=100% ><tr><th align=left

style="color:#660000">‫<ﻧﺎم ﻛﺘﺎب‬/th>
<th align=left style="color:#660000">
‫<ﻗﻴﻤﺖ ﻛﺘﺎب‬/th></tr>';
while( $row != NULL)
{
$str.="<tr><td> $row[2]</td><td>$row[7]</td>
<td><a href='edit.php?code=$row[0]'> ‫وﻳﺮاﻳﺶ‬
</a></td><td><a onclick='Del($row[0]);'
style='cursor:pointer;color:#0000ff' >
‫<ﺣﺬف‬/a></td><td><img src='$row[8]'></td>
</tr>";
$row = mysql_fetch_array($res);
}
$str.='</table><br><p align=center>';
for($i=0;$i < $k; $i++){
$m = $i+1;
$str.= "<a onclick='searchBook(($i)*3);'
style='cursor:pointer'>$m</a>&nbsp;";
}
$str.='</p>';
echo $str;
mysql_close($link);
}
?>
‫ ارﺳـﺎل‬edit.php ‫ اﻃﻼﻋﺎت ﻛﺘﺎب ﺑـﻪ ﺻـﻔﺤﻪ‬،‫ ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﻋﻤﻠﻴﺎت وﻳﺮاﻳﺶ ﻛﺘﺎب اﻧﺘﺨﺎب ﺷﻮد‬: 8-12 ‫ﺷﻜﻞ‬
.‫ﻣﻲ ﺷﻮد‬
edit.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
‫ اﻃﻼﻋـﺎت ﻛﺘـﺎب ﻣـﻮرد‬،‫اﻳﻦ ﺻﻔﺤﻪ ﻫﻤﺎﻧﻨﺪ ﺻﻔﺤﻪ اﺿﺎﻓﻪ ﻛﺮدن ﻛﺘﺎب ﻣﻲ ﺑﺎﺷﺪ ﺑﺎ اﻳﻦ ﺗﻔﺎوت ﻛﻪ در ﻓﻴﻠﺪ ﻫﺎي ﻓﺮم‬
.‫ﻧﻈﺮ ﻗﺮار دارد‬
<?php
$code=$_GET['code'];
 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 188

$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
$q="select * from book where code=$code";
$r=mysql_query($q,$link);
$row=mysql_fetch_array($r);
?>

DeleteBook.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬

.‫ﻋﻤﻠﻴﺎت اﻳﻦ ﺑﺨﺶ ﻣﺮﺑﻮط ﺑﻪ ﺣﺬف ﻛﺘﺎب از ﺟﺪول ﻛﺘﺎب ﻫﺎ اﺳﺖ‬

<?php
session_start();
$u = $_GET['code'];
$_SESSION['code']=$u;
$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');
$q="delete from book where code=$u";
mysql_query($q,$link);
mysql_close($link);
echo '200';
?>

edit.php ‫ ﻧﻤﺎي از ﻃﺮاﺣﻲ ﺻﻔﺤﻪ‬8-12 ‫ﺷﻜﻞ‬

update.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
.‫ ﺻﻮرت ﮔﺮﻓﺘﻪ را ذﺧﻴﺮه ﻣﻲ ﻛﻨﺪ‬edit.php ‫ ﻛﻪ در‬،‫اﻳﻦ ﺻﻔﺤﻪ ﺗﻐﻴﻴﺮات اﻋﻤﺎل ﺷﺪه ﺑﺮ روي اﻃﻼﻋﺎت ﻛﺘﺎب‬
<?php
$code = $_POST['code'];
$isbn=$_POST['isbn'];
$name = $_POST['name'];
$subject = $_POST['subject'];
$author = $_POST['author'];
189  7 ‫ﻓﺼﻞ‬ BookStore ‫ﺑﺮﻧﺎﻣﻪ‬

$translater = $_POST['translater'];
$press = $_POST['press'];
$price = $_POST['price'];
$language = $_POST['language'];
$image = $_FILES['image'];
$path = $_FILES['path'];

$dir = 'mybookpic/'.$image['name'];
copy($image['tmp_name'],$dir);

$dir1 = 'mydownload/'.$path['name'];
copy($path['tmp_name'],$dir1);

$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');

$q="update book set isbn='$isbn',name='$name',

subject='$subject',author='$author',
translater='$translater'
,press='$press',price=$price,language='$language'
,image='$dir',path='$dir1' where code=$code";
mysql_query($q,$link);
echo "<script >location.href('admin.html');</script>";
mysql_close($link);
?>
insertBook.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬
‫ ﻛـﺮدن‬upload ‫ ﻫﻤﭽﻨـﻴﻦ اﻣﻜـﺎن‬.‫ ﻓﺮاﻫﻢ ﻣﻲ ﻛﻨﺪ‬،‫اﻳﻦ ﺻﻔﺤﻪ ﻓﺮﻣﻲ را ﺑﺮاي اﺿﺎﻓﻪ ﻛﺮدن ﻛﺘﺎب ﺑﻪ ﺟﺪول ﻛﺘﺎب‬
‫ ارﺳﺎل ﻣﻲ‬insert.php ‫ اﻃﻼﻋﺎت ﻓﺮم ﭘﺮﺷﺪه ﺑﻪ ﺻﻔﺤﻪ‬.‫ﺗﺼﻮﻳﺮ و ﻓﺎﻳﻞ ﺑﺮاي داﻧﻠﻮد در اﻳﻦ ﻗﺴﻤﺖ ﻓﺮاﻫﻢ اﺳﺖ‬
‫ ﺗــﮓ ﻓــﺮم ﻣﻘــﺪار‬Enctype ‫ را اﻧﺠــﺎم دﻫــﻴﻢ ﺑﺎﻳــﺪ‬upload ‫ ﺑــﺮاي اﻳﻨﻜــﻪ در ﺻــﻔﺤﻪ ﺑﺘــﻮاﻧﻴﻢ ﻋﻤﻠﻴــﺎت‬.‫ﺷــﻮد‬
.‫ را دارا ﺑﺎﺷﺪ‬multipart/form-data
<form action="insert.php" method=POST enctype="multipart/form-
data">
<?php
if(isset($_GET['msg']))
if($_GET['msg']==1)
echo '‫;'ﻣﻮﻓﻘﻴﺖ آﻣﻴﺰ ﺑﻮد‬
else
echo '‫;'ﻣﻮﻓﻘﻴﺖ آﻣﻴﺰ ﻧﺒﻮد‬
?>

insert.php ‫ﺑﺮرﺳﻲ ﻛﺪﻫﺎي ﺻﻔﺤﻪ‬

.‫در اﻳﻦ ﻗﺴﻤﺖ اﻃﻼﻋﺎت ﻛﺘﺎب را ﺑﻪ ﺟﺪول ﻛﺘﺎب اﺿﺎﻓﻪ ﻣﻲ ﻛﻨﻴﻢ‬
<?php
$code = $_POST['code'];
$name = $_POST['name'];
 BookStore ‫ﺑﺮﻧﺎﻣﻪ‬ 7 ‫ ﻓﺼﻞ‬ 190

$subject = $_POST['subject'];
$author = $_POST['author'];
$translater = $_POST['translater'];
$press = $_POST['press'];
$price = $_POST['price'];
.‫ ﺑﮕﻴﺮﻳﺪ‬$_FILE ‫ ﺷﺪه را ﺑﺎﻳﺪ ﺑﺎ آراﻳﻪ‬upload ‫اﻃﻼﻋﺎت ﻓﺎﻳﻞ‬
$image = $_FILES['image'];
$language = $_POST['language'];
$path = $_FILES['path'];
‫ ﭘﺎراﻣﺘﺮ اول اﻳﻦ دﺳﺘﻮر ﻣﺴﻴﺮ ﻣﻮﻗﺘﻲ ﻓﺎﻳﻞ‬.‫ ﻛﺮدن ﻓﺎﻳﻞ ﺑﻪ ﭘﻮﺷﻪ ي درون ﺳﺮور اﺳﺖ‬upload ‫ ﺑﺮاي‬copy ‫دﺳﺘﻮر‬
.‫در وب ﺳﺮور و ﭘﺎراﻣﺘﺮ دوم ﻣﺴﻴﺮ اﺻﻠﻲ ﺑﺮاي ﻛﭙﻲ ﺷﺪن ﻓﺎﻳﻞ ﻣﻲ ﺑﺎﺷﺪ‬
$dir = 'mybookpic/'.$image['name'];
copy($image['tmp_name'],$dir);

$dir1 = 'mydownload/'.$path['name'];
copy($path['tmp_name'],$dir1);

$link = mysql_connect('localhost','root','');
mysql_select_db('BookStore');

$q="insert into book(Isbn,name,subject,author,Translater

,press,price,image,language,path)values(
'$code','$name','$subject','$author','$translater'
,'$press',$price,'$dir','$language','$dir1')";
$res = mysql_query($q,$link);

if($res )
echo "<script>
window.location='insertBook.php?msg=1'</script>";
else
echo "<script>
window.location='insertBook.php?msg=0'</script>";

mysql_close($link);
?>

‫ در ﺑﺮﻧﺎﻣﻪ ﻫﺎي وب ﺑﻮد‬Ajax ‫در اﻧﺘﻬﺎ ﻳﺎدآور ﻣﻲ ﺷﻮﻳﻢ ﻛﻪ اﻳﻦ ﻓﺼﻞ ﻓﻘﻂ ﻳﻚ ﻣﺜﺎﻟﻲ ﺑﺮاي ﻛﺎرﺑﺮدﻫﺎي ﺗﺠﺎري ﺗﺮ‬
‫ﻫﺮ ﭼﻨﺪ ﻛﻪ اﻳﻦ ﺑﺮﻧﺎﻣﻪ در ﻣﻘﻴﺎس ﻛﻮﭼﻜﻲ از ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺗﺠﺎري واﻗﻌﻲ اﺳﺖ وﻟـﻲ ﻣﻔـﺎﻫﻴﻢ اﺻـﻠﻲ آن ﺑﺮﻧﺎﻣـﻪ ﻫـﺎ را‬
.‫داراﺳﺖ‬
‫ﭘﻴﻮﺳﺖ ‪191 ‬‬ ‫ﻧﺮم اﻓﺰار ‪EsayPHP‬‬

‫ﭘﻴﻮﺳﺖ‪ :‬ﻃﺮﻳﻘﻪ ﻛﺎر ﺑﺎ ﻧﺮم اﻓﺰار ‪EsayPHP‬‬

‫اﻳﻦ ﻧﺮم اﻓﺰار ﻳﻚ وب ﺳﺮور ﻣﺤﻠﻲ ﺑﺮ روي ﺳﻴﺴﺘﻢ ﺷﻤﺎ اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ‪ .‬اﻳﻦ وب ﺳﺮور ﺑﺮاي اﺟـﺮاي ﻛـﺪﻫﺎي ‪ PHP‬و ﺳـﺮوﻳﺲ دﻫـﻲ‬
‫ﺻﻔﺤﺎت وب ﺑﻪ ﺷﻤﺎ ﻛﻤﻚ ﻣﻲ ﻛﻨﺪ‪ .‬ﻓﺎﻳﻞ ﻻزم ﺑﺮاي ﻧﺼﺐ ‪ EsayPHP‬در ‪ CD‬ﻛﺘﺎب ﻣﻮﺟﻮد ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫ﻃﺮﻳﻘﻪ ﻧﺼﺐ ﻧﺮم اﻓﺰار‬
‫‪ -1‬ﻓﺎﻳﻞ ‪ easyphp1-8_setup.exe‬را اﺟﺮا ﻛﻨﻴﺪ‪.‬‬
‫‪ -2‬زﺑﺎن ﻣﻮرد ﻧﻈﺮ ﺧﻮد را اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪.‬‬

‫‪ -3‬ﺻﻔﺤﻪ ﻣﺮﺑﻮط ﺑﻪ ﺧﻮش آﻣﺪﮔﻮﻳﻲ اﺳﺖ ﻛﻪ دﻛﻤﻪ ‪ Next‬را ﻛﻠﻴﻚ ﻣﻲ ﻛﻨﻴﺪ‪.‬‬

‫‪ -4‬ﻣﻮاﻓﻘﺖ ﺑﺎ ﻗﻮاﻧﻴﻦ ﻧﺮم اﻓﺰار‪.‬‬

‫ﻧﺮم اﻓﺰار ‪EsayPHP‬‬ ‫‪  192‬ﭘﻴﻮﺳﺖ‬

‫‪ -5‬ﻣﺎﻳﻞ ﺑﻮدن ﺑﻪ ﻧﺼﺐ ﻧﺮم اﻓﺰار ﺑﺎ ﻛﻠﻴﻚ دﻛﻤﻪ ‪.Next‬‬

‫‪ -6‬اﻧﺘﺨﺎب ﻣﺴﻴﺮ ﺑﺮاي ﻧﺼﺐ ﻧﺮم اﻓﺰار‪.‬‬

‫‪ -7‬ﻋﻤﻠﻴﺎت ﻧﺼﺐ ﻧﺮم اﻓﺰار‪.‬‬

‫ﭘﻴﻮﺳﺖ ‪193 ‬‬ ‫ﻧﺮم اﻓﺰار ‪EsayPHP‬‬

‫اداﻣﻪ ي ﻋﻤﻠﻴﺎت ﻣﺮﺑﻮط ﺑﻪ ﻧﺼﺐ‪.‬‬

‫‪ -8‬ﭘﺎﻳﺎن ﻋﻤﻠﻴﺎت ﻧﺼﺐ‪.‬‬

 ‫ﻧﺮم اﻓﺰار ‪EsayPHP‬‬ ‫‪  194‬ﭘﻴﻮﺳﺖ‬

‫ﺑﻌﺪ از ﻧﺼﺐ ﻧﺮم اﻓﺰار‪ ،‬ﺑﻪ ﻣﺤﻞ ﻧﺼﺐ ﻧﺮم اﻓﺰار ﺑﺮوﻳﺪ و ﻓﺎﻳﻞ ‪ EsayPHP.exe‬را اﺟﺮا ﻛﻨﻴﺪ‪.‬‬

‫در اﻳﻦ ﻣﺴﻴﺮ ﭘﻮﺷﻪ ي ﺑﻪ ﻧﺎم ‪ www‬وﺟﻮد دارد ﻛﻪ ﻣﺤﻠﻲ اﺳﺖ ﺑﺮاي اﻳﻦ ﻛﻪ ﺷﻤﺎ ﺻﻔﺤﺎت وب ﺧـﻮد را در آﻧﺠـﺎ ﻗـﺮار دﻫﻴـﺪ‪ .‬اﻳـﻦ ﻧـﺮم‬
‫اﻓﺰار از ‪ mysql‬ﺑﺮاي ﻣﺪﻳﺮﻳﺖ ﺟﺪول ﻫﺎ اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﺪ‪ .‬در ﻣﺴﻴﺮ ﻧﺼﺐ ﺑﺮﻧﺎﻣﻪ‪ ،‬ﭘﻮﺷـﻪ اي ﺑـﻪ ﻧـﺎم ‪ mysql‬وﺟـﻮد دارد ﻛـﻪ در آن‪،‬‬
‫ﭘﻮﺷﻪ اي ﺑﻪ ﻧﺎم ‪ Data‬اﺳﺖ ﻛﻪ ﻣﺤﻠﻲ اﺳﺖ ﻛﻪ در آن ﺟﺪول ﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ‪.‬‬
‫اﻳﻦ ﻧﺮم اﻓﺰار وب ﺳﺮوري را ﺑﻪ آدرس ‪ http://localhost.com‬ﻳﺎ ‪ 127.0.0.1‬ﺑﺮ روي ﺳﻴﺴﺘﻢ ﺷﻤﺎ اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ‪ .‬ﺑﻌﺪ‬
‫از اﺟﺮاي ‪ EsayPHP‬ﭘﻨﺠﺮه ي ﺑﻪ ﺷﻜﻞ زﻳﺮ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬

‫‪ -1‬دﻛﻤﻪ ﺑﺮاي ﻣﺸﺎﻫﺪه ﻣﻨﻮي ﻧﺮم اﻓﺰار‪.‬‬

‫‪ -2‬اﻳﻦ دﻛﻤﻪ ﺑﺮاي ‪ start,stop,restart‬ﺳﺮوﻳﺲ دﻫﻨﺪه ‪ Apache‬اﺳﺖ‪.‬‬
‫‪ -3‬اﻳﻦ دﻛﻤﻪ ﺑﺮاي ‪ start,stop,restart‬ﺳﺮوﻳﺲ دﻫﻨﺪه ‪ MySql‬اﺳﺖ‪.‬‬
‫‪ -4‬اﻳﻦ دﻛﻤﻪ ﺑﺮاي ﻧﻤﺎﻳﺶ ﭘﻴﺎم ﻫﺎي ﺧﻄﺎ و ﻳﺎ ﭘﻴﺎم ﻫﺎي ﺻﺤﺖ اﺟﺮاي ‪ Apache‬و ‪ MySql‬اﺳﺖ‪.‬‬
‫ﭘﻴﻜﺮﺑﻨﺪي ‪EsayPHP‬‬
‫ﺑﺮاي ﭘﻴﻜﺮﺑﻨﺪي ‪ ،EsayPHP‬اﺑﺘﺪا ﺑﺎ ﻛﻠﻴﻚ راﺳﺖ ﺑﺮ روي آﻳﻜﻮن ‪ EsayPHP‬در ﻧـﻮار وﻇﻴﻔـﻪ اﻧﺘﺨـﺎب ‪Configuration/‬‬
‫‪ EsayPHP‬ﻓﺮﻣﻲ ﺑﻪ ﺷﻜﻞ ﺻﻔﺤﻪ ﺑﻌﺪ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬
‫ﭘﻴﻮﺳﺖ ‪195 ‬‬ ‫ﻧﺮم اﻓﺰار ‪EsayPHP‬‬

‫‪ -1‬اﻳﻦ ﮔﺰﻳﻨﻪ ﺑﺮاي اﻳﻦ اﺳﺖ ﻛﻪ ‪ EsayPHP‬ﻫﻨﮕﺎم ﺑﺎر ﺷﺪن وﻳﻨﺪوز اﺟﺮا ﺷﻮد‪.‬‬
‫‪ -2‬اﮔﺮ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻧﺮم اﻓﺰار ﻫﻤﻴﺸﻪ در ﺣﺎل اﺟﺮا ﺑﺎﺷﺪ اﻳﻦ ﮔﺰﻳﻨﻪ را اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪.‬‬
‫‪ -3‬اﻳﻦ ﮔﺰﻳﻨﻪ ﺑﺮاي آن اﺳﺖ ﻛﻪ ﻫﻨﮕﺎم اﺟﺮاي ﻧﺮم اﻓﺰار‪ ،‬ﺳﺮوﻳﺲ ﻫﺎي ‪ MySql‬و‪ Apache‬ﻫﻢ اﺟﺮا ﺷﻮﻧﺪ‪.‬‬
‫‪ -4‬اﻳﻦ ﮔﺰﻳﻨﻪ ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ ﻛﻪ ﻫﻨﮕﺎم اﺟﺮاي ‪ ،EsayPHP‬وب ﺳﺎﻳﺖ آن ﺑﺮاي ﻧﺴﺨﻪ ﺟﺪﻳﺪﺗﺮ ﻧﺮم اﻓﺰار ﺑﺮرﺳﻲ ﺷﻮد‪.‬‬
‫‪ -5‬اﻳﻦ ﮔﺰﻳﻨﻪ ﺑﺮاي ﺑﺮرﺳﻲ ﺧﻮدﻛﺎر ﻓﺎﻳﻞ ﻫﺎي ﭘﻴﻜﺮﺑﻨﺪي‪ MySql‬و‪ Apache‬ﻣﻲ ﺑﺎﺷﺪ‪.‬‬
‫‪ -6‬اﻧﺘﺨﺎب اﻳﻦ ﮔﺰﻳﻨﻪ ﻣﻮﺟﺐ ﺑﺮرﺳﻲ ﭘﻮرت ﻫﺎي ‪ MySql‬و‪ Apache‬ﺟﻬﺖ ﻓﻌﺎل ﻳﺎ ﻏﻴﺮ ﻓﻌﺎل ﺑﻮدن ﻣﻲ ﺷﻮد‪.‬‬
‫‪ -7‬اﻧﺘﺨﺎب زﺑﺎن ﺑﺮاي ﺑﺮﻧﺎﻣﻪ ﭘﻴﻜﺮﺑﻨﺪي‪.‬‬
‫‪ -8‬اﻋﻤﺎل ﺗﻐﻴﻴﺮات اﻧﺠﺎم ﺷﺪه‪.‬‬
‫در اﻳﻨﺠﺎ ﻟﻴﺴﺖ ﻓﺎﻳﻞ ﻫﺎي ﭘﻴﻜﺮﺑﻨﺪي ﻧﺮم اﻓﺰار آورده ﺷﺪه اﺳﺖ‪.‬‬
‫‪C:\Program Files\EasyPHP\EasyPHP.ini‬‬ ‫‪-‬‬
‫ﻓﺎﻳﻞ ﭘﻴﻜﺮﺑﻨﺪي ‪) EsayPHP‬اﻳﻦ ﻓﺎﻳﻞ ﻧﻴﺎزي ﺑﻪ ﺗﻐﻴﻴﺮ ﻧﺪارد(‬

‫‪C:\Program Files\EasyPHP\conf_files\httpd.conf‬‬ ‫‪-‬‬

‫ﻓﺎﻳﻞ اﺻﻠﻲ ﭘﻴﻜﺮﺑﻨﺪي ‪Apache‬‬

‫‪C:\Program Files\EasyPHP\conf_files\php.ini‬‬ ‫‪-‬‬

‫ﻓﺎﻳﻞ اﺻﻠﻲ ﭘﻴﻜﺮﺑﻨﺪي ‪PHP‬‬

‫‪C:\Program Files\EasyPHP\conf_files\my.ini‬‬ ‫‪-‬‬

‫ﻓﺎﻳﻞ ﭘﻴﻜﺮﺑﻨﺪي ‪MySql‬‬

‫‪C:\Program Files\EasyPHP\phpmyadmin\config.inc.php‬‬ ‫‪-‬‬

‫ﻓﺎﻳﻞ ﭘﻴﻜﺮﺑﻨﺪي ‪PHP MyAdmin‬‬
‫ﻫﻤﭽﻨﻴﻦ ‪ EsayPHP‬ﻳﻚ ﻛﭙﻲ از اﻳﻦ ﻓﺎﻳﻞ ﻫﺎ را در ﻣﺴﻴﺮ ‪ C:\ProgramFiles\EasyPHP\safe‬ﻧﮕﻬﺪاري ﻣﻲ ﻛﻨﺪ‪.‬‬
‫اﻳﺠﺎد ﺟﺪول‬
‫در ﺷﻜﻞ زﻳﺮ ﻃﺮﻳﻘﻪ اﻳﺠﺎد ﺟﺪول در ‪ EsayPHP‬را ﻣﺸﺎﻫﺪه ﻣﻲ ﻧﻤﺎﻳﺪ‪ .‬ﺑﺎ ﻛﻠﻴﻚ راﺳـﺖ ﺑـﺮ روي آﻳﻜـﻮن ﻧـﺮم اﻓـﺰار در ﻧـﻮار وﻇﻴﻔـﻪ‬
‫اﻧﺘﺨﺎب ‪ .Configuration/PhpMyAdmin‬در ﻣﺮﺣﻠﻪ اول ﺻﻔﺤﻪ اﺻﻠﻲ ‪ phpMyAdmin‬را ﺑﺎز ﻣﻲ ﻛﻨﻴﺪ‪.‬‬
 ‫ﻧﺮم اﻓﺰار ‪EsayPHP‬‬ ‫‪  196‬ﭘﻴﻮﺳﺖ‬

‫ﻣﺮﺣﻠﻪ دوم‪ :‬در اﻳﻦ ﺻﻔﺤﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻳﻚ ﺑﺎﻧﻚ اﻃﻼﻋﺎﺗﻲ ﺑﺮاي ﺑﺮﻧﺎﻣﻪ ﺧﻮدﺗـﺎن اﻳﺠـﺎد ﻛﻨﻴـﺪ‪ .‬ﺑـﺮاي اﻳﻨﻜـﻪ ﺟـﺪول ﻫـﺎي ﺷـﻤﺎ ﺑﺘﻮاﻧﻨـﺪ‬
‫ﻛﺎراﻛﺘﺮﻫﺎي ﻓﺎرﺳﻲ را ﭘﺸﺘﻴﺒﺎﻧﻲ ﻛﻨﻨﺪ ‪ Collation‬ﺑﺎﻧﻚ را ‪ Utf_persian_ci‬اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪.‬‬

‫ﻣﺮﺣﻠﻪ ﺳﻮم اﻧﺘﺨﺎب ﻧﺎم ﺑﺮاي ﺟﺪول و ﻣﺸﺨﺺ ﻧﻤﻮدن ﺗﻌﺪاد ﻓﻴﻠﺪ ﻫﺎي اﻃﻼﻋﺎﺗﻲ )ﺳﺘﻮن ﻫﺎي ﺟﺪول(‪.‬‬

‫ﻣﺮﺣﻠﻪ ﭼﻬﺎرم ﭘﺮ ﻛﺮدن اﻃﻼﻋﺎت ﻓﻴﻠﺪ ﻫﺎي ﺟﺪول‪.‬‬

‫ﺑﻌﺪ از ذﺧﻴﺮه ﻛﺮدن ﺟﺪول ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮاﺣﺘﻲ ﺑﺎ دﺳﺘﻮرات ‪ sql‬ﺑﺎ اﻳﻦ ﺟﺪول ﻫﺎ ﻛﺎر ﻛﻨﻴﺪ‪.‬‬
‫ﭘﻴﻮﺳﺖ ‪197 ‬‬ ‫ﻧﺮم اﻓﺰار ‪EsayPHP‬‬

‫ﺗﻨﻈﻴﻤﺎت ‪MySql‬‬
‫‪ PhpMyAdmin‬ﺑﺮاي دﺳﺘﺮﺳﻲ ﺑﻪ ‪ MySql‬ﻳﻚ ﻛﺪ ﻛﺎرﺑﺮي '‪ 'root‬ﺑﺪون رﻣﺰ ﻋﺒﻮر اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ‬
‫ﺑﺮاي ﺗﻐﻴﻴﺮ رﻣﺰ ﻋﺒﻮر ﻣﺮاﺣﻞ زﻳﺮ را دﻧﺒﺎل ﻛﻨﻴﺪ‪:‬‬
‫ﻓﺎﻳﻞ ﭘﻴﻜﺮﺑﻨﺪي ‪ PhpMyAdmin‬را ﺑﺎز ﻛﻨﻴﺪ‪(config.inc.php).‬‬

‫ﺧﻂ ﻛﺪ زﻳﺮ را ﭘﻴﺪا ﻛﻨﻴﺪ‪.‬‬

‫;'‪$cfg['Servers'][$i]['auth_type'] = 'config‬‬

‫ﺑﺠﺎي ﻛﻠﻤﻪ '‪ 'config‬ﻛﻠﻤﻪ '‪ 'http‬ﻗﺮار دﻫﻴﺪ‪.‬‬

‫;'‪$cfg['Servers'][$i]['auth_type'] = 'http‬‬
 ‫ﻧﺮم اﻓﺰار ‪EsayPHP‬‬ ‫‪  198‬ﭘﻴﻮﺳﺖ‬

‫ﻓﺎﻳﻞ را ذﺧﻴﺮه ﻛﻨﻴﺪ‪ .‬اﻳﻦ ﺗﻐﻴﻴﺮ ﻣﻮﺟﺐ ﻣﻲ ﺷﻮد ‪ PhpMyAdmin‬ﻫﺮ زﻣﺎن ﻛﻪ اﺟـﺮا ﺷـﻮد از ﺷـﻤﺎ رﻣـﺰ ﻋﺒـﻮر را درﺧﻮاﺳـﺖ ﻛﻨـﺪ‪ .‬در‬
‫ﻣﺮﺣﻠﻪ ﺑﻌﺪ از آﻳﻜﻮن ‪ PhpMyAdmin ،EsayPhp‬را اﺟﺮا ﻛﻨﻴﺪ‪.‬‬

‫در ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ داده ﺷﺪه ﮔﺰﻳﻨﻪ '‪ 'Privileges‬را اﻧﺘﺨﺎب ﻛﻨﻴﺪ‪.‬‬

‫در اﻳﻦ ﺻﻔﺤﻪ ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻛﺎرﺑﺮي را اﺿﺎﻓﻪ‪ ،‬ﺣﺬف ﻳﺎ ﺗﻐﻴﻴﺮي در ﻣﺸﺨﺼﺎت آن اﻳﺠﺎد ﻛﻨﻴﺪ‪ .‬ﺑﺮاي ﺗﻐﻴﻴﺮ رﻣﺰ ﻋﺒﻮر آﻳﻜﻮن ‪Edit‬‬
‫‪ Privileges‬را اﻧﺘﺨﺎب ﻧﻤﺎﻳﺪ‪.‬‬
‫ﭘﻴﻮﺳﺖ ‪199 ‬‬ ‫ﻧﺮم اﻓﺰار ‪EsayPHP‬‬

‫رﻣﺰ ﻋﺒﻮر ﺟﺪﻳﺪ ﺧﻮد را ﺗﺎﻳﭗ ﻛﺮده و دﻛﻤﻪ ‪ ok‬را ﻛﻠﻴﻚ ﻛﻨﻴﺪ‪.‬‬

‫اﻳﻦ ﻧﺮم اﻓﺰار ﺑﺴﻴﺎر ﺳﺎده و ﻛﺎرآﻣﺪ ﻣﻲ ﺑﺎﺷﺪ ﺷﻤﺎ ﺑﺮاﺣﺘﻲ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮﻧﺎﻣﻪ ﻫﺎي ﺧﻮد را ﻧﻮﺷﺘﻪ و ﺗﺴﺖ ﻛﻨﻴﺪ‪.‬‬
‫ﻧﺮم اﻓﺰار ‪EsayPHP‬‬ ‫‪  200‬ﭘﻴﻮﺳﺖ‬
 :‫ﻣﻨﺎﺑﻊ‬

1-ASP.NET AJAX in Action

Copyright ©2008 by Manning Publications Co.
by: ALESSANDRO GALLO, DAVID BARKOL,RAMA KRISHNA VAVILALA

2-Ajax in Action
Copyright ©2006 by Manning Publications Co.
by: DAVE CRANE, ERIC PASCARELLO, WITH DARREN JAMES

3-Professional Ajax 2nd Edition

Copyright © 2007 by Wiley Publishing,
by: Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett

4-Beginning Ajax with ASP.NET

Copyright © 2006 by Wiley Publishing,Inc.
by: Wallace B. McClure, Scott Cate, Paul Glavich, Craig
Shoemaker

5-Ajax For Dummies®

Copyright © 2006 by Wiley Publishing, Inc.
by: Steve Holzner,PhD

6-Ajax Patterns and Best Practices

Copyright © 2006 by Apress Publishing, Inc.
by: Christian Gross

7-http://ajax.asp.net/

8-www.getfirebug.com