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 مطالب بیشتر:
» نمایش و ذخیره اطلاعات فایل با آژاکس (Ajax)
» نمایش پیام و تصویر در حال بارگذاری (loading) در آژاکس (ajax)
» فریم ورک های آژاکس (Ajax Frameworks)
» ارسال و دریافت اطلاعات با متد get و post در آژاکس (ajax)
» نمایش افکت fade in با آژاکس (ajax)
commentنظرات (۱۶ یادداشت برای این مطلب ارسال شده است)
نویسنده: رضا
زمان: ۰۲:۴۷:۴۵ - تاریخ: ۱۳۹۴/۱۲/۲۴
سلام و با تشکر از مطالب مفیدتان و پاسخ های دقیق و راهگشای شما.
برای ساختن ربات تلگرام نیاز به برنامه نویسی سمت سرور و سپس برقراری ارتباط این برنامه با api تلگرام است. برای دریافت مسیج هایی که کاربران به ربات ارسال می کنند، دو روش وجود دارد: یکی از این دو روش، webhook است که بنا به الزام تلگرام می بایستی روی یک دامین دارای ssl قرار داشته باشد تا تلگرام خودش به محض اینکه کاربر مسیجی به ربات ارسال کرد آن مسیج را به صورت درخواست http به کدهای php صاحب ربات ارسال کند. اما من از هاست رایگان و زیردامنه استفاده می کنم و ssl ندارم پس مجبورم از روش دومی که تلگرام برای دریافت مسیج ها مشخص نموده یعنی getupdate استفاده کنم که باید از سمت سرور خودم یک درخواست http به api تلگرام ارسال کنیم تا در پاسخ، آخرین مسیج ها را بصورت json دریافت کنم. بازه زمانی تکرار این درخواستها بستگی به نیاز خودمان و نوع ربات مان دارد که طبیعتا اگر بخواهبم ربات به صورت همیشه آماده به کار باشد باید این بازه را کسری از ثانیه قرار دهیم. حال مشکل بنده این است که برای ارسال درخواست نمیدانم از چه راهکاری استفاده کنم تا از هاست رایگانم که امکان cron job هم ندارد یتوانم بدون نیاز به مرورگر، در طول شبانه روز در بازه های بسیار کوتاه درخواست ارسال کنم و پاسخ درخواست ها را به کدهای php خودم ارسال کنم تا در مسیر پردازش قرار بگیرند؟ کاری که فعلا کرده ام باز گذاشتن یک مرورگر و دائم به اینترنت وصل بودن و گذاشتن یک کد رفرش جاوا در صفحه است!! چطور میتوانم از هاست رایگانم به طور دائم مثلا هر ثانیه 10 بار درخواست ارسال کنم؟ (هر دو متد get و post و روش های زیر در پاس دادن پارامترها توسط api تلگرام پشتیبانی می شود:
URL query string
application/x-www-form-urlencoded
application/json (except for uploading files)
multipart/form-data (use to upload files)
پاسخ: 
تا آنجا که اطلاع داریم، متاسفانه در شرایط توضیح داده شده، راه حل کاربردی وجود ندارد!
paged صفحه 2 از 2




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

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

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