Transcript ارائه مدل کیفیت برای نرم افزارهای تجارت

‫جلسه ارائه درس مهندس ی اینترنت‬
‫ارائه دهنده ‪ :‬مونا فدوی‬
‫‪1392/4/5‬‬
2
‫فهرست ‪:‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪3‬‬
‫مقدمه‬
‫پیشینه‬
‫‪ Ajax‬چیست؟‬
‫‪JavaScript‬‬
‫‪XML‬‬
‫‪DOM‬‬
‫شیء ‪XMLHttpRequest‬‬
‫مکانیزم ‪Ajax‬‬
‫چگونگی به کارگیری فناوری های مختلف در ‪Ajax‬‬
‫تفاوت مدل ‪ Ajax‬با مدل کالسیک برنامه های تحت وب‬
‫مزایای ‪Ajax‬‬
‫معایب ‪Ajax‬‬
‫نمونه کد های ‪Ajax‬‬
‫کاربردهای ‪Ajax‬‬
‫نتیجه گیری‬
‫منابع و مراجع‬
‫مقدمه ‪:‬‬
‫‪ Ajax‬فناوری است که به کمک آن می توان ‪ Interface‬یک‬
‫برنامه تحت وب را طوری ساخت که وقتی کاربر روی دکمه‬
‫یا لینکی کلیک می کند ‪ ،‬کلیه عملیات ارسال اطالعات و‬
‫دریافت نتایج در پشت صحنه انجام شود و فقط آن قسمت‬
‫از ‪ Interface‬که قرار است اطالعات جدید را به نمایش‬
‫درآورد تغییر کند بدون اینکه تمام صفحه از نو بارگذاری‬
‫شود‪.‬‬
‫‪4‬‬
‫پیشینه‪:‬‬
‫اصطالح ‪ Ajax‬را اولین بار در سال ‪ 2005‬کارشناسی از‬
‫شرکت ‪ Adaptive Path‬به نام جسی جیمز گرت در مقاله‬
‫ای تحت عنوان ‪Ajax : A New Approach to Web ”:‬‬
‫‪ “Application‬مطرح کرد‪.‬‬
‫با این حال تاریخچه فناوری هایی برای بارگذاری غیر‬
‫همروند محتویات یک صفحه وب‪ ،‬بدون نیاز به بارگذاری‬
‫دوباره صفحه‪ ،‬به عناصر ‪ ) IE3-1996 (IFRAME‬و عناصر‬
‫‪ )Netspace4-1997( LAYER‬باز می گردد‪.‬‬
‫مایکروسافت در‪ IE5‬شیء )‪ XMLHttpRequest(XHR‬را‬
‫ارائه کرده و برای اولین بار در ‪ Outlook Web Access‬از‬
‫این روش با استفاده از شیء ‪ XHR‬بهره جست‪.‬‬
‫‪5‬‬
‫‪ Ajax‬چست؟‬
‫‪Asynchronous JavaScript And XML :Ajax‬‬
‫استفاده نامتقارن از ‪ JavaScript‬و ‪XML‬‬
‫تکنولوژیهایی که در ‪ Ajax‬از آنها استفاده میشود عبارتاند از‪:‬‬
‫‪ ‬نمایش استاندارد با استفاده از ‪ XHTML‬و‪. CSS‬‬
‫‪ ‬نمایش پویایی و تعامالت با استفاده از)‪. Document Object Model (DOM‬‬
‫‪ ‬تبادل و دستکاری داده با استفاده از ‪ XML‬و‪XSLT.‬‬
‫‪ ‬بازیابی دادهها بصورت غیر همروند با استفاده از‪ XMLHttpRequest‬و‬
‫جاوااسکریپت برای سرهمبندی همه چیز با هم‪.‬‬
‫‪6‬‬
‫‪JavaScript :‬‬
‫‪ ‬موجود بودن هم به صورت ساخت یافته و هم به صورت شی گرا‬
‫‪ ‬سهولت یادگیری و کار با آن‬
‫‪ ‬طراحی شده برای ردیابی هر نوع ورودی ای‬
‫‪ ‬پردازش اطالعات ورودی‬
‫‪ ‬به حداقل رساندن زمان ‪ load‬شدن صفحه وب به خاطر سادگی‬
‫‪JavaScript‬‬
‫‪ ‬بهینه کردن مرور وب‬
‫‪ ‬جای گرفتن محاسبه گرهای ‪ JavaScript‬در یک صفحه تنها‬
‫‪ ‬ساخت فرم های دینامیکی‬
‫‪ ‬نیاز نداشتن به هیچ نرم افزار یا ‪ plug-in‬کمکی برای اجرا‬
‫‪7‬‬
‫‪XML (Extensible Markup‬‬
‫‪Language):‬‬
‫‪ ‬همچون ‪ HTML‬یک زبان نشانه گذاری‬
‫‪ ‬زبان رایج برای تبادل داده و سازماندهی داده ها برای به‬
‫اشتراک گذاری‬
‫‪ ‬قابلیت رده بندی داده ها‬
‫‪ ‬خلق نقش های بسیار دقیقی برای قالب بندی داده ها‬
‫‪ ‬توانایی گرفتن خروجی در محل های مختلف از آن‬
‫‪ ‬وابسته و محدود نبودن به یک دستگاه یا پلت فرم خاص‬
‫‪ ‬از پیش تعریف شده نبودن تگ های ‪XML‬‬
‫‪8‬‬
‫‪DOM(Document Object Model):‬‬
‫مدل شی گرای سند(‪ )DOM‬عنوان یکی از دو معماری عمده ای‬
‫است که بر اساس آن سند های ‪( XML‬از جمله ‪)HTML‬‬
‫را به اشیای موجود در آن تجزیه نموده و آن را به صورت‬
‫یک ساختار درختی داده ها در فضای حافظه اصلی پهن می‬
‫کنیم‪.‬‬
‫به منظور اجرا و پیاده سازی ‪ DOM‬باید از یک زبان برنامه‬
‫نویسی سطح باال همچون ‪ JavaScript ، C# ، Java‬یا‬
‫مشابه آنها استفاده کنیم‪.‬‬
‫‪9‬‬
‫شیء ‪:XMLHttpRequest‬‬
‫‪ ‬اجازه انتقال نامتقارن اطالعات به صفحات وب‬
‫‪ ‬ارتباط با سروردر ‪JavaScript‬‬
‫برخی از خصوصیات و توابع شی ء ‪XHR‬عبارتند از‪:‬‬
‫‪ :Open() ‬برقرار کردن یک درخواست جدید برای یک سرور‬
‫‪ : Send() ‬ارسال تقاضا به سرور‬
‫‪ : readyState ‬عددی که نشانگر وضعیت تقاضای ما به سرور است ‪:‬‬
‫‪ : 0‬عدم آغاز ارتباط ( ‪) uninitialized‬‬
‫‪ : 1‬حالت باز ( ‪) open‬‬
‫‪ : 2‬اتمام ارسال ( ‪) sent‬‬
‫‪ : 3‬حالت دریافت ( ‪) receiving‬‬
‫‪ : 4‬اتمام بارگذاری ( ‪) loaded‬‬
‫‪10‬‬
‫شیء ‪( XMLHttpRequest‬ادامه) ‪:‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪11‬‬
‫)(‪ : Abort‬قطع تقاضای در حال پیشروی‬
‫‪ : responseText‬پاسخ به صورت رشته متنی‬
‫‪ : responseXML‬پاسخ به صورت شی ء ‪DOM XML‬‬
‫‪ : responseBody‬پاسخ به صورت آرایه ای‬
‫‪ : status‬کد وضعیت ‪HTML‬‬
‫‪ : statusText‬متنی که ‪ status‬را شرح می دهد‬
‫‪ : onreadyStateChange‬اشاره گر به تابعی که باید هنگام تغییر حالت‬
‫خصوصیت ‪ readyState‬اجرا شود‪.‬‬
‫‪ : getAllResponseHeaders‬دریافت لیست کاملی از سروند های ‪Http‬‬
‫تقاضا‬
‫‪ : getResponseHeader‬در یافت سروند یک تقاضای ‪ Http‬خاص‬
‫‪ : setRequestHeader‬اضافه کردن یک سروند ‪ Http‬سفارشی به تقاضا‬
‫مکانیزم ‪: Ajax‬‬
‫نحوه عملکرد وب کالسیک به ترتیب زیر است‪:‬‬
‫‪ ‬بارگذاری صفحه مورد نظر برای اولین بار‬
‫‪ ‬ارسال تقاضای کاربر از طریق مرورگر به سرور‬
‫‪ ‬قطع ارتباط کاربر با نرم افزار‬
‫‪ ‬ارسال پاسخ توسط سرور و به روز شدن قسمت مورد نظر در‬
‫صفحه‬
‫این نحوه عملکرد وب کالسیک باعث کاهش بازده سرور ‪،‬‬
‫مصرف پهنای باند و تلف شدن وقت و هزینه است اما به‬
‫کارگیری تکنیک ‪ Ajax‬این مشکالت را برطرف می کند‪.‬‬
‫‪12‬‬
‫مکانیزم ‪( Ajax‬ادامه) ‪:‬‬
‫‪13‬‬
‫مکانیزم ‪Ajax‬‬
‫(ادامه) ‪:‬‬
‫به کمک ‪: Ajax‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪14‬‬
‫هر عمل از سوی کاربر موجب تولید یک تقاضای ‪Http‬‬
‫فراخوانی یک فرمان جاوا اسکریپتی‬
‫هدایت آن به موتور ‪Ajax‬‬
‫پاسخ سرور به کاربر بدون نیاز به ارسال صفحه جدید‬
‫به روز شدن قسمتی که باید تغییر کند‬
‫مکانیزم ‪( Ajax‬ادامه) ‪:‬‬
‫در واقع می توان عملکرد ‪ Ajax‬را به صورت زیر توصیف کرد ‪:‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫عمل کردن به صورت یک الیه اضافی بین مرورگر کاربر و‬
‫سرور وب‬
‫پیاده سازی ارتباطات سرور در پس زمینه‬
‫مسدود نشدن صفحه درون مرورگر ‪client‬‬
‫پردازش نتایج دریافت پاسخ از سرور‬
‫به روز کردن رابط کاربر‬
‫‪15‬‬
‫این به معنی غیر همروند بودن در عملکرد تکنیک ‪ Ajax‬است‪.‬‬
‫مکانیزم ‪( Ajax‬ادامه)‬
‫‪:‬‬
‫شکل زیر مقایسه ای را نشان می دهد که برنامه های تحت وب سنتی چگونه کنش های کاربر را مدیریت می کند و ‪ Ajax‬چگونه همین عملیات را‬
‫کنترل می کند‪.‬‬
‫‪16‬‬
‫مکانیزم ‪( Ajax‬ادامه)‬
‫‪:‬‬
‫هنگامی که ‪ Interface‬یک برنامه از ‪ Ajax‬استفاده می کند ‪ ،‬تماس میان کاربر و ‪ Interface‬هرگز قطع نمی شود‪.‬او همواره نرم افزار را در‬
‫دسترس و پیش روی خود می بیند و موتور ‪ Ajax‬در پشت صحنه عملیات ارسال و دریافت داده ها را مدیریت می کند‪.‬‬
‫‪17‬‬
‫چگونگی به کارگیری فناوری های مختلف در ‪: Ajax‬‬
‫می توان نقش تکنیک های ‪ JavaScript‬و ‪ Xml‬را در ‪Ajax‬‬
‫به صورت زیر توصیف کرد ‪:‬‬
‫‪ : JavaScript ‬قسمتی از برنامه ‪ Ajax‬که در پس زمینه‬
‫مرورگر کاربر انجام می شود‬
‫‪ : XML ‬ابزار رایج برای کدینگ و فرمت ارسال اطالعات‬
‫برای انتقال کاراتر‬
‫‪18‬‬
‫چگونگی به کارگیری فناوری های مختلف‬
‫در ‪( Ajax‬ادامه)‪:‬‬
‫مراحل کلی پاسخ به تقاضای کاربر در ‪ Ajax‬را به صورت زیر‬
‫می باشد ‪:‬‬
‫‪ ‬اعالم درخواست از سوی کاربر از طریق یک رویداد‬
‫‪ ‬فرستاده شدن درخواست کاربر از طریق شیء ‪ XHR‬به‬
‫سرور‬
‫‪ ‬ارسال پاسخ از سوی سرور به صورت داده ‪XML‬‬
‫‪ ‬پردازش پاسخ دریافت شده توسط موتور ‪Ajax‬‬
‫‪ ‬به روز کردن قسمتی از صفحه ‪ HTML‬با استفاده از فناوری‬
‫‪DOM 19‬‬
‫چگونگی به کارگیری فناوری های مختلف در ‪Ajax‬‬
‫(ادامه)‪:‬‬
‫‪20‬‬
‫تفاوت مدل ‪ Ajax‬با مدل کالسیک برنامه های تحت وب‪:‬‬
‫اگر بخواهیم برنامه های رومیزی را با برنامه های تحت وب ( قبل از ظهور ‪ ) Ajax‬مقایسه کنیم به جدول زیر می‬
‫رسیم‪:‬‬
‫‪21‬‬
‫برنامه های رومیزی‬
‫برنامه های تحت وب‬
‫سرعت اجرای باال‬
‫سرعت پایین‬
‫ارتباط پیوسته کاربر در حین اجرای‬
‫برنامه‬
‫وجود ‪ refresh‬در حین کار با برنامه‬
‫امکانات گرافیکی زیاد و محیط پویا‬
‫امکانات گرافیکی کمتر‬
‫عدم به روز بودن‬
‫به روز بودن‬
‫عدم اجرا در همه سیستم عامل ها‬
‫اجرا در تمامی سیستم عامل ها‬
‫امنیت بیشتر و خطرات کمتر‬
‫امنیت کمتر به جهت اجرا شدن روی شبکه ای‬
‫بسیار بزرگ از کامیوتر ها و دسترسی میلیون‬
‫ها کاربر به آن‬
‫تفاوت مدل ‪ Ajax‬با مدل کالسیک برنامه های تحت وب (ادامه) ‪:‬‬
‫هدف اصلی از ارائه مدل ‪ : Ajax‬نزدیک کردن برنامه های‬
‫تحت وب به برنامه های رومیزی‬
‫اما تفاوت های این دو مدل را می توان به صورت زیر بیان‬
‫کرد‪:‬‬
‫‪‬‬
‫‪22‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫بارگذاری شدن موتور ‪ ( Ajax‬کدهای ‪ ) JavaScript‬در‬
‫ابتدا در مدل ‪Ajax‬‬
‫قطع نشدن ارتباط کاربر با نمای سایت‬
‫عدم وجود ‪ refresh‬های متوالی‬
‫بارگذاری نکردن مجدد قسمت های ثابت‬
‫استفاده از امکانات گرافیکی بیشتردر انجام امور‬
‫مزایای ‪: Ajax‬‬
‫‪ ‬حرکت صنعت نرم افزار در عرصه وب به سوی سیستم هایی‬
‫مستقل از نوع سیستم عامل و مرورگر مورد استفاده کاربر‬
‫‪ ‬سرعت آن(به علت غنی بودن ‪)client‬‬
‫‪ ‬استفاده کمتر از امکانات و منابع سرور‬
‫‪ ‬فناوری مرتبط با ‪ Interface‬برنامه های تحت وب‬
‫‪ ‬دریافت فرامین ارسال و دریافت اطالعات نه فقط از طریق‬
‫سایت اصلی نمایش دهنده صفحه وب‬
‫‪23‬‬
‫معایب ‪: Ajax‬‬
‫‪ ‬عدم کارایی مناسب دکمه های ‪ Back‬و ‪Forward‬‬
‫‪ ‬بی معنی شدن مفهوم ‪Bookmark‬‬
‫‪ ‬وابستگی به ‪XMLHttpRequest‬‬
‫‪ ‬حجم زیاد کد ‪ JavaScript‬استفاده شده در نرم افزارهای‬
‫مبتنی بر ‪Ajax‬‬
‫‪ ‬ایمن نبودن ارتباط ‪ client‬و ‪ server‬در این فناوری‬
‫‪24‬‬
: 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
: )‫ (ادامه‬Ajax ‫نمونه کد نویسی در‬
‫ در‬DOM ‫ به وفور از متدولوژی‬Ajax . ‫ را نشان می دهد‬JavaScript ‫کد زیر نمونه ای از کدنویسی‬
: ‫ استفاده می کنیم‬DHTML ‫ و‬JavaScript
//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];
26
: )‫ (ادامه‬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(st
ate);
//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);
}
27
: )‫ (ادامه‬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
‫کاربردهای ‪: Ajax‬‬
‫از جمله کاربردها و سایت های استفاده کننده از ‪ Ajax‬می توان موارد زیر را نام برد ‪:‬‬
‫‪Chat ‬‬
‫سرویس چت گوگل (‪)Google Talk‬‬
‫‪29‬‬
‫کاربردهای ‪ ( Ajax‬ادامه ) ‪:‬‬
‫‪ ‬تجارت الکترونیک‬
‫سایت ‪closo.com‬‬
‫سایت جستجوگر خرید آمازون ‪A9.com‬‬
‫‪ ‬بازی‬
‫‪ ‬پست الکترونیکی‬
‫‪Gmail.com‬‬
‫‪Yahoo! Mail‬‬
‫‪ ‬پیام رسانی اینترنتی‬
‫سایت ‪membo.com‬‬
‫‪30‬‬
‫کاربردهای ‪ ( Ajax‬ادامه ) ‪:‬‬
‫‪ ‬نقشه های آنالین‬
‫‪Google Maps‬‬
‫‪ ‬سیستم عامل های تحت وب‬
‫‪AjaxWindows‬‬
‫‪ AjaxWindows‬یک سیستم عامل مجازی است که به شما اجازه می دهد فایل های خود را تنها از یک مرورگر‬
‫ذخیره ‪ ،‬ویرایش کنید و به اشتراک بگذارید‪.‬‬
‫‪eyeOS‬‬
‫‪31‬‬
‫کاربردهای ‪ ( Ajax‬ادامه ) ‪:‬‬
‫‪ ‬جستجوگرها‬
‫‪Google Suggest‬‬
‫‪ ‬پورتال‬
‫سرویس پورتال گوگل )‪(Google Personal HomePage‬‬
‫‪32‬‬
‫‪ ‬نرم افزارهای اداری تحت وب‬
‫نرم افزار تحت وب پردازش متن ‪Writely‬‬
‫نرم افزار صفحه گستر تحت وب ‪Google Spread Sheets‬‬
‫نتیجه گیری‬
‫‪:‬‬
‫‪ ‬برطرف کردن شکاف بین برهم کنش برنامه های رومیزی و‬
‫همیشه به روز بودن برنامه های تحت وب‬
‫‪ ‬وب گردی پویا و غیرهمروند(بدون ‪ refresh‬های متوالی‬
‫صفحه)‬
‫‪ ‬مرتبط با ‪ Interface‬نرم افزارهای تحت وب‬
‫همه اینها دالیلی است برای اینکه باور کنیم که ‪ Ajax‬عاملی‬
‫در پیشرفت برنامه های تحت وب نسل بعد خواهد بود‪.‬‬
‫‪33‬‬
‫منابع و مراجع ‪:‬‬
‫منابع فارسی ‪:‬‬
‫‪ )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.‬‬
‫‪34‬‬
35
‫پرسش و پاسخ ‪:‬‬
‫‪36‬‬