parsgreen.com
article

آشنایی با برنامه نویسی آژاکس (ajax)، تئوری نوین وب

ajax-web-development

آژاکس (ajax) عنوان جذابی است از نوعی برنامه نویسی ترکیبی که از سال 2005 با کاربرد آن توسط موتورهای جستجویی چون گوگل و برنامه نویسان، مطرح شد؛ این کلمه مخففی است از سرواژه های Asynchronous JavaScript and XML و در بیانی ساده به معنی نقل و انتقال اطلاعات در صفحات وب، بدون بارگذاری مجدد (reload) آنها است، نمونه برجسته ای از کاربرد آژاکس در سایت های اجتماعی، چت روم های آنلاین و یا سایتهای آپلود فایل خودنمایی می کند، اگرچه به کارگیری این تکنولوژی در مقایسه با سایر زبان های اسکریپت نویسی وب، تقریبا جدید و روشی نوین است، اما باید توجه داشت که آژاکس یک زبان جداگانه محسوب نمی شود بلکه شیوه ی نوینی از به کارگیری و ترکیب چند زبان برنامه نویسی (JavaScript and XML) است.

یادگیری آژاکس


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

یک مثال کاربردی با آژاکس


برای شروع آموزش، شاید بهتر باشد ابتدا به صورت کاربردی با آژاکس آشنا شویم، به مثال زیر توجه کنید:
یک فرم ساده وب را در نظر بگیرید که در رویداد onchange، تابعی مبتنی بر جاوا اسکریپت را اجرا می کند.
<form name='myForm' action='#'>
نام: <input type='text' name='username' onchange='ajaxFunction();'/>
<br />
<br />
زمان: <input type='text' name='time' />
</form>
همانطور که می دانیم، ارسال و دریافت اطلاعات در وب، در حالت عادی با بارگذاری مجدد صفحه انجام می شود اما با افزودن چند خط کد آژاکسی زیر می توانیم بدون رفرش صفحه اطلاعات را به سرور منتقل کرده و مجددا پاسخ را دریافت کنیم (در اینجا ما می خواهیم زمانی که کاربر نام خود را در فیلد اول وارد می کند، در فیلد دوم نشان دهیم):
<script type="text/javascript">
<!--
//تابعی که در تمام مرورگرها پشتیبانی می شود
function ajaxFunction(){
    var ajaxRequest;  // این متغیر برای برقراری ارتباط آژاکسی ضروری است، انتخاب نام آن دلخواه است
    
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // در صورت بروز خطا
                alert("متاسفانه مرورگر شما از آژاکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
}
//-->
</script>
با کد بالا (بعد از افزودن مقادیر زیر) درخواستی به سرور به صورت پنهان ارسال می شود، XMLHttpRequest خاصیتی است که برای مرورگرهای مختلف کمی متفاوت است (از  XMLHttpRequest برای ارسال درخواست در بستر آژاکس استفاده می شود)، به همین خاطر در مثال، تنظیمات سازگار با همه مرورگرها آورده شده است (ملاحظه می کنید که برای مرورگر اینترنت اکسپلورر از  ActiveXObject نیز استفاده کرده ایم)، و پس از ارسال درخواست به کدی احتیاج داریم که نتیجه درخواستمان را با آن (به صورت پنهان و در پشت صحنه) از سرور دریافت کنیم:
// این تابع اطلاعات ارسالی از سرور را دریافت می کند
ajaxRequest.onreadystatechange = function(){
    //بررسی درست بودن حالت آماده
        if(ajaxRequest.readyState == 4){
            document.myForm.time.value = ajaxRequest.responseText;
    }
}
ajaxRequest.open("GET", "serverTime.php", true);
ajaxRequest.send(null);
onreadystatechange خاصیتی است در آژاکس که پس از ارسال یک درخواست، اعدادی از 1 تا 4 را در خود نگهداری می کند، تغییرات مقادیر آن مبتنی بر حالت readyState است.

readyState یا حالت آماده چیست؟


readyState در یک درخواست آژاکسی، بعد از XMLHttpRequest رخ می دهد و وضعیت پاسخ درخواستمان به سرور را در خود نگهداری می کند، برای اینکه بررسی کنیم همه چیز مرتب است readyState باید complete باشد، حالت کامل با عدد 4 دریافت می شود و با شرط ساده if برابری آن را بررسی می کنیم (که آیا ajaxRequest.readyState برابر 4 است یا خیر).
پس از دریافت پاسخ مثبت (و این یعنی تا اینجا همه چیز بدون مشکل بوده) با کد document.myForm.time.value مقدار برگردانده شده توسط سرور را که در responseText وجود دارد، به فیلدمان خواهیم داد (پس از طی فرایندی در سمت سرور مقادیری را برمی گردانیم)، برای ارسال و دریافت اطلاعات پردازش شده از سرور به دستور ajaxRequest.open و متد Get احتیاج داریم که اطلاعات را به فایل serverTime.php ارسال می کند (این فایل را باید از قبل طوری تنظیم کنیم که زمان سرور را برگرداند مثلا از تابع date در php با یک دستور echo ساده خروجی بگیریم).
حال همه چیز آماده برای استفاده از ajaxRequest.send است که درخواستمان را ارسال می کند؛ اما اجرای کدهای جاوا اسکریپت مبتنی بر بروز رویدادهایی است، پس رویداد onChange را به فرم اضافه می کنیم تا به محض تغییر فرم و فیلد، کد آژاکسی مان اجرا شود و نتیجه در فیلد زمان به نمایش دربیاید.
و نهایتا کدمان به صورت زیر خواهد بود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | فرم ارسال درخواست آژاکسی</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
</style>
<script language="javascript" type="text/javascript">
<!--
//تابعی که در تمام مرورگرها پشتیبانی می شود
function ajaxFunction(){
    var ajaxRequest;  // این متغیر برای برقراری ارتباط آژاکسی ضروری است، انتخاب نام آن دلخواه است
    
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // در صورت بروز خطا
                alert("متاسفانه مرورگر شما از آژاکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
// این تابع اطلاعات ارسالی از سرور را دریافت می کند
ajaxRequest.onreadystatechange = function(){
    //بررسی درست بودن حالت آماده
        if(ajaxRequest.readyState == 4){
            document.myForm.time.value = ajaxRequest.responseText;
    }
}
ajaxRequest.open("GET", "serverTime.php", true);
ajaxRequest.send(null);
}
//-->
</script>
</head>
<body>
<form name='myForm' action='#'>
نام: <input type='text' name='username' onchange='ajaxFunction();'/>
<br />
<br />
زمان: <input type='text' name='time' />
</form>
</body>
</html>
پیش نمایش
نکته: پس از نوشتن نام در فیلد نام در فیلد زمان کلیک کنید و اندکی منتظر بمانید
sectionدسته بندی: آموزش مقدماتی » Ajax
related مطالب بیشتر:
» نمایش پیام و تصویر در حال بارگذاری (loading) در آژاکس (ajax)
» نمایش افکت fade in با آژاکس (ajax)
» نمایش و ذخیره اطلاعات فایل با آژاکس (Ajax)
» فریم ورک های آژاکس (Ajax Frameworks)
» ارسال و دریافت اطلاعات با متد get و post در آژاکس (ajax)
commentنظرات (۱۶ یادداشت برای این مطلب ارسال شده است)
نویسنده: سعید
زمان: ۲۰:۵۶:۳۳ - تاریخ: ۱۳۹۱/۰۷/۱۰
ممنون. عالی بود
نویسنده: Mehran
زمان: ۱۴:۲۳:۲۷ - تاریخ: ۱۳۹۱/۱۲/۱۹
سلام، با تشکر از شما.
نویسنده: خلیل
زمان: ۱۰:۳۱:۳۵ - تاریخ: ۱۳۹۲/۰۷/۲۷
خیلی ممنون
نویسنده: الناز
زمان: ۱۷:۲۹:۰۴ - تاریخ: ۱۳۹۲/۰۸/۱۷
سلام
سایت خیلی پربازدید و جالبی دارید از کل سایت های آموزشی سایت شما تکه و خیلی هم واضح توضیح میدین واقعا دمتون گرم
یه سوالی خیلی واجبی داشتم لطفا خیلی ممنون میشم جوابم رو بدین
من تازه Ajax رو یاد گرفتم
یک فرم تماس درست کردم به این صورت
<form name="myform" method="post">
<input name="pm" type="text" />
<input type="button" onclick="AjaxLoad();">
</form>
نکته دکمه ی ارسال اطلاعات با نوع سابمیت نیست
به این صورت عمل میکنه وقتی که یک اطلاعاتی را درون فیلد وارد می کنی و با زدن دکمه اطلاعات با Ajax ارسال میشه
به طوری که اصلا به هیچ وجه صفحه رفرش نشه ولی اگر کاربر کلمه ای را درون فیلد وارد کرد اگر بجای زدن دکمه اینتر را فشار داد عملیات که اجرا نمیشه هیچ صفحه هم رفرش میشه من نمیخوام این طور بشه و این کد را نوشتم که به درستی عمل میکنه
<script type="text/javascript">
document.onkeydown = function(){
if(event.keyCode == 13){
AjaxLoad();
myform.pm.value = null;
}
if(event.keyCode == 13 || event.ctrlKey == true){
return false;
}
}
</script>
گفتم که اگر دکمه ی اینتر را از کیبورد فشار داد کدهای Ajax عمل کنه (بجای زدن دکمه) که یعنی اطلاعات ارسال میشه به پایگاه داده و همان فیلدی که اطلاعات وارد کرده را خالی یعنی برابر نال کنه و اگر دکمه ی اینتر یا دکمه ی کنترل رو از کیبورد زد صفحه رفرش نشه منظور از کنترل یعنی وقتی که عمل نکنه از کپی یا پیست کردن در فیلد جلوگیری میشه
خب تا اینجا مشکلی نبود یه مشکل اساسی هست فقط این کد های جاوا اسکریپت فقط در مرورگر گوگل کروم اجرا میشه و تو هیچ مرورگر دیگری حتی فایرفاکس هم اجرا نمیشه
میخوام کد درستش را واسم تایپ کنید یک دنیا ممنون میشم
خدانگهدار شما
پاسخ: 
سلام
حالت رویداد برای اکثر مرورگرها با حرف e مشخص می شود، برای اینترنت اکسپلور از window.event یا event استفاده می کنیم، اصلاح شده کد شما:
<script type="text/javascript">
document.onkeydown = function(e){
var evt = e || window.event;
if(evt.keyCode == 13){
AjaxLoad();
myform.pm.value = null;
}
if(evt.keyCode == 13 || evt.ctrlKey == true){
return false;
}
}
</script>
نویسنده: رضا
زمان: ۱۵:۲۵:۵۷ - تاریخ: ۱۳۹۲/۰۸/۲۱
سلام می خواستم بدونم چطور میشه با یک درخواست آژاکس 2 مقدار یا بیشتر را دریافت کنیم و هرکدام را در یک تگ جداگانه بریزیم مثلا در php دو متغیر داریم و میخواهیم انها را در دو متغیر یا دو تگ جاوا اسکریپت بریزیم
پاسخ: 
سلام
برای این کار باید رشته خروجی را با علامت های دلخواه (به فرض |) جداسازی کرده و با کمک توابعی مانند split در جاوا اسکریپت آن را در سمت کاربر تجزیه و استفاده نمائید.
نویسنده: بهنام
زمان: ۱۱:۵۵:۲۰ - تاریخ: ۱۳۹۲/۱۲/۱۳
سلام
بازم مثل همیشه هرچقدر تعریفتون کنم بازم کمه واقعا میگم خسته نباشی دوست عزیز
من یه چت روم با پی اچ پی و آزاکس درست کردم به این صورت:
وقتی درون فیلد متنی وارد بشه و دکمه ی اینتر را که بزنی متن در پایگاه داده اینسرت و در مرورگر با دستور select چاپ میشه میخوام این کد را اگه صلاح دیدید واسم تصحیح کنید که به این صورت کار کنه:
وقتی درون فیلد متنی که وارد شد و دکمه ی اینتر را که زدیم متن با آژاکس درون پایگاه داده اینسرت بشه و select با آژاکس به صورتی دیگه باشه نه با اینتر زدن مثلا هر کاربری متنی وارد کرد نمایش داده بشه در مرورگر راهی که به ذهن من میرسه اینه:
با استفاده از mysql_num_rows وقتی به پایگاه داده متن جدیدی اینسرت شد کل متن ها را در مرورگر نمایش بده و من همچین کلکی را نمیدونم با آژاکس چگونه می شود نوشت لطفا کد را تصحیح کنید با تشکر یک دنیا ممنون میشم
حذف شد
پاسخ: 
سلام
لطفا اینگونه موارد را از طریق ایمیل (که در بخش تماس با ما وجود دارد) به صورت فایل های فشرده شده (با فرمت zip) ارسال کنید تا بررسی شوند.
نویسنده: mostafa
زمان: ۱۱:۰۸:۲۹ - تاریخ: ۱۳۹۲/۱۲/۲۶
سلام خیلی جالب و ساده توضیح دادین مرسی
فقط 2 سوال داشتم ببخشید اگه پیش پا افتادست چون من تازه شروع به کار کردم و خیلی جذب برنامه نویسی با طرح ajaxe شدم
1- آیا وب سایت خودتونم از برنامه نویسی آژاکس استفاده شده
2- برنامه اندروید . سیمبین . به عنوان مثال نیم باز واتس آپ و... از آژاکس استفاده می کنن اصلا آژاکس برای گوشی ها هم هستش
مرسی
پاسخ: 
سلام
در حال حاضر در بخش های جزئی در سایت از Ajax استفاده شده، مانند تغییر کد امنیتی در بخش ارسال نظرات!
قاعدتا Ajax در وب با سایر پلتفرم ها تفاوت هایی دارد، اما تقریبا تمام آنها قابلیتی مشابه دارند که امکان نقل و انتقال داده ها به صورت نامحسوس را فراهم می کند، هرچند ممکن است نام آن Ajax نباشد (چون Ajax مبتنی بر JavaScript است).
نویسنده: سعیده
زمان: ۱۵:۵۷:۰۹ - تاریخ: ۱۳۹۲/۱۲/۲۷
سلام خسته نباشی
ببخشید من دانشجو کاردانی هستم استادم به من گفته مطالی مبتنی بر power point درمورد ajax بنویسم که فقط عکس باشه می تونین کمکم کنید که چه عکسایی بذارم مرسی
پاسخ: 
سلام
لطفا مطالب بخش مقدماتی را مطالعه کنید، هر آموزش یک تصویر کوچک به عنوان معرفی و نماد دارد، می توانید از چنین تصاویری استفاده کنید، همچنین باید کاملا مبحث را درک کنید و مواردی را در فتوشاپ (یا سایر نرم افزارهای گرافیکی) طراحی کنید.
نویسنده: پویا
زمان: ۱۶:۲۰:۴۶ - تاریخ: ۱۳۹۳/۰۱/۱۴
سلام خسته نباشید من یه سوال دارم به سایت زیر برید:
http://www.unrevoked.com
وقتی روی یکی از گوشی ها کلیک کنید می بینید که یه صفحه دیگه باز میشه بدون ری لود شدن حالا باید چی کار کنم وقتی روی یکی از گوشی ها کلیک شود یه سایت دیگه رو باز کنه بدون لود شدن و با انیمیشنی که این سایت در حال باز کردن صفحه است باشه قابل توجه مهندس عزیز که این صفحه به صورت نیمه باز میشه یعنی نصف صفحه تغیر میکنه و نصف بالایی ثابت هستش من من میخوام کاملا عوض شه. زود جواب بدید مرسی
پاسخ: 
سلام
دوست گرامی پاسخ کوتاهی برای سوالتان وجود ندارد! این یک نوع طراحی ترکیبی است که از قابلیت های CSS در کنار جاوا اسکریپت یا جی کئوری و Ajax به نحو سفارشی استفاده شده، با بررسی سورس کد صفحه می توانید از آن الگو برداری کنید، برای بارگذاری سایتی دیگر هم باید درخواست آژاکسی به سرورتان ارسال و در آنجا با کدهای PHP سایت مقصد را فراخوانی و در پاسخ درخواست آژاکسی، سورس سایت مقصد را چاپ کنید، در کل این نوع موارد در وب خیلی توصیه نمی شوند (در استفاده از Ajax باید به حداقل بسنده شود).
نویسنده: نیلوفر
زمان: ۰۱:۰۳:۱۶ - تاریخ: ۱۳۹۳/۰۱/۱۸
سلام خسته نباشید
من میخوام وقتی اسم و فامیل وارد میشه ، بعدش اطلاعات مربوط به اون اسم و فامیل که قبلا در دیتابیس ذخیره شده، بدون رفرش شدن صفحه ، در فیلدهای بعدی نمایش داده بشه
پاسخ: 
سلام
لطفا مطالب را از ابتدا مطالعه کنید، کاری که می خواهید انجام دهید نیاز به آشنایی با Ajax و جاوا اسکریپت است.
نویسنده: سیمین
زمان: ۲۲:۲۶:۵۷ - تاریخ: ۱۳۹۳/۰۲/۱۵
با سلام وخسته نباشید. آموزشتون عالی بود دمتون گرم
نویسنده: محمد باقری
زمان: ۰۱:۳۵:۰۹ - تاریخ: ۱۳۹۳/۰۲/۳۱
سلام
بابت آموزش های خیلی خوبتون ممنونم
فیض بردیم ...
نویسنده: مینا
زمان: ۲۲:۵۲:۰۶ - تاریخ: ۱۳۹۳/۰۴/۳۰
با سلام
واقعا خسته نباشید
من وب نویسی رو تازه شروع کردم یعنی دارم کم کم یاد میگیرم
و به لطف اموزش خوبتون فکر کنم دارم خوب پیش میرم
فقط محیط کاری Dreamweaver واسه من نا اشناست یعنی هیچی ازش نمیدونم میشه یه سایت اموزشی یا ... واسش معرفی کنین
خیلی ممنون
پاسخ: 
سلام
نرم افزار Adobe Dreamweaver چندان محیط پیچیده ای ندارد، لطفا در این رابطه عبارت "آموزش Adobe Dreamweaver" را در وب جستجو کنید، آموزش های خوبی وجود دارد.
نویسنده: محمد
زمان: ۱۱:۱۲:۳۱ - تاریخ: ۱۳۹۴/۰۲/۱۴
سلام
یه سوال که خیلی وقته تو ذهنمه :
چرا شما از JQuery چیزی نمیگید !؟
آیا مثلا در مورد همین بحث AJAX استفاده از تابع آن در JQuery آسان و کاربردی تر نیست ؟
پاسخ: 
سلام
سیاستگذاری فعلی سایت بر آموزش و استفاده از زبان های محض (pure) بنا شده که خود دلایل متعددی دارد (از جمله جنبه آموزش پایه)، به همین دلیل فعلا در مورد فریم ورک ها و... مطلبی منتشر نخواهد شد، در مورد جی کئوری به نظر آینده وب رو به سمتی می رود که شاید قابلیت های HTML5 و CSS3 در کنار JavaScript و نسل بعدی Ajax، جایگزین این کتابخانه نسبتا سنگین شود، از طرفی استفاده از جی کئوری به جهت کاربردی بودن در اغلب موارد پیچیدگی کمتری دارد و نمونه کدهای فراوانی نیز برای آن یافت می شود.
نویسنده: جواد
زمان: ۰۱:۵۸:۰۴ - تاریخ: ۱۳۹۴/۰۹/۳۰
سلام شنیدم که آژاکس برای گوگل قابل خزش نیست و باید !# استفاده بشه در آدرس میخواستم بدونم چجوری باید این کار انجام بشه و این که در این سایت نمونه من در مطالب که نوار کنترل داره و مثلا میزنه مرور کلی در صفحه جا به جا میشه به قسمت مرور کلی میره میخواستم بدونم این مدل آژاکس هم بد هستش یا نه
ممنون
پاسخ: 
سلام
منظور از AJAX این سبک جا به جا شدن بین صفحه نیست! منظور این است بدون اینکه لینک صفحه در دسترس ربات گوگل باشد، مطالب با دستورات برنامه نویسی بارگذاری شوند، در واقع یعنی لینک معمولی صفحه در هیچ کجای صفحه وجود نداشته باشد و صرفا با استفاده از پارامترهایی که اگر آنها را در نوار آدرس مرورگر وارد کنیم، صفحه ی مورد نظر نمایش داده نخواهد شد، سیستم طراحی شود، در هر صورت برای سازگاری این نوع سایت ها معمولا علاوه بر حالت AJAX، لینک های معمولی نیز به نحوی در خروجی صفحات چاپ می شوند تا برای ربات گوگل و سایر موتورهای جستجو قابل دسترسی باشند.
paged صفحه 1 از 2




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

1 × 8
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...