صفحه 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:
پرسش و پاسخ :