loading...

ابزارها قالب

آموزش طرز کار با آژاکس در جی کوئری و توابع ، متد ها و متغیر های موجود در جی کوئری برای کار با آژاکس

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 2479 شنبه 12 ارديبهشت 1394 نظرات (0)

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

آژاکس (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 نمایش داده ایم.

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

مطالب مرتبط
ارسال نظر برای این مطلب

نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3196
  • آی پی امروز : 39
  • آی پی دیروز : 115
  • بازدید امروز : 255
  • باردید دیروز : 822
  • گوگل امروز : 3
  • گوگل دیروز : 6
  • بازدید هفته : 1,868
  • بازدید ماه : 10,365
  • بازدید سال : 101,735
  • بازدید کلی : 1,788,170
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص