36
تشکر

آموزش کار با ajax

آموزش کار با ajax

آموزش کار با ajax

این مطلب در دسته بندی مطالب جی کوئری است. جی کوئری را در اینجا دنبال کنید.

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

اینکار باعث کارایی صفحه شما میشود که دیگر نیازی نیست برای نمایش یک پیغام دوباره صفحه را بارگذاری کنید.

برای استفاده از ajax ما از jquery کمک میگیریم. خوب ابتدا کد صفحه اصلی را با نام page1.html را مینویسیم(کد زیر را در صفحه page1.html قرار بدهید).

<!DOCTYPE HTML>
<html>
<head>
    <title>Ajax</title>
	
    <meta charset='UTF-8' />
    <style>
        section{
            margin:0 auto;
            display: block;
            width:1000px;
            text-align: center;
            direction: rtl;
        }	
        header{
            display: block;
            margin:0 auto;
        }
        header div.top{
            width:1000px;
            text-align: center;
            margin: 0 auto;
            background: #000;
        }
        a{color:#fff;text-decoration: none;}
    </style>
</head>
<body>
    <header>
        <div class="top"><a href="http://aparnet.ir">آپارنت | مرجع آموزش تکنولوژی های جدید تحت وب</a></div>
    </header>
    <section>
        <h1>صفحه اصلی</h1>
        <p>
            امروزه بیشتر سایت ها از ajax استفاده میکنند.
            با استفاده از ajax شما میتوانید در یک صفحه لود شده اطلاعات جدید را از سرور دریافت کنید و به کاربر نشان بدهید.
            بدون اینکه صفحه را مجدد بارگذاری کنید.
        </p>
        <button id="get_page2" class="get_page" page="2">مشاهده صفحه دوم</button>
    </section>
</body>
</html>

خب حالا کد صفحه دوم را نیز با نام page2.html قرار میدهیم.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <header>
        <div class="top"><a href="http://aparnet.ir">آپارنت | مرجع آموزش تکنولوژی های جدید تحت وب</a></div>
    </header>
    <section>
        <div id="page2">
            <h1>صفحه دوم</h1>
            <p>شما در حال مشاهده صفحه دوم هستید</p>
            <button id="get_page1" class="get_page" page="1">مشاهده صفحه اول</button>
        </div>
    </section>
</body>
</html>

خب حالا در صفحه page1.html کتابخانه jquery را فراخوانی میکنیم.

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

حالا نوبت استفاده از ajax شده است. کد زیر را در head صفحه page1.html قرار بدهید و کار تمام است.

<script type="text/javascript">
    $(document).ready(function(){
        $(".get_page").live('click',function(){
            gurl="page"+$(this).attr("page")+".html";
            $.ajax({
                url: gurl,
                context: $("#page2")
            }).done(function(data) {
                $("body").html(data);
            }).fail(function(){
                alert('Data not loaded');
            })
        })
    })
</script>

توضیح کدها

همانطور که میبینید ما در صفحه page1 یک button گذاشتیم و به آن کلاسی به نام get_page دادیم. همینطور در صفحه page2 نیز همین دکمه را قرار دادیم. ولی یک خصوصیت اضافی هم برای این دو دکمه به نام page قرار دادیم که مشخص میکند کدام صفحه را میخواهد فراخوانی بکند.

مثلا در دکمه ای که در صفحه اول گذاشتیم مقدار خصوصیت page را دو قرار دادیم یعنی میخواهیم page2.html را فراخوانی کنیم.

حالا میرویم به سراغ کدهای جاوا اسکریپت

$(".get_page").live('click',function(){

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

gurl="page"+$(this).attr("page")+".html";

در این کد ما مقدار خصوصیت page دکمه ها را میگیریم و قبل آن page قرار میدهیم و بعد آن .html قرار میدهیم.

مثلا اگر مقدار خصوصیت page دکمه, دو باشد نتیجه میشود:

Page2.html

یعنی ما با اینکار آدرس صفحه درخواست شده را درست میکنیم.

$.ajax({

این کد تابع کدهای ajax است. که خصوصیات متفاوتی را میگیرد. که در دو خط زیر آن دو خصوصیت آن را نوشتیم.

url: gurl,

خصوصیت url آدرس صفحه را میگیرد. که ما آدرس را درون متغیر gurl قرار داده بودیم به آن نسبت میدهیم.

context: document.body

خصوصیت context میگوید که کدام بخش از صفحه درخواست شده را میخواهید که ما هم میگوییم قسمت body را میخواهیم.

}).done(function(data) {

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

$("body").html(data);

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

}).fail(function(){

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

alert('Data not loaded'); 

که در این صورت با یک پیغام را برای کاربر نمایش میدهیم.


چند نکته:

این مثال یک مثال پایه ای بود. یعنی شما باید قسمت های دیگر آن را توسعه دهید. اگر لازم داشتید.

اگر از ajax در کامپیوتر خودتان استفاده میکنید و مثلا محتویات page2.html را تغییر میدهید و میبینید که هیچ تغییری در صفحه نمایش داده شده ایجاد نمیشود کش مرورگر را پاک کنید.

در آینده نحوه ارسال اطلاعات به تابع های php و دریافت اطلاعات را آموزش میدهیم.

منتظر نظرات شما هستیم.

مطالب مرتبط

آموزش کار با ajax بخش دوم

  • احسان یوسفی می‌گه:

    سلام میشه لطف کنین یه کد بنویسید که اولا ساده باشه و دوما بشه با کلیک بر روی یک آیتم فراخوانی شده از دیتابیس اون آیتم رو بدون رفرش حذف یا ویرایش کرد و در آن آجاکس به کار رفته باشد؟؟؟

  • اموزش ای جکس با جاوا اسکریپت خالص رو اگه میشه بزارید چون مرجع فارسی که هرکسی یه چیزی از خودش در اورده . من از سایتای زبان اصلی یاد گرفتم. ( منظورم بدون استفاده از جی کوئری هست )

  • امیررضا می‌گه:

    با عرض سلام و خسته نباشید
    وبسایت بسیار خوبی دارید…
    بنده به عنوان یک وبمستر اگر بخواهم چیز جدیدی را یاد بگیرم مسلما اتنخاب اول من آپارنت خواهد بود…
    برای این ایده نو به شما تبریک می گویم!
    امیدوارم کار خود را با قدرت ادامه دهید…
    موفق باشید;)


  • نظرات این مطلب بسته است.