ارائه دهنده : مونا فدوی

1. جلسه ارائه درس مهندسی اینترنت برنامه های تحت وب با استغاده از Ajax ارائه دهنده : مونا فدوی 1392/4/5

2. به نام خدا

3. فهرست : مقدمه پیشینه Ajax چیست؟ JavaScript XML DOM شیء XMLHttpRequest مکانیزم Ajax چگونگی به کارگیری فناوری های مختلف در Ajax تفاوت مدل Ajax با مدل کلاسیک برنامه های تحت وب مزایای Ajax معایب Ajax نمونه کد های Ajax کاربردهای Ajax نتیجه گیری منابع و مراجع

4. مقدمه : Ajax فناوری است که به کمک آن می توان Interface یک برنامه تحت وب را طوری ساخت که وقتی کاربر روی دکمه یا لینکی کلیک می کند ، کلیه عملیات ارسال اطلاعات و دریافت نتایج در پشت صحنه انجام شود و فقط آن قسمت ازInterface که قرار است اطلاعات جدید را به نمایش درآورد تغییر کند بدون اینکه تمام صفحه از نو بارگذاری شود.

5. پیشینه: اصطلاح Ajax را اولین بار در سال 2005 کارشناسی از شرکت Adaptive Path به نام جسی جیمز گرت در مقاله ای تحت عنوان :”Ajax : A New Approach to Web Application“ مطرح کرد. با این حال تاریخچه فناوری هایی برای بارگذاری غیر همروند محتویات یک صفحه وب، بدون نیاز به بارگذاری دوباره صفحه، به عناصر IFRAME( 1996-IE3 ) و عناصر LAYER (Netspace4-1997) باز می گردد. مایکروسافت درIE5 شیءXMLHttpRequest(XHR) را ارائه کرده و برای اولین بار در Outlook Web Access از این روش با استفاده از شیء XHR بهره جست.

6. Ajax چست؟ Ajax: Asynchronous JavaScript And XML استفاده نامتقارن از JavaScript و XML تکنولوژی‌هایی که در Ajax از آن‌ها استفاده می‌شود عبارت‌اند از: • نمایش استاندارد با استفاده از XHTML و CSS. • نمایش پویایی و تعاملات با استفاده از Document Object Model (DOM). • تبادل و دستکاری داده با استفاده از XML و XSLT. • بازیابی داده‌ها بصورت غیر همروند با استفاده از XMLHttpRequestو جاوااسکریپت برای سرهمبندی همه چیز با هم.

7. JavaScript : • موجود بودن هم به صورت ساخت یافته و هم به صورت شی گرا • سهولت یادگیری و کار با آن • طراحی شده برای ردیابی هر نوع ورودی ای • پردازش اطلاعات ورودی • به حداقل رساندن زمان load شدن صفحه وب به خاطر سادگی JavaScript • بهینه کردن مرور وب • جای گرفتن محاسبه گرهای JavaScript در یک صفحه تنها • ساخت فرم های دینامیکی • نیاز نداشتن به هیچ نرم افزار یا plug-in کمکی برای اجرا

8. XML (Extensible Markup Language) : • همچون HTML یک زبان نشانه گذاری • زبان رایج برای تبادل داده و سازماندهی داده ها برای به اشتراک گذاری • قابلیت رده بندی داده ها • خلق نقش های بسیار دقیقی برای قالب بندی داده ها • توانایی گرفتن خروجی در محل های مختلف از آن • وابسته و محدود نبودن به یک دستگاه یا پلت فرم خاص • از پیش تعریف شده نبودن تگ های XML

9. DOM(Document Object Model) : مدل شی گرای سند(DOM) عنوان یکی از دو معماری عمده ای است که بر اساس آن سند های XML (از جمله HTML) را به اشیای موجود در آن تجزیه نموده و آن را به صورت یک ساختار درختی داده ها در فضای حافظه اصلی پهن می کنیم. به منظور اجرا و پیاده سازی DOM باید از یک زبان برنامه نویسی سطح بالا همچون Java ، C# ، JavaScript یا مشابه آنها استفاده کنیم.

10. شیء XMLHttpRequest: • اجازه انتقال نامتقارن اطلاعات به صفحات وب • ارتباط با سروردر JavaScript برخی از خصوصیات و توابع شی ء XHRعبارتند از: • Open(): برقرار کردن یک درخواست جدید برای یک سرور • Send() : ارسال تقاضا به سرور • readyState : عددی که نشانگر وضعیت تقاضای ما به سرور است : 0 : عدم آغاز ارتباط ( uninitialized ) 1 : حالت باز ( open ) 2 : اتمام ارسال ( sent ) 3 : حالت دریافت ( receiving ) 4 : اتمام بارگذاری ( loaded )

11. شیء XMLHttpRequest (ادامه) : • Abort() : قطع تقاضای در حال پیشروی • responseText : پاسخ به صورت رشته متنی • responseXML : پاسخ به صورت شی ء DOM XML • responseBody : پاسخ به صورت آرایه ای • status : کد وضعیت HTML • statusText : متنی که status را شرح می دهد • onreadyStateChange : اشاره گر به تابعی که باید هنگام تغییر حالت خصوصیت readyState اجرا شود. • getAllResponseHeaders : دریافت لیست کاملی از سروند های Http تقاضا • getResponseHeader : در یافت سروند یک تقاضای Http خاص • setRequestHeader : اضافه کردن یک سروند Http سفارشی به تقاضا

12. مکانیزم Ajax : نحوه عملکرد وب کلاسیک به ترتیب زیر است: • بارگذاری صفحه مورد نظر برای اولین بار • ارسال تقاضای کاربر از طریق مرورگر به سرور • قطع ارتباط کاربر با نرم افزار • ارسال پاسخ توسط سرور و به روز شدن قسمت مورد نظر در صفحه این نحوه عملکرد وب کلاسیک باعث کاهش بازده سرور ، مصرف پهنای باند و تلف شدن وقت و هزینه است اما به کارگیری تکنیک Ajax این مشکلات را برطرف می کند.

13. مکانیزم Ajax (ادامه) :

14. مکانیزم Ajax (ادامه) : به کمک Ajax : هر عمل از سوی کاربر موجب تولید یک تقاضای Http فراخوانی یک فرمان جاوا اسکریپتی هدایت آن به موتور Ajax پاسخ سرور به کاربر بدون نیاز به ارسال صفحه جدید به روز شدن قسمتی که باید تغییر کند

15. مکانیزم Ajax (ادامه) : در واقع می توان عملکرد Ajax را به صورت زیر توصیف کرد : عمل کردن به صورت یک لایه اضافی بین مرورگر کاربر و سرور وب پیاده سازی ارتباطات سرور در پس زمینه مسدود نشدن صفحه درون مرورگر client پردازش نتایج دریافت پاسخ از سرور به روز کردن رابط کاربر این به معنی غیر همروند بودن در عملکرد تکنیک Ajax است.

16. مکانیزم Ajax (ادامه) : شکل زیر مقایسه ای را نشان می دهد که برنامه های تحت وب سنتی چگونه کنش های کاربر را مدیریت می کند و Ajax چگونه همین عملیات را کنترل می کند.

17. مکانیزم Ajax (ادامه) : هنگامی که Interface یک برنامه از Ajax استفاده می کند ، تماس میان کاربر و Interface هرگز قطع نمی شود.او همواره نرم افزار را در دسترس و پیش روی خود می بیند و موتور Ajax در پشت صحنه عملیات ارسال و دریافت داده ها را مدیریت می کند.

18. چگونگی به کارگیری فناوری های مختلف در Ajax : می توان نقش تکنیک های JavaScript و Xml را در Ajax به صورت زیر توصیف کرد : JavaScript : قسمتی از برنامه Ajax که در پس زمینه مرورگر کاربر انجام می شود XML : ابزار رایج برای کدینگ و فرمت ارسال اطلاعات برای انتقال کاراتر

19. چگونگی به کارگیری فناوری های مختلف در Ajax (ادامه): مراحل کلی پاسخ به تقاضای کاربر در Ajax را به صورت زیر می باشد : اعلام درخواست از سوی کاربر از طریق یک رویداد فرستاده شدن درخواست کاربر از طریق شیء XHR به سرور ارسال پاسخ از سوی سرور به صورت داده XML پردازش پاسخ دریافت شده توسط موتور Ajax به روز کردن قسمتی از صفحه HTML با استفاده از فناوری DOM

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

21. تفاوت مدل Ajax با مدل کلاسیک برنامه های تحت وب: اگر بخواهیم برنامه های رومیزی را با برنامه های تحت وب ( قبل از ظهور Ajax ) مقایسه کنیم به جدول زیر می رسیم:

22. تفاوت مدل Ajax با مدل کلاسیک برنامه های تحت وب (ادامه) : هدف اصلی از ارائه مدل Ajax : نزدیک کردن برنامه های تحت وب به برنامه های رومیزی اما تفاوت های این دو مدل را می توان به صورت زیر بیان کرد: بارگذاری شدن موتور Ajax ( کدهای JavaScript ) در ابتدا در مدل Ajax قطع نشدن ارتباط کاربر با نمای سایت عدم وجود refresh های متوالی بارگذاری نکردن مجدد قسمت های ثابت استفاده از امکانات گرافیکی بیشتردر انجام امور

23. مزایای Ajax : • حرکت صنعت نرم افزار در عرصه وب به سوی سیستم هایی مستقل از نوع سیستم عامل و مرورگر مورد استفاده کاربر • سرعت آن(به علت غنی بودن client) • استفاده کمتر از امکانات و منابع سرور • فناوری مرتبط با Interface برنامه های تحت وب • دریافت فرامین ارسال و دریافت اطلاعات نه فقط از طریق سایت اصلی نمایش دهنده صفحه وب

24. معایب Ajax : • عدم کارایی مناسب دکمه های Back و Forward • بی معنی شدن مفهوم Bookmark • وابستگی به XMLHttpRequest • حجم زیاد کد JavaScript استفاده شده در نرم افزارهای مبتنی بر Ajax • ایمن نبودن ارتباط client و server در این فناوری

25. نمونه کد نویسی در Ajax : کد زیر نمونه ای از اعلان شی ء XMLHttpRequest را نشان می دهد : <script language=”javascript” type=”text/javascript”> var xmlHttp=new XMLHttpRequest() </script> کد زیر نمونه ای از اعلان شی ء XMLHttpRequest را در مرورگر های مایکروسافتی نشان می دهد : var xmlHttp=false; try { xmlHttp=new ActiveXobject(“Msxml2.XMLHTTP”); } catch(e) { try { xmlHttp=new ActiveXobject(“Microsoft.XMLHTTP”); } catch(e2) { xmlHttp=false; } }

26. نمونه کد نویسی در Ajax (ادامه) : کد زیر نمونه ای از کدنویسی JavaScript را نشان می دهد . Ajax به وفور از متدولوژی DOM در JavaScript و DHTML استفاده می کنیم : //Get the value of the “phone” field and stuff it in a variable called phone var phone=document.getElementById(“phone”).value; //set some values on a form using an array called response document.getElementById(“order”).value=response[0]; document.getElementById(“address”).value=response[1];

27. نمونه کد نویسی در Ajax (ادامه) : کد نمونه از روش ارسال یک تقاضا به وسیله Ajax را نشان می دهد : Function callServer() { //Get the city and state from the web form var city=document.getElementById(“city”).value; var state=document.getElementById(“stete”).value; //only go on if there are values for both fields If((city==null) \\ (city==” ”)) return; If((state==null) \\ (state==” “)) 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); }

28. نمونه کد نویسی در Ajax (ادامه) : این تقاضا می تواند مثلاً یک قسمتی از یک صفحه وب به صورت کد زیر باشد : <form> <p>City: <input type=”text” name=”city” id=”city” size=”25” onChange=”callServer();” /></p> <p>State: <input type=”text” name=”state” id=”state” size=”25” onChange=”callServer();” /></p> <p>Zip Code: <input type=”text” name=”zipCode” id=”city” size=”5” /></p> </form> نهایتاً پاسخ دریافت شده از قسمت سرور را نیز می توان به وسیله کدی شبیه کد زیر مورد استفاده قرار داد : Function updatePage() { If(xmlHttp.readyState==4) { var response=xmlHttp.responseText; document.getElementById(“zipCode”).value=response; } }

29. کاربردهای Ajax : از جمله کاربردها و سایت های استفاده کننده از Ajax می توان موارد زیر را نام برد : • Chat سرویس چت گوگل (Google Talk)

30. کاربردهای Ajax ( ادامه ) : • تجارت الکترونیک سایت closo.com سایت جستجوگر خرید آمازون A9.com • بازی • پست الکترونیکی Gmail.com Yahoo! Mail • پیام رسانی اینترنتی سایت membo.com

31. کاربردهای Ajax ( ادامه ) : • نقشه های آنلاین Google Maps • سیستم عامل های تحت وب AjaxWindows AjaxWindows یک سیستم عامل مجازی است که به شما اجازه می دهد فایل های خود را تنها از یک مرورگر ذخیره ، ویرایش کنید و به اشتراک بگذارید. eyeOS

32. کاربردهای Ajax ( ادامه ) : • جستجوگرها Google Suggest • پورتال سرویس پورتال گوگل (Google Personal HomePage) • نرم افزارهای اداری تحت وب نرم افزار تحت وب پردازش متن Writely نرم افزار صفحه گستر تحت وب Google Spread Sheets

33. نتیجه گیری : • برطرف کردن شکاف بین برهم کنش برنامه های رومیزی و همیشه به روز بودن برنامه های تحت وب • وب گردی پویا و غیرهمروند(بدون refresh های متوالی صفحه) • مرتبط با Interface نرم افزارهای تحت وب همه اینها دلایلی است برای اینکه باور کنیم که Ajax عاملی در پیشرفت برنامه های تحت وب نسل بعد خواهد بود.

34. منابع و مراجع : منابع فارسی : 1) نوعی پور بهروز ، ”همه چیز درباره Ajax ” ، ماهنامه شبکه ، شماره 84 ، بهمن 84 2) فکری نجات ، ”نگاهی عمیق به تکنیک Ajax“ ، ماهنامه دانش و کامپیوتر ، شماره 66 ، آبان 86 3) سایت IranIctNews منابع انگلیسی: Jesse James Garrett. Ajax: A New Approach to Web Applications. http://adaptivepath.com/publications/essays/archives/000385.php.

35. با تشکر از توجه شما

36. پرسش و پاسخ :