استفاده از آژاکس در جی کوئری

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

آژاکس (ajax) یکی تئوری جدید در وب است که کمک می کند ، اطلاعات از صفحه ای بارگذاری شوند بدون این که صفحه دوباره بارگذاری شود. اگر دقت کرده باشید ، بعضی وقت ها ، هنگامی که می خواهید از فرم ثبت نامی در یک سایت استفاده کنید ، بعد از هر بار وارد کردن اطلاعات و زدن تایید ، صفحه یک بار رفرش می شود و پیغامی (ثبت نام موفقیت آمیز بود ، آدرس ایمیل اشتباه است و ...) به شما نمایش داده می شود. اما این وضع در سایت هایی که از آژاکس استفاده می کنند کاملا متفاوت است. شما اطلاعاتتان را وارد می کنید و دکمه ی تایید را می زنید ، اما صفحه بدون این که رفرش شود پیغام مورد نظر را نمایش می دهد. این حالت در صفحات وب بسیار ارزشمند است. چرا که شما می توانید با این کار ، بدون این که اطلاعات زیادی از صفحه را دوباره لود کنید ، پاسخ سرور را به کاربرتان نمایش دهید. در بسیاری از موارد ، پاسخ مورد نظر شما که باید به کاربر نمایش داده شود ، تنها به اندازه یک خط نوشته است. پس این موضوع می تواند در بالا بردن سرعت هاست شما و رضایت کاربرانتان تاثیر بسیاری داشته باشد.

آزاکس را نمی توان یک برنامه نویسی دانست ، زیرا از جاوا اسکریپت برای انتقال اطلاعات استفاده می کند. در اصل کار آزاکس این است که بین صفحه ای از سایت و صفحه ای که الان در آن حضور دارید رابطه ای برقرار کند. ابتدا اطلاعات را ارسال می کند و سپس پاسخ را دریافت می کند. تصویر زیر بهتر شما را با این موضوع آشنا می کند:

من مراحل بالا را توضیح می دهم: باور کنید اصلا پیچیده نیست. قسمت سمت راست سرور و سمت چپ کاربر است.

1. این شماره مربوط به کاربر اینترنت می شود.

2. اطلاعات از طرف کاربر به وسیله ی جاوا اسکریپت به صورت یک XML HttpRequest (درخواستی در مروگر برای سرور) به سمت سرور ارسال می شود.

3. ارسال XML HttpRequest

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

5. ارسال پاسخ از سرور به سمت مرورگر کاربر و نمایش آن به صورت کد های معمولی وب (html , css , ...)

اگر توضیحات بالا را متوجه نشدید ، زیاد مهم نیست. اصل کار استفاده از آژاکس است. اگر بتوانید از آن استفاده کنید کاملا متوجه این مراحل می شوید.

نکته: خیلی ها فکر می کنند که ارسال اطلاعات با استفاده از آژاکس تنها برای صفحات php امکان پذیر است. اما همین جا بگویم که این کار برای هر صفحه ای در اینترنت که چیزی را نمایش می دهد ممکن است. اما php یک ویژگی بسیار عالی دارد که آن را پرکاربردتر کرده است. این ویژگی ، تغییر پذیری است. یعنی شما در php همیشه یک چیز ثابت را مشاهده نمی کنید و ممکن است با هر اطلاعاتی که به آن ارسال می کنید ، پاسخ جدید و منحصر به فردی را دریافت کنید. اما در html چنین حالتی وجود ندارد و اگر شما یک درخواست آژاکس به صفحه ی html ارسال کنید ، دقیقا همان (کد های آن) به صورت پاسخ باز می گردد.

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

<<<code>>>

     $.ajax({

        url:'submit.php',

        type:'post',

        data:{ mydata1:"toolstheme.ir", mydata2:123, mydata3:true }

    })

    .done(function(resp){

        alert( resp );

    })

    .fail(function(jqXHR,textStatus,error){

        alert( textStatus+": "+error );

    });

<<</code>>>

خوب! مشاهد می کنید که در کد های بالا حالت اصلی زیر رعایت شده است: (البته قسمت های بیشتری وجود دارد.

<<<code>>>

$.ajax({ ... }).done( function(resp){ ... } ).fail( function(jqXHR,textStatus,error){ ... } );

<<</code>>>

در $.ajax ما یک کلس جاوا اسکریپت ایجاد می کنیم که در آن یک سری تنظیمات باید انجام شوند. تعداد این تنظیمات بسیار زیاد است اما در همین حد هم برای استفاده ی معمولی کاربرد دارد.

رنگ آبی: در این رنگ (بعنی مقدار url کلس) ما باید آدرس صفحه ای را به صورت متغیر رشته (string) مشخص کنیم.

رنگ قرمز: در مقدار type باید یک رشته ی دیگر مشخص کرد که می تواند این سه حالت را داشته باشد: post , get , put

توضیح get و post: ما به put کاری نداریم. اما برای دو حالت دیگر توضیحاتی می دهم: در حالت post که امنیت بیشتری دارد و استفاده از آن توصیه می شود اطلاعات به صورت پشت پرده در مرورگر ارسال می شوند و به راحتی قابل مشاهده نیستند. اما در حالت get که امنیت پایین تری دارد و استفاده از آن تنها در موارد خاص توصیه می شود ، اطلاعات کاملا واضح و قابل مشاهده منتقل می شود که این موضوع می تواند دست هکر ها را باز تر کند.

رنگ سبز: در این قسمت (مقدار data) ما اطلاعاتی را که می خواهیم به سرور ارسال کنیم به صورت یک کلس جاوا اسکریپت می نویسیم. mydata ها نام متغیر های ارسالی هستند و مقادیر روبروی آن ها چیزی است که ارسال می شود. در بالا مشاهده می کنید که از هر نوع مقداری می توان استفاده کرد ( boolean , var , string , ... )

رنگ بنفش: در این رنگ (done) تابعی وجود دارد  که در صورت موفقیت آمیز بودن عملیات اجرا می شود. این تابع مقداری را بر می گرداند که ما در اینجا اسم آن را resp گذاشته ایم. این متغیر در اصل همان پاسخی است که از سمت سرور دریافت شده است. ما در این جا این اطلاعات را به صورت alert به کاربر نمایش می دهیم.

رنگ مشکی: این رنگ یک تابع است که وقتی اجرا می شود که عملیات موفقیت آمیز نباشد. یعنی به دلیل وجود نداشت صفحه ، قطع ارتباط و ... نتواند اطلاعات را ارسال یا دریافت کند. این قسمت سه متغیر دارد که ما با jqXHR کاری نداریم. متغیر textStatus در صورتی که خطایی صورت بگیرد مقدار "error" را بر می گرداند و متغیر error خطای رخ داده را نشان می دهد. مثلا 404 ! ما در این تابع این دو مقدار را به صورت alert نمایش داده ایم.

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