کاوشگران صنعت پارس آرین آموزش بارگزاری صفحات وب به صورت ای‌جکس به وسیله jQuery | دانلود پروژه رایگان و تازه های تکنولوژی و کامپیوتر
۹۳

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

آمورشی (طراحی سایت) / آموزش آجاکس و jQuery

 

jquery-ajax

حتما تا به حال در اینترنت به وب سایت هایی برخودید که بدون بارگزاری مجدد صفحات یا به اصطلاح 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(){

}

سپس ۳ متغیر تعریف کرده و با استفاده از سلکتورهای 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 صفحه تغییر می کنند.

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

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

  63. خیلی خوب بود ممنون بابت به اشتراک گذاری
    بی صبرانه منتظر مطالب بیشتر هستیم

  64. عرض ادب
    آموزش بی نظیری بود ، تشکر از به اشتراک گذاری این موضوع

  74. بسیار مقاله پرمحتوا و کاربردی و مفیدی بود. واقعا از شما تشکر می کنم که این آموزشهای مفید رو در اختیارمون قرار می دهید

  76. با سلام ممنون از شما بابت مقالات و آموزش های مفید طراحی سایت .موفق و پایدار باشید

  85. سلام و احترام خدمت مدیر وبسایت
    بنده از مطالب سایت شما لذت بردم و استفاده کردم تبریک میگم سایت خوبی طراحی کردید خواستم از زحماتتون تشکر کنم، باز هم مطالب وبسایت شمارو پیگیری و استفاده خواهم کرد
    مچکرم

دیدگاه بسته شده است