V0R73X
سه شنبه 21 تیر 1390, 11:55 صبح
سلام دوستان.
نمیدونم چرا امروز رفتم تو مود آموزش! خوب این اواخر حرف از AJAX زیاده و آموزش کم. من یه چند تا سرچ توی فروم کردم تاپیک های پراکنده زیادی درباره این موضوع دیدم، گفتم یه آموزش کامل و درستو حسابی هم خودم بزارم که دیگه کامل بشه امویدوارم دوستان خوششون بیاد.
با یک تیتر قوی شروع کردم انشا... که با تشکر های دوستان این تیتر به واقعیت تبدیل میشه. البته این اولین آموزش منه امیدوارم به بزرگی خودتون کمی کاستی داره ببخشین!
دوستان اگر جهت کامل کردن مطلب پستی بزارین عالیه ولی اگر سوالی دارین با پیام خصوصی بهم بگین تاپیک خراب نشه اگه نکته مهمی بود خودم میزارم تو تاپیک.
نکته1: AJAX چیست؟ خوب این AJAX که هی میگن در واقع اصلا چیز سخت یا گنده ای نیست، فقط اینکه خیلی اسم در کرده مثل AI، مثلا چیزی به نام برنامه نویسی AI نداریم بلکه AI فقط یه جور تعریفه. AJAX هم همینه. حالا وقتی ما میگیم AJAX منظورمون چیه؟ خوی این فقط یه تکنیک برای اجرا کردن اسکریپت های سمت سروره به طوری که صفحه PostBack انجام نده یا به عبارتی کاربر نفهمه که ما داریم پشت صحنه یه کارایی انجام میدیم!
میگین چطوری؟ خوب معلومه با اسکریپت سمت کلاینت! تا حالا به ذهنتون رسیده که با ترکیب جاوااسکریپت و کد پشت صحنه ASP.NET یه برنامه بسازین؟ خوی تنها راه حل برای اینکار AJAXه.
به زبان عامیانه بخوام بگم AJAX یعنی اینکه سر کاربر رو با یک سری اسکریپت های جاوااسکریپت گرم کنیم و بعد کارامونو سمت سرور با XMLHttpRequest انجام بدیم تا کاربر نفهمه که ما داریم سمت سرور کاری میکنیم (شتر دیدی ندیدی!)
خوب حالا این XMLHttpObjectRequest چیه؟ این قلب تپنده ی AJAXه که سرور و کلاینت رو بهم متصل میکنه! چطوری؟
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
این کد رو توی یک اسکریپت جاوا اسکریپت مینویسیم. توی تگ Body هم اینرو مینویسیم:
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
خوب هنوز تموم نشده! تنها کاری که باید کرد اینه که یه فایل تکست تو سرور ایجاد میکنید با همون نای که تو کدتون استفاده کردید (در این نمونه ajax_info.txt) و متنی که میخواید با کلیک کردن دکمه نمایش داده بشه رو توش مینویسید.
و بعد... Magic!!!!! میبینید که ما از فایل متنی داده میخونیم و نمایش میدیم بدون اینکه صفحه PostBack انجام بده.
خوب AJAX همش همینه! حالا یه نگاه دیگه به تیتر میکنیم میگه ASP.NET AJAX خوب تا اینجا که AJAX بود پس ASP.NETش کجاست؟ الان عرض میکنم:
تو ASP.NET مایکروسافت لطف کرده و AJAX رو برامون خیلی آسون کرده (به زبان عامیانه کشک!) به این طورت که ما هر عملیاتی که میخوایم AJAXی انجام بشه رو توی 2 مرحله انجام میدیم:
1. یه کنترل ScriptManager میزاریم توی صفحه
2. کنترل هایی که رویداد هاشون باعث Postback صفحه میشه رو میندازیم داخل یک کنترل UpdatePanel
<asp:updatepanel runat="server" id="Update1">
<ContentTemplate>Controls Here</ContentTemplate>
</asp:updatepanel>
میبینین که سادس و همش همینه! حالا اگر میخواهید که رویداد ها رو هم مشخص کنید (مثلا میخوایم فقط یکیشون به صورت AJAXی رفتار کنه یا به عبارتی Asynchronous یعنی بدون PostBack) کافیه یه تک Triggers بعد از ContentTemplate اضافه کنیم و Item های AsyncPostbackTrigger و یا PostBackTrigger رو اضاضه کنیم به همراه یک Attribute که ای دی کنترل فرستنده رویداد رو مشخص میکنه. اینم از کد نمونه:
<asp:updatepanel runat="server" id="Update1"><ContentTemplate>
Controls Here
</ContentTemplate><Triggers>
<asp:AsyncPostBack ControlID="DrpNames"/><asp:PostBackTrigger ControlID="cmdSubmit"/>
</Triggers></asp:updatepanel>
حالا اگر رو دکمه cmdSubmit کلیک کنیم صفحه رو بازپس میده ولی اگه از تو لیست DrpNames گزینه ای رو انتخاب کنیم هرچند AutoPostBackش رو True قرار داده باشیم PostBack نمیده ولی در عوض حالا میتونیم تو Code-Behind برای رویداد SelectedIndexChanged این لیست برنامه نویسی کنیم بازم بدون اینکه کاربر بفهمه!
خوب حالا با AJAX و ASP.NET AJAX آشنا شدیم ولی داستان ادامه دارد:
1. چطوری برنامه ای مثل Gmail بسازیم؟
2. AJAX Control Toolkit چیست؟
3. چطور با XMLHttpRequest کار کنیم؟
این ها رو هم قصد دارم بعدا بگذارم به استقبال دوستان بستگی داره. اگر به AJAX علاقه مند هستید و میخواهید بازهم یاد بگیرید کافیه از دکمه تشکر استفاده کنید.
نمیدونم چرا امروز رفتم تو مود آموزش! خوب این اواخر حرف از AJAX زیاده و آموزش کم. من یه چند تا سرچ توی فروم کردم تاپیک های پراکنده زیادی درباره این موضوع دیدم، گفتم یه آموزش کامل و درستو حسابی هم خودم بزارم که دیگه کامل بشه امویدوارم دوستان خوششون بیاد.
با یک تیتر قوی شروع کردم انشا... که با تشکر های دوستان این تیتر به واقعیت تبدیل میشه. البته این اولین آموزش منه امیدوارم به بزرگی خودتون کمی کاستی داره ببخشین!
دوستان اگر جهت کامل کردن مطلب پستی بزارین عالیه ولی اگر سوالی دارین با پیام خصوصی بهم بگین تاپیک خراب نشه اگه نکته مهمی بود خودم میزارم تو تاپیک.
نکته1: AJAX چیست؟ خوب این AJAX که هی میگن در واقع اصلا چیز سخت یا گنده ای نیست، فقط اینکه خیلی اسم در کرده مثل AI، مثلا چیزی به نام برنامه نویسی AI نداریم بلکه AI فقط یه جور تعریفه. AJAX هم همینه. حالا وقتی ما میگیم AJAX منظورمون چیه؟ خوی این فقط یه تکنیک برای اجرا کردن اسکریپت های سمت سروره به طوری که صفحه PostBack انجام نده یا به عبارتی کاربر نفهمه که ما داریم پشت صحنه یه کارایی انجام میدیم!
میگین چطوری؟ خوب معلومه با اسکریپت سمت کلاینت! تا حالا به ذهنتون رسیده که با ترکیب جاوااسکریپت و کد پشت صحنه ASP.NET یه برنامه بسازین؟ خوی تنها راه حل برای اینکار AJAXه.
به زبان عامیانه بخوام بگم AJAX یعنی اینکه سر کاربر رو با یک سری اسکریپت های جاوااسکریپت گرم کنیم و بعد کارامونو سمت سرور با XMLHttpRequest انجام بدیم تا کاربر نفهمه که ما داریم سمت سرور کاری میکنیم (شتر دیدی ندیدی!)
خوب حالا این XMLHttpObjectRequest چیه؟ این قلب تپنده ی AJAXه که سرور و کلاینت رو بهم متصل میکنه! چطوری؟
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
این کد رو توی یک اسکریپت جاوا اسکریپت مینویسیم. توی تگ Body هم اینرو مینویسیم:
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
خوب هنوز تموم نشده! تنها کاری که باید کرد اینه که یه فایل تکست تو سرور ایجاد میکنید با همون نای که تو کدتون استفاده کردید (در این نمونه ajax_info.txt) و متنی که میخواید با کلیک کردن دکمه نمایش داده بشه رو توش مینویسید.
و بعد... Magic!!!!! میبینید که ما از فایل متنی داده میخونیم و نمایش میدیم بدون اینکه صفحه PostBack انجام بده.
خوب AJAX همش همینه! حالا یه نگاه دیگه به تیتر میکنیم میگه ASP.NET AJAX خوب تا اینجا که AJAX بود پس ASP.NETش کجاست؟ الان عرض میکنم:
تو ASP.NET مایکروسافت لطف کرده و AJAX رو برامون خیلی آسون کرده (به زبان عامیانه کشک!) به این طورت که ما هر عملیاتی که میخوایم AJAXی انجام بشه رو توی 2 مرحله انجام میدیم:
1. یه کنترل ScriptManager میزاریم توی صفحه
2. کنترل هایی که رویداد هاشون باعث Postback صفحه میشه رو میندازیم داخل یک کنترل UpdatePanel
<asp:updatepanel runat="server" id="Update1">
<ContentTemplate>Controls Here</ContentTemplate>
</asp:updatepanel>
میبینین که سادس و همش همینه! حالا اگر میخواهید که رویداد ها رو هم مشخص کنید (مثلا میخوایم فقط یکیشون به صورت AJAXی رفتار کنه یا به عبارتی Asynchronous یعنی بدون PostBack) کافیه یه تک Triggers بعد از ContentTemplate اضافه کنیم و Item های AsyncPostbackTrigger و یا PostBackTrigger رو اضاضه کنیم به همراه یک Attribute که ای دی کنترل فرستنده رویداد رو مشخص میکنه. اینم از کد نمونه:
<asp:updatepanel runat="server" id="Update1"><ContentTemplate>
Controls Here
</ContentTemplate><Triggers>
<asp:AsyncPostBack ControlID="DrpNames"/><asp:PostBackTrigger ControlID="cmdSubmit"/>
</Triggers></asp:updatepanel>
حالا اگر رو دکمه cmdSubmit کلیک کنیم صفحه رو بازپس میده ولی اگه از تو لیست DrpNames گزینه ای رو انتخاب کنیم هرچند AutoPostBackش رو True قرار داده باشیم PostBack نمیده ولی در عوض حالا میتونیم تو Code-Behind برای رویداد SelectedIndexChanged این لیست برنامه نویسی کنیم بازم بدون اینکه کاربر بفهمه!
خوب حالا با AJAX و ASP.NET AJAX آشنا شدیم ولی داستان ادامه دارد:
1. چطوری برنامه ای مثل Gmail بسازیم؟
2. AJAX Control Toolkit چیست؟
3. چطور با XMLHttpRequest کار کنیم؟
این ها رو هم قصد دارم بعدا بگذارم به استقبال دوستان بستگی داره. اگر به AJAX علاقه مند هستید و میخواهید بازهم یاد بگیرید کافیه از دکمه تشکر استفاده کنید.