آموزش اولیه برای شروع کار با ajax
يكشنبه, ۱۳ مرداد ۱۳۹۲، ۰۲:۲۰ ق.ظ
برای اولین مطلب، سخت بود که چه مطلبی رو انتخاب کنم به عنوان مطلب اول که به نوعی نشان دهنده ماهیت وبلاگه. همونطور که میگن برخورد اول با هر کسی مثل معلم، استاد، دوست آینده و ... مهمه، برای منم سخت بود که با چه مطلبی و موضوعی شروع به کار وبلاگ نویسی بکنم! تصمیم گرفتم زبان ajax رو به عنوان آموزش اول در نظر بگیرم، چون خودم واسه شروع این کار یه خورده سختی کشیدم و برای استارتش آموزش خوبی پیدا نکردم و کمی سر در گم بودم! البته این به این معنی نیست که مثلا در آینده مطلبی راجع به javascript و HTML ننویسم!
برای شروع کار با ajax یه آشنایی نسبتا کلی با javascript و html لازمه. کار ajax به زبان آمیانه یعنی مثلا وقتی رو یه لینک کلیک میکنیم، به جای اینکه صفحه رو دوباره بیاره(refresh صفحه)، همونجوری کارش رو انجام بده و نتیجه دریافتی رو به ما برگردونه که اینکار تا به اینجا خیلی راحته. این منطق ajax بود، که حتما اگه با یه مثال کوچیک باشه، خیلی راحت تر میشه باهاش کار کرد. (مثال در ادامه مطلب)
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","text.txt",true);
xmlhttp.send();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var res = xmlhttp.responseText;
document.getElementById("txt").innerHTML = res;
}
}
}
</script>
</head>
<body>
<div id="txt">TEST</div>
<a href="#" onclick="loadXMLDoc()">Change Content</a>
</body>
</html>
توضیح مثال:
در این مثال بسیار ساده قراره که وقتی روی لینک محتوی Change Content کلیک می کنیم، بدون بروز رسانی مجدد صفحه، محتوی div با که id آن txt و مقدار آن TEST است، به مقدار بازگشتی از صفحه text.txt تبدیل می شود. که تمامی این کارها توسط تابع loadXMLDoc که در جاوا اسکریپت این صفحه می باشد، انجام می شود. خط اول این تابع که تعریف متغیر عادی است، در خط دوم از یکی از اشیای آماده جاوا اسکریپت که از xml (که نیازی ندارد با آن آشنایی داشته باشید) ایجاد میکند. در مرحله بعدی مشخص می کند که با چه نوع متدی به صفحه مورد نظر متغیر ارسال کند(همانند فرم های ساده html)، و بعد از آن هم آدرس صفحه مورد نظر را وارد می کند. در مرحله بعدی هم، همان طور که از نام تابع (یکی از توابع XMLHttpRequest) مشخص است، پارامترها را به صفحه مورد نظر ارسال می کند. مرحله بعدی متغیری ار نوع تابع است که در آن یک سری اعداد را با شرایط چک می کند که به نظر همیشه ثابت هستند و باید اینگونه بمانند! و در ادامه محتویات فایل text.txt را در متغیر res قرار داده و در خط آخر هم متحوی div که id آن txt است را برابر متغیر res قرار می دهد!
نکات کلیدی:
1- یکی از مشکلات من در حین آموزش ajax که شاید یه ماهم کمتره که یاد گرفتم، اینه که خیلی به چیزایی مثل XML و readyState و ... گیر میدادم و می خواستم بدونم که برای چیه و کل آموزش رو بیخال می شدم، ولی در واقع اینطور نیست، اصلا میشه فرض کرد که اون ها یه سری متن ثابت هستن که اصلا باهاشون کاری نداریم و ما فقط به کارهای دیگه از جمله آدرس صفحه مورد نظر و ... می پردازیم.
2- این نکته تکمیل کننده نکته اوله. بعد از استفاده از framework و یا library ها که کار رو واسه ما آسون تر کرده تو ajax، دیگه درگیر این متغیرهای XML و ... نمیشیم و این کارهای ثابت رو خودشون انجام میدن!
3- در قسمت آدرس که آدرس فایل text.txt نوشته شده، میتوه هر صفحه دیگه ای با هر فرمتی مثل php و یا چیز دیگه باشه.
4- اصل این کار ajax اینه که در فایل text.txt که مثلا اگه یه فایل php باشه، اینه که وقتی متغیرها رو با متد get یا post بهش ارسال کنیم، به جای اینکه یه html کامل بخوایم نمایش بدیم، یه متن ساده نشون میدیم و تو صفحه اصلی که هستیم بهش html رو اضافه می کنیم.
5- قطعا با یک مثال، کارمون خیلی خوب راه نمیفته و مستلزم مثال های بیشتر و البته تمرین بیشتره.
برای شروع کار با ajax یه آشنایی نسبتا کلی با javascript و html لازمه. کار ajax به زبان آمیانه یعنی مثلا وقتی رو یه لینک کلیک میکنیم، به جای اینکه صفحه رو دوباره بیاره(refresh صفحه)، همونجوری کارش رو انجام بده و نتیجه دریافتی رو به ما برگردونه که اینکار تا به اینجا خیلی راحته. این منطق ajax بود، که حتما اگه با یه مثال کوچیک باشه، خیلی راحت تر میشه باهاش کار کرد. (مثال در ادامه مطلب)
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","text.txt",true);
xmlhttp.send();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var res = xmlhttp.responseText;
document.getElementById("txt").innerHTML = res;
}
}
}
</script>
</head>
<body>
<div id="txt">TEST</div>
<a href="#" onclick="loadXMLDoc()">Change Content</a>
</body>
</html>
توضیح مثال:
در این مثال بسیار ساده قراره که وقتی روی لینک محتوی Change Content کلیک می کنیم، بدون بروز رسانی مجدد صفحه، محتوی div با که id آن txt و مقدار آن TEST است، به مقدار بازگشتی از صفحه text.txt تبدیل می شود. که تمامی این کارها توسط تابع loadXMLDoc که در جاوا اسکریپت این صفحه می باشد، انجام می شود. خط اول این تابع که تعریف متغیر عادی است، در خط دوم از یکی از اشیای آماده جاوا اسکریپت که از xml (که نیازی ندارد با آن آشنایی داشته باشید) ایجاد میکند. در مرحله بعدی مشخص می کند که با چه نوع متدی به صفحه مورد نظر متغیر ارسال کند(همانند فرم های ساده html)، و بعد از آن هم آدرس صفحه مورد نظر را وارد می کند. در مرحله بعدی هم، همان طور که از نام تابع (یکی از توابع XMLHttpRequest) مشخص است، پارامترها را به صفحه مورد نظر ارسال می کند. مرحله بعدی متغیری ار نوع تابع است که در آن یک سری اعداد را با شرایط چک می کند که به نظر همیشه ثابت هستند و باید اینگونه بمانند! و در ادامه محتویات فایل text.txt را در متغیر res قرار داده و در خط آخر هم متحوی div که id آن txt است را برابر متغیر res قرار می دهد!
نکات کلیدی:
1- یکی از مشکلات من در حین آموزش ajax که شاید یه ماهم کمتره که یاد گرفتم، اینه که خیلی به چیزایی مثل XML و readyState و ... گیر میدادم و می خواستم بدونم که برای چیه و کل آموزش رو بیخال می شدم، ولی در واقع اینطور نیست، اصلا میشه فرض کرد که اون ها یه سری متن ثابت هستن که اصلا باهاشون کاری نداریم و ما فقط به کارهای دیگه از جمله آدرس صفحه مورد نظر و ... می پردازیم.
2- این نکته تکمیل کننده نکته اوله. بعد از استفاده از framework و یا library ها که کار رو واسه ما آسون تر کرده تو ajax، دیگه درگیر این متغیرهای XML و ... نمیشیم و این کارهای ثابت رو خودشون انجام میدن!
3- در قسمت آدرس که آدرس فایل text.txt نوشته شده، میتوه هر صفحه دیگه ای با هر فرمتی مثل php و یا چیز دیگه باشه.
4- اصل این کار ajax اینه که در فایل text.txt که مثلا اگه یه فایل php باشه، اینه که وقتی متغیرها رو با متد get یا post بهش ارسال کنیم، به جای اینکه یه html کامل بخوایم نمایش بدیم، یه متن ساده نشون میدیم و تو صفحه اصلی که هستیم بهش html رو اضافه می کنیم.
5- قطعا با یک مثال، کارمون خیلی خوب راه نمیفته و مستلزم مثال های بیشتر و البته تمرین بیشتره.
از کمک شما بسیار بسیار ممنونم !!!
امیدوارم موفق باشید !
1392 07 05 2202a