برنامه های تحت وب با استفاده از Ajax
اسلاید 1: ارائه دهنده : مونا فدویبرنامه های تحت وب با استغاده از Ajaxجلسه ارائه درس مهندسی اینترنت1392/4/5
اسلاید 2: به نام خدا2
اسلاید 3: مقدمهپیشینه Ajax چیست؟JavaScriptXMLDOMشیء XMLHttpRequestمکانیزم Ajax چگونگی به کارگیری فناوری های مختلف در Ajax تفاوت مدل Ajax با مدل کلاسیک برنامه های تحت وبمزایای Ajax معایب Ajax نمونه کد های Ajax کاربردهای Ajaxنتیجه گیریمنابع و مراجع3فهرست :
اسلاید 4: مقدمه :Ajax فناوری است که به کمک آن می توان Interface یک برنامه تحت وب را طوری ساخت که وقتی کاربر روی دکمه یا لینکی کلیک می کند ، کلیه عملیات ارسال اطلاعات و دریافت نتایج در پشت صحنه انجام شود و فقط آن قسمت ازInterface که قرار است اطلاعات جدید را به نمایش درآورد تغییر کند بدون اینکه تمام صفحه از نو بارگذاری شود.4
اسلاید 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 بهره جست.5
اسلاید 6: Ajax چست؟Ajax: Asynchronous JavaScript And XMLاستفاده نامتقارن از JavaScript و XMLتکنولوژی‌هایی که در Ajax از آنها استفاده می‌شود عبارت‌اند از:نمایش استاندارد با استفاده از XHTML و CSS.نمایش پویایی و تعاملات با استفاده از Document Object Model (DOM).تبادل و دستکاری داده با استفاده از XML و XSLT.بازیابی داده‌ها بصورت غیر همروند با استفاده از XMLHttpRequestو جاوااسکریپت برای سرهمبندی همه چیز با هم.6
اسلاید 7: JavaScript :موجود بودن هم به صورت ساخت یافته و هم به صورت شی گرا سهولت یادگیری و کار با آنطراحی شده برای ردیابی هر نوع ورودی ای پردازش اطلاعات ورودی به حداقل رساندن زمان load شدن صفحه وب به خاطر سادگی JavaScript بهینه کردن مرور وبجای گرفتن محاسبه گرهای JavaScript در یک صفحه تنها ساخت فرم های دینامیکی نیاز نداشتن به هیچ نرم افزار یا plug-in کمکی برای اجرا 7
اسلاید 8: XML (Extensible Markup Language) : همچون HTML یک زبان نشانه گذاری زبان رایج برای تبادل داده و سازماندهی داده ها برای به اشتراک گذاری قابلیت رده بندی داده ها خلق نقش های بسیار دقیقی برای قالب بندی داده ها توانایی گرفتن خروجی در محل های مختلف از آنوابسته و محدود نبودن به یک دستگاه یا پلت فرم خاصاز پیش تعریف شده نبودن تگ های XML 8
اسلاید 9: DOM(Document Object Model) : مدل شی گرای سند(DOM) عنوان یکی از دو معماری عمده ای است که بر اساس آن سند های XML (از جمله HTML) را به اشیای موجود در آن تجزیه نموده و آن را به صورت یک ساختار درختی داده ها در فضای حافظه اصلی پهن می کنیم.به منظور اجرا و پیاده سازی DOM باید از یک زبان برنامه نویسی سطح بالا همچون Java ، C# ، JavaScript یا مشابه آنها استفاده کنیم.9
اسلاید 10: شیء XMLHttpRequest: اجازه انتقال نامتقارن اطلاعات به صفحات وبارتباط با سروردر JavaScriptبرخی از خصوصیات و توابع شی ء XHRعبارتند از: Open(): برقرار کردن یک درخواست جدید برای یک سرور Send() : ارسال تقاضا به سرورreadyState : عددی که نشانگر وضعیت تقاضای ما به سرور است : 0 : عدم آغاز ارتباط ( uninitialized ) 1 : حالت باز ( open ) 2 : اتمام ارسال ( sent ) 3 : حالت دریافت ( receiving ) 4 : اتمام بارگذاری ( loaded )10
اسلاید 11: شیء XMLHttpRequest (ادامه) : Abort() : قطع تقاضای در حال پیشرویresponseText : پاسخ به صورت رشته متنیresponseXML : پاسخ به صورت شی ء DOM XMLresponseBody : پاسخ به صورت آرایه ای status : کد وضعیت HTMLstatusText : متنی که status را شرح می دهدonreadyStateChange : اشاره گر به تابعی که باید هنگام تغییر حالت خصوصیت readyState اجرا شود.getAllResponseHeaders : دریافت لیست کاملی از سروند های Http تقاضاgetResponseHeader : در یافت سروند یک تقاضای Http خاصsetRequestHeader : اضافه کردن یک سروند Http سفارشی به تقاضا11
اسلاید 12: مکانیزم Ajax :نحوه عملکرد وب کلاسیک به ترتیب زیر است:بارگذاری صفحه مورد نظر برای اولین بارارسال تقاضای کاربر از طریق مرورگر به سرور قطع ارتباط کاربر با نرم افزار ارسال پاسخ توسط سرور و به روز شدن قسمت مورد نظر در صفحهاین نحوه عملکرد وب کلاسیک باعث کاهش بازده سرور ، مصرف پهنای باند و تلف شدن وقت و هزینه است اما به کارگیری تکنیک Ajax این مشکلات را برطرف می کند.12
اسلاید 13: مکانیزم Ajax (ادامه) :13
اسلاید 14: مکانیزم Ajax (ادامه) :به کمک Ajax :هر عمل از سوی کاربر موجب تولید یک تقاضای Http فراخوانی یک فرمان جاوا اسکریپتیهدایت آن به موتور Ajax پاسخ سرور به کاربر بدون نیاز به ارسال صفحه جدیدبه روز شدن قسمتی که باید تغییر کند 14
اسلاید 15: مکانیزم Ajax (ادامه) :در واقع می توان عملکرد Ajax را به صورت زیر توصیف کرد :عمل کردن به صورت یک لایه اضافی بین مرورگر کاربر و سرور وبپیاده سازی ارتباطات سرور در پس زمینهمسدود نشدن صفحه درون مرورگر clientپردازش نتایج دریافت پاسخ از سروربه روز کردن رابط کاربراین به معنی غیر همروند بودن در عملکرد تکنیک Ajax است.15
اسلاید 16: مکانیزم Ajax (ادامه) :شکل زیر مقایسه ای را نشان می دهد که برنامه های تحت وب سنتی چگونه کنش های کاربر را مدیریت می کند و Ajax چگونه همین عملیات را کنترل می کند.16
اسلاید 17: مکانیزم Ajax (ادامه) :هنگامی که Interface یک برنامه از Ajax استفاده می کند ، تماس میان کاربر و Interface هرگز قطع نمی شود.او همواره نرم افزار را در دسترس و پیش روی خود می بیند و موتور Ajax در پشت صحنه عملیات ارسال و دریافت داده ها را مدیریت می کند.17
اسلاید 18: چگونگی به کارگیری فناوری های مختلف در Ajax :می توان نقش تکنیک های JavaScript و Xml را در Ajax به صورت زیر توصیف کرد :JavaScript : قسمتی از برنامه Ajax که در پس زمینه مرورگر کاربر انجام می شودXML : ابزار رایج برای کدینگ و فرمت ارسال اطلاعات برای انتقال کاراتر 18
اسلاید 19: چگونگی به کارگیری فناوری های مختلف در Ajax (ادامه):مراحل کلی پاسخ به تقاضای کاربر در Ajax را به صورت زیر می باشد :اعلام درخواست از سوی کاربر از طریق یک رویدادفرستاده شدن درخواست کاربر از طریق شیء XHR به سرورارسال پاسخ از سوی سرور به صورت داده XML پردازش پاسخ دریافت شده توسط موتور Ajaxبه روز کردن قسمتی از صفحه HTML با استفاده از فناوری DOM19
اسلاید 20: چگونگی به کارگیری فناوری های مختلف در Ajax (ادامه):20
اسلاید 21: تفاوت مدل Ajax با مدل کلاسیک برنامه های تحت وب: اگر بخواهیم برنامه های رومیزی را با برنامه های تحت وب ( قبل از ظهور Ajax ) مقایسه کنیم به جدول زیر می رسیم: برنامه های تحت وببرنامه های رومیزی سرعت پایینسرعت اجرای بالا وجود refresh در حین کار با برنامه ارتباط پیوسته کاربر در حین اجرای برنامه امکانات گرافیکی کمترامکانات گرافیکی زیاد و محیط پویابه روز بودنعدم به روز بودناجرا در تمامی سیستم عامل هاعدم اجرا در همه سیستم عامل هاامنیت کمتر به جهت اجرا شدن روی شبکه ای بسیار بزرگ از کامیوتر ها و دسترسی میلیون ها کاربر به آنامنیت بیشتر و خطرات کمتر21
اسلاید 22: تفاوت مدل Ajax با مدل کلاسیک برنامه های تحت وب (ادامه) : هدف اصلی از ارائه مدل Ajax : نزدیک کردن برنامه های تحت وب به برنامه های رومیزی اما تفاوت های این دو مدل را می توان به صورت زیر بیان کرد:بارگذاری شدن موتور Ajax ( کدهای JavaScript ) در ابتدا در مدل Ajax قطع نشدن ارتباط کاربر با نمای سایت عدم وجود refresh های متوالی بارگذاری نکردن مجدد قسمت های ثابتاستفاده از امکانات گرافیکی بیشتردر انجام امور 22
اسلاید 23: مزایای Ajax : حرکت صنعت نرم افزار در عرصه وب به سوی سیستم هایی مستقل از نوع سیستم عامل و مرورگر مورد استفاده کاربرسرعت آن(به علت غنی بودن client)استفاده کمتر از امکانات و منابع سرورفناوری مرتبط با Interface برنامه های تحت وبدریافت فرامین ارسال و دریافت اطلاعات نه فقط از طریق سایت اصلی نمایش دهنده صفحه وب23
اسلاید 24: معایب Ajax :عدم کارایی مناسب دکمه های Back و Forward بی معنی شدن مفهوم Bookmark وابستگی به XMLHttpRequest حجم زیاد کد JavaScript استفاده شده در نرم افزارهای مبتنی بر Ajax ایمن نبودن ارتباط client و server در این فناوری24
اسلاید 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; } } 25
اسلاید 26: نمونه کد نویسی در Ajax (ادامه) : کد زیر نمونه ای از کدنویسی JavaScript را نشان می دهد . Ajax به وفور از متدولوژی DOM در JavaScript و DHTML استفاده می کنیم : //Get the value of the “phone” field and stuff it in a variable called phonevar phone=document.getElementById(“phone”).value;//set some values on a form using an array called responsedocument.getElementById(“order”).value=response[0];document.getElementById(“address”).value=response[1];26
اسلاید 27: نمونه کد نویسی در Ajax (ادامه) :کد نمونه از روش ارسال یک تقاضا به وسیله Ajax را نشان می دهد : Function callServer() {//Get the city and state from the web formvar city=document.getElementById(“city”).value;var state=document.getElementById(“stete”).value;//only go on if there are values for both fieldsIf((city==null) (city==” ”)) return;If((state==null) (state==” “)) return;//Build the URL to connect tovar url=”/script/getZipCode.php?city=”+escape(city)+”&state=”+escape(state);//Open a connection to the serverxmlHttp.open(“GET”,url,true);//Set up a function for the server to run when it’s donexmlHttp.onreadyStatechange=updatePage;//Send the requestxmlHttp.send(null);}27
اسلاید 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;} }28
اسلاید 29: کاربردهای Ajax : از جمله کاربردها و سایت های استفاده کننده از Ajax می توان موارد زیر را نام برد :Chat سرویس چت گوگل (Google Talk)29
اسلاید 30: کاربردهای Ajax ( ادامه ) : تجارت الکترونیک سایت closo.com سایت جستجوگر خرید آمازون A9.comبازیپست الکترونیکیGmail.com Yahoo! Mail پیام رسانی اینترنتیسایت membo.com 30
اسلاید 31: کاربردهای Ajax ( ادامه ) : نقشه های آنلاینGoogle Maps سیستم عامل های تحت وبAjaxWindows AjaxWindows یک سیستم عامل مجازی است که به شما اجازه می دهد فایل های خود را تنها از یک مرورگر ذخیره ، ویرایش کنید و به اشتراک بگذارید.eyeOS 31
اسلاید 32: کاربردهای Ajax ( ادامه ) : جستجوگرهاGoogle Suggest پورتالسرویس پورتال گوگل (Google Personal HomePage)نرم افزارهای اداری تحت وبنرم افزار تحت وب پردازش متن Writely نرم افزار صفحه گستر تحت وب Google Spread Sheets32
اسلاید 33: نتیجه گیری :برطرف کردن شکاف بین برهم کنش برنامه های رومیزی و همیشه به روز بودن برنامه های تحت وبوب گردی پویا و غیرهمروند(بدون refresh های متوالی صفحه)مرتبط با Interface نرم افزارهای تحت وبهمه اینها دلایلی است برای اینکه باور کنیم که Ajax عاملی در پیشرفت برنامه های تحت وب نسل بعد خواهد بود.33
اسلاید 34: منابع و مراجع :منابع فارسی :1) نوعی پور بهروز ، ”همه چیز درباره Ajax ” ، ماهنامه شبکه ، شماره 84 ، بهمن 842) فکری نجات ، ”نگاهی عمیق به تکنیک Ajax“ ، ماهنامه دانش و کامپیوتر ، شماره 66 ، آبان 863) سایت IranIctNews منابع انگلیسی:Jesse James Garrett. Ajax: A New Approach to Web Applications.http://adaptivepath.com/publications/essays/archives/000385.php.34
اسلاید 35: با تشکر از توجه شما35
اسلاید 36: پرسش و پاسخ :36
نقد و بررسی ها
هیچ نظری برای این پاورپوینت نوشته نشده است.