برنامه های تحت وب با استفاده از Ajax

صفحه 1:


صفحه 2:
[es = an 1 0 

صفحه 3:
فهر سنت : ale toes: JavaScript XML DOM XMLHttpRequest ‏شيء‎ Ajax piste چگونگی به كار كيرى فناورى هاى مختلف در 8 تفاوت مدل 8 با مدل کلاسیک برتامه های تحت وب Ajax ‏مزایای‎ 3 3 % 

صفحه 4:
مقدمه : عله فناوبیلستکه به کمکآنمی‌تولن 6 يكسرنامه تحتهبوا طورعساختكه وقتىكاربر روىودكمه يالينكىكليكمىكند. كليه عملیا نار سا لطلاعانتو در,یافستایج در پسشتصحنه لنجام شود و ‎Interface jb. i] bid‏ که قرار لست لطلاعانجدید را به نمایشدرآورد تغییر کندبدین لینکه تمام صفحه از نو بارگذابی‌شود. 

صفحه 5:
اصطلاح <۸13 را اولین بار در سال 2005 کارشناسی از ‎Adaptive Path oS ww‏ به نام جسی جیمز گرت در مقاله أى تحت عنوان ‎Ajax : A New Approach to Web”:‏ ‎“Application‏ مطرح کرد. با این حال تاریخچه فناوری هایی برای بارگذاری غیر هر وید محتویات یک صقحه وب بدون تبار به بارگذاری دوباره صفحه, به عناصر ( 1996-1۴83 )۱۴8۵۱۱8 و عناصر ‎LAYER (Netspace4-1997)‏ باز می گردد. مایکروسافت در5ع! ‎L, XMLHttpRequest(XHR)s nw‏ ارائه کرده و برای اولین بار در ۸66655 ۷۷۵9 0۷۲۱۵۵۷ از انن روش ا استفاده از شیء ۲۱۲۱8 بهره حست. 

صفحه 6:
232 جسک Ajax: Asynchronous JavaScript And XML XML gy JavaScript ‏استفاده نامتفارن از‎ ‏از آن‌ها استفاده می‌شود عبارت‌اند از:‎ Ajax ‏تکنولوژی‌هایی كه در‎ .)55 ‏نمایش استاندارد با استفاده از ,۳117۷11و‎ 7 Document Object Model jl ‏نمایش پویایی و تعاملات با استفاده‎ 7 (DOM) 365101 ‏تبادل و دستكارى داده با استفاده از 3)1 و‎ gXMLHttpRequest 5) oti ‏"*_بازیابی داده‌ها بصورت غير همروند با‎ ‏جاوااسكربيت براى سرهمبندى همه جيز با هم.‎ 

صفحه 7:
JavaScript : " موجود بودن هم به صورت ساخت يافته و هم به صورت شی گرا 7 سهولت یادگیری و کار با آن * طراحی شده برای ردیابی هر نوع ورودی ای پردازش اطلاعات ورودی به حداقل رساندن زمان 10801 شدن صفحه وب به خاطر سادگی ‎JavaScript‏ بهینه کردن مرور وب جای گرفتن محاسبه گرهای 32۷35011۳01[ در یک صفحه تنها 7 ساخت فرم های دینامیکی © نیاز نداشتن به هیچ نرم افزار یا ‎Plug-in‏ كمكى براى اجرا 

صفحه 8:
XML (Extensible Markup Language) : * همچون ,11۷11 13 یک زبان نشانه گذاری * زبان رایج برای تبادل داده و سازماندهی داده ها برای به اشتراک گذاری 7" قابلیت رده بندی داده ها *" خلق نقش های بسیار دقیقی برای قالب بندی داده ها 7 توانایی گرفتن خروجی در محل های مختلف از آن "7 وابسته و محدود نبودن به یک دستگاه یا پلت فرم خاص " از پیش تعریف شده نبودن تگ های ,261711 

صفحه 9:
DOM(Document Object Model) مدل شی گرای سند(]1(6(1۷) عنوان یکی از دو معماری عمده ای است که بر اساس آن سند های ,261۷11 (از جمله :111۷]1) را به اشیای موجود در آن تجزبه نموده و آن را به صورت یک ساختار درختی داده ها در فضای حافظه اصلی پهن می کنیم. به منظور اجرا و پیاده سازی ]12601۷ باید از یک زبان برنامه نويسى سطح بالا همجون :2525601121 [. 0#): 3172[ يا مشابه آنها استفاده كنيم. 

صفحه 10:
XMLHttpRequest ‏شیء‎ "7 اجازه انتقال نامتقارن اطلاعات به صفحات وب ارتباط با سروردر 0 7۵5[ برخی از خصوصیات و توابع شی ء ‎la LEXAR‏ © 060]610: بسرقرار کردنیکه رخولسجدید بسرلییکسرور 7 086190 :ارسللت قاضاب» سرور 7 ۵16 ۳6۵05: عدیکه ن‌شانگر وضعیتقاضایمابه سرور لست ‎٠‏ :عدم آغاز ارتباط ) ‎(uninitialized‏ ‎١‏ : حالت باز ( اعم 0) ۳ :اتمام ارسال ) ‎(sent‏ ۳ حالت دریافت ( ‎(receiving‏ ‏۴ اتمام بارگذاری ( 108060) 10 

صفحه 11:
, ‏(ادامه)‎ XMLHttpRequest sym "7 0۸۲0۲ : قطع تقاضای‌در حللهیشروی ۲6۵9۹6 ۰ پاسخ به صوريشته متنی DOM XML. ‏پساسخ‌بسه صورتشسیء‎ : 16517 56150077 هه : پاسخ به صورتآرلیه لی 1 ‏وضعیت]]1۷]‎ 5 : status ‎Status s.:statusText‏ | شرح می‌دهد ‎onreadyStateChang:‏ : لشاره كر به تابعىكه بايد هنكام تغییر حا لتخصوصیت6] ]56۵01۷۹ لجرا شود. ‏0۳۲6۵06۲5 61۸111650096 : د ریاف یسک املی‌از سروند های ‎lois Http‏ ‎vols Htt psoas r5, dL, »2: getResponseHeader ~ ‏۲ آه: لضافه کردنیکسروند 1110 سفایشوبه تقاضا ‎ ‎ 

صفحه 12:
Ajax pile نحوه عملکرد وب کلاسیک به ترتیب زیر است: * بار گذاری صفحه مورد نظر برای اولین بار '“* ارسال تقاضای کاربر از طریق مرور گر به سرور © قطع ارتباط کاربر با نرم افزار "* ارسال پاسخ توسط سرور و به روز شدن قسمت مورد نظر در صفحه این نحوه عملکرد وب کلاسیک باعث کاهش بازده سرور . مصرف پهنای باند و تلف شدن وقت و هزینه است اما به کار گیری تکنیک 23[ اين مشکلات را برطرف می کند. 

صفحه 13:
مکانیزم »۸2 (ادامه) . 

صفحه 14:
مکانیزم ۸5 (ادامه) . به کمک ۸87 : * هر عمل از سوی کاربر موجب تولید یک تقاضای ‎FIttp‏ فراخوانی یک فرمان جاوا اسکر یپتی هدایت آن به موتور ‎Ajax‏ پاسخ سرور به کاربر بدون نیاز به ارسال صفحه جدید * به روز شدن قسمتى كه بايد تغيير كند 

صفحه 15:
مکانیزم ‎(aghal) Ajax‏ : در واقع می توان عملکرد 3[ را به صورت زیر توصیف کرد : * عمل کردن به صورت یک لایه اضافی بین مرور گر کاربر و سرور وب " _پیاده سازی ارتباطات سرور در پس زمینه * مسدود نشدن صفحه درون مرورگر ‎Client‏ ‏© پردازش نتایج دریافت پاسخ از سرور * به روز کردن رابط کاربر این به معنی غیر همروند بودن در عملکرد تکنیک 8:6[ است. 

صفحه 16:
مکانیزم ۸۵ (ادامه) . شکل زیر مقیسه ای رانشانمي دهد که امه های نحت وب سنتي جدكونه كنش هاى كاربر را مديريت مي كند و 33 جتكونه همين عمليات را كتترل مي كت browser client ser iterfoce 1 aavascrpt can HTMLSS dete 1 Ajax engine ‎sata‏ مور ‎oe ‎ia transport ‎web and/or XML sever ۷ + ۳ processing, legacy eyateme server-side systems Ajax web application model ‎16 ‎browser client user interface ‎—— ‎5 transport ‎HIML+CSS onta ‎web server ۷ ۸ ۳ proeessng, legacy systems server-side systems ‎classic ‎web application model “esse James Garrett / adaptivepeth com 

صفحه 17:
17 (اداهوی. ‎salted AJAX jl SI‏ كند . ثماس ميان كاربر و 110161188 هر كز قطع نمى شود او همواه نم افزر را در دسترس و پیش روی غود مي بيند وموتور ‎AJR‏ در بشت صبخنه عملیات ارسال و دریافت داه ها رز مدیریت می کند ‘lassic web application model (synchronous) ‏اف‎ 

صفحه 18:
چکونگکی به کار کیری فناوری های مختلف در ‎Ajax‏ می توان نقش تکنیک های 2۷۵5017101[ و 20۳01 را در 23 به صورت زیر توصیف کرد : ung 22 5 Ajax ab» j| com5: JavaScript * ‏زمينه مرو ركر كاربر لنجام مىوشود‎ * ,]26۷1 : لبزار رلیج برلیک دینگو ف رمتررسالطلاعاتب رلی ‎oA Sil‏ 18 

صفحه 19:
جکونگی به کارگیری فناوری های مختلف در ۸۱3۵۶ (ادامه). مراحل کلی ‎awh‏ به تقاضای کاربر در 806[ را به صورت زیر می باشد : اعلام درخواست از سوی کاربر از طریق یک رویداد فرستاده شدن درخواست کاربر از طر یق شیء ۴ به سرور ارسال پاسخ از سوی سرور به صورت داده :261۷11 ۰ © پردازش پاسخ دریافت شده توسط موتور 336 ل به روز کردن قسمتی از صفحه ,]۲1۷۲ ۴1 با استفاده از فناوری ‎DOM‏ 

صفحه 20:
چگونگی به کارگیری فناوری های مختلف در ۸ (ادامه). 

صفحه 21:
تفاوت مدل <۸[2 با مدل کلاسیک برنامه های تحت وب اگر بخواهیم برنامه های رومیزی را با برنامه های تحت وب ( قبل از ظهور ‎٩307‏ ) مقایسه کنیم به جدول زیر می. 21 رسیمز رت سرعت اجرای بالا ارتباط پیوسته کاربر در حین اجرای برنامه امكانات كرافيكى زياد و محيط بويا عدم به روز بودن ادر سرعت پایین وجود ۲011251 در حین کار با برنامه اجرا در تمامی سیستم عامل ها امنیت کمتر به جهت اجرا شدن روی شبکه ای بسیار بزرگ از کامیوتر ها و دسترسی میلیون ها کاربر به آن 

صفحه 22:
تفاوت مدل ‎Jae by Ajax‏ کلاسیک برنامه های تحت وب (ادامه) : هدف اصلی از ارائه مدل 37[ : نزدیک کردن برنامه های تحت وب به برنامه های رومیزی اما تفاوت های این دو مدل را می توان به صورت زیر بیان کرد: بار گذاری شدن موتور ۸8 ( کدهای 12۷۵501101) در ابتدا در مدل ۸87 * قطع نشدن ارتباط كاربر با نماى سايت * عدم وجود 16116512 هاى متوالى باركذارى نكردن مجدد قسمت هاى ثابت استفاده از امكانات كرافيكى بيشتردر انجام امور 

صفحه 23:
Ajax ‏مزایای‎ ** حرکت صنعت نرم افزار در عرصه وب به سوی سیستم هایی مستقل از نوع سيستم عامل و مرور گر مورد استفاده کاربر 7 سرعت آن(به علت غنی بودن ‎(Client‏ * استفاده کمتر از امکانات و منابع سرور 7 فناوری مرتبط با 10]61206] برنامه های تحت وب "7 دریافت فرامین ارسال و دریافت اطلاعات نه فقط از طریق سایت اصلی نمایش دهنده صفحه وب 23 

صفحه 24:
Ajax ‏معايب‎ "* عدم کارایی مناسب دکمه های 1386016 و ۳0۲۷۵۲۵ ** بی معنی شدن منهوم 13001002116 XMLHttpRequest 4 ‏وابستكى‎ ”* حجم زياد كد :]217256112[ استفاده شده در نرم افزارهای مبتنى » ‎Ajax‏ "7 ایمن نبودن ارتباط ‎Client‏ 561۷76 در اين فناوری 

صفحه 25:
نمونه کد لو اسسی در ‎Ajax‏ ‏کد زیر نمونه ای از اعلان شی ‏ 010650 13110130 .26۳11 را تشان می دهد : <script language="javascript” type="text/javascript”> var xmlHttp=new XMLHttpRequest() </script> : ‏مایکروسافتی نشان می دهد‎ sla S90 43 |, XMLHttpRequest « 4 ollel jl l dgei 2) 35 var xmlHttp=false; try { xmlHttp=new ActiveXobject(“Msxml2.XMLHTTP”); } catch(e) { ty xmlHttp=new ActiveXobject(“Microsoft.XMLHTTP”); } catch(e2) { xmlHttp=false; 1 1 

صفحه 26:
نمو‌نه کد نو بسی در :۸3 (ادامه) : کد زیر نمونه ای از کدتویسی 3۷8507310[ را نشان می دهد . 33۴[ به وفور از متدولوژی ‎DOM‏ 99 ‎JavaScript‏ » 211111 استفاده می کنیم : Get the value of the “phone” field and stuff it in a// variable called phone jvar phone=document.getElementByld(“phone”).value set some values on a form using an array called// response ;document.getElementByld(“order”).value=response[0] document.getElementByld(“address”).value=response[1 11 

صفحه 27:
نمونه کد نو بسی در ۸3 (ادامه) . کد نمونه از روش ارسال یک تقاضا به وسیله 2[ را نشان می دهد : Function callServer() { //Get the city and state from the web form var city=document.getElementByld(“city”).value; var state=document.getElementByld(“stete”).value; /fonly go on if there are values for both fields =”"")) return; ” “)) return; //Build the URL to connect to var url="/script/getZipCode.php?city=" +escape(city) +" &state="+escape(state); //Open a connection to the server xmlHttp.open(“GET”,url,true); //Set up a function for the server to run when it’s done xmlHttp.onreadyStatechange=updatePage; //Send the request xmlHttp.send(null); 1 

صفحه 28:
نمونه کد نو بسی در ۸3 (ادامه) . أ عاضا من راكد بلقا ياك فسن ار يف مكح وي به كورت كر زير بلقو <form> <p>City: <input 6 ۳ ie <p>State: <input type="text” name="state” id="state” size="25” onChange="callServer();” /></p> <p>Zip Code: <input e="text” name="zipCode” id="city” size="5” /></p> </form> “text” name="city” id="city” 71 نهايتاً باسخ دريافت شده از قسمت سرور را نيز مى توان به وسيله كدى شبيه كد زير مورد استفاده قرار داد : Function updatePage() { If(cmlHttp.readyState==4) { var response=xmlHttp.responseText; document.getElementByld(“zipCode”).value=response; 1 1 2 

صفحه 29:
کاربردهای ۸2 از جمله کاربردها و سایت های استفاده کننده از 8[ می توان موارد زیر را نام برد : Chat © (Google Talk) J555 cz js 

صفحه 30:
۱ ۰۲۱۵۲ ) ‏كل رت‎ Sue y= * تجارت الکترونیک 5 ‎closo.com cl.‏ سایت جستجوگر خرید آمازون 9.0012 * بازی re ‏الكترونيکي‎ Coy Gmail Gmail.com ‏هی‎ MAIL Yahoo! Mail © پیام رسانی اینترنتی 2 2 membo.com wl. a 

صفحه 31:
کار بردهای ‎Ajax‏ ‏( ادامه ) : Google maps ‏نقشه های آنلاین‎ 7" a Google Maps = م تحت ‎ees pee‏ ی ‎ze‏ ‎AjaxWindows‏ ل 1 شسمالجایه می‌دهد فسایلهای‌خود را تسنه از یکمرورگر اذخيره. ويرليشكسنيد و بسه لش ‎Cayecs eyeOS‏ 31 

صفحه 32:
: (aghal) Ajax ‏کار بردهای‎ * جستجوگرها ‎Suggest‏ و Google Personal) oe hii Home. 7 نرم افزارهای اداری تحت وب. نرم افزار تحت وب پردازش متن ‎Writely‏ ‏نرم افزار صفحه گستر تحت وب 5أع5126 571620 000016 

صفحه 33:
نتیجه گیری . 7 برطرف کردن شکاف بین برهم کنش برنامه های رومیزی و هميشه به روز بودن برنامه هاى تحت وب "7 وب گردی پویا و غیرهمروند(بدون ۲6۴6510 هاى متوالى صفحه) مرتبط با ©11216112606 نرم افزارهای تحت وب همه اینها دلایلی است برای ‎Sul‏ باور کنیم که 0 عاملی در پیشرفت برنامه های تحت وب نسل بعد خواهد بود. 33 

صفحه 34:
منابع و مر اجع . منابع فارسی : ۱) نوعی پور بهروز , همه چیز درباره 493 ". ماهنامه شبکه , شماره ۸۴ بهمن ۸۴ ۲) فکری نجات . "نگاهی عبیق به تکنیک ۸۹[23*. ماهنامه دانش و کامپیوتر . شماره ۶۶ : آیان ۸۶ ۳ سایت 1۵9160۳6۷5 منابع انگلیسی: ‎‘Jesse James Garrett. Ajax: A New Approach to Web Applications.‏ ‎http://adaptivepath.com/publications/essays/archives/000385.php.‏ 34 

صفحه 35:
با رک اژ ve @) Lous de> 

صفحه 36:
پرسش و پاسخ :