i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
parsgreen.com
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

آموزش ای جکس (Ajax)، تکنیک غیرهمزمانی در وب

ajax-web-development

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

تلفظ و نگارش صحیح Ajax


قبل از اینکه به ادامه آموزش بپردازیم، یادآور می شویم که این عبارت در بین برنامه نویسان فارسی زبان وب گاها به صورت های متفاوتی تلفظ و نوشته می شود که در واقع همه به یک مفهوم اشاره دارند، به طور مثال آجاکس، آژاکس، ایجکس، ای جکس و...، در نگارش انگلیسی این کلمه نیز گاهی AJAX و گاهی Ajax (با تلفظ اِی جَکس) نگاشته می شود، بدین ترتیب به نظر می رسد صحیح ترین واژه برای تلفظ و نگارش این عبارت اِی جَکس (Ajax) باشد.

ضرورت و پیش نیازهای فراگیری ای جکس (Ajax)


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

شروع آموزش ای جکس با یک مثال


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

readyState یا وضعیت آماده چیست؟


همان طور که اشاره شد بعد از فراخوانی XMLHttpRequest مرورگر یک درخواست ای جکس را شروع می کند و متد readyState در طی این روند با اعدادی از 0 تا 4 که هر کدام یک وضعیت را نمایش می دهند مقداردهی می شود، عدد 0 وضعیت UNSENT را نشان می دهد که یعنی متد open در مرورگر ساخته شده اما هنوز فراخوانی نشده است، عدد 1 وضعیت OPENED را نشان می دهد یعنی متد open فراخوانی شده، عدد 2 نشانگر وضعیت HEADERS_RECEIVED است یعنی متد send فراخوانی شده و سربرگ های HTTP و پاسخ سرور آماده است، عدد 3 نشانگر وضعیت Downloading است، یعنی مرورگر در حال دریافت مقادیر ارسال شده از سرور به عنوان پاسخ است، در گام آخر برای اینکه بررسی کنیم همه چیز مرتب است readyState باید DONE یا کامل باشد، حالت کامل با عدد 4 دریافت می شود و با شرط ساده if برابری آن را بررسی می کنیم (که آیا XMLHttpRequest.readyState برابر 4 است یا خیر).

دریافت و نمایش پاسخ سرور در ای جکس (Ajax)


پس از دریافت کد 4 در بررسی readyState با دستور شرطی if، تکه کد document.myform.time.value اجرا و مقدار برگردانده شده توسط سرور که در متد responseText وجود دارد را به فیلد input که با مقدار name آن مشخص شده می دهیم، با دقت در کد متوجه می شویم که در متد open از عبارت GET برای آرگیومنت اول، آدرس یک فایل PHP برای آرگیومنت دوم و عبارت true برای آرگیومنت سوم استفاده شده، در حال حاضر در همین حد بدانیم که این پارامترها به ترتیب برای مشخص کردن نحوه ارسال اطلاعات (متد GET یا POST)، آدرس فایل مقصد در سرور (در اینجا فایل PHP) که درخواست به آن ارسال می شود و تعیین اینکه آیا سایر فعالیت های مرورگر در طی روند درخواست متوقف شود یا خیر (به ترتیب با مقدار false یا true، در حالت پیش فرض true) می باشند، در نهایت اطلاعات را با متد send به فایلی که با متد open فراخوانی گردیده ارسال می کنیم، در کد فعلی هیچ مقداری در send ارسال نشده و مقادیر آرگیومنت آن برابر با null است، اما در آموزش های بعدی خواهیم دید که می توان در یک درخواست مبتنی بر ای جکس پارامترهایی نیز به همراه درخواست به سرور ارسال کرد، کدمان در نهایت به صورت زیر خواهد بود:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | فرم ارسال درخواست ای جکس</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
</style>
<script type="text/javascript">
function ajaxFunction(){
    var ajax_request;
    
    try{
        //Opera, Firefox, Safari
        ajax_request = new XMLHttpRequest();
    } catch (e){
        //Internet Explorer
        try{
            ajax_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajax_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("متاسفانه مرورگر شما از ای جکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
    ajax_request.onreadystatechange = function(){
        if(ajax_request.readyState == 4){
            document.myform.time.value = ajax_request.responseText;
        }
    }
    ajax_request.open("GET", "server-time.php", true);
    ajax_request.send(null);    
}
</script>
</head>
<body>
<form name="myform" action="#">
<label for="username">نام: </label>
<input name="username" id="username" type="text" onchange="ajaxFunction();">
<br><br>
<label for="username">زمان: </label>
<input name="time" id="time" type="text">
</form>
<hr>
پس از نوشتن نام در فیلد نام، در فیلد زمان کلیک کرده و اندکی منتظر بمانید.
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » Ajax
related مطالب بیشتر:
» فریم ورک های آژاکس (Ajax Frameworks)
» ارسال و دریافت اطلاعات با متد get و post در آژاکس (ajax)
» نمایش و ذخیره اطلاعات فایل با آژاکس (Ajax)
» نمایش افکت fade in با آژاکس (ajax)
» نمایش پیام و تصویر در حال بارگذاری (loading) در آژاکس (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 لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

7 × 5
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

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

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)