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

جلسه ارائه درس مهندسی جلسه ارائه درس مهندسی اینترنتاینترنت

1392/4/51392/4/5

2

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

3

فهرست :

:مقدمه

Ajax فناوری است که به کمک آن می توان Interface یک برنامه تحت وب را طوری

ساخت که وقتی کاربر روی دکمه یا لینکی کلیک می کند ، کلیه عملیات

ارسال اطالعات و دریافت نتایج در پشت صحنه انجام شود و فقط آن قسمت

که قرار است اطالعات جدید Interfaceازرا به نمایش درآورد تغییر کند بدون اینکه

تمام صفحه از نو بارگذاری شود. 4

پیشینه:

کارشناسی از 2005 را اولین بار در سال Ajaxاصطالح به نام جسی جیمز گرت در Adaptive Pathشرکت

Ajax : A New Approach toمقاله ای تحت عنوان :”Web Application .مطرح کرد “

با این حال تاریخچه فناوری هایی برای بارگذاری غیر همروند محتویات یک صفحه وب، بدون نیاز به بارگذاری

و عناصر IFRAME( 1996-IE3 )دوباره صفحه، به عناصر LAYER (Netspace4-1997) .باز می گردد

را XMLHttpRequest(XHR) شیءIE5مایکروسافت در Outlook Web Accessارائه کرده و برای اولین بار در

. بهره جستXHRاز این روش با استفاده از شیء

5

Ajaxچست؟

Ajax: Asynchronous JavaScript And XML

XML و JavaScriptاستفاده نامتقارن از از آن ها استفاده می شود عبارت اند 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مدل شی گرای سند(معماری عمده ای است که بر اساس آن سند

) را به اشیای HTML (از جمله XMLهای موجود در آن تجزیه نموده و آن را به صورت یک ساختار درختی داده ها در فضای حافظه

اصلی پهن می کنیم. باید از یک DOMبه منظور اجرا و پیاده سازی

، Javaزبان برنامه نویسی سطح باال همچون C# ، JavaScript.یا مشابه آنها استفاده کنیم

9

:XMLHttpRequestشیء

اجازه انتقال نامتقارن اطالعات به صفحات وب ارتباط با سروردرJavaScript

عبارتند از: XHRبرخی از خصوصیات و توابع شی ء Open() برقرار کردن یک درخواست جدید برای یک سرور :Send()ارسال تقاضا به سرور : readyState عددی که نشانگر وضعیت تقاضای ما به سرور :

است : ) uninitialized : عدم آغاز ارتباط ( 0

)open : حالت باز ( 1 )sent : اتمام ارسال ( 2

)receiving : حالت دریافت ( 3 )loaded : اتمام بارگذاری ( 4

10

: (ادامه) XMLHttpRequestشیء

Abort()قطع تقاضای در حال پیشروی : responseTextپاسخ به صورت رشته متنی : responseXML پاسخ به صورت شی ء : DOM XMLresponseBody پاسخ به صورت آرایه ای : status کد وضعیت : HTMLstatusText متنی که : statusرا شرح می دهد onreadyStateChange اشاره گر به تابعی که باید هنگام :

اجرا شود.readyStateتغییر حالت خصوصیت getAllResponseHeaders دریافت لیست کاملی از سروند :

تقاضاHttpهای getResponseHeader در یافت سروند یک تقاضای : Http

خاصsetRequestHeader اضافه کردن یک سروند : Http

سفارشی به تقاضا 11

:Ajaxمکانیزم

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

قسمت مورد نظر در صفحهاین نحوه عملکرد وب کالسیک باعث کاهش بازده سرور ، مصرف پهنای باند و تلف شدن وقت و

این Ajaxهزینه است اما به کارگیری تکنیک مشکالت را برطرف می کند.

12

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

13

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

:Ajaxبه کمک

هر عمل از سوی کاربر موجب تولید یک Httpتقاضای

فراخوانی یک فرمان جاوا اسکریپتی هدایت آن به موتورAjax پاسخ سرور به کاربر بدون نیاز به ارسال

صفحه جدید به روز شدن قسمتی که باید تغییر کند 14

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

را به صورت زیر توصیف کرد :Ajaxدر واقع می توان عملکرد

عمل کردن به صورت یک الیه اضافی بین مرورگر کاربر وسرور وب

پیاده سازی ارتباطات سرور در پس زمینه مسدود نشدن صفحه درون مرورگرclientپردازش نتایج دریافت پاسخ از سروربه روز کردن رابط کاربر

است.Ajaxاین به معنی غیر همروند بودن در عملکرد تکنیک

15

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

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

16

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

هرگز قطع Interface استفاده می کند ، تماس میان کاربر و Ajax یک برنامه از Interfaceهنگامی که در پشت Ajaxنمی شود.او همواره نرم افزار را در دسترس و پیش روی خود می بیند و موتور

صحنه عملیات ارسال و دریافت داده ها را مدیریت می کند.

17

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

Xml و JavaScriptمی توان نقش تکنیک های به صورت زیر توصیف کرد :Ajaxرا در

JavaScript قسمتی از برنامه : Ajax که در پس زمینه مرورگر کاربر انجام می شود

XML ابزار رایج برای کدینگ و فرمت : ارسال اطالعات برای انتقال کاراتر

18

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

را به Ajaxمراحل کلی پاسخ به تقاضای کاربر در صورت زیر می باشد :

اعالم درخواست از سوی کاربر از طریق یکرویداد

فرستاده شدن درخواست کاربر از طریق شیءXHRبه سرور

ارسال پاسخ از سوی سرور به صورت دادهXML پردازش پاسخ دریافت شده توسط موتورAjax به روز کردن قسمتی از صفحهHTML با استفاده

DOMاز فناوری 19

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

20

با مدل کالسیک برنامه های Ajaxتفاوت مدل تحت وب:

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

21

با مدل کالسیک برنامه های Ajaxتفاوت مدل تحت وب (ادامه) :

: نزدیک کردن Ajaxهدف اصلی از ارائه مدل برنامه های تحت وب به برنامه های رومیزی

اما تفاوت های این دو مدل را می توان به صورت زیر بیان کرد:

بارگذاری شدن موتورAjax کدهای ) JavaScript در ابتدا در مدل ( Ajax

قطع نشدن ارتباط کاربر با نمای سایت عدم وجودrefreshهای متوالی بارگذاری نکردن مجدد قسمت های ثابت استفاده از امکانات گرافیکی بیشتردر انجام

امور 22

: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نمونه کد نویسی در

به وفور از Ajax را نشان می دهد . JavaScriptکد زیر نمونه ای از کدنویسی استفاده می کنیم :DHTML و JavaScript در DOMمتدولوژی

 //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 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

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(

نرم افزارهای اداری تحت وب Writelyنرم افزار تحت وب پردازش متن Google Spreadنرم افزار صفحه گستر تحت وب

Sheets

32

نتیجه :گیری

برطرف کردن شکاف بین برهم کنشبرنامه های رومیزی و همیشه به روز

بودن برنامه های تحت وب وب گردی پویا و غیرهمروند(بدونrefresh

های متوالی صفحه) مرتبط باInterface نرم افزارهای تحت

وب

همه اینها دالیلی است برای اینکه باور عاملی در پیشرفت برنامه Ajaxکنیم که

های تحت وب نسل بعد خواهد بود.33

منابع و مراجع :

منابع فارسی : ، 84 ” ، ماهنامه شبکه ، شماره Ajax) نوعی پور بهروز ، ”همه چیز درباره 1

84بهمن

“ ، ماهنامه دانش و کامپیوتر ، Ajax) فکری نجات ، ”نگاهی عمیق به تکنیک 286 ، آبان 66شماره

IranIctNews) سایت 3

منابع انگلیسی:Jesse James Garrett. Ajax: A New Approach to Web Applications.

http://adaptivepath.com/publications/essays/archives/000385.php.

34

35

پرسش و پاسخ :

36