ارسال: #1

واژه Ajax سرنام عبارت Asynchronous JavaScript and XML و به معني <جاوا اسكريپت و XML آسنكرون يا نامتقارن> است. اي‌جكس فناوري جديدي است كه به كمك آن مي‌توان اينترفيس يك برنامه تحت وب را طوري ساخت كه وقتي كاربر روي دكمه يا لينكي كليك مي‌كند، كليه عمليات ارسال اطلاعات و دريافت نتايج در پشت صحنه انجام ‌شود و فقط آن قسمت از اينترفيس كه قرار است اطلاعات جديد را به نمايش درآورد تغيير ‌كند بدون اينكه تمام صفحه از نو بارگذاري شود. در اين مقاله مي‌خواهيم اين فناوري نوين و تحول آفرين را از جنبه‌هاي مختلف مورد بررسي قرار دهيم و با مباني فني آن آشنا شويم.


كمربندها را ببنديد

آيا از دنياي كلاسيك وب خسته شده‌ايد؟ آيا مايليد با چهره جديد وب آشنا شويد؟ آيا مي‌خواهيد با جديدترين فناوري دنياي برنامه‌نويسي وب آشنا شويد؟ براي پرواز آماده باشيد! مقصد ما يكي از استان‌هاي كشور جديد التاسيس Web 2.0 است. مي‌خواهيم با هم به دنياي هيجان انگيز Ajax سفر كنيم.

در سرزمين اي‌جكس چهره سايت‌هاي وب مانند نرم‌افزارهاي روميزي به نظر مي‌رسند. اكنون وب خانه دوم اطلاعات ديجيتالي شما است. حالا كه با داشتن يك خط اينترنت پرسرعت مي‌توانيد در تمام طول شبانه روز به اينترنت متصل باشيد، وقت آن فرارسيده كه نرم‌افزارهاي تحت وب نيز متحول شوند و كاركرد و قابليتي مانند نرم‌افزارهاي روميزي داشته باشند. به اين ترتيب فاصله و تفاوت ميان نرم‌افزارهاي دسكتاپ و نرم‌افزارهاي آنلاين ناپديد مي‌شود. ديگر لازم نيست وقتي روي دكمه submit كليك مي‌كنيد منتظر بارگذاري مجدد صفحه وب بمانيد. همه‌چيز فورا و به سرعت اتفاق مي‌‌افتد.

تصور كنيد به صورت آنلاين در حال خواندن نامه‌هاي الكترونيكي خود در يكي از سايت‌هاي ياهو يا جي‌ميل هستيد. فورا يادتان مي‌افتد كه بايد به كسي نامه‌اي بفرستيد. لازم نيست صفحه‌اي كه در حال مطالعه آن هستيد را ترك كنيد و يا با استفاده از ترفندهايي مانند رايت كليك و فرمان Open in New window يك پنجره جديد بازكنيد و منتظر بارگذاري مجدد صفحه شويد. شما فقط مي‌خواهيد يك پنجره جديد باز كنيد كه داخلش نامه خود را تايپ كنيد.

چه نيازي به بارگذاري مجدد آن‌همه اطلاعات جزئي و جنبي (مانند لوگوي سايت، نام آيدي شما و ...) است كه در اطراف اطلاعات اصلي به نمايش درآمده‌اند؟ اي‌جكس همين كار را براي شما مي‌كند. وقتي كه نامه خود را ارسال كرديد نيز فقط همان پنجره بسته مي‌شود و چند بايت براي سايت مقصد ارسال مي‌شود و اينترفيس صندوق پستي نامه‌هاي شما بدون اين‌كه تكان بخورد و يا دوباره به نمايش درآيد همچنان پيش چشم شما و منتظر فرمان بعدي است. در دنياي اي‌جكس دكمه‌هاي Back و Forward مرورگر معني و كاربرد خود را تقريبا از دست مي‌دهند.

همه دكمه‌هاي مورد نياز داخل اينترفيس سايت موجود است. برخلاف جهان Web 1.0، در دنياي اي‌جكس گشت و گذار در وب لزوما خطي نيست. اگر مي‌خواهيد از يك فروشگاه الكترونيكي خريد كنيد، مي‌توانيد محصول مورد نظرتان را به روش drag&drop داخل سبد بيندازيد و با فشردن دكمه نهايي، خريد خود را ثبت كنيد. پيغام ثبت موفقيت آميز سفارش براي شما نمايش داده مي‌شود و كار تمام است. لازم نيست از صفحه الف به صفحه ب و سپس از آنجا به صفحه ج برويد.

اي‌جكس چيست؟
اين واژه را اولين بار جسي جيمز گرت (Jesse James Garrett)، برنامه‌نويسي از شركت Adaptive Path در مقاله‌اي با عنوان <اي‌جكس: رهيافت جديدي در برنامه‌هاي تحت وب> به‌كار برد. اي‌جكس سرنام عبارت Asynchronous JavaScript and XML و به معني تركيب نامتقارن جاوا اسكپريپت و XML است.

چرا نامتقارن؟ چون تركيب اين دو فناوري به شما كمك مي‌كند قسمتي از يك صفحه وب را بروز كنيد بدون اينكه لازم باشد <همزمان يا متقارن> با اين عمل، كل آن صفحه از نو بارگذاري شود. اين عمليات توسط شيء و فرماني به نام XMLHttpRequest انجام مي‌شود كه سال‌ها پيش، هنگام معرفي نسخه 4 مرورگر اينترنت اكسپلورر وارد اين نرم‌افزار شده و به دليل قابليت‌هاي جالبي كه دارد، اين روزها تمام مرورگرهاي معروف و قدرتمند وب مانند فايرفاكس و اپرا از آن پشتيباني مي‌كنند. به كمك اين شي‌ء مي‌توانيد برنامه‌هايي به زبان جاوا اسكريپت بنويسيد كه در پشت صحنه يك صفحه وب اطلاعاتي را به سرور بفرستند و داده‌هايي را دريافت كنند.

اي‌جكس اساسا رهاوردي از دنياي جاوا است و بار ديگر فناوري جاوا و زبان اسكريپت‌نويسي وابسته به آن را در كانون توجه برنامه‌نويسان قرار داده است. اما خبر خوب اينست كه چون همه پلتفرم‌هاي برنامه‌نويسي وب از قبيلPHP ،ASP.NET و JSP از جاوا اسكريپت و XML پشتيباني مي‌كنند، فناوري اي‌جكس در همه اين پلاتفرم‌ها پياده‌سازي شده و حتي جالب است بدانيد كه تعداد ماژول‌هاي اي‌جكس نوشته شده براي دات نت و PHP بيشتر از انواع جاوايي آن است.

مايكروسافت كه سال‌ها پيش از شيء XMLHttpRequest در نرم‌افزار Outlook Web Access استفاده كرد و جزو اولين ترويج‌دهندگان اين تكنيك به شمار مي‌رود اخيرا نرم‌افزاري به نام Atlas معرفي كرده كه مخصوص برنامه‌نويسي مبتني بر اي‌جكس است. اما چون اي‌جكس بر اساس جاوا كار مي‌كند بديهي است كه جنبش اپن سورس و خيل عظيم برنامه‌نويسان جاوا نيز بيكار نمانده‌ و مي‌كوشند تا دير نشده Ajax را به قلب دنياي نرم‌افزارهاي آزاد بياورند و از انحصاري شدن آن جلوگيري كنند تا اين فناوري به استاندارد جديد وب تبديل شود. به نظر مي‌رسد كه آنها موفق بوده‌اند زيرا حتي پياده‌سازي‌هاي دات نتي اي‌جكس نيز اغلب به صورت اپن سورس است.

مكانيزم Ajax
جسي جيمز گرت در مقاله معروف خود شيوه عمل اي‌جكس را چنين توضيح مي‌دهد: هر عمل از سوي كاربر كه به طور معمول موجب توليد يك تقاضاي HTTP شود به جاي ارسال مستقيم به وب، موجب فراخواني يك فرمان جاوا اسكريپتي و هدايت آن به موتور اي‌جكس مي‌شود. هر نوع پاسخي به كاربر از سوي سرور (مانند كنترل صحت داده‌هاي وارد شده در يك فرم ورود اطلاعات، ويرايش اطلاعات در حافظه و حتي برخي از انواع هدايت كاربر در سايت) نيازي به ارسال يك صفحه جديد به سمت كاربر ندارد و تنها همان قسمتي كه بايد تغيير كند بروز مي‌شود.

به طور سنتي وقتي كاربر فرمي را پرمي‌كند و به سايت ارسال مي‌كند، وب سرور با بارگذاري مجدد يا تازه‌سازي صفحه (refresh) و نمايش يك پيغام و يا نتيجه پردازش اطلاعات، به او پاسخ مي‌دهد و به همين دليل هم وقت سرور براي ارسال كل محتواي آن صفحه گرفته مي‌شود و هم كاربر بايد براي دريافت كامل آن صفحه منتظر بماند؛ كه نتيجه آن كاهش بازده سرور، مصرف پهناي باند و تلف شدن وقت و هزينه است. اما به‌كارگيري تكنيك اي‌جكس اين مشكلات را به طرز قابل‌ملاحظه‌اي كاهش مي‌دهد.

ارسال: #2

آموزش مقدماتی ای جکس ( AJAX ) قسمت1

سلام.

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

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>

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

منبع:tii.ir

ارسال: #3

آموزش مقدماتی ای جکس ( AJAX ) قسمت2

بررسی کدها:

اول برای گذاشتن یک کد جاوا اسکریپت در یک صفحه وب باید از تگهای <Script> برای شروع و </Script> به پایان می رسونید و با Language="Javascript" به مرورگر می فهمونیم که این اسکریپت از مسفر جاوا برای اجرا استفاده کنه. توجه کنید که کدهای جاوا اسکریپت به صورت Casesesitive هست و به کوچیک بزرگی حروف حساسه.

بعد یک تابع AJAX تعریف می کنیم که هیچ خروجی خاصی نداره، بعد شئی به نام XMLHttpRequest وجود داره که همه کارهای AJAX رو به عهده داره. در ابتدای تابع AJAX یک نمونه ( Instance ) از شئی اشاره شده گرفته می شه و از این به بعد با استفاده از نام XHR، از متدها و خصوصیات شئی XMLHttpRequest استفاده می شه.

کد:
var XHR = new ActiveXObject("Msxml2.XMLHTTP") ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

این قسمت از کد همون شرط بدون IF با علامتهای ؟ و : که همون مفهوم رو داره برای کوتاه شدن کد استفاده کردیم. ما برای این که مرورگرها از عدم وجود استاندارد بین مرورگرها، ما از دستورات شرطی یا شبیه به این استفاده می کنیم. خوب بعد از ایجاد یک Instance به اسم XHR حالا به بررسی قطعه کد زیر می پردازیم.

کد:
XHR.onreadystatechange = function() {
if(XHR.readystate == 4)
{
document.FormX.time.value = XHR.ResponseText;
}
}

در شئی مورد نظر، یک Property به نام onreadystatechange وجود داره که با استفاده از این ساختار به عنوان یک Event Handler مورد استفاده قرار می گیره. این رویداد، پس از فراخوانی یک کد Server-Side بلافاصله به طور خودکار صدا زده می شه و کدهای داخلش اجرا می شه. این شئی علاوه بر Property ذکر شده، یک Property دیگه داره به اسم ReadyState داره که از نوع عددی هست و نشون دهنده وضعیت عمل کرد Server در ارسال پاسخ است. در این Property عددی بین 0 تا 4 (به صورت خودکار) قرار میگیره که هر عدد مثل شکل زیر مفهوم خودش رو داره.

همونطور که می بینید، با استفاده از این Property، به راحتی وضعیت درخواست ارسالی به سرور، قابل پیگیری هست. در این مثال شرطی رو نوشتیم که به محض قرار گرفتن عدد 4 در خصوصیت ReadyState کد زیر برای قرار دادن نتیجه کار به داخل Textbox دوم استفاده می شه.

کد:
document.FormX.time.value = XHR.ResponseText;

شئی XMLHttpRequest یک Property دیگه داره به نام ResponseText و از نوع String است که نتیجه ی ارسالی از سرور، به طور خودکار توی اون قرار می گیره هم.نطور که می بینید سمت چپ علامت مساوی کد فوق از ساختار Document Object Model )DOM( استفاده شده که نتیجه ی ارسالی از سرور رو مستقیم در Textbox به نام time قرار می ده در فرم وبی به نام FormX از همین Document (صفحه ی وب) قرار می ده. حالا به بررسی دو متد مهم به نامهای open و send که عملیات ارسال درخواست به سرور رو انجام می ده می پردازیم.

متد open وظیفخ اعمال تنظیمات قبل از ارسال، و متد send وظیفه ارسال درخواست رو به عهده داره و با اینکه این دو خط کد، بعد از بلوک رویداد onreadystatechange قرار گرفتند، ولی تا زمانی که متد send شئی XHR فراخوانی شده، Event Handler فراخوانی نمی شه. ناگفته نمونه متد open دارای دو پارامتر ضروری ( دو پارامتر اول ) و یک پارامتر غیر ضروری ( پارامتر آخر ) است. در اولین پارامتر این متد، می تونید از دو مقدار GET و POST استفاده کرد، دومین پارامتر url ( نام و مسیر ) یک فایل Server رو تعیین می کنه که در مثال ما به نام time.asp توی همون پوشه ی فایل HTML است.

سومین پارامتر (که به صورت پیش فرض true است)، وضعیت نامتقارن بودن یا نبودن اجراری Event Handler مربوطه رو تعیین می کنه، در صورت قرار دادن مقدار true، پس از اجرای متد send بلافاصله رویداد onreadystatechange فراخوانی می شه، ولی در صورت false بودن، اول منتظر اتمام پردازش سرور رو ارسال پاسخ داده شده و سپس رویداد مورد نظر، فراخوانی مشه.

وحالا در نهایت متدی به نام send مقداری رو به صورت پارامتر به سمت سرور ارسال می کنه که در مثال ما، به دلیل عدم نیاز به ارسال مقادیری به سرور، از واژه null استفاده شده. حالا با تمام شدن توضیحات تقریبا کامل، حالا به توضیح فرم وب در کد Html می پردازیم.

کد:
<form name="FormX">
Name: <input type="text" onchange="Ajax();">
Time: <input type="text" name="time">

همونطور که می بینید فرمی به نام FormX با 2 عدد Textbox که اسم یکی از ونها time است تعریف شده. در رویداد onchange اولین Textbox تابع AJAX رو فراخوانی می کنه. حالا شما باید یه فایل جدید با نام time.asp درست کنید با Notepad و این کدها رو درونش قرار بدید.

کد:
<%
response.expires=-1
response.write(time)
%>

این کدها بسیار ساده است این کار رو که ساعت سرور رو از طریق تابع داخلی Time گرفته و به واسطه متد write توی خروجی نشون می ده. خوب کار ما تموم شد حالا باید فقط امتحانش کنید برای این کار شما باید این دوتا فایل AJAX.htm و time.asp رو درون یک پوشه ای که در یک سرور وب قرار بدید و فایل AJAX.htm رو اجرا کنید، بعد در Textbox سمت چپ یک کلمه رو تایپ کنید و بعد در Textbox سمت راست کلیک کنید می بینید که ساعت سرور به شما نشون داده می شه ولی بدون Refresh شدن صفحه. پایان

امیدوارم مورد قبول بوده باشه.

منبع:tii.ir

ارسال: #4

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

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

Think Smart ... Live SmarT
Copyright © Mr.Digital 2010
قوانین کلی انجمن / Mr.Digital's Deviantart

ارسال: #5

حتما در حال پیدا کردن هستم.