حتما تا به حال در اینترنت به وب سایت هایی برخودید که بدون بارگزاری مجدد صفحات یا به اصطلاح Refresh کردن محتوای سایت را تغییر می دهند و با این کار باعث افزایش سرعت سایت و در نتیجه رضایتمندی کاربران در استفاده از وب سایت می شود حال این سوال پیش می آید که چطور می شود این کار را انجام داد جواب خیلی ساده است Ajax
AJAX چیست؟
واژه AJAX با تلفظ <ای‌جکس> یا <ای‌ژاکس> سرنام عبارت Asynchronous Java and XML و به معنی <ترکیب نامتقارن جاوا اسکریپت و>XML است. ماهیت صفحات وب و پروتکل HTTP به گونه‌ای است که به طور معمول وقتی درحال وب‌گردی هستیم، به ازای هر کنش و واکنش میان ما و سایتی که در حال کار با آن هستیم، کل یک صفحه وب از نو بارگذاری و تازه‌سازی (refresh) می‌شود.
ای‌جکس فناوری جدیدی است که تغییر محسوسی را در این سناریو به وجود می‌آورد؛ به این ترتیب که به جای بارگذاری مجدد کل صفحه، فقط قسمتی تغییر می‌کند که قرار است اطلاعات جدید را به نمایش درآورد و کلیه عملیات ارسال اطلاعات و دریافت نتایج در پشت صحنه انجام می‌شود. در نتیجه هیچ‌گاه صفحه سفید و خالی وب در فواصل کنش و واکنش‌های هنگام کار با مرورگر دیده نمی‌شود و احساسی مشابه تجربه کار با یک نرم‌افزار دسکتاپ به کاربر دست می‌دهد.
پیاده سازی Ajax به وسیله jQuery
یکی از بهترین راه های پیاده سازی ای جکس استفاده از فریم ورک قدرتمند جی کوئری می باشد . برای این کار توابع کاربردی در jquery نوشته شده است که می توانید لیست آنها را در اینجا مشاهده فرمایید
در این پست به آموزش راهکاری جهت لود کردن صفحات به صورت ajax می پردازیم
برای شروع بسته آموزش را دانلود کنید و سپس فایل ها را از حالت زیپ خارج کنید. همین طور که مشاهده می کنید یک فولدر به نام css وجود دارد که داخل آن فایل css و همچنین تصاویر مورد نیاز قرار دارند همچنین در فولدر اصلی فایل های index.html , external.html , sections.html , menu.js قرار دارند حال به نحوه عمل کرد کدها می پردازیم.
فایل index.html را به وسیله نرم افزار ادیتور خود باز کرده و به کدهای داخل آن توجه فرمایید
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="tutorial, ajax, jquery, javascript, load content" /> <meta name="description" content="How to load content via AJAX in jQuery - avadesigner.com"/> <title>How to load content via AJAX in jQuery. By avadesigner.com</title> <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" /> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="menu.js"></script> </head> <body> <div id="container"> <div id="top"> <h1><a href="http://www.hiwebdesign.ir">avadesigner - Tutorials, Web Design and Coding</a></h1> <ul id="menu"> <li id="home"> صفحه اصلی </li> <li id="news"> اخبار </li> <li id="products"> محصولات </li> <li id="external"> پیوندها </li> </ul> <span class="clear"></span> </div> <div id="loading"> <img src="css/images/loading.gif" alt="Loading..." /> </div> <div id="content"> <h2>Home</h2> <p> لورم ایپسوم متن ساختگی به سادگی از صنعت شناخته چاپ استاندارد و وب سایت حروفچینی است. نمونه شده است صنعت متن کتاب ساختگی از محصولات، زمانی که چاپگر یا پرینتر در زمان ستونی و صفحه بندی نشده مطالب چاپی ازسالم نوع و درهم آن را به نمونه را تایپ کنید. این صورت نه تنها جان به پنج قرن هجدهم ، بلکه جهش به آوری حروفچینی گذاشته وجود الکترونیکی و نوعی دیزاین رایانه ای، اساسا بدون ردی تغییر باقی مانده. آن را در فوتبال با انتشار ورق حاوی شهریار معابر فکری هکرها پزشک محبوبیت بود، و اخیرا فکری با نرم افزار هکر را نشر شناخت هیت من رومیزی همانند از جمله نسخه های دیگران بوده است راکه در پی فرهنگ پس از آن و می خواهد به آن را دارند، تنها به استفاده دلیل آن است. </p> </div> <div id="footer"> <p> Made by <a href="http://www.hiwebdesign.ir">avadesigner.com</a>. We hope you find this tutorial useful for your personal projects :) </p> </div> </div> </body> </html> </body>
همین طور که ملاحظه می کنید جدای از تگ های تبلیغاتی سایت 🙂 سه تگ در کد های ما دارای اهمیت می باشند که به ترتیب عبارتند از تگ ul با آیدی menu , تگ div با آیدی loading که تصویر مربوط به لودینگ صفحه داخل آن قرار دارد و تگ div با آیدی content که محتوای سایت در این قسمت قرار دارند و ما با استفاده از jquery محتوای این قسمت را بدون refresh صفحه تغییر می دهیم
همچنین در قسمت head سایت کدهای فراخوانی مربوط به css و jquery قرار دارند و بعد از آنها کد فراخوانی فایل menu.js که وظیفه اصلی در آن اجرا می شود وجود دارد.
حال فایل menu.js را باز کنید و به کدهای داخل آن توجه نمایید
$(document).ready(function(){
//References
var sections = $("#menu li");
var loading = $("#loading");
var content = $("#content");
//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "home":
content.slideUp();
content.load("sections.html #section_home", hideLoading);
content.slideDown();
break;
case "news":
content.slideUp();
content.load("sections.html #section_news", hideLoading);
content.slideDown();
break;
case "products":
content.slideUp();
content.load("sections.html #section_products", hideLoading);
content.slideDown();
break;
case "external":
content.slideUp();
content.load("external.html", hideLoading);
content.slideDown();
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});خوب اگر به جاوا اسکریپت و jQuery تسلط داشته باشید به راحتی متوجه کدها خواهید شد اما برای درک بهتر دوستان به توضیح کدها می پردازم
در ابتدای کار ما باید از لود شدن محتوای مورد نظر مطمئن شویم تا با مشکل رو برو نشیم برای همین از فرمان زیر استفاده می کنیم
$(document).ready(function(){
}سپس 3 متغیر تعریف کرده و با استفاده از سلکتورهای jquery سه تگ مهم اشاره شده را در آنها می ریزیم
var sections = $("#menu li");
var loading = $("#loading");
var content = $("#content");در مرحله بعد برای رویداد click برای متغیر sections توابعی را تعریف می کنیم
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "home":
content.slideUp();
content.load("sections.html #section_home", hideLoading);
content.slideDown();
break;
case "news":
content.slideUp();
content.load("sections.html #section_news", hideLoading);
content.slideDown();
break;
case "products":
content.slideUp();
content.load("sections.html #section_products", hideLoading);
content.slideDown();
break;
case "external":
content.slideUp();
content.load("external.html", hideLoading);
content.slideDown();
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});اولین تابع showloading می باشد به این صورت
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}که وظیفه ظاهر کردن تصویر مربوط به لودینگ را دارد سپس یک ساختار switch تعریف شده که وظیفه تشخیص صفحه درخواستی از سوی کاربر را دارد و بر اساس آن صفحات مورد نظر را با کمک تابع load که از توابع مهم jquery می باشد به صورت Ajax لود می کند و به کاربر نمایش می دهد و در مرحله پایانی هم تابع hideLoading
function hideLoading(){
loading.fadeTo(1000, 0);
};تصویر لودینگ را محو کرده وبه همین راحتی محتوای صفحه بدون refresh صفحه تغییر می کنند.
برای گرفتن بهترین نتیجه باید تا حد امکان از نحوه کار کرد کدها جاوا اسکریپت و جی کوئری اطلاع دقیق داشته باشید تا بتوانید در پروژه های خود از این امکانات استفاده نمایید.
سلام ممنون از آموزش های خوبتون . میخواستم ببینم این لود جی کوئری رو روی وردپرس میشه پیاده کرد ؟
با سلام بله این امکان وجود داره اما راهکارش رو با سرچ کردن در سایت های خارجی باید پیدا کنید
مثلا : https://www.google.com/search?q=load+wordpress+page+with+ajax&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
موفق باشید
باسلام خسته نباشید
می خواستم بگک سایتتون خیلی عالیه
باتشکر موفق باشی
بسیار عالی!
سلام ، خیلی خوب بود ممنون
فقط یک سوال داشتم
چطوری می تونم به جای اینکه content رو نشون بده وقتی روی لینک کلیک می کنی مطالب سایت دیگه رو با تمامی ویزگی هاش نشون بده
در اصل یک لینکی از سایت دیگه که وقتی روش کلیک می کنی محتویاتش رو نشون بده ، اما دقیقا در قسمت content صفحه.
سلام
می تونید از تگ iframe استفاده کنید
http://www.w3schools.com/TAGS/tag_iframe.asp
البته راهای دیگری هم وجود دارد که میتونید از طریق جستوجو در سایت های خارجی پیدا کنید
موفق باشید
مرسی از اینکه جواب دادین
از iframe که گفتین استفاده کردم ولی قبل از اینکه روی لینکی کلکیک بشه خودش فریم رو میاره !!!
ولی من می خوام که وقتی روی لینک کلیک شد بیاد
کل اینترنتم چرخیدم چیزی در موردش پیدا نکردم، البته چند تا page بود که می گفت از frameset استفاده کنید ولی چون دیگه نمی تونم از تگ استفاده کنم کل طراحی به هم می ریزه !!!
اگه راعنماییم کنید واقعا ممنونت می شم.
تگ body که در نظر قبلی ثبت نشد.
با سلام
عیدتان مبارک
مطلب خیلی جالبی بود.
خیلی ممنون از آموش عالی اتان
منتظر مطالب خوب شما هستم.
سال جدیدی پرنشات خوب را داشته باشید.
سلام مرسی از سایت خوبتون
یه سوال:
از ای جکس به تنهایی بدون استفاده از جی کوئری استفاده کرد بهتره یا با جی کوئری؟
ممنونم
سلام
بستگی به نوع کارتون داره اما jQuery کار رو خیلی آسون تر می کنه و خیلی از مشکلات رو خودش رفع می کنه و کد نویسی رو کم تر می کنه برای مثال شما دیگه لازم نیست برای مرورگر های مختلف کد بزنید بلکه 1 بار کد میزنید و جی کوئری خودش کار رو هندل می کنه
ببخشید ولی اگه منو داینامیک باشه از این روش چطور استفاده کنم؟
اگه به کدها توجه کنید قسمت مهم منو ها ID هستش که jQuery بر اساس مقدارش میره و محتوای موجود در تگ Div با همون ID رو میاره و نمایش میده پس شما باید در منوی داینامیک مقدار ID رو تولید کنید که دیگه بستگی به کدنویسی سایتتون داره
سلام خدمت شما دوست گرامی
آموزش بسیار مفیدی بود ، ممنون
یه سوال هم داشتم
میخوام پنجره مرورگر رو به 4 قسمت تقسیم کنم و چهار بخش اصلی سایت رو تو هر کدوم از اونها نمایش بدم مثل کاری که با iframe می کردیم ، میخواستم بدونم آیا راهی هست با آجاکس و جی کوئری این کار رو کرد ؟
اگه شد و سریع جواب بدین واقعا ممنونتون میشم
فعلا ، یا حق
سلام
شدنش که میشه ولی خوب چیزه ساده ایی نیست که آموزش داد
شما می تونید از توابع jQuery برای پیاده سازی ajax استفاده کنید
http://api.jquery.com/category/ajax/
خیلی ممنونم
سلام و خسته نباشید
من این فایل آموزشی رو دانلود کردم و اجرا کردم ولی وقتی روی لینک ها کلیک میکنی هیچی توی صفحه نشون نمیده. یعنی فقط اون لودینگ رو نشون میده و صفحه خالی میشه و اون مطالب سکشن ها رو لود نمیکنه. خودمم توی سایتی که طراحی میکنم امتحانش کردم همینجوری شد. البته توی دموی نتیجه نهاییتون درسته همه چیز.میشه راهنمایی کنید؟ممنون میشم
سلام
باید کد هاتون رو درست کنید شاید لینک های صفحات مشکل داشته باشه
خیلی مفید بود ممنون
سلام
از کد این صفحه استفاده کردم و اجرایی بود و وظیف دونستم تشکر کنم.
این قسمت برچسبها در پایین همین صفحه رو میشه کدش رو بزارید؟
یه نمونه اش هست خارجیه و شکل کره زمینه.اگر بزارید و آموزش بدید ممنون میشم.
لطفا اگر گذاشتید یک اطلاع رسانی با ایمیل بکنید که بتونم لینکش رو پیدا کنم
سلام
از این افزونه استفاده کنید
http://wordpress.org/plugins/wp-cumulus/
سلام
ممنون از آموزش شما .
فقط اینکه این رو روی سایت قرار هست روی کروم کار میکنه.
روی pc کار نمیکنه . جالبه که همینی که کار نمیکنه روی firefox کار میکنه !!!
اشکال از ورژن jquery نیست . میشه تست کنید.
تو ورژن اصلی مقاله هم یکی گفته بود روی کروم کار نمیکنه.
باز من الان ورژن آخر jquery رو گذاشتم فقط صفحه اصلی رو لود میکنه !!!!!
سلام
من دمو تست کردم مشکلی نداشت در کروم و فایرفاکس کار کرد
البته این آموزش مربوط به 3 سال پیشه و شاید مشکلاتی با jQuery جدید داشته باشه و باید کد هاش رو اصلاح کنید
ممنون بابت پاسخ .
اما این فقط روی هاست کار میکنه !
میشه به من کمک کنید . من چند صفحه html دارم و میخوام با کمک متد load اون ها رو لود کنم تو یه صفحه دقیقا همین آموزش.
یک مثال جدید یا آموزش جدید بذارید یا لینک بدید .مممنون 😡
دلیل این که فقط روی هاست کار می کنه میتونه از آدرس فایل ها باشه که درخواست میکنید لود شه. باید بررسی کنید آدرس درست به فایل مورد نظر اشاره کنه.
در رابطه با آموزش یه جست و جو به انگلیسی کنید منبع زیاده برای مثال می تونید از این آموزش استفاده کنید.
موفق باشید
شکلک آخر قلب بود که اینجوری شد . شرمنده ♥
سلام
عالی بود.
ممنون
عالی آموزش داده این مطلب
ممنون از مطالب مفیدتون