با سلام به شما دوستای خوب ، وقت شما بخیر و شادی با اموزشی دیگر از jquery دررابطه با متد Load در Ajax در خدمت شما دوستان هستیم. امیدوارم که توانسته باشم هر چند کوچک قدمی در جهت ارتقای سطح دانش شما برداشته باشم.
یکی از ساده ترین در عین حال کارآمدترین متدهای بارگذاری داده به صورت نامتقارن (غیرهمزمان)، متد load() می باشد. برای استفاده از آن، ابتدا المانی که می خواهید محتوا در آن بارگذاری شود را انتخاب کرده و سپس متد load() را بر روی آن فراخوانی می کنیم. متد نام برده URL ای (آدرس فایلی که اطلاعات را می خواهیم از آن بخوانیم) را که می خواهید لود شود را به عنوان پارامتر می گیرد. برای این نمونه، باید یک فایل خارجی برای بارگذاری داشته باشیم. آن را content.html نامیده و محتوای آن باید مشابه کد زیر باشد:
This is external content
And there’s more of it
آن را تحت عنوان content.html و در همان پوشه ای که دیگر فایل های نمونه ی خود را در آن ذخیره می کنید، قرار دهید. می توان آن را به سادگی بارگذاری کرد:
نمونه یک
?
۱
۲
۳
۴
۵
$(function () {
$(“#divTestArea1”).load(“content.html”);
});
اگر فایل content را در پوشه ی دیگر قرار داده یا آن را به گونه ای دیگر نام گذاری کرده اید، در آن صورت می بایست پارامتر ارسالی به متد load را متناسب با آن تغییر دهید. می توانید همراه با URL، یک انتخابگر نیز به عنوان آرگومان ورودی به متد مذکور پاس دهید و بدین وسیله تنها بخش دلخواه از صفحه ی مورد نظر را گزینش کنید. در مثال اول، کل یک صفحه را بارگذاری کردیم، اما در مثال زیر، فقط المان div ای که دربردارنده ی جمله ی اول است را انتخاب کرده و به صورت نامتقارن بارگذاری می کنیم:
نمونه دو
?
۱
۲
۳
۴
۵
$(function () {
$(“#divTestArea2”).load(“content.html #divContent”);
});
همان طور که مشاهده می کنید، فقط یک انتخابگر متعارف jQuery را به عنوان پارامتر دوم به متد load ارسال کرده و آن را با ویرگول از آرگومان قبلی (URL) متد مزبور جدا کردیم. این کار باعث می شود jQuery تنها محتوای مشخص شده را از صفحه ی مورد نظر انتخاب کرده و از این طریق فقط بخش های منطبق با انتخابگر (selector) را به container برگرداند (و در آن ظرف قرار دهد). می توان هر انتخابگری را به عنوان پارامتر به متد load پاس داده و از این طریق بخش مورد نظر را گزینش کرد که به کارایی هر چه بیشتر این متد می افزاید.
تابع load دو پارامتر دیگر می پذیرد: ۱٫ مجموعه جفت کلید و مقدار querystring 2. یک تابع callback که به محض اجرای کامل متد load و صرف نظر اینکه لود با موفقت انجام می شود یا خیر، صدا زده و اجرا می شود. در زیر مثالی را مشاهده می کنید که با تابع callback کاربر را از موفقیت یا عدم موفقیت اجرای load آگاه می کنیم. معمولا پیغام موفقیت را تنها در صورت موفقیت اجرای متد نمایش می دهند، اما برای آموزش پیغام عدم موفقیت بارگذاری را نیز نمایش می دهیم. در این مثال، عمدا یک فایل را درخواست می کنیم که وجود خارجی ندارد تا عملیات با شکست مواجه شده و پیغام عدم موفقیت به نمایش در آید:
نمونه سه
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
$(function () {
$(“#divTestArea3”).load(“no-content.html”, function (responseText, statusText, xhr) {
if (statusText == “success”)
alert(“Successfully loaded the content!”);
if (statusText == “error”)
alert(“An error occurred: ” + xhr.status + ” – ” + xhr.statusText);
});
});
همان طور که مشاهده می کنید، تابع callback سه متغیر به عنوان پارامتر می گیرد که jQuery خود برای شما با مقدار پر می کند. اولین پارامتر، در صورتی که فراخوانی و اجرای متد با موفقیت انجام شود، با محتوای حاصل پر خواهد شد (دربردارنده ی داده های خروجی از درخواست می باشد). دومین پارامتر یک رشته است که وضعیت فراخوانی، برای مثال “success” یا “error” را مشخص می کند (در واقع مشخص کننده ی وضعیت درخواست می باشد). با این پارامتر می توان موفقیت یا عدم موفقیت اجرای متد را دریافت. پارامتر سوم یک شی XMLHttpRequest است که برای فراخوانی توابع AJAX بکار می رود. این شی دربردارنده ی خاصیت هایی (property هایی) است که با استفاده از آن می توان علت رخداد خطا (عدم موفقیت و اجرای کامل بارگذاری) و خیلی چیزهای دیگر را دریافت.
آ
