آموزش بارگزاری صفحات وب به صورت ای‌جکس به وسیله jQuery

تاریخ انتشار:

حتما تا به حال در اینترنت به وب سایت هایی برخودید که بدون بارگزاری مجدد صفحات یا به اصطلاح 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.avadesigner.com">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.avadesigner.com">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 صفحه تغییر می کنند.

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

28 دیدگاه برای ”آموزش بارگزاری صفحات وب به صورت ای‌جکس به وسیله jQuery

  1. عارف

    سلام ممنون از آموزش های خوبتون . میخواستم ببینم این لود جی کوئری رو روی وردپرس میشه پیاده کرد ؟

    1. زاره آوانسیان

      با سلام بله این امکان وجود داره اما راهکارش رو با سرچ کردن در سایت های خارجی باید پیدا کنید
      مثلا : 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
      موفق باشید

  2. amir

    باسلام خسته نباشید
    می خواستم بگک سایتتون خیلی عالیه
    باتشکر موفق باشی

  3. موسی

    سلام ، خیلی خوب بود ممنون

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

    1. زاره آوانسیان

      سلام
      می تونید از تگ iframe استفاده کنید
      http://www.w3schools.com/TAGS/tag_iframe.asp
      البته راهای دیگری هم وجود دارد که میتونید از طریق جستوجو در سایت های خارجی پیدا کنید
      موفق باشید

  4. موسی

    مرسی از اینکه جواب دادین
    از iframe که گفتین استفاده کردم ولی قبل از اینکه روی لینکی کلکیک بشه خودش فریم رو میاره !!!
    ولی من می خوام که وقتی روی لینک کلیک شد بیاد
    کل اینترنتم چرخیدم چیزی در موردش پیدا نکردم، البته چند تا page بود که می گفت از frameset استفاده کنید ولی چون دیگه نمی تونم از تگ استفاده کنم کل طراحی به هم می ریزه !!!
    اگه راعنماییم کنید واقعا ممنونت می شم.

  5. موسی

    تگ body که در نظر قبلی ثبت نشد.

  6. محسن

    با سلام
    عیدتان مبارک
    مطلب خیلی جالبی بود.
    خیلی ممنون از آموش عالی اتان
    منتظر مطالب خوب شما هستم.
    سال جدیدی پرنشات خوب را داشته باشید.

  7. niknaz

    سلام مرسی از سایت خوبتون
    یه سوال:
    از ای جکس به تنهایی بدون استفاده از جی کوئری استفاده کرد بهتره یا با جی کوئری؟
    ممنونم

    1. زاره آوانسیان

      سلام
      بستگی به نوع کارتون داره اما jQuery کار رو خیلی آسون تر می کنه و خیلی از مشکلات رو خودش رفع می کنه و کد نویسی رو کم تر می کنه برای مثال شما دیگه لازم نیست برای مرورگر های مختلف کد بزنید بلکه 1 بار کد میزنید و جی کوئری خودش کار رو هندل می کنه

  8. niknaz

    ببخشید ولی اگه منو داینامیک باشه از این روش چطور استفاده کنم؟

    1. زاره آوانسیان

      اگه به کدها توجه کنید قسمت مهم منو ها ID هستش که jQuery بر اساس مقدارش میره و محتوای موجود در تگ Div با همون ID رو میاره و نمایش میده پس شما باید در منوی داینامیک مقدار ID رو تولید کنید که دیگه بستگی به کدنویسی سایتتون داره

  9. monje

    سلام خدمت شما دوست گرامی
    آموزش بسیار مفیدی بود ، ممنون
    یه سوال هم داشتم
    میخوام پنجره مرورگر رو به 4 قسمت تقسیم کنم و چهار بخش اصلی سایت رو تو هر کدوم از اونها نمایش بدم مثل کاری که با iframe می کردیم ، میخواستم بدونم آیا راهی هست با آجاکس و جی کوئری این کار رو کرد ؟
    اگه شد و سریع جواب بدین واقعا ممنونتون میشم
    فعلا ، یا حق

    1. زاره آوانسیان

      سلام
      شدنش که میشه ولی خوب چیزه ساده ایی نیست که آموزش داد
      شما می تونید از توابع jQuery برای پیاده سازی ajax استفاده کنید
      http://api.jquery.com/category/ajax/

  10. bahram

    سلام و خسته نباشید
    من این فایل آموزشی رو دانلود کردم و اجرا کردم ولی وقتی روی لینک ها کلیک میکنی هیچی توی صفحه نشون نمیده. یعنی فقط اون لودینگ رو نشون میده و صفحه خالی میشه و اون مطالب سکشن ها رو لود نمیکنه. خودمم توی سایتی که طراحی میکنم امتحانش کردم همینجوری شد. البته توی دموی نتیجه نهاییتون درسته همه چیز.میشه راهنمایی کنید؟ممنون میشم

    1. زاره آوانسیان

      سلام
      باید کد هاتون رو درست کنید شاید لینک های صفحات مشکل داشته باشه

  11. طراحی سایت

    خیلی مفید بود ممنون

  12. اشکان

    سلام
    از کد این صفحه استفاده کردم و اجرایی بود و وظیف دونستم تشکر کنم.

    این قسمت برچسبها در پایین همین صفحه رو میشه کدش رو بزارید؟
    یه نمونه اش هست خارجیه و شکل کره زمینه.اگر بزارید و آموزش بدید ممنون میشم.
    لطفا اگر گذاشتید یک اطلاع رسانی با ایمیل بکنید که بتونم لینکش رو پیدا کنم

    1. زاره آوانسیان

      سلام
      از این افزونه استفاده کنید
      http://wordpress.org/plugins/wp-cumulus/

  13. جواد عباسی

    سلام
    ممنون از آموزش شما .
    فقط اینکه این رو روی سایت قرار هست روی کروم کار میکنه.
    روی pc کار نمیکنه . جالبه که همینی که کار نمیکنه روی firefox کار میکنه !!!
    اشکال از ورژن jquery نیست . میشه تست کنید.
    تو ورژن اصلی مقاله هم یکی گفته بود روی کروم کار نمیکنه.
    باز من الان ورژن آخر jquery رو گذاشتم فقط صفحه اصلی رو لود میکنه !!!!!

    1. زاره آوانسیان

      سلام
      من دمو تست کردم مشکلی نداشت در کروم و فایرفاکس کار کرد
      البته این آموزش مربوط به 3 سال پیشه و شاید مشکلاتی با jQuery جدید داشته باشه و باید کد هاش رو اصلاح کنید

  14. جواد عباسی

    ممنون بابت پاسخ .
    اما این فقط روی هاست کار میکنه !
    میشه به من کمک کنید . من چند صفحه html دارم و میخوام با کمک متد load اون ها رو لود کنم تو یه صفحه دقیقا همین آموزش.
    یک مثال جدید یا آموزش جدید بذارید یا لینک بدید .مممنون 😡

    1. زاره آوانسیان

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

  15. جواد عباسی

    شکلک آخر قلب بود که اینجوری شد . شرمنده ♥

  16. mahya

    سلام
    عالی بود.
    ممنون

  17. اهواز سایت

    عالی آموزش داده این مطلب

دیدگاه خود را ارسال کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *