Ajax در jQuery

این قسمت را به Ajax اختصاص داده ایم و به این می پردازیم که چطور با Ajax در jQuery کار کنیم.

Ajax چیست؟

کلمه Ajax از حروف اول کلمات عبارت Asynchronous Javascript And Xml گرفته شده است. به بیان ساده، Ajax به معنای بارگذاری اطلاعات از سرور روی مرورگر بدون نیاز به رفرش شدن کل صفحه وب می باشد.

به صورت مقدماتی، عملی که Ajax انجام می دهد به این صورت است که با استفاده از یک آبجکت مبتنی بر Javascript به نام XMLHttpRequest، اطلاعات را همزمان به وب سرور می فرستد و از آن، اطلاعات را می گیرد. این کار در پس زمینه Ajax رخ می دهد، بدون آن که کاربر متوجه آن شود و یا تأثیری روی تجربه کاربری بگذارد.

Ajax بسیار محبوب شده است و شما به سختی می توانید برنامه ای را پیدا کنید که به میزانی از Ajax در آن استفاده نشده باشد. نمونه هایی از برنامه های کاربردی آنلاین با مقیاس بزرگ که با Ajax کار می کنند عبارتند از: Gmail ،Google Maps ،Google Docs Youtube ،Facebook ،Flickr و ...

Ajax یک تکنولوژی جدید نیست. در واقع Ajax حتی یک تکنولوژی هم نیست. Ajax فقط یک عبارت است که جهت شرح تبادل داده ی جاوا اسکریپت با وب سرور به صورت همزمان و بدون رفرش شدن صفحه، استفاده می گردد.

مرورگرهای مختلف Ajax را به صورت متفاوت پیاده سازی می کنند. این بدین معناست که اگر شما بخواهید با جاوا اسکریپت کد Ajax را پیاده سازی کنید، باید برای مرورگرهای مختلف این تفاوت در کد را داشته باشید. به این دلیل که اطمینان حاصل کنید که Ajax حتما روی هر مرورگری عملکرد صحیحی دارد.

اما خوشبختانه jQuery با تکیه بر تفاوت مرورگرها، روند پیاده سازی Ajax را ساده کرده است. jQuery متدهای ساده ای همچون متد ()load، متد ()get.$، متد ()post.$ و... را جهت پیاده سازی Ajax برای هر مرورگری فراهم کرده است.

در ادامه در این رابطه می آموزید که چطوری اطلاعات را از سرور با استفاده از ()load بارگذاری کنید.

نکته: درخواست های Ajax توسط کد جاوا اسکریپت فرآیند خود را شروع می کنند. کد شما درخواستی را به یک URL می فرستد، سپس وقتی که درخواست کامل شد، یک تابع callback می تواند فرآیندی را آغاز کند تا پاسخ بازگشتی را مدیریت نماید. سپس از آن جایی که درخواست همزمان نیست، در حالی که درخواست در حال پردازش است، قسمت های دیگر کد، به کار خود ادامه می دهند.

متد ()load در jQuery

متد ()load در jQuery اطلاعات را از سرور بارگذاری می کند و تکه کد html را در جایی که در نظر گرفته شده است، قرار می دهد. این متد راه ساده ای را جهت بارگذاری داده ها به صورت نامتقارن از یک وب سرور ارائه می کند. ساختار سینتکس استفاده از این متد به صورت زیر است:

$(selector).load(URL, data, complete);

هم اکنون هرکدام از پارامترهای موجود در متد ()load را که در ساختار بالا آمده است، شرح می دهیم:

پارامتر URL آن URL مربوط به فایلی را که می خواهید بارگذاری کنید، دریافت می کند.
پارامتر انتخابی data یک رشته کوئری (query) را که به صورت جفت کلید/مقدار (key/value) می باشد، تنظیم و سپس همراه درخواست به وب سرور ارسال می کند.
پارامتر انتخابی complete که به صورت کلی می توان گفت یک تابع callback است و وقتی درخواست کامل شد، اجرا می گردد. تابع callback برای هر عنصر انتخاب شده یک بار اجرا می گردد.

حالا می خواهیم این متد را در یک حالت واقعی مورد استفاده قرار دهیم. یک فایل خالی html با عنوان test-content.html بسازید و آن را درجایی از وب سرور خود ذخیره کنید. اکنون کد html زیر را داخل این فایل قرار دهید:

<h1>Simple Ajax Demo</h1>
<p id="hint">This is a simple example of Ajax loading.</p>
<p><img src="sky.jpg" alt="Cloudy Sky"></p>

حالا، یک فایل دیگر html بسازید و نام آن را load-demo.html قرار دهید و در همان جایی که فایل قبلی را ذخیره کرده اید، این فایل را ذخیره کنید. سپس کد html را دون آن قرار دهید:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("test-content.html");
    });
});
</script>
</head>
<body>
    <div id="box">
        <h2>Click button to load new content inside DIV box</h2>
    </div>
    <button type="button">Load Content</button>
</body>
</html>

در نهایت این صفحه را در مرورگر خود باز و روی دکمه Load Content کلیک کنید. خواهید دید که محتوای DIV با یک محتوای html که همان محتوای فایل test-content.html است، جایگزین شد.

نکته: جهت تست مثال های Ajax نیاز دارید که فایل های html را روی وب سرور خود ذخیره کنید. می توانید یک وب سرور محلی برای خود روی سیستم شخصی خودتان، راه اندازی کنید. این کار را می توانید با نصب WampServer یا XAMPP انجام دهید. شما باید فایل دمو را با استفاده از "//:http" باز کنید تا Ajax درخواست های HTTP را بسازد.

توجه: Ajax تنها می تواند درخواست هایی را بسازد که فایل مورد نظر در همان وب سرور وجود داشته باشد و دسترسی از طریق ریموت و یا فایل های خارج از آن وب سرور وجود ندارد. این عملکرد دلایل امنیتی دارد که به آن استراتژی مبدأ مشترک گفته می شود.

بعد از بررسی موضوعاتی که در بالا آمده است، به تابع callback موجود در یک درخواست ()load می پردازیم. این تابع callback، خود می تواند 3 پارامتر مختلف داشته باشد:

responseText __ اگر درخواست موفق شود، شامل محتوای نتیجه درخواست می باشد.
statusTxt __ شامل وضعیت درخواست است، مثلا موفقیت یا خطا.
jqXHR __ شامل آبجکت XMLHttpRequest می شود.

در کد زیر، کد مثال بالا بهینه شده است و پیام خطا یا موفقیت را بنا بر وضعیت درخواست نمایش می دهد:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("test-content.html", function(responseTxt, statusTxt, jqXHR){
            if(statusTxt == "success"){
                alert("New content loaded successfully!");
            }
            if(statusTxt == "error"){
                alert("Error: " + jqXHR.status + " " + jqXHR.statusText);
            }
        });
    });
});
</script>
</head>
<body>
    <div id="box">
        <h2>Click button to load new content inside DIV box</h2>
    </div>
    <button type="button">Load Content</button>
</body>
</html>

بارگذاری قسمت های مختلف صفحه

متد ()load در jQuery این امکان را به ما می دهد تا فقط یک قسمت از صفحه (فایلی که توسط jQuery درخواست می شود) را واکشی کنیم. این عملکرد به راحتی با اضافه کردن یک پارامتر URL به فضایی که توسط Selector انتخاب می شود، رخ می دهد.

کد مثال زیر این عملکرد را برای شما واضح تر می سازد:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("test-content.html #hint");
    });
});
</script>
</head>
<body>
    <div id="box">
        <h2>Click button to load new content inside DIV box</h2>
    </div>
    <button type="button">Load Content</button>
</body>
</html>

کد بالا مشخص می سازد که قسمتی از فایل test-content.html که شامل hint# می شود در قسمت DIV کد html بالا قرار گیرد. همان عنصر DIV که مقدار ID در آن برابر است با hint یا به عبارتی دیگر : "id="hint.

در این بخش در رابطه با Ajax در jQuery صحبت کردیم. در بخش بعدی و آخرین بخش از آموزش مباحث تکمیلی jQuery متدهای Get و Post و conflict را بررسی می کنیم.