آموزش مقدماتی Ajax (ای جکس

**parisa** · 09-14-2009, 10:34 PM

این روزها کسانی که برنامه نویسی وب انجام می دهند در بین اونها شما کمتر کسی رو می بینید که با ای جکس آشنایی نداشته باشه.شاید شما هم دوست داشته باشید بدونید این ای جکس اصلا چی هست. پس اگر می خواین یاد بگیرید از اینجا به بعد رو کامل بخونید.

AJAX چیه؟

این تکنیک مخفف Asynchronous JavaScript And XML هست و به مفهوم استفاده نامتقارن Javascript و XML بوده که به صورت ای جکس تلفظ می شه(بعضی ها به اشتباه این رو آژاکس تلفظ می کنن.). جالبه که بدونید مقدمات استفاده از این تکنولوژی از سالهای پیش در مرورگرهای وب قرار داده شده بود، ولی با وجود استفاده ی مایکروسافت از این تکنیک به صورت محدود در نرم افزار Outlook کسی به موارد استفاده از اون به صورت همه گانی پی نبرده بود.در حقیقت تاریخچه ی واقعی AJAX به عنصری مخفی با نام IFrame در HTML بر می گرده که با استفاده از اون برنامه نویسان وب می تونستند کارایی شبیه به AJAX انجام بدند.

برای درک بهتر AJAX به عنوان مثال فرض کنید که در Inbox ایمل تون در GMail هستید. و در اون موقع یک ایمی جدید، بدون این که شما بر روی دکمه ای کلیک کنید، به شما خبر می ده که یک ایمیل جدید دریافت کردید. تا قبل از AJAX برای با خبر شدن از تغییرات اعمل شده در صفحه حتما باید صفحه رو Refresh می کردید.

مفهوم عملکرد AJAX.

برای نوشتن ساده ترین کد ای جکس باید با مفاهیم HTML, Javascript,DOM و یک زبان سمت سرور مثل : ASP,PHP,ASP.NET و... آشنایی داشته باشید. اگر چه برای گسترش یک صفحه AJAX پیچیده داشتن مکفی در رابطه با XML,CSS نیز از ملزومات است.

همونطور که همه ی برنامه نویسان وب با خبر هستند، هر مرورگر وب مثل : IE,FF,Opera و... دارای تعداد زیادی Object (شئی) درونی به صورت API در زمینه های مختلفی چون DOM,CSS,HTML,XML و.. می باشد.

شاید جالب باشه بدونید سناریوی اصلی AJAX، حول محور یک Object به اسم XMLHTTPRequest می چرخه که اونو به نام مخفف XHR مشناسند. این شئی نقش اول و تقریبا همه کاره ی کدهای AJAX هست. این Object در یک کد Clinet-Side و با استفاده از Javascript اجرا شده و سپس در یک زمان معین، یک کد Server-Side رو بدون متوجه شدن بازدید کننده سایت، اجرا می کنه و نتیجه ی اجرای کد رو از سرور می گیره و مجددا بدون Refresh شدن صفحه وب، در اختیار مرورگر قرار می ده و بعد جاوا اسکریپت نتیجه ی باز گشتی رو به دلخواه برنامه نویس، مورد استفاده قرار می ده و یا در قسمتی از صفحه ی مقابل کاربر ( بدون Refresh شدن صفحه ) می ده.

برای نوشتن کدها شما می تونید از Notepad استفده کنید و کدهاتون رو درونش بنویسید و اون رو به نام AJAX.HTM ذخیره کنید.

اول این کدها رو بنویسید یا کپی کنید. ( اگر بنویسید بهتر متوجه می شید )

HTML کد:
<html><Body><script type="text/javascript" language="JavaScript">function Ajax() {var XHR = new ActiveXObject("Msxml2.XMLHTTP") ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); XHR.onreadystatechange = function() { if(XHR.readystate == 4) { document.FormX.time.value = XHR.ResponseText; } } XHR.open("GET", "time.asp", true); XHR.send(null);}</script><form name="FormX">Name: <input type="text" onchange="Ajax();">Time: <input type="text" name="time"></Body></html

**Mrs.ostooreh** · 02-06-2010, 07:27 PM

Ajax روشی جدید در طراحی برنامه های تحت وب

امروزه، معمولا وقتی صحبت از طراحی برنامه های تعاملی می شود،بیشتر توجه ها معطوف به وب است. کاربران دوست دارند که با راحتی و سرعتی که با Desktop application ها کار می کنند با Web application ها هم کار کنند. طراحان برنامه های کاربردی وب هم برای از بین بردن این شکاف ، روش های طراحی گوناگونی را پیشنهاد کرده اند.

نگاهی به Google Suggest و Google Maps بیندازید . وقتی روی قسمتی از نقشه zoom می کنید و یا بالا و پایین می روید همه چیز تقریبا به طور همزمان و بدون Load شدن مجدد صفحات انجام می شود. Gmail و Orkut نیز نمونه ای از روش طراحی جدید به نام Ajax هستند.

آجاکس شامل مجموعه ای از تکنولوژی های مختلف است که گرد هم آمده اند تا یک روش قدرتمند و جدید را برای طراحی برنامه های کاربردی وب ایجاد کنند

AJAX مخفف کلماتAsynchronous JavaScript + XML است
· standards-based presentation using XHTML and CSS;
· dynamic display and interaction using the Document Object Model;
· data interchange and manipulation using XML and XSLT;
· asynchronous data retrieval using XMLHttpRequest;
· and JavaScript binding everything together.

**Mrs.ostooreh** · 02-06-2010, 07:28 PM

مدل کلاسیک برنامه های کاربردی وب به این صورت است که: کاربران توسط یک واسط، درخواست خود را به وب سرور ارسال می کنند. سرور پردازشی خاص برای درخواست مورد نظر کاربر انجام می دهد و سپس نتیجه را به صورت HTML به کاربر برمی گرداند.
این مدل با کاربرد اولیه وب به عنوان واسط انتقال hypertext سازگار است اما تجربیات نشان می دهد که در طراحی برنامه های کاربردی لزوما استفاده از این مدل نتیجه مطلوب کاربران را نمی دهد!

وقتی که سرور مشغول پردازش درخواست ها است، کاربر چه می کند؟ مسلم است که انتظار می کشد! و این انتظار در هر مرحله از انجام کار بیشتر و بیشتر می شود! زمانی که یک فرم وب را در برنام کاربردی خود قرار می دهید کاربر باید تا زمان دریافت نتایج صبر کند.اصلا چه لزومی دارد که کاربر ببیند برنامه او به سمت سرور می رود؟! Ajax به این پرسش ها پاسخ می دهد:

یک برنامه کاربردی Ajax ، طبیعت start-stop-start-stop برنامه های کاربردی وب را با معرفی یک واسط به نام Ajax engine بین کاربر و سرور، از بین می برد. ممکن است به نظر برسد که افزودن یک لایه جدید به برنامه کاربردی، عکس العمل آن را کند کند اما نتیجه حاصله کاملا برعکس است!
به جای load کردن یک صفحه وب در آغاز یک session ، مرورگر کاربر، Ajax engine را که توسط JavaScript نوشته شده است load می کند. این engine مسئولیت render کردن واسطی که کاربر می بیند و همچنین ارتباط با سرور از سمت کاربر را بر عهده دارد.این engine سبب می شود که تعامل کاربر با برنامه کاربردی، نا همگام(asynchronously ) با ارتباط کاربر با سرور انجام شود.
بنابر این ،کاربر هرگز یک صفحه مرورگر خالی یا یک آیکون ساعت شنی برای انتظار نمی بیند و منتظر سرور نمی نشیند!
Google نقش مهمی را در طراحی و به کارگیری این شیوه جدید داشته است.
Orkut , Gmail و آخرین نسخه آزمایشی Google Groups , Google Suggest و Google Maps به شیوه Ajax طراحی شده اند.(برای کسب اطلاعات بیشتر می توانید به تحلیل Gmail , Google Suggest و Google Maps مراجعه کنید.) بیشتر ویژگی های جالب که در Flickr مشاهده می کنید بر اساس همین شیوه است. متور جستجوی Amazon’s A9.com هم بر اساس این روش طراحی شده است.

این پروژه های موفق نشان می دهند که Ajax یک روش تئوری نیست بلکه کاملا کاربردی است!
منابع : ali1k.com adaptivepath wikipedia ajax.net

09-14-2009, 10:34 PM	#1 (permalink)
parisa به من ربطی نداره!!! تاریخ عضویت: May 2009 نوشته ها: 2,661 سپاس گذاری: 1,001 سپاس گذاری شده 1,998 در 1,257 پست Blog Entries: 2	آموزش مقدماتی Ajax (ای جکس این روزها کسانی که برنامه نویسی وب انجام می دهند در بین اونها شما کمتر کسی رو می بینید که با ای جکس آشنایی نداشته باشه.شاید شما هم دوست داشته باشید بدونید این ای جکس اصلا چی هست. پس اگر می خواین یاد بگیرید از اینجا به بعد رو کامل بخونید. AJAX چیه؟ این تکنیک مخفف Asynchronous JavaScript And XML هست و به مفهوم استفاده نامتقارن Javascript و XML بوده که به صورت ای جکس تلفظ می شه(بعضی ها به اشتباه این رو آژاکس تلفظ می کنن.). جالبه که بدونید مقدمات استفاده از این تکنولوژی از سالهای پیش در مرورگرهای وب قرار داده شده بود، ولی با وجود استفاده ی مایکروسافت از این تکنیک به صورت محدود در نرم افزار Outlook کسی به موارد استفاده از اون به صورت همه گانی پی نبرده بود.در حقیقت تاریخچه ی واقعی AJAX به عنصری مخفی با نام IFrame در HTML بر می گرده که با استفاده از اون برنامه نویسان وب می تونستند کارایی شبیه به AJAX انجام بدند. برای درک بهتر AJAX به عنوان مثال فرض کنید که در Inbox ایمل تون در GMail هستید. و در اون موقع یک ایمی جدید، بدون این که شما بر روی دکمه ای کلیک کنید، به شما خبر می ده که یک ایمیل جدید دریافت کردید. تا قبل از AJAX برای با خبر شدن از تغییرات اعمل شده در صفحه حتما باید صفحه رو Refresh می کردید. مفهوم عملکرد AJAX. برای نوشتن ساده ترین کد ای جکس باید با مفاهیم HTML, Javascript,DOM و یک زبان سمت سرور مثل : ASP,PHP,ASP.NET و... آشنایی داشته باشید. اگر چه برای گسترش یک صفحه AJAX پیچیده داشتن مکفی در رابطه با XML,CSS نیز از ملزومات است. همونطور که همه ی برنامه نویسان وب با خبر هستند، هر مرورگر وب مثل : IE,FF,Opera و... دارای تعداد زیادی Object (شئی) درونی به صورت API در زمینه های مختلفی چون DOM,CSS,HTML,XML و.. می باشد. شاید جالب باشه بدونید سناریوی اصلی AJAX، حول محور یک Object به اسم XMLHTTPRequest می چرخه که اونو به نام مخفف XHR مشناسند. این شئی نقش اول و تقریبا همه کاره ی کدهای AJAX هست. این Object در یک کد Clinet-Side و با استفاده از Javascript اجرا شده و سپس در یک زمان معین، یک کد Server-Side رو بدون متوجه شدن بازدید کننده سایت، اجرا می کنه و نتیجه ی اجرای کد رو از سرور می گیره و مجددا بدون Refresh شدن صفحه وب، در اختیار مرورگر قرار می ده و بعد جاوا اسکریپت نتیجه ی باز گشتی رو به دلخواه برنامه نویس، مورد استفاده قرار می ده و یا در قسمتی از صفحه ی مقابل کاربر ( بدون Refresh شدن صفحه ) می ده. برای نوشتن کدها شما می تونید از Notepad استفده کنید و کدهاتون رو درونش بنویسید و اون رو به نام AJAX.HTM ذخیره کنید. اول این کدها رو بنویسید یا کپی کنید. ( اگر بنویسید بهتر متوجه می شید ) HTML کد: <html><Body><script type="text/javascript" language="JavaScript">function Ajax() {var XHR = new ActiveXObject("Msxml2.XMLHTTP") ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); XHR.onreadystatechange = function() { if(XHR.readystate == 4) { document.FormX.time.value = XHR.ResponseText; } } XHR.open("GET", "time.asp", true); XHR.send(null);}</script><form name="FormX">Name: <input type="text" onchange="Ajax();">Time: <input type="text" name="time"></Body></html __________________ پروردگارا! به من آرامش ده تا بپذیرم آنچه راکه نمی توانم تغییر دهم دلیری ده تا تغییر دهم آنچه را که می توان تغییر دهم بینش ده تا تفاوت این دو را بدانم مرا فهم ده تا متوقع نباشم دنیا و مردم آن مطابق میل من رفتار کنند

02-06-2010, 07:27 PM	#2 (permalink)
Mrs.ostooreh دوست سایت تاریخ عضویت: Jan 2009 محل سکونت: ایران زیبا نوشته ها: 16,431 سپاس گذاری: 2,394 سپاس گذاری شده 6,904 در 4,351 پست Blog Entries: 6	پاسخ : آموزش مقدماتی Ajax (ای جکس Ajax روشی جدید در طراحی برنامه های تحت وب امروزه، معمولا وقتی صحبت از طراحی برنامه های تعاملی می شود،بیشتر توجه ها معطوف به وب است. کاربران دوست دارند که با راحتی و سرعتی که با Desktop application ها کار می کنند با Web application ها هم کار کنند. طراحان برنامه های کاربردی وب هم برای از بین بردن این شکاف ، روش های طراحی گوناگونی را پیشنهاد کرده اند. نگاهی به Google Suggest و Google Maps بیندازید . وقتی روی قسمتی از نقشه zoom می کنید و یا بالا و پایین می روید همه چیز تقریبا به طور همزمان و بدون Load شدن مجدد صفحات انجام می شود. Gmail و Orkut نیز نمونه ای از روش طراحی جدید به نام Ajax هستند. آجاکس شامل مجموعه ای از تکنولوژی های مختلف است که گرد هم آمده اند تا یک روش قدرتمند و جدید را برای طراحی برنامه های کاربردی وب ایجاد کنند AJAX مخفف کلماتAsynchronous JavaScript + XML است · standards-based presentation using XHTML and CSS; · dynamic display and interaction using the Document Object Model; · data interchange and manipulation using XML and XSLT; · asynchronous data retrieval using XMLHttpRequest; · and JavaScript binding everything together. __________________ چه افسانه ی زیبایی... زیباتر از واقعیت .. راستی مگر هر شخصی احساس نمیکند که نخستین روز بهار گویی نخستین روز آفرینش است؟ *نوروز پیشاپیش مبارک*

02-06-2010, 07:28 PM	#3 (permalink)
Mrs.ostooreh دوست سایت تاریخ عضویت: Jan 2009 محل سکونت: ایران زیبا نوشته ها: 16,431 سپاس گذاری: 2,394 سپاس گذاری شده 6,904 در 4,351 پست Blog Entries: 6	پاسخ : آموزش مقدماتی Ajax (ای جکس مدل کلاسیک برنامه های کاربردی وب به این صورت است که: کاربران توسط یک واسط، درخواست خود را به وب سرور ارسال می کنند. سرور پردازشی خاص برای درخواست مورد نظر کاربر انجام می دهد و سپس نتیجه را به صورت HTML به کاربر برمی گرداند. این مدل با کاربرد اولیه وب به عنوان واسط انتقال hypertext سازگار است اما تجربیات نشان می دهد که در طراحی برنامه های کاربردی لزوما استفاده از این مدل نتیجه مطلوب کاربران را نمی دهد! وقتی که سرور مشغول پردازش درخواست ها است، کاربر چه می کند؟ مسلم است که انتظار می کشد! و این انتظار در هر مرحله از انجام کار بیشتر و بیشتر می شود! زمانی که یک فرم وب را در برنام کاربردی خود قرار می دهید کاربر باید تا زمان دریافت نتایج صبر کند.اصلا چه لزومی دارد که کاربر ببیند برنامه او به سمت سرور می رود؟! Ajax به این پرسش ها پاسخ می دهد: یک برنامه کاربردی Ajax ، طبیعت start-stop-start-stop برنامه های کاربردی وب را با معرفی یک واسط به نام Ajax engine بین کاربر و سرور، از بین می برد. ممکن است به نظر برسد که افزودن یک لایه جدید به برنامه کاربردی، عکس العمل آن را کند کند اما نتیجه حاصله کاملا برعکس است! به جای load کردن یک صفحه وب در آغاز یک session ، مرورگر کاربر، Ajax engine را که توسط JavaScript نوشته شده است load می کند. این engine مسئولیت render کردن واسطی که کاربر می بیند و همچنین ارتباط با سرور از سمت کاربر را بر عهده دارد.این engine سبب می شود که تعامل کاربر با برنامه کاربردی، نا همگام(asynchronously ) با ارتباط کاربر با سرور انجام شود. بنابر این ،کاربر هرگز یک صفحه مرورگر خالی یا یک آیکون ساعت شنی برای انتظار نمی بیند و منتظر سرور نمی نشیند! Google نقش مهمی را در طراحی و به کارگیری این شیوه جدید داشته است. Orkut , Gmail و آخرین نسخه آزمایشی Google Groups , Google Suggest و Google Maps به شیوه Ajax طراحی شده اند.(برای کسب اطلاعات بیشتر می توانید به تحلیل Gmail , Google Suggest و Google Maps مراجعه کنید.) بیشتر ویژگی های جالب که در Flickr مشاهده می کنید بر اساس همین شیوه است. متور جستجوی Amazon’s A9.com هم بر اساس این روش طراحی شده است. این پروژه های موفق نشان می دهند که Ajax یک روش تئوری نیست بلکه کاملا کاربردی است! منابع : ali1k.com adaptivepath wikipedia ajax.net __________________ چه افسانه ی زیبایی... زیباتر از واقعیت .. راستی مگر هر شخصی احساس نمیکند که نخستین روز بهار گویی نخستین روز آفرینش است؟ *نوروز پیشاپیش مبارک*

ابزارهای موضوع
پرینت این صفحه / حالت نمایش بصورت پرینت شده ارسال این صفحه به ایمیل یک دوست یا خودتان
نحوه نمایش
حالت خطی تعویض به حالت ترکیبی تعوض به حالت رشته ای