آموزش استفاده از Ajax در jQuery

چهارشنبه ۲۱ آذر ۱۳۹۷
بازدید ۴,۸۳۲ نفر
یعثوب سیفی زاده
(20 امتیاز از 4 رای)
Loading...

تصویر how-to-use-ajax-in-jquery_4973 آموزش استفاده از Ajax در jQuery

آموزش استفاده از Ajax در jQuery

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

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

تابع ajax()

تابع ajax() به منظور انجام درخواست های HTTP به صورت ناهمگام (Asynchronous) استفاده می شود. در زیر الگوی این تابع را مشاهده می کنید:

$.ajax(url[, options])
$.ajax([options])

1 2	$.ajax(url[, options]) $.ajax([options])

پارامتر URL آدرسی که می خواهید درخواست HTTP به آن ارسال کنید را مشخص می کند و پارامتر دوم شامل گزینه هایی است که به منظور پیکربندی درخواست استفاده می شود.

پارامتر options

لیست گزینه هایی که توسط تابع ajax() می تواند پذیرفته شود را می توایند به همراه توضیحات کامل در مستندات رسمی Ajax مشاهده کنید.

به دلیل این که این توضیحات ارائه شده در لینک بالا بسیار زیاد است، ما آن ها را به صورت مختصر برای شما توضیح می دهیم.

accepts : محتوای هدر درخواست را مشخص می کند و به سرور می گوید که پاسخ او باید در چه فرمتی باشد.
async : زمانی که می خواهید درخواست شما به صورت همگام (Synchronous) باشد، این گزینه به صورت false تنظیم کنید.
beforeSend : یک تابع callback است که قبل از ارسال درخواست، می تواند برای تغییر شیء jqXHR استفاده شود.
cache : زمانی که می خواهید آدرسی که به آن درخواست ارسال کرده اید در مرورگر به صورت Cache ذخیره نشود، این گزینه را به صورت false تنظیم کنید.
complete : زمانی که درخواست به صورت کامل پایان یابد این تابع فراخوانی می شود (بعد از اجرا شدن Callback های success و errror).
contents : این شیء تعیین می کند پاسخ دریافتی چگونه باید تجزیه (Parse) شود.
contentType : نوع داده های ارسالی به سرور را مشخص می کند.
context : این شیء context تمامی callback های مرتبط با Ajax را مشخص می کند.
converters : یک شیء که شامل مبدل های dataType به dataType دیگر است.
crossDomain : زمانی که به صورت false تنظیم گردد، درخواستی ارسالی به سرور فقط باید از دامنه اصلی ارسال شود.
data : داده هایی که در هنگام درخواست باید به سرور ارسال شوند را مشخص می کند.
dataFilter : تابعی که برای handle کردن پاسخ خام XMLHttpRequest استفاده می شود.
dataType : نوع داده های دریافتی از سرور را مشخص می کند.
error : تابعی که هنگام ناموفق بودن درخواست فراخوانی می شود.
global : اگر برابر با false باشد، رویدادهای ajax غیرفعال می شوند. پیشفرض true می باشد.
headers : شیء که شامل هدرهای اضافی برای ارسال به سرور است.
ifModified : یک هدر HTTP است که یک درخواست مشروط به سرور می ‌فرستد. اگر محتوا تغییرات نداشته باشد سرور تنها یک هدر با کد وضعیت 304 را به عنوان پاسخ باز می گرداند. اگر محتوا تغییرات داشته باشد سرور پاسخ به یک درخواست را با ارائه کد وضعیت 200 پاسخ می‌دهد و درخواست منابع/سند را می‌دهد.
isLocal : برای آن که jQuery محیط فعلی را به عنوان محلی شناسایی کند، این گزینه را به صورت true تنظیم کنید.
jsonp : یک رشته که برای override کردن نام تابع callback در یک درخواست JSONP استفاده می شود.
jsonpCallback : نام تابع callback برای یک درخواست JSONP مشخص می کند.
mimeType : یک رشته که mimeType شیء XHR را override می کند.
password : یک پسورد که با XMLHttpRequest در پاسخ به یک درخواست احراز هویت HTTP استفاده می شود.
processData: اگر برابر true باشد، پارامترهای ارسالی در data قرار می گیرند و در غیر این صورت به صورت رشته ارسال می شوند.
scriptCharset : صفت charset را بر روی تگ اسکریپت مورد استفاده در درخواست تنظیم می کند.
statusCode : یک شیء که شامل کد های HTTP و توابعی برای handle کردن آن ها است.
success : تابعی که هنگام موفق بودن درخواست فراخوانی می شود.
timeout : یک عدد است که زمان timeout درخواست را بر حسب میلی ثانیه مشخص می کند.
traditional : برای استفاده از سبک param serialization این گزینه را به صورت true تنظیم می شود.
type : متد ارسال درخواست را مشخص می کند. می تواند به صورت GET یا POST تنظیم شود.
url : رشته ای که شامل URL که درخواست به آن ارسال شده است.
username : یک نام کاربری که با XMLHttpRequest در پاسخ به یک درخواست احراز هویت HTTP استفاده می شود.
xhr : یک callback برای ایجاد شیء XMLHttpRequest است.
xhrFields : یک شیء برای تنظیم بر روی شیء XHR است.

مثال

مثال زیر یک درخواست به آدرس http://api.joind.in/v2.1/talks/10889 ارسال می کند و نتیجه دریافتی که به صورت JSON است در صفحه نمایش می دهد.

تصویر how-to-use-ajax-in-jquery_4973_1 آموزش استفاده از Ajax در jQuery

محتوای فایل script.js :

$.ajax("http://api.joind.in/v2.1/talks/10889", {
    dataType: 'json', // نوع داده های دریافتی از سرور را مشخص می کند
    error: function() { // این تابع زمانی که درخواست با شکست مواجه شود، فراخوانی می شود
        $("#result").html('<p>An error has occurred</p>');
    },
    success: function(data) { // این تابع زمانی که درخواست موفق باشد، فراخوانی می شود
        var $title = $('<h2>').text(data.talks[0].talk_title);
        var $description = $('<p>').text(data.talks[0].talk_description);
        $("#result")
            .append($title)
            .append($description);
    },
    type: 'GET' // متد مورد استفاده برای درخواست را مشخص می کند. می تواند GET یا POST باشد
});

$.ajax("http://api.joind.in/v2.1/talks/10889", {

dataType: 'json', // نوع داده های دریافتی از سرور را مشخص می کند

error: function() { // این تابع زمانی که درخواست با شکست مواجه شود، فراخوانی می شود

$("#result").html('<p>An error has occurred</p>');

success: function(data) { // این تابع زمانی که درخواست موفق باشد، فراخوانی می شود

var $title = $('<h2>').text(data.talks[0].talk_title);

var $description = $('<p>').text(data.talks[0].talk_description);

$("#result")

.append($title)

.append($description);

type: 'GET' // متد مورد استفاده برای درخواست را مشخص می کند. می تواند GET یا POST باشد

});

محتوای فایل style.css :

* { font-family: Tahoma, 'Courier New', Courier }
*:focus { outline: none; }
body {
    text-align: center;
    background-color: #fafafa;
    color: #000000;
    direction: rtl;
    padding: 15px;    
}
h1 { font-size: 200%; }
h2 { font-size: 160%; }
p { line-height: 1.8em; }
a {
    text-decoration: none;
}
a:focus {
    text-decoration: underline;
}
button {
    background-color: #3399ff;
    color:#ffffff;
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
    box-shadow: 0px 3px 5px 0px #86a8c0;
    transition: all 0.10s linear;
}
button:hover {
    background-color: #3366ff;
}
button:focus {
    background-color: #3377ff;
    box-shadow: 0px 1px 5px 0px #86a8c0;
}
#result {
    direction: ltr;
    margin: 3em;
}
#result * {
    font-family: 'Courier New', Courier, monospace !important;
}

* { font-family: Tahoma, 'Courier New', Courier }

*:focus { outline: none; }

body {

text-align: center;

background-color: #fafafa;

color: #000000;

direction: rtl;

padding: 15px;

}

h1 { font-size: 200%; }

h2 { font-size: 160%; }

p { line-height: 1.8em; }

a {

text-decoration: none;

}

a:focus {

text-decoration: underline;

}

button {

background-color: #3399ff;

color:#ffffff;

padding: 10px 15px;

border-radius: 5px;

border: none;

box-shadow: 0px 3px 5px 0px #86a8c0;

transition: all 0.10s linear;

}

button:hover {

background-color: #3366ff;

}

button:focus {

background-color: #3377ff;

box-shadow: 0px 1px 5px 0px #86a8c0;

}

#result {

direction: ltr;

margin: 3em;

}

#result * {

font-family: 'Courier New', Courier, monospace !important;

}

محتوای فایل index.html :

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="script.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!-- description section -->
        <div>
            <!-- our site -->
            <h1><a href="https://sourcesara.com/" target="_blank">SourceSara.Com</a></h1>
            <p>
                این صفحه مربوط به مثال پست
                <q><a href="https://sourcesara.com/" target="_blank">آموزش استفاده از Ajax در jQuery</a></q>
                در سایت سورس سرا است.
                <br>
                برای مشاهده نحوه کار تکنولوژی Ajax بر روی دکمه زیر کلید کنید
                تا داده ها بدون این که صفحه
                بار گذاری مجدد شود، در زیر نمایش داده شوند.
            </p>
        </div>
        <!-- content section -->
        <div>
            <button id="get-info">بارگذاری با Ajax</button>
            <div id="result">
                <!-- Server response goes here -->
            </div>
        </div>
    </body>
</html>