آموزش Ajax :روشي نوين در طراحي برنامه هاي كاربردي تحت وب

[ملیساا 5015]

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

 

نگاهی به

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

و

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

بیندازید . وقتی روی قسمتی از نقشه zoom می کنید و یا بالا و پایین می روید همه چیز تقریبا به طور همزمان و بدون Load شدن مجدد صفحات انجام می شود. Google Suggest و Google Maps دو نمونه از روش طراحی جدید به نام Ajax هستند. Ajax مخفف Asynchronous JavaScript + XML می باشد.

 

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

• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام

  using XHTML and CSS;

  
  

• dynamic display and interaction using the

  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام

  ;

  
  

• data interchange and manipulation using

  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام

  ;

  
  

• asynchronous data retrieval using

  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام

  ;

  
  

• and

  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام

  binding everything together.

  
  

 

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

نشان می دهد که در طراحی برنامه های کاربردی لزوما استفاده از این مدل نتیجه مطلوب کاربران را نمی دهد!

 

 

 

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

 

یک برنامه کاربردی Ajax ، طبیعت start-stop-start-stop برنامه های کاربردی وب را با معرفی یک واسط به نام Ajax engine بین کاربر و سرور، از بین می برد. ممکن است به نظر برسد که افزودن یک لایه جدید به برنامه کاربردی، عکس العمل آن را کند کند اما نتیجه حاصله کاملا برعکس است! به جای load کردن یک صفحه وب در آغاز یک session ، مرورگر کاربر، Ajax engine را که توسط JavaScript نوشته شده است load می کند. این engine مسئولیت render کردن واسطی که کاربر می بیند و همچنین ارتباط با سرور از سمت کاربر را بر عهده دارد.این engine سبب می شود که تعامل کاربر با برنامه کاربردی، نا همگام(asynchronously) با ارتباط کاربر با سرور انجام شود. بنابر این ،کاربر هرگز یک صفحه مرورگر خالی یا یک آیکون ساعت شنی برای انتظار نمی بیند و منتظر سرور نمی نشیند!

 

 

Google نقش مهمی را در طراحی و به کارگیری این شیوه جدید داشته است.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

,

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

و آخرین نسخه آزمایشی

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

,

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

و

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

به شیوه Ajax طراحی شده اند.(برای کسب اطلاعات بیشتر می توانید به تحلیل

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

,

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

و

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مراجعه کنید.) بیشتر ویژگی های جالب که در

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مشاهده می کنید بر اساس همین شیوه است. متور جستجوی Amazon’s

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

هم بر اساس این روش طراحی شده است.

 

این پروژه های موفق نشان می دهند که Ajax یک روش تئوری نیست بلکه کاملا کاربردی است!

 

منبع مطلب:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

[ملیساا 5015]

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

چند وقتي هست که صحبت ها در ارتباط با تکنولوژي AJAX و تواناييهاي اون بين برنامه نويسان اينترنتي زياد شده است و در اين ميان شايد Gmail و پس از آن يک سري ديگر از محصولات Google تاثير زيادي در ارتباط گسترش استفاده از اين تکنولوژي را دارا باشد. اما به هر صورت رشد استفاده از اين تکنولوژي در سايتهاي مختلف ميتواند دليل بر محبوبيتي باشد که بوجود آمده و هر لحظه هم بيشتر ميشود. در اين ميان برنامه نويسان ايراني هم تجربه هايي در اين زمينه داشت اند و نمونه هايي از کارهاي آنها در اينترنت وجود دارد که هر چند کوچک و به صورت محدود از اين تکنولوژي استفاده شده است اما به نظر ميتواند نتيجه تاثيرات استفاده بيشتر از اين تکنولوژي در ساير سايتهاي اينترنت باشد.

 

با توجه به اين چند مدت پيش در يکي از سايتهايي که برنامه نويسي آن بر عهده من بود به صورت خيلي ابتدايي و محدود از اين تکنولوژي استفاده کردم که نتيجه کار را ميتوانيد در سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مشاهده کنيد. قيمتهاي فلزات گرانبها که در بالاي صفحات سايت ميتوانيد آنها را مشاهده کنيد بوسيله همين تکنولوژي و بدون نياز به Refresh کردن صفحه به صورت لحظه اي تغيير ميکنند. اما پس از اين کار يک سايت ديگر که بايد با استفاده از اين تکنولوژي نوشته ميشد به من پيشنهاد شد که فکر ميکنم نمونه بسيار کاملتري از استفاده از اين تکنولوژي باشد؛ يک سيستم کامل بورس آنلاين که ميتوانيد آن را در سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مشاهده کنيد. اين سيستم به صورت کامل فقط براي اعضاي سايت قابل مشاهده ميباشد و ساير بازديدکنندگان فقط ميتوانند به صورت ميهمان در سايت حاظر شده و شاهد معاملات انجام شده توسط اعضاي تالار باشند.

 

سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

يک تالار خريد و فروش طلا را در اختيار اعضاي خود قرار ميدهد که اعضا با استفاده از آن ميتوانند درخواستهاي خريد و يا فروش خود را در آن ثبت کنند و هر عضو ميتواند با توجه به درخواستهاي ساير اعضا پاسخهاي خود را براي انجام معامله در ارتباط با درخواستهاي ثبت شده ارسال کند که در صورت قبول پاسخ توسط عضو ثبت کننده درخواست معامله انجام خواهد شد. در تالار بورس سايت همچنين ليست اعضاي داخل تالار قابل دسترسي ميباشد که اعضا ميتوانند با توجه به اين ليست در صورت نياز يک پيام خصوصي براي هر کدام از اعضا ارسال کرده و در ارتباط با معاملات تالار با سايرين ارتباط برقرار کنند. از آنجايي که اين سايت براي فعالان طلا طراحي شده است براي عضويت در سايت بايد حتما درخواست عضويت شما مورد تاييد مديران سايت قرار بگيرد که چنانچه شما (و يا يکي از آشنايانتان) در اين زمينه فعاليت ميکنيد فکر ميکنم عضويت در اين سايت ميتواند تجربه جديد از استفاده از اينترنت را در اختيار شما قرار دهد.

 

بخش تالار سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

با توجه به اينکه بيشتر کاربران عادي استفاده کننده از اينترنت در ايران از نرم افزار Internet Explorer استفاده ميکنند فقط براي استفاده توسط اين نرم افزار برنامه نويسي شده است و بنابراين براي امتحان بخش تالار لطفا از اين نرم افزار و يا نرم افزارهايي که از تکنولوژي IE استفاده ميکنند (مانند Avant Browser و ...) استفاده نماييد.

 

پي نوشت:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

يک تکنولوژي براي ارسال درخواست براي سرور و دريافت و تحليل پاسخ هاي سرور بدون نياز به Refresh شدن صفحات ميباشد که خاصيت سايتهاي اينترنتي را که پس از دريافت کامل صفحات از سرور ارتباط صفحات با سرور از بين ميرود را به طور کامل ميتواند از بين ببرد. براي اطلاعات بيشتر در ارتباط با اين تکنولوژي و نحوه استفاده از آن ميتوانيد به مقاله اي که در همين زمينه در سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

نوشته شده است مراجعه کنيد.

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[ملیساا 5015]

آشنايي با تکنولوژي آژاکس AJAX

 

اين مقاله سعي دارد شما را با تکنولوژي AJAX آشنا نموده و همچنين براي شروع کار با اين تکنولوژي، دو مثال ساده در اختيار شما قرار خواهد داد. پنج بخش اصلي اين مقاله عبارتند از:

 

- معرفي تکنولوژي AJAX: کاربردها و امکانات

- نحوه ايجاد درخواستهاي HTTP

- نحوه بررسي پاسخهاي ارسال شده از سرويس دهنده (Server)

- بررسي نحوه کار با اين تکنولوژي بوسيله يک مثال

- کار با پاسخهاي ارسال شده به فرمت XML

 

معرفي تکنولوژي AJAX: کاربردها و امکانات

 

آژاکس (AJAX: Asynchronous JavaScript and XML) يک تکنولوژي براي ايجاد ارتباط بين دو امکان بسيار قدرتمند نرم افزارهاي Browser است که به تازگي مورد توجه زيادي قرار گرفته است. اين تکنولوژي قبلا چندان توسط برنامه نويسان و توسعه دهندگان وب مورد توجه نبود تا وقتي که نرم افزارهايي مانند Gmail، Google Suggest و Google Map با استفاده از اين تکنولوژي کار خود را آغاز نمودند.

 

اين دو امکان قدرتمند در نرم افزارهاي Browser که قبلا به آنها اشاره شد عبارتند از:

- امکان ارسال درخواست براي سرور و دريافت و مديريت پاسخها بدون نياز به بازيابي (reload) صفحات

- امکان بررسي و تجزيه و تحليل داده هايي به فرمت XML

 

نحوه ايجاد درخواستهاي HTTP

 

براي ايجاد و ارسال يک درخواست HTTP به سرور شما نيازمند کلاسهايي هستيد که اين امکانات را براي شما ايجاد مي نمايند. براي مثال در نرم افزار Internet Explorer يک کلاس که در واقع يک ActiveX ميباشد به نام XMLHTTP اين کار را انجام ميدهد و در نرم افزارهايي مانند Mozilla، Safari و ساير نرم افزارهاي مشابه کلاسي به نام XMLHttpRequest همان امکانات و توانايي هاي مورد نياز براي اين کار را در اختيار شما قرار مي دهد.

 

با توجه به آنچه گفته شد، براي ارسال درخواست خودتان در ابتدا با استفاده از بررسي نوع نرم افزاري که هر بازديدکننده اي در حال استفاده از آن است ميتوانيد به صورت زير عمل کنيد. توجه داشته باشيد که براي راحتي کار و نمايش نمونه اوليه روش ايجاد درخواست کد ذيل به صورت نمونه ساده شده در اختيار شما قرار گرفته است. مثالهاي تکميلي و واقعي انجام اين عمل در بخشهاي بعدي همين مقاله موجود مي باشد.

 

 

Code:

if (window.XMLHttpRequest) { // Mozilla, Safari, ...

http_request = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE

http_request = new ActiveXObject("Microsoft.XMLHTTP");

}

 

 

بعضي از نسخه هاي نرم افزار Mozilla در هنگام بررسي و تحليل پاسخهاي سرور در صورتي که اين پاسخها داراي فرمت XML نباشند بدرستي کار نخواهند کرد. براي رفع اين مشکل و جلوگيري از ايجاد خطا در هنگام دريافت پاسخ از سرور، شما ميتوانيد از يک متد ديگر براي معرفي نوع اطلاعات دريافتي و تعيين آنها به فرمت text/xml استفاده نماييد. اين کار را ميتوانيد به روش زير انجام دهيد:

 

 

Code:

http_request = new XMLHttpRequest();

http_request.overrideMimeType("text/xml");

 

 

نکته بعدي تصميم گيري در مورد اعمالي است که ميخواهيد پس از دريافت پاسخ از سرور انجام دهيد. در اين مرحله تنها کاري که بايد انجام دهيد اين است که به درخواست HTTP تابعي را که وظيفه بررسي پاسخهاي ارسال شده از طرف سرور را دارا ميباشد معرفي نماييد. اين کار با اختصاص نام تابعي که ميخواهيد بررسي پاسخهاي سرور را بوسيله آن انجام دهيد به خصوصيت onreadystatechange که از خصوصيتهاي درخواست HTTP ميباشد انجام پذير است. براي مثال ميتوانيد اين کار را به روش زير انجام دهيد:

 

 

Code:

http_request.onreadystatechange = nameOfTheFunction;

 

 

دقت داشته باشيد که در حين انجام اين کار پس از نام تابع از پرانتز استفاده نميشود و همچنين هيچ پارامتري نيز به تابع ارسال نميشود. همچنين براي اجام اين کار ميتوانيد از يک روش ديگر نيز استفاده نماييد. در اين روش در عوض اختصاص نام يک تابع به خصوصيت ذکر شده ميتوانيد از يک تکنيک موجود در زبان JavaScript براي معرفي اعمالي که ميخواهيد بر روي پاسخهاي انجام دهيد به روش زير استفاده نماييد:

 

 

Code:

http_request.onreadystatechange = function(){

// do the thing

};

 

 

حال که شما اعمالي را که مي خواهيد بر روي پاسخهاي ارسال شده از طريق سرور انجام دهيد مشخص نموده ايد، به بررسي روش ارسال درخواست به سرور خواهيم پرداخت. براي ارسال درخواست بايد از دو تابع ()open و ()send که از توابع درخواست HTTP مي باشند به روش ريز استفاده نماييد:

 

 

Code:

http_request.open("GET", "http://www.example.org/some.file", true);

http_request.send(null);

 

 

همانطور که مشاهده مي کنيد، تابع ()open داراي سه پارامتر مي باشد که ميخواهيم به بررسي اين سه پارامتر بپردازيم

 

پارامتر اول روش ارسال درخواست HTTP را مشخص مي نمايد، اين روش ميتواند يکي از مقادير POST، GET، HEAD و يا ساير مواردي را که سرور شما از آنها پشتيباني مينمايد داشته باشد. بخاطر داشته باشيد که حتما از حروف بزرگ در نام روش استفاده نماييد چرا که بعضي از Browserها مانند FireFox ممکن است که درخواست شما را ارسال نکنند. براي اطلاعات بيشتر در ارتباط با روش درخواستهاي HTTP ميتوانيد به

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مراجعه نماييد.

 

پارامتر دوم آدرس صفحه اي است که درخواست HTTP براي آن ارسال مي شود. بدليل مسايل امنيتي شما نميتوانيد درخواست خود را به اين روش براي يک سايت ديگر ارسال نماييد و فقز قادر هستيد درخواستها را به آدرس سايتي که در آن هستيد ارسال کنيد. در صورت ارسال درخواست به آدرس يک سايت ديگر ارسال درخواست انجام نخواهد شد و شما با پيغام خطاي permission denied مواجه خواهيد شد. يکي از مهمترين اشکالاتي که ممکن است در اين ارتباط پيش بيايد آن است که براي مثال در صفحه اي که آدرس آن

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

است درخواستي را با اين روش به آدرس

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

ارسال نماييد که در اين صورت نيز با پيغام خطاي ياد شده مواجه خواهيد شد و درخواست ارسال نخواهد شد.

 

آخرين پارامتر در تابع ()open مشخص کننده همزماني و يا غير همزماني ارسال درخواست خواهد بود. اين پارامتر که در واقع مستقيما به کلمه Asynchronous در عبارت Asynchronous JavaScript and XML اشاره مي نمايد مشخص مي کند که آيا در هنگام ارسال درخواست و تا زمان دريافت پاسخ به صورت کامل دستورات بعدي اجرا شوند و يا خير. اين پارامتر يکي از مقادير true يا false را ميتواند داشته باشد که مقدار true به منزله آن است که تا هنگام دريافت پاسخ از سرور ساير دستورات اجرا مي شوند و مقدار false مشخص کننده آن است که اجراي دستورات تا هنگام دريافت پاسخ سرور به صورت کامل متوقف خواهد شد. به طور معمول از آنجايي که ممکن است مدت زمان زيادي براي دريافت پاسخ از سرور طول بکشد و در صورتي که مقدار اين پارامتر false انتخاب شده باشد در اين صورت کاربر تقريبا قادر به انجام هيچ کاري در صفحه نخواهد بود در بيشتر موارد از مقدار true براي اين پارامتر استفاده مي شود.

 

پس از بررسي تابع ()open و آشنايي با نحوه استفاده از پارامترهاي آن به بررسي تابع ()send مي پردازيم

 

مقدار پارامتر تابع ()send ميتواند هر مقداري که ميخواهيد در هنگام ارسال درخواست براي سرور ارسال نماييد باشد. داده ها بايد با فرمتي مشابه آنچه در آدرسهاي صفحات وب مشاهده مي نماييد (name=value&anothername=othervalue&so=on) ارسال شوند. توجه داشته باشيد که در صورتي که روش ارسال درخواست را به صورت POST تعريف نموده ايد (در دستور ()open) بايد حتما مقدار MIME type درخواست خود را به روش زير تغيير دهيد چرا که درغير اين صورت سرور مقادير ارسال شده را لحاظ نخواهد کرد.

 

 

Code:

http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

 

 

نحوه بررسي پاسخهاي ارسال شده از سرويس دهنده (Server)

 

همانطور که بخاطر داريد هنگامي که ميخواستيم اطلاعات مربوط به درخواست HTTP را مشخص نماييم، نام تابعي را که بايد پاسخ سرور را بررسي نمايد بوسيله يکي از خصوصيات درخواست HTTP به نام onreadystatechange مشخص کرديم. در اين بخش به بررسي کاري که بايد اين تابع آن را انجام دهد خواهيم پرداخت. در ابتدا اين تابع بايد وضعيت درخواست ارسال شده را مورد بررسي قرار دهد. اگر وضعيت مورد نظر برابر با 4 باشد مشخص کننده آن است که پاسخ سرور به طور کامل دريافت شده است و مي توانيد به بررسي پاسخ دريافت شده بپردازيد. براي انجام اين کار ميتوان به روش زير عمل کرد:

 

 

Code:

if (http_request.readyState == 4) {

// everything is good, the response is received

} else {

// still not ready

}

 

 

ليست کامل انواع وضعيتهاي درخواست ارسال شده به صورت زير است که مي توانيد آنها را در

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

نيز مشاهده نماييد.

0 - مقدار دهي نشده است. (uninitialized)

- 1 در حال دريافت اطلاعات. (loading)

2 - اطلاعات دريافت شد. (loaded)

3 - بررسي اطلاعات دريافت شده. (interactive)

4 - دريافت پاسخ به طور کامل انجام شد. (complete)

 

در مرحله بعدي بايد وضعيت پاسخ دريافت شده از طرف سرور را مورد بررسي قرار دهيد. ليست تمامي وضعيتهاي ممکن براي پاسخ يک سرور به يک درخواست را مي توانيد در

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مشاهده نماييد. در حالت کلي تنها حالتي که مد نظر ماست و بيانگر انجام درخواست و دريافت پاسخ بدون هيچ مشکلي مي باشد حالتي است که وضعيت پاسخ برابر با 200 باشد. با توجه به آنچه گفته شد ميتوان نتيجه گرفت که ميتوانيد ازکدي مانند آنچه در ذيل آمده برسسي نهايي براي دريافت پاسخ به طور کامل و صحيح را انجام دهيد. همانطور که قبلا اشاره شد و در کد زير نيز قابل مشاهده است وضعيت پاسخ مي تواند مقادير متفاوتي - بغير از 200 - داشته باشد که براي مثال مقدار 404 - به معناي عدم وجود فايل درخواست شده - را حتما قبلا تجربه نموده ايد.

 

 

Code:

if (http_request.status == 200) {

// perfect!

} else {

// there was a problem with the request,

// for example the response may be a 404 (Not Found)

// or 500 (Internal Server Error) response codes

}

 

 

در نهايت پس از بررسي وضعيت ارسال درخواست و همچنين وضعيت پاسخ دريافت شده، با توجه به آنچه که مد نظر شما است ميتوانيد از اطلاعات موجود در پاسخ دريافت شده استفاده نماييد. براي دسترسي به اطلاعات موجود در پاسخ دريافت شده دو راه وجود دارد که به بررسي آنها مي پردازيم.

 

استفاده از http_request.responseText که مقدار دريافت شده را به صورت يک متغير رشته اي String در اختيار قرار مي دهد.

 

استفاده از http_request.responseXML که مقدار دريافت شده را به صورت يک متغير از نوع XMLDocument در اختيار قرار مي دهد که با استفاده از توابع JavaScript DOM ميتوان از آن استفاده نمود.

 

بررسي نحوه کار با اين تکنولوژي بوسيله يک مثال

 

براي بررسي هر چه بيشتر آنچه گفته شد بهتر است تمامي موارد ذکر شده را در کنار هم قرار داده و عملا با استفاده از اين تکنيک يک درخواست ايجاد نموده و پس از ارسال، از مقدار بازگشت داده شده استفاده نماييم. در اين مثال يک درخواست براي دريافت فايل test.html (فرض شده است که اين فايل حاوي عبارت .I"m a test مي باشد.) ايجاد و ارسال خواهد شد و مقدار پاسخ دريافت شده با استفاده از تابع ()alert نمايش داده خواهد شد. به کد زير توجه کنيد:

 

 

Code:

var http_request = false;

 

 

function makeRequest(url) {

http_request = false;

if (window.XMLHttpRequest) { // Mozilla, Safari,...

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {

http_request.overrideMimeType("text/xml");

// See note below about this line

}

} else if (window.ActiveXObject) { // IE

try {

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

 

 

if (!http_request) {

alert("Giving up :( Cannot create an XMLHTTP instance");

return false;

}

 

 

http_request.onreadystatechange = alertContents;

http_request.open("GET", url, true);

http_request.send(null);

}

 

 

function alertContents() {

if (http_request.readyState == 4) {

if (http_request.status == 200) {

alert(http_request.responseText);

} else {

alert("There was a problem with the request.");

}

}

}

 

 

Make a request

 

 

در کدي که ذکر شد مي توان به موارد زير اشاره نمود:

پس از نمايش کد در يک Browser لينکي با عنوان Make a request در صفحه نمايش داده خواهد شد که کاربر بر روي آن کليک خواهد کرد.

کليک کردن بر روي لينک باعث اجراي تابع ()makeRequest مي شود، و مقدار test.html نيز به عنوان پارامتر به اين تابع منتقل ميشود. (فايل مورد نظر بايد در دايرکتوري فايل اصلي قرار داشته باشد.)

درخواست مورد نظر پس از ايجاد و ارسال، با دريافت وقايع (Event) مربوط به تغيير وضعيت ارسال درخواست يعني onreadystatechange و با توجه به آنچه در کد فوق آمده است، تابع ()alertContents را اجرا خواهد نمود.

تابع ياد شده، وضعيت ارسال درخواست و دريافت پاسخ را بررسي نموده و پس از دريافت پاسخ بخ طور کامل و صحيح مقدار آن را (که متن داخل فايل test.html خواهد بود) با استفاده از تابع ()alert نمايش خواهد داد.

 

براي آزمايش کد نوشته شده ميتوانيد

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

کليک کنيد. همچنين فايل test.html که در مثال فوق به آن اشاره شد را نيز ميتوانيد در

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مشاهده نماييد.

 

توجه داشته باشيد که دستور (...)http_request.overrideMimeType با توجه به توضيحاتي که در اينجا داده شده است ممکن است باعث ايجاد خطاي مربوط به JavaScript در نرم افزار Firefox 1.5b شود. چرا که اين دستور مشخص کننده آن است که مقادير بازگشتي از طرف سرور با فرمت XML خواهند بود در حالي که در واقع دستور بازگشتي عبارت از متن داخل فايل text.html است که از نوع XML (در اين مثال خاص) نميباشد. در صورتي که در هنگام تست اين کدها با خطا مواجه شديد در اولين اقدام بر رفع اين اشکال دستور اشاره شده را حذف کنيد.

 

کار با پاسخهاي ارسال شده به فرمت XML

 

در مثال قبل پس از ارسال درخواست، براي نمايش پاسخ دريافت شده از طرف سرور از خصوصيت responseText که از خصوصيات مربوط به درخواست HTTP ايجاد شده ميباشد استفاده شده است. در اين بخش از مقاله در نظر داريم مواردي را بررسي کنيم که مقدار بازگشتي از طرف سرور به فرمت XML ميباشد و ما براي بررسي آنها بايد از خصوصيت responseXML به جاي responseText استفاده نماييم.

 

در اولين مرحله فايلي حاوي دستورات معتبر XML ايجاد مينماييم، اين فايل که با نام text.xml از آن استفاده خواهيم کرد حاوي دستورات زير مي باشد.

 

 

Code:

 

 

?>

I"m a test.

 

 

در دستورات داده شده در کد، براي خاصيت کليک بر روي لينک Make a request نيز بجاي ثبت درخواست براي مشاهده فايل text.html، درخواست را براي نمايش محتويات فايل text.xml ارسال خواهيم نمود که در اين صورت تغيير زير در دستور بايد ايجاد شود.

 

 

Code:

...

onclick="makeRequest("test.xml")">

...

 

 

همچنين در تابع alertContents() بجاي خطي که حاوي دستور alert(http_request.responseText); ميباشد بايد کدهاي زير جايگزين شود.

 

 

Code:

var xmldoc = http_request.responseXML;

var root_node = xmldoc.getElementsByTagName("root").item(0);

alert(root_node.firstChild.data);

 

 

بدينوسيله ما از خصوصيت responseXML براي دريافت و تحليل اطلاعات XML دريافت شده از سرور، با کمک از تعدادي دستور DOM استفاده نموده ايم. نمونه قابل اجراي دستورات بيان شده در

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

قابل مشاهده ميباشد. همچنين در صورتي که مايل باشيد، فايل test.xml را نيز ميتوانيد در

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مشاهده نماييد.

 

در پايان اين نکته را نيز بخاطر داشته باشيد که براي بررسي روشها و امکانات DOM ميتوانيد به

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مراجعه نماييد.

 

تمامي فايلهاي مورد نياز براي تست کدهاي اشاره شده در مقاله در فايل ضميمه اين مقاله موجود مي باشد که براي استفاده از آنها ميتوانيد فايل ضميمه را دانلود نماييد. توجه داشته باشيد که براي اجراي صحيح کدها بايد حتما از يک سرور استفاده نماييد و امکان استفاده و تست فايل ضميمه بدون دسترسي به يک سرور (لوکال و يا بر روي اينترنت) وجود ندارد.

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[ملیساا 5015]

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[ملیساا 5015]

توابع کتابخانه ای AJAX ‏(JavaScript و XML اسنکرون!) برای دات نت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

AJAX تکنیکی است که اخیرا دریچه جدیدی به طراحی برنامه های تحت وب گشوده.

به این ترتیب که با استفاده از AJAX صفحات وب بدون نیاز به دوباره لود شدن اطلاعات

مورد نیاز را به سرور فرستاده و پاسخ دریافت میکنند.

نمونه هایی که AJAX در آنها به کار رفته : GMail , فروم خودمون و ...

 

برای اطلاعات بیشتر:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

نمونه استفاده از AJAX

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[ملیساا 5015]

Ajax دز ASp.Net

 

در طول این قسمت به استفاده عملی از AJAX در ASP.NET به ذکر یک مثال ساده میپردازیم .

 

همانطور که میدانید AJAX ترکیبی از چند تکنولوژی موجود می باشد که هدف آن بهینه سازی تبادل داده ها بین سرورو کاربرهم در جهت کاهش حجم داده وهم نحوه نمایش مطلوب آن ها می باشد.با آمدن مدل AJAX تبادل داده بین سرور و کلاینت تفاوت های اساسی کرده است :صفحه قابل مشاهده کاربر برای گرفتن اطلاعات جدید در خواست خود را مستقیم به سرور نمیدهد بلکه به ماجولی در سیستم خودش به نام AJAX Engine میدهد.AJAX Engine وظیفه دارد در خواست ها را به سرور بفرستد و هنگام در یافت پاسخ ،آنهارا به صفحه در خواست کننده اعلام کند.حال وقتی صفحه پاسخ خود را دریافت کرد با کد javascript میتوان اطلاعات جدید را در قسمتی از صفحه ی خود تزریق کند.

 

مثال:فرض کنید صفحه ای داریم که دارای یک dropdown است که شامل نام شهر ها است.علاوه بر این dropdown صفحه اجزای فراوان دیگر دارد(مثلا لوگو ،تصاویر و...).شما میخواهید وقتی کاربر شهر مورد نظرش را انخاب کرد ،دمای اون رودر همان لحظه پیدا کنید و زیر dropdown نمایش دهید.

 

خوب برای حل این مثال بدون استفاده از AJAX مجبوریم یک deropdownlist که runat=server است بگذاریم و در رخداد OnSelectedIndexChanged آن- در سمت سرور- به دنبال دمای شهر انتخاب شده بگردیم سپس دما را در یک label نمایش دهیم.این روش باعث postback شدن کل صفحه ما فقط برای نمایش یک عدد دمای شهر میشود.برای جلوگیری از این اتلاف وقت و هزینه (به خاطر postback شدن کل صفحه) از ajax استفاده میکنیم.

 

برای استفاده از AJAX ابتدا کتابخانه رایگان آن را از اینجا دانلود کنید.پس از گرفتن ajax.dll آن را در قسمت solution explorer-refrences با کلیک راست کردن بر روی refrences و انتخاب add refrence... وپیدا کردن فایل ajax.dll اضافه کنید.

 

قبل از هر کاری در فایل web.config بخش زیر را اضافه کنید:

 

 

 

type="Ajax.PageHandlerFactory, Ajax" />

 

 

...

 

 

فرض کنید مثال ما در صفحه ی index رخ میدهد .ابتدا باید دررخداد Page_Load صفحه را به عنوان استفده کننده ajax معرفی کنید.که به شکل زیر این کار را میکنیم.دقت کنید که این خط برای هر صفحه aspx که میخواهد از ajax استفاده کند باید در page_load اش نوشته شود:

 

Ajax.Utility.RegisterTypeForAjax(typeof(yourpagecl ass));

 

در مثال ما کدی به شکل زیر خواهد شد:

namespace AjaxTest

{

 

....

 

public class Index : System.Web.UI.Page

{

....

 

private void Page_Load(object sender, System.EventArgs e)

{

Ajax.Utility.RegisterTypeForAjax(typeof(Index));

.....

 

}

 

...

 

حالا یک متد در سمت سرور مینویسیم تا با گرفتن نام شهر دمای آن را برگرداند.(نحوه ی پیداکردن دما برای ما اصلا اهمیت ندارد، فرض کنید این دما را از یک وب سرویس میگیرد و یا از پایگاه خود پیدا میکند در هر صورت برای ما تبادل اطلاعات بین سرور و کاربر مهم است نه نحوه یافتن آن ها،لذا در مثال ها فقط نحوه استفاده از ajax برای تبادل در خواست و نتایج بین سرور و کاربر بررسی میشود):

public int FindCityTemperature (string pCity)

 

{

 

int result=0;

 

...//find result

 

return result;

 

}

خوب یک متد سمت سرور نوشتیم،حالا تصمیم داریم این متد را به عنوان متدی که ajax بتواند سرویس دهد مشخص کنیم.برای مشخص کردن متد های سمت سرور به عنوان متد استفاده کننده از ajax عبارت زیر را قبل از آن متد قرار میدهیم:

[Ajax.AjaxMethod()]

 

پس متد FindCityTemperature ما میشود:

 

[Ajax.AjaxMethod()]

 

public int FindCityTemperature (string pCity)

 

{

 

int result=0;

 

...//find result

 

return result;

 

}

 

کد نویسی سمت سرور تمام شد.حالا باید script نویسی سمت کاربر روشروع کنیم و طبیعتا javascript رو انتخاب میکنیم(البته هیج فرقی نمیکنه چه زبانی رو انتخاب کنید، به هر حال من که حسابی از script نویسی سمت کاربر بدم میاد).دقت کنید تمام کد هایی که تا کنون نوشتیم در فایل cs مثلا index.aspx.cs بود.حالا صفحه aspx را باز کنید تا کد های سمت کلاینت رو بنویسیم.کد زیریک dropdownlist ویک div برای نمایش نتایج است .در قسمتی از body صفحه html خود قرارش دهید.دقت کنید id داده شده به select و div برای پیدا کردن آن در کد ها استفاده میشود:

 

تهران

مشهد

اصفهان

تبریز

شیراز

 

د ر قسمت meta صفحه دو خط زیر را اضافه کنید:

 

 

 

به جای NameSpace و AssemblyName فضای نام پروژه خودتان و به جای pageclass نام کلاس صفحه را جایگزین کنید که در مثال ما میشود :

 

 

 

حالا وقت نوشتن کد جاوا اسکریپت رسیده:

function GetAndDispayTemp()

{

var city=document.getElementById("MyDDL").item(MyDDL.s electedIndex).text;

var citytemp=Index.FindCityTemperature(city);

document.getElementById("TempRes").innerText=cityt emp+"°C";

}

 

این اسکریپت رو میون تگ ها html صفحه بنویسید...حالا فکر میکنم بیموقع نباشه بهتون بگم تبریک شما اولین صفحه AJAX خود را ساختید .

 

همین مثال کوچک تا حد زیادی نحوه کار با AJAX رو نشون میده ،یه خورده خلاقیت و ابتکار باعث بوجود آمدن کار هایی واقعا جذاب و جالب میشه.بعنوان مثالی دیگر به یکی از کارای من در اینجا یه نگاهی بندازین. توی این صفحه در ابتدا فقط عناوین خبر لود میشه.که طبیعتا حجم بسیار اندکی داره وقتی خبر خاصی انتخاب شد تازه کل متن خبر از سرور گرفته شده و نمایش داده میشود.

 

از همین الان شما هم شروع کنید به ساختن نمونه های آزمایشی صفحات AJAX...

 

منبع :http://notvoid.persianblog.com/

[ملیساا 5015]

آنچه که در مورد Ajax میخواهید بدانید

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[ملیساا 5015]

وبلاگي مبتني بر Ajax

 

دیگر AJAX یک فناوری جدید به حساب نمی آید و در طراحی های سایت های معروفی مثل

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

,

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

و

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

, نسخه جدید سرویس ایمیل هاتمیل.

 

 

نکته جالب اینجاست که این فناوری تا حدی پیشرفت کرده است که وبلاگ هایی مثل وردپرس نیز مبتنی بر آن طراحی شده اند.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

وبلاگی است که این کار را کرده است. البته این پروژه هنوز در مرحله بتا قرار دارد.

توسط این ابزار امکانات جدیدی به غیر از امکاناتی که خود ورد پرس به شما می دهد به وبلاگ شما اضافه خواهد شد.

بعضی از این امکانات عبارتند از :

* جابه جا کردن مطالب به استفاده از Drag and Drop: اکنون کسانی که وبلاگ را می خوانند می توانند آزادانه جای مطالب را عوض کنند و layout وبلاگ را همانگونه که دوست دارند تغییر دهند.

* اضافه کردن RSS, Flickr, Notepad و … با استفاده از ابزار “Add / Remove Content” : آنچه را که دوست داری به وبلاگ اضافه کن ، به بیانی دیگر راحت باش.

* با کلیک کردن روی لوگوی BloxXpress صفحه را به حالت اولیه برگردان:هر جوری دلت خواست گند بزن به وبلاگ بعد آخر دوباره درستش کن

* هر چیزی رو دوس نداشتی بنداز تو آشغالی: اَه این پست درباره من چه قد بلند و به درد نخوره می ندازمش تو آشغالی!!!

 

اگر می خوای لذتش رو ببری از این

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

استفاده کن و اگر خوشت اومد راحت باش حتمآ

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

کن.

[ملیساا 5015]

Ajax دم از زندگی جدید در برنامه های کاربردی وب می زند

در این مقاله ای در مورد دنیای جدیدی که آژاکس در برنامه های کاربردی وب بوجود آورده است صحبت شده است.

این مقاله نوشته آقای Peter Wayner می باشد که از سایت InfoWorld انتخاب کردم و با کمی اشکال که در ذات آدمی است برای شما ترجمه کردم و امیدوارم که از این مقاله استفاده کنید تا بیشتر به عنصر جدید مطرح شده در زمینه برنامه های کاربردی وب پی ببرید.

 

صرف نظر از اینکه شما درباره JavaScript ، DHTML و Browser میدانید ، آژاکس یک بازی با توپ کاملا جدید است.

 

یک سال قبل، Thomas Lackner زیاد جویای جاوااسکریپت نمی شد. وقتی طرح خلاصه معماری یک برنامه کاربردی وب را آماده کرد. او می دانست که می تواند زبان مرورگر را برای نصب یک نویسنده کوکی و بارگیری عکس ها شمارش نماید. اما او چرخشی را به سمت سرور برای حرکتی عظیم برداشت. اما وقتی گوگل فعل و انفعال عالی را برای وب سایت خود شروع کرد همانند Gmail و Google Suggest، میزان آن از چشمان Lackner افت کرد و او فرصت یافت.

 

او گفت : وسط سال 2004 تمام آن جرقه ها زده شد. من تلاشی را برای افزودن مولفه های آژاکس به هر برنامه کاربردی وب، که کار کرده بودم شروع کردم.

 

آژاکس اخیراً اختصاری از یک دیدگاه تازه در مرورگرهای قدرتمند شده است: جاوا اسکریپت و اکس ام ال غیرهمزمان

 

AJAX (Asynchronous JavaScript and Xml)

 

قبل ازآژاکس صفحات وب لینک ها، فرم ها و دکمه هایی را نمایش می دادند. وقتی کاربر بر روی یک دکمه یا لینکی کلیک می کرد، مرورگر پیامی رو به یک سرور دور دست ارسال می نمود و می پرسید که سری بعد چه چیزی را نمایش دهد. جاوا اسکریپت تمایل داشت که برای چیزی بیش از کنترل ورودی ها استفاده شود.صفحات وب همانند صفحات یک کتاب ایستا بودند.

 

مرورگرهای پست آژاکس (Post-AJAX browser) در پشت صفحات بارگیری شده رگه های (threads) در حال اجرا را پردازش می کنند. اگر یک کاربر بر روی یکی از لینکها یا دکمه ها کلیک نماید، مرورگر می تواند با استفاده از جاوا اسکریپت محتوای صفحه را بروز نماید. برای نمونه، جی میل گوگل، قسمت های یک ایمیل را مخفی یا نمایش می دهد بدون اینکه برای رسیدن پاسخ از سمت سرور صبر نماید، حذف تاخیری شبکه. اگر اطلاعات باید به سرور ارسال شود، با استفاده از یک پردازش درپشت، این اطلاعات را ارسال می نماید.

 

Berndan Eich، سازنده جاوا اسکریپت در نت اسکپ می گوید: الان جهان در حال کشف چیزهایی است که او در سال 1995 تصور می کرد. او می گوید: ما (مارک اندریسن و من) همیشه بر آن بودیم جاوا اسـکریپت توانـایی برنـامـه مشـتــری-میـانی (Client-centeric) راخواهد داشت که نیازی به بارگذاری مجدد صفحه از سرور را ندارد.

 

 

 

یک نوع جدید برنامه های کاربردی

 

جسی جیمز گررت کسی بود که در مقاله منتشر شده خود در فوریه سال گذشته مخفف AJAX رو اختراع کرد، می گوید که واکنش به این اسم شگفت آور بوده است.

 

وقتی که شما مزایای رسیدن به آژاکس را کشف می نمایید شور و هیجان آن، غیرقابل درک است.

 

·عمده ترین ساده کننده توزیع نرم افزار است.

 

·مرورگرها صفحات AJAX را به صورت خودکار بارگیری می نمایند.

 

·مشتری ها اغلب برای نصب نرم افزار سفارشی بی میل هستند اما بیشتر مردم را می توان برای دیدن یک سایت متقاعد نمود.

 

علاوه بر اینها، آژاکس چند تا مزایای دیگر نیز دارد.

 

·اجرای جاوا اسکریپت در سمت مشتری باعث کاهش مصرف پهنای باند و پردازش تقاضا در سرور می شود.

 

·کدهای خوب طراحی شده که بدرستی غیرهمزمان باشند نیز برای پاسخ به تقاضا و پرس جو بیش از یک بار به سرور میروند و حتی بیشتر که بوسیله پخش خارجی پیک تقاضا خواهد بود.

 

·افزایش امنیت به وسیله رمزنگاری داده ها در سمت مشتری قبل از اینکه ارسال شوند.

 

برنامه کاربردی Basecamp project-management از 37signals مثال بسیار خوبی برای یک توسعه برنامه کاربردی وب با استفاده از نمونه جدید است. منوهای زیادی برای باز کردن یک پنجره بدون اینکه یک رفت و برگشت به سرور باشد، اضافه می شود. اما وقتی آیتم جدید ذخیره می شود، مرورگر هنوز باید صبر نماید تا مطمئن شود که آیتم جدید به طور کامل ذخیره شده است.

 

بروز رسانی کدهای جاوااسکریپت سرور در پس زمینه تا زمانی که نوشته " درحال انتقال... فقط چند لحظه" در حال نمایش است، ادامه می یابد. هنوز خیلی از فعل وانفعالات با سرور باقی مانده است، اما سرعت کدهای جاوا اسکریپت بوسیله مدیریت چندین کلیک کاربر بالاست.

 

David Heinemeier Hansson یک برنامه نویس در37signalsاست ومی گوید: که او بر روی موضوع حذف زمان تاخیر وقتی که کاربر فرم را تائید می کند، تمرکز کرده است. " اگر شما در وبلگتان یک توضیحات داشته باشید، در پس زمینه سمت سرور بروز رسانی می شود. هر وقت که شما نیاز به اضافه کردن یا تغییر محتوای آن را دارید دیگر به بارگذاری مجدد صفحه نیازی نیست و می توان این کار را انجام داد.

 

برخی همهمه ها ساخته شده درباره آژاکس توسط طراحان وب بوده است. انعطاف پذیری آژاکس نقطه قوتی برای طراحان وب است به دلیل اینکه جاوا اسکریپت توان کنترل ظاهر هر عکس یا نوع را در یک صفحه دارد. فونت ها توان کوچک و بزرگ شدن را دارند. خطوط جدول توان افزایش یا کاهش را دارند. رنگها توان تغییر را دارند. که این ابزار بسیار خوبی برای طراحان وب است.

 

 

 

 

 

سماجت مشکلات مرورگرها

 

شور و شوق برای این فناوری های جدید به خاطر ذات آدمی، معمولی است .چند تا ابزار خوب برای توسعه آژاکس موجود است ، platform که می تواند ناپایدارباشد و از استانداردی که متناقض است تبعیت کند. دو تا از بزرگترین دلایل شکایت درباره اختلاف بین مرورگرها و تطابق آنها این است که آنها بهترین راه را برای اضافه کردن چند امکان فعل و انفعال نمی فهمند. اضافه تر، این مقدورات جدید می توانند کاربران را گیج نمایند که انتظار ندارند این امکانات جدید – در بعضی موارد – شکاف های امنیتی جدیدی باز نمایند.

 

بسیاری از برنامه های کاربردی آژاکس به امکاناتی نیاز دارند که فقط در ورژن های جدید سیستم های جاوا اسکریپت با مرورگرهای جدید همانند Firefox یا IE 5.5 در دسترس هستند. برای مثال، شی XMLHttpRequest ، XML را از سرویس دهنده وب مستقیما تجزیه می کند، یک امکانی است که کار بامنابع XML را برای برنامه نویسان راحت تر خواهد کرد. قبل از این که این امکان در IE5.0 آغاز شود، توسعه دهنده ها می بایست اطلاعات را از سرور دوردست بارگذاری می کردند اما به یک فریم جداگانه نیاز داشتند.

 

بعضی از جدیدترین مرورگرها پلت فرم (Platform) پایا ای را برای استفاده از XSLT (XSL Transformation) ارائه نمودند، اما جزئیات آن به نظر آبکی می آمد. اینها بزرگترین تفاوت روش اداره کردن فضای نام (NameSpace) در مرورگرهای IE 5.0, 5.5 و 6.0 بود. موزیلا 1.8 الان چند تا از همین امکانات رو به اشتراک گذاشته که در نخستین ورژن این کار را انجام نداده بود.

 

برنامه نویس ها برای رفع این نقص مجبورند که بارکننده های سفارشی بسازند تا کدها را با ورژن مرورگر مطابق نماید. راب برون یکی از اولین توسعه دهنده های آژاکس و خالق پلاگین Aardvark در Firefox خوش بین است و میگوید : « خوشبختانه اغلب مرورگرهای متفاوت می توانند به طور مناسب و به آسانی در چندین توابع سودمند کپسوله شوند و خوراک اصلی برنامه کاربردی آژاکس شما از قیود زشت آزاد شود ».

 

اما این، از شکل اندازی ها می تواند دردناک شود، و اغلب مرورگرهای ابتدایی بسادگی تبعیت می کنند. Fried میگوید: « ما در حال کار بر روی یک پروژه به نام کوله پشتی (Backpack) هستیم که در هنگام ورود، به اولین برنامه پیشرفته آژاکس به غیر از Gmail تبدیل می شود. ما تصمیم گرفتیم که به IE 5.0 فقط بگوییم نه. یک تصمیم آگاهانه بود که ما گرفتیم و به زمان مربوط است ».

 

همین، بمبارزه طلبیدن چندین نوع طراحی است. اگر یک برنامه کاربردی وب فقط به صورت داخلی استفاده شود، یک گروه معمار میتواند فرض معقولانه ای کند که تمام مرورگرهای شرکت دارای یک خصوصیات مشترک هستند. در یک چنین حالت زیربنایی، برنامه نویسی راحت تر است. اما یک شرکت که برنامه های کاربردی وب برای مشتری توزیع می کند هرگز نمی تواند چنین پنداشتی داشته باشد. اغلب مشتری های آنها ورژن قدیمی مرورگرها را استفاده می کنند.

 

 

 

دردسر کد

 

معامله با مرورگرهای نامعلوم اولین چالش است. ابزار توسعه برای ساختن جاوا اسکریپت هنوز پیش از چند مورد نمی باشد و نسبت به آنها حس دشوار بودن را دارید. خصایصی که برنامه نویسان سایر زبانها مسلم فرض می کنند، فقط در دنیای جاوا اسکریپت ظاهر می شود. به عنوان مثال اشکال زدایی همچون Venkman موزیلا در بسیاری از موارد توسط کد نویس هایی که عادت به بارگذاری مجدد صفحات برای جستجوی خطا دارند استفاده نمی شود.

 

ED Felten یک پروفسور کامپیوتر در دانشگاه Princeton پیش بینی کرده است که شاید برنامه نویسان در هنگام انتقال خصیصه های سمت سرور به درون کدهای جاوا اسکریپت سهواً حفره های امنیتی ایجاد کنند. اگرچه خواندن کدهای وارد شونده جاوا اسکریپت در یک sandbox بدون API برای دسترسی به فایل های محلی، فرصتی برای فلج کردن باقیمانده است به این دلیل که هنوز کد به وب سایت خارجی دسترسی دارد. برای نمونه حملات DDoS، به آسانی می تواند به کدها وارد شود.

 

علاوه بر این کدهای جاوا اسکریپت همانند روشهای برنامه نویسی C و JAVA گردآوری نشده است و کاربر نهایی می تواند کد را ببیند و یا حتی قبل از اجرا، آنرا ویرایش نماید. برای مثال، یک حمله کننده می تواند در کد به دنبال رشته هایی بگردد که شامل دستورات SQL می باشد و آنها را با پرس وجوهایی جانشین نماید که اطلاعات مختلفی را از سرور بازیابی نماید. Felten می گوید: « هروقت شما رشته ای را به جایی ارسال می نمایید، درباره آن خیالی دارید ».

 

ظهور خطاهای جدیدی همچون اینها نیاز به تفکر مجدد درباره خصایص جدید، توسط طراحان وب دارد.کاربران مرورگرها به درک روشهای قدیمی رسیده اند. آنها آگاه شده اند، برای مثال، دوبار کلیک کردن بر روی یک دکمه نمی تواند بر روی کارت اعتباری آنها شارژ دوباره داشته باشد. برنامه های کاربردی آژاکس بسیاری از فرضیات آنان را می شکند.

Ajax دم از زندگی جدید در برنامه های کاربردی وب می زند

[ملیساا 5015]

The Ten Best Ajax Links: Tutorials, Examples, and History

 

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

 

.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[ملیساا 5015]

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

 

.................................................. ............

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[ملیساا 5015]

امروزه، معمولا وقتی صحبت از طراحی برنامه های تعاملی(interaction design ) می شود،بیشتر توجه ها معطوف به وب است. برنامه های کاربردی تحت وب به سرعت در حال رشد و توسعه هستند و کاربران دوست دارند که با همان راحتی و سرعتی که با Desktop application ها کار می کنند با Web application ها هم کار کنند. طراحان برنامه های کاربردی وب هم برای از بین بردن این شکاف ، روش های طراحی گوناگونی را پیشنهاد کرده اند.یکی از این روش ها روش Ajax است. ajax مخفف Asynchronous JavaScript + XML می باشد.

 

 

نگاهی به

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

و

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

بیندازید . در

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

وقتی روی قسمتی از نقشه zoom می کنید و یا بالا و پایین می روید همه چیز تقریبا به طور همزمان و بدون Load شدن مجدد صفحات انجام می شود. در

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

نیز وقتی مشغول تایپ کلمه مورد نظر خود هستید، به طور همزمان کلمات مرتبط با آن و نیز نتایج حاصل از جستجوی آنها نمایش داده می شود. این برنامه ها چگونه کار می کنند؟

 

 

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

 

 

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

 

یک برنامه کاربردی Ajax ، طبیعت start-stop-start-stop برنامه های کاربردی وب را با معرفی یک واسط به نام Ajax engine بین کاربر و سرور، از بین می برد. ممکن است به نظر برسد که افزودن یک لایه جدید به برنامه کاربردی، عکس العمل آن را کند کند اما نتیجه حاصله کاملا برعکس است! به جای load کردن یک صفحه وب در آغاز یک session ، مرورگر کاربر، ajax engine را که توسط JavaScript نوشته شده است load می کند. این engine مسئولیت render کردن واسطی که کاربر می بیند و همچنین ارتباط با سرور از سمت کاربر را بر عهده دارد.این engine سبب می شود که تعامل کاربر با برنامه کاربردی، نا همگام(asynchronously) با ارتباط کاربر با سرور انجام شود. بنابر این ،کاربر هرگز یک صفحه مرورگر خالی یا یک آیکون ساعت شنی برای انتظار نمی بیند و منتظر سرور نمی نشیند!

 

 

 

به کارگیری روش ajax

 

 

مقدمه: XMLHttpRequest یکی از اشیای محلی(Native Object) جاوااسکریپت است که اجازه درخواست های HTTP را از یک صفحه لود شده به کاربران می دهد.این شیء به کاربران اجازه می دهد که یک سری ریزدرخواست(Microrequests) در پاسخ به رویدادهای کاربر، بدون لود شدن مجدد صفحات ارسال کنند و این امر باعث می شود که یک برنامه تحت وب ، ماهیتی مثل desktop applications پیدا کند. این شیء ، یک جزء استاندارد از Javascript یا DOM محسوب نمی شود و به صورت آزمایشی درInternet Explorer 5.5 ، Mozilla/Firefox، Safari 1.2، و Opera 7 به کار رفته است. W3C در حال تدارک دیدن امکان LOAD وSAVE است که عمیاتی مشابه XMLHTTPRequest انجام می دهند ولی هنوز در هیچ Web browsersای پیاده سازی نشده اند. (نکته: با اینکه نام XML در این شیء به چشم می خورد،هیچ لزومی برای استفاده ازXML وجود ندارد. فقط اگر می خواهید کاملا cross browser عمل کنید، باید در نظر بگیرید که در نسخه فعلی مرورگر وب Safari متعلق به APPLE ،پاسخ SERVER حتما باید به صورت text/xml mimetype باشد!)

 

برای استفاده از روش ajax مراحل زیر باید انجام گیرد:

 

 

ساخت یک نمونه از شیء XMLHTTPRequest

 

در Internet Explorer به صورت یک کنترل ActiveX

در سایر مرورگرهای وب به صورت یک شیء نرمال جاوااسکریپت

مهیا کردن داده ها و ارسال آنها برای پردازش

ارسال داده ها با متد GET

ارسال داده ها با متد POST

دریافت نتایج حاصل از پردازش و نمایش آنها

 

 

 

در ادامه با نوشتن یک مثال ساده به توضیح هر یک از مراحل فوق می پردازیم:

 

 

فرض کنید که می خواهیم برنامه ای برای ضرب دو عدد بنویسیم. قرار است که ضرب دو عدد در سمت Server و توسط php انجام شود.(ممکنه که این مثال کمی احمقانه به نظر برسه چون خیلی راحت با جاوااسکریپت میشه این کارو انجام داد! ولی هدف ما توی این مقاله استفاده از یک زبان برنامه نویسی سمت server بدون لود شدن مجدد صفحات است و هدف ما به هیچوجه، انجام عمل ضرب نیست!)

 

 

قدم اول ، ساخت یک نمونه از شیء XMLHTTPRequest است. نمونه سازی از این شیء مشابه سایر اشیای جاوااسکریپت می باشد.تنها تفاوت ، مربوط به نمونه سازی درInternet Explorer می باشد،زیرا درIE ،شیء درخواست یک کنترل ActiveX محسوب می شود. برای ساخت این شیء به صورت مستقل از مرورگر، از precompile directives استفاده می کنیم.(این دستورات با /*@cc_on شروع شده و به @end @*/ ختم می شوند.) در اینجا از دستورات try-catch برای کنترل ساخت این شیء استفاده شده است.در هنگام لود صفحه اصلی، یک نمونه از این شیء درست می شود:

 

 

 

 

 

 

 

 

 

 

مرحله بعدی کار، مهیا کردن داده ها و ارسال آنها برای پردازش است. فرمی ساده با سه فیلد با نام های مشخصه a,b,c درست می کنیم. رویداد onblur مربوط به فیلد b را با تابع echoResult اداره می کنیم. قصد داریم وقتی کاربر با فشار دادن کلید tab ،تمرکز را از این فیلد گرفت، نتیجه ضرب a در b را در فیلد c نشان دهیم:

 

 

 

 

 

 

 

 

 

 

 

 

یک صفحه php با نام handleMultiply.php درست می کنیم که پارامترهای a و b را دریافت کرده و حاصلضرب آنها را بر می گرداند:

 

اگر از متد GET استفاده کنیم:

 

 

 

 

php

 

$a=$_GET["a"];

$b=$_GET["b"];

$c=$a * $b ;

echo $c;

?>

 

 

 

اگر از متد POST استفاده کنیم:

 

 

 

 

php

 

$a=$_POST["a"];

 

$b=$_POST["b"];

 

$c=$a * $b ;

echo $c;

?>

 

 

 

 

 

حالا باید تابعی بنویسیم که داده های فرم را برای پردازش به صفحه handleMultiply.php ارسال کند:

 

اگر از متد GET استفاده کنیم:

 

 

 

 

var url = "handleMultiply.php"; // The server-side script

 

 

function makeRequest() {

 

var a = document.getElementById("a").value;

 

var b = document.getElementById("b").value;

 

var str=url + "?a=" + a + "&b=" + b;

 

http.open("GET", str, true);

 

http.onreadystatechange = handleResponse;

 

http.send(null);

 

}

 

 

 

اگر از متد POST استفاده کنیم:

 

 

 

 

var url = "handleMultiply.php"; // The server-side script

 

 

function makeRequest() {

 

var a = document.getElementById("a").value;

 

var b = document.getElementById("b").value;

 

var str="a="+a+"&b="+b;

 

http.open("POST",url,true);

 

http.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");

 

http.onreadystatechange = handleResponse;

 

http.send(str);

 

}

 

 

 

همانطور که در کد بالا مشاهده می کنید، این تابع مقادیر a‌ و b را از فرم دریافت می کند. با استفاده از متد Open مربوط به شیء XMLHTTPRequest ، به برنامه سمت Server که در اینجا hanldeMultiply.php می باشد متصل می شود.وقتی از روش GET استفاده می کنیم در هنگام باز کردن آدرس صفحه سمت سرور، باید مقادیر a و b را هم ضمیمه کنیم.در این صورت پارامتر تابع send مقدار null‌می گیرد. وقتی از روش POST استفاده می کنیم در هنگام باز کردن آدرس صفحه سمت سرور،فقط آدرس صفحه سمت سرور را می نویسیم اما باید مقادیر a و b را بعدا از طریق تابع send ارسال کنیم. فرق دیگری که میان ارسال به روش GET و POST وجود دارد این است که وقتی از متد POST استفاده می کنیم باید قبل از فراخوانی تابع send، header درخواست را تنظیم کنیم. در هر دو حالت خصوصیت onreadystatechange شیء http را برابر تابع handleResponse قرار دادیم.این تابع مسئول دریافت نتایج و نمایش آنهاست که در مرحله بعد آن را می نویسیم:

 

 

 

 

function handleResponse() {

 

 

if (http.readyState == 4) {

 

result = http.responseText;

 

document.getElementById("c").value=result;

 

}

 

}

 

 

 

وقتی http.readyState برابر 4 باشد عمل دریافت کامل شده است و حالا می توانیم نتایج را دریافت کرده و نمایش دهیم.

 

این تمام کاری بود که باید انجام می دادیم.حالا می توانیم برنامه خود را تست کنیم و یک گام به سمت روش ajax برداریم.نتیجه اجرای این مثال را می توانید در زیر مشاهده کنید:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[ملیساا 5015]

لینکهای آموزشی :

 

مقدمه :

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

بخش اول :

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

بخش دوم :

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[ملیساا 5015]

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

-

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[ملیساا 5015]

دنیای مجازی اینترنت هر چند آرام اما در حال انجام یک تحول اساسی است، تحولی که با نام Web 2.0 خوانده می شود. در صورتی که زمان مجال دهد سعی خواهیم کرد در پستهای بعدی با معرفی سایتهای جدید که به عنوان نخستین نشانه های این تغییر محسوب می شوند، به معرفی Web 2.0 بپردازیم.

 

تکنولوژی به سرعت در حال پیشرفت است و ظاهراً Web 2.0 می خواهد هر روز با معرفی یک پروژه ی جدید از آن هم پیشی بگیرد. یکی از پروژه های فوق العاده ای که امروز با آن برخورد کردم سایت جدید Meebo است. هدف پروژه ی Meebo که توسط سه برنامه نویس جوان راه اندازی شده آن است که شما بدون نیاز به نصب هرگونه نرم افزار و از هر مکانی که به اینترنت دسترسی داشته باشید بتوانید به پیغام رسان دلخواه خود وارد شوید و با دوستانتان در یاهو مسنجر، ICQ، MSN، AIM و حتی GTalk به طور همزمان به گفتگوی آنلاین بپردازید.

 

این پروژه ی دوست داشتنی، بسیار زیبا و پایه گذاری شده بر اساس AJAX با امکانات بی نظیر خود مرا بسیار هیجان زده کرده است. امکان وارد شدن با اشتراک های گوناگون (Multilogin)، نمایش لیست کاربران آنلاین و آفلاین، دریافت پیغام های آفلاین به محض ورود به سیستم، آگاهگر پیامها و طراحی کاربر پسند همه در این پروژه پیش بینی شده اند.

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

تصویر بالا، عکسی از محیط Meebo در حال اجرا را نشان می دهد. در سمت چپ تصویر، یک پنجره ی کوچک آبی رنگ قرار دارد که به نمایش اخبار وبلاگ تیم برنامه نویسان Meebo می پردازد. در وسط تصویر یک پنجره ی گفتگو بین من و یکی از دوستان باز شده است که در حال انجام یک بحث کارشناسانه پیرامون وب 2 هستیم! و در سمت راست لیست تمام کاربران (آنلاین و آفلاین) نشان داده شده است.

 

همانگونه که مشاهده می کنید، محیط ظاهری سیستم بسیار شبیه به اصل برنامه آن (در اینجا یاهو مسنجر) است. همچنین محیط ظاهری در نظر گرفته شده در عین سادگی، زیبا می باشد. شما می توانید تمامی پنجره های موجود را تغییر اندازه دهید آنها را بزرگ (Maximize) و یا کوچک (Minimize) کنید. جالب است که بدانید، حتی اگر شخصی در حال نوشتن پیام برای شما باشد و شما متوجه آن نشوید، آیکون وی در لیست کلی شروع به چشمک زدن می کند.

 

من برای مدتی بیش از نیم ساعت با تمام بخشهای Meebo کار کردم و در هیچ کدام مشکلی ندیدم. اما تیم برنامه نویسی Meebo را چه کسانی تشکیل می دهند؟ آقای "Seth" مشاور بخش تجاری، خانم "Elaine" برنامه نویس AJAX و آقای "Sandy" آشنا به سرورهای ارتباطی. بله، تنها همین سه نفر. اطلاعات بیشتر در رابطه با آنها را در وبلاگشان می توانید مطالعه کنید.

 

مشاهده:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

منبع خبر: WinBeta.Net

[ملیساا 5015]

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام