Ajax چیست و آموزش دریافت اطلاعات با Ajax

صفحه اصلی » انجمن ها
« در صورت وجود هرگونه اشکال در این مطلب لطفا گزارش اشکال آن را ارسال نمایید »

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

مقالات و آموزش
بیشتر بخوانید
خاصیت ایجکس در این است که شما می توانید به تعداد زیادی درخواست به سمت سرور ارسال کنید و نتیجه هر کدام رو جداگانه دریافت کنید.
در حقیقت این تکنولوژی باعث شده بتوانیم صفحات وب را مانند زبان هایی نظیر Java, Python و ... از نظر درخواست های نامتقارن مدیریت کنیم.
در این آموزش یاد خواهیم گرفت چگونه یک درخواست Ajax ارسال کنیم و اطلاعات آن را به نمایش بگذاریم.
یک فایل به نام index.htm ایجاد کنید کدهای زیر را قرار دهید:
<button id="getDataBtn">Get Data</button>
<div id="richList"></div>
در کد بالا یک button داریم که با کلیک کردن روی آن باید یک درخواست به سمت سرور ارسال شود.
و یک div داریم که می خواهیم نتیجه نهایی در آن نمایش داده شود.
توجه کنید که درخواست های ما از طریق jQuery مدیریت می شود، در نتیجه در تگ head ابتدا فایل jQuery مورد نظر را بارگزاری کنید.
حالا کد زیر را در تگ script فایل index.htm خود قرار دهید:
$('#getDataBtn').click(function () {
        $.ajax({
                type: "GET",
                url: "https://forbes400.herokuapp.com/api/forbes400?limit=400",
                dataType: 'json',
                success: function (data) {
                        if (data.length > 0) {
                                let richList = "<ol>";
                                for (let i = 0; i < data.length; i++) {
                                        richList += "<li>" + data[i].uri + "</li>";
                                }
                                richList += "</ol>"
                                $('#richList').html(richList);
                        }
                }
        });
});
همانطور که در کد بالا مشاهده می کنید، در صورتی که روی getDataBtn کلیک شود، به url مورد نظر متصل می شویم.
پس از آن در صورتی که اطلاعات دریافتی صحیح باشد، در قالب فرمت json در متغیری به نام data قرار میگیرد.
با کد data.length بررسی می کنیم که آیا اطلاعاتی موجود است یا خیر؟
در صورتی که موجود باشد، در متغیری به نام richList آن دیتا را قرار می دهیم‌ (با حلقه for). در اینجا ما مقدار uri را برای هر ردیف نمایش می دهیم.
در نهایت مقدار نهایی richList را در ID مورد نظرمان (در اینجا richList) می ریزیم.
نمونه کد کامل این درخواست:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
        <head>
                <meta charset="UTF-8">
                <title>Fidaxo</title>
                <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
                <script>
                        $(document).ready(function(){
                                $('#getDataBtn').click(function () {
                                        $.ajax({
                                                type: "GET",
                                                url: "https://forbes400.herokuapp.com/api/forbes400?limit=400",
                                                dataType: 'json',
                                                success: function (data) {
                                                        if (data.length > 0) {
                                                                let richList = "<ol>";
                                                                for (let i = 0; i < data.length; i++) {
                                                                        richList += "<li>" + data[i].uri + "</li>";
                                                                }
                                                                richList += "</ol>"
                                                                $('#richList').html(richList);
                                                        }
                                                }
                                        });
                                });
                        });
                </script>
        </head>
        <body>
                <button id="getDataBtn">Get Data</button>
                <div id="richList"></div>
        </body>
</html>
همانطور که مشاهده کردید کار با این تکنولوژی بسیار ساده و سریع می باشد.
توجه کنید که در صورتی می خواهید مقداری POST کنید، باید type: 'GET' را به type: 'POST' تغییر دهید

اشتراک گذاری مطلب

این مطلب را با دوستانتان در شبکه های اجتماعی به اشتراک بگذارید و معرفی نمایید

لطفا جهت ثبت نظر یا پرسش و پاسخ ابتدا وارد سایت شوید یا ثبت نام نمایید
مــطالب مــرتبط با این مــوضـوع

دیگر مطالب خواندنی

آخرین اخبار تکنولوژی، آموزش برنامه نویسی، توسعه زبان ها و ... را در وبلاگ آکادمی فیداکسو دنبال کنید
همچنین از آخرین خبرها و تخفیفات سایت نیز اینجا آگاه شوید