illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



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

دوره مجازی جاوااسکریپت (جلسه 24): آموزش کدنویسی Ajax با کتابخانه جی کوئری

23 3197 ۳ آبان ۹۴
در جلسه گذشته دلایل و کاربردهای استفاده از Ajax در صفحات وب رو متوجه شدیم و به تشریح نحوه کدنویسی ایجکس جاوااکرسپت خالص پرداختیم. امروز می خوایم به کدنویسی ایجکس با استفاده از کتابخانه محبوب جی کوئری بپردازیم و نکات و تکنیک های مهمی رو در این رابطه به شما آموزش بدیم. این کار رو با استفاده از دو مثال کاربردی و مناسب برای شما انجام دادیم که به خوبی با ایجکس در jQuery آشنا بشید . مطالب مطرح شده در این جلسه عبارتند از :
  • مروری بر مفهوم ایجکس و کاربردها و مزیت های آن
  • نحوه کدنویسی ایجکس با استفاده از جی کوئری
  • معرفی متد ajax و پارامترهای آن
  • تعین متد ارسال درخواست
  • تعین url مقصد درخواست
  • ارسال داده های دلخواه به همراه درخواست ایجکس
  • متد serialize و پک کردن داده های فرم ها
  • نحوه ارسال درخواست ایجکس
  • نحوه دریافت درخواست ایجکس در جی کوئری و انجام اقدامات لازم
  • تعین timeout و حداکثر زمان انتظار برای دریافت پاسخ ایجکس
  • نحوه نمایش پیام خطا در هنگام مواجهه با مشکل
  • نحوه نمایش متن و یا انیمیشن لودینگ برای انتظار کاربر
  • مینی پروژه : ارسال داده های فرم های html با ایجکس
  • نحوه کدنویسی پارامتری برای ارسال داده های فرم از طریق ایجکس
  • نمونه مثال ارسال داده های فرم لاگین و ثبت نام با استفاده از ایجکس
  • توضیح در مورد نحوه مدیریت و پاسخگویی درخواست در سمت سرور
  • شبیه سازی زمان اجرای درخواست در سمت سرور با متد sleep در php
  • ارسال و دریافت داده ها با استفاده از ساختار JSON
این مطلب یک جلسه از دوره آموزش جامع و پروژه محور جاوااسکریپت و جی کوئری (پایه تا پیشرفته) است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : پس از استقبال فوق العاده شما عزیزان از دوره های PHP ، طراحی وب و فتوشاپ سون لرن، اینک دوره کامل و جامع جاوا اسکریپت و کتابخانه محبوب آن، جی کوئری را با هزینه ای معادل 25% کلاس های حضوری برای شما برگزار خواهیم کرد. در این دوره با هزینه ای بسیار اندک نسبت به کلاس های حضوری موجود، آموزش صفر تا صد و از پایه تا پیشرفته javascript و jQuery را برای شما تهیه و تولید خواهیم کرد. این دوره یکی از جذاب ترین دوره هایی خواهد بود که سون لرن قصد برگزاری آن را دارد. در طول دوره با انجام ده ها پروژه عملی، کاربردی و جذاب، شما را با قدرت بلامنازع جاوااسکریپت و جادوی آن در طراحی صفحات وب آشنا خواهیم کرد. حتما دموی دوره را از صفحه ثبت نام آن مشاهده بفرمایید !
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 23 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏
    فرهاد(۳ آبان ۱۳۹۴)

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

  • ‏‏
    ertebat ertebat(۳ آبان ۱۳۹۴)

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

    • ‏‏
      کیوان علی محمدی(۴ آبان ۱۳۹۴)

      سلام. با اجازه دکتر. وقتی درخواست ای جکس ارسال میشه در هدرهای درخواست کلیدی با نام HTTP_X_REQUESTED_WITH با مقدار xmlhttprequest ست میشه که اگه اینو چک کنیم میتونیم بفهمیم درخواست ای جکس بوده یا نه. البته فریمورک ها توابعی دارین که چک کردن اینو راحت میکنه. می تونید یک صفحه داشته باشید و کل درخواست های ای جکس وب سایت رو در اونجا مدیریت کنید. یک راهش استفاده از action در پارامتر های ارسالی هستش که مثلا میتونه get_user یا get_posts یا هر نوع عملیات CRUD دیگه ای باشه و بعد طیق اون action توابع مختلف رو اجرا کنیم.

  • ‏‏
    mrzbluestar(۴ آبان ۱۳۹۴)

    سلام
    آقای آوند لطفا در جلسات باقی مانده درباره نحوه trace کردن کد های جی کوئری و جاوا اسکریپت توضیحات لازم را بفرمایید.
    با تشکر

  • ‏‏

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

    • ‏‏
      لقمان آوند(۸ آبان ۱۳۹۴)

      جناب حسنی همه جوانب امر رو در نظر نمی گیرید. بله دوره پایه تا پیشرفته هست ولی ربطی به سمت سرور نداره و قرار نیست وقتمون رو برای آموزش PHP در این دوره تلف کنیم. اکثر کار ایجکس باید در سمت سرور و به زبان php انجام بشه و غیر منطقی هست که در دوره جاوااسکریپت بیایم php تدریس کنیم. تمام آنچه شما برای ایجاد درخواست های ایجکس در جاوااسکریپت و جی کوئری لازم دارید در این دو جلسه توضیح داده شده. برای بخش سمت سرورش می تونید دوره PHP رو هم بگذرونید.
      *** به شدت مخالف احساس شما هستم! اتفاقا اگر این تاخیر رخ نمیداد قرار بود کلا در یک جلسه دو ساعته این دو جلسه ایجکس ضبط شه که با توجه به قولی که بهتون دادم وقت بیشتری رو صرف مبحث ایجکس کردم و الان در دو جلسه مجزا، با ذکر نکته های بیشتر و 1.5 ساعت تدریس بیشتر مباحث مربوط به ایجکس رو مطرح کردیم. تا الان باید بنده رو خیلی خوب شناخته باشید. هرگز حاضر نیستم کیفیت دوره رو با هیچ چیز دیگه به خطر بندازم و هرگز به خاطر زودتر تموم شدن دوره سرسری کارم رو پیش نمیبرم که از اینکار به شدت متنفرم. اخلاقا و وجدانا نمی تونم چنین کاری رو انجام بدم. چون این دوره در کارنامه من ثبت میشه و حاضر نیستم خرابش کنم. تعهد من به شما برای حفظ کیفیت آموزش ها همیشه به همین شکل هست و خواهد بود.
      *** برای اینکه بشه ایجکس رو خوب و جامع تدریس کرد باید دانشجو به html,css,js,jqery و php خیلی خوب مسلط باشه که خیلی از دانشجوهای این دوره با php آشنا نیستند و دلیل عدم ارائه مثال های ایجکس بیشتر همینه که عمده کار با php و سمت سرور هست !!! همونطور که گفتم اگر عمری باشه دوره ای برای ایجکس که کاملا پروژه محور هست رو در آینده برگذار می کنم که پیش نیازش همین زبان هایی هست که گفتم و اونجا حسابی و خیلی متنوع با ایجکس خوش می گذرونیم! ایشالله اواخر امسال! پس صبور باشید و منطقی.
      در پاسخ به سوالت : لزومی نداره برای هر درخواست ایجکس یه فایل جدا داشت و میشه برای همشون هم یه تک فایل ایجاد کرد. مدیریتش هم به این شکله:
      – همه درخواست ها رو به همون url تک فایل می فرستید .
      – یه داده که نوع رو مشخص کنه همراه درخواست ایجکس به همون url می فرستید. مثلا ایندکسش action باشه که می تونه برای درخواست لاگین مقدار login و برای ثبت نام register و … درون خودش داشته باشه.
      – در سمت سرور ابتدا مقدار این action رو می گیرید و با مقایسه در یک ساختار if..elseif بنا به اینکه مقدارش چی هست کد مربوط با پاسخ همون اکشن رو می نویسید.
      – اگه فرض کنید درخواست ها رو همه با متد post اسال کرده باشید (که توصیه می شه همیشه همین کار کنید) کد سمت سرورتون (مثلا فایل ajaxAction.php) می تونه اینطوری باشه :


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

      • ‏‏

        سلام
        ممنونم که جامع پاسخ دادین همونطور که شما وعده دادین منتظر دوره پروژه محورایجکس هستیم البته فکر کنم برای من وسط های سال آینده خوب باشه چون باید دوره php رو هم بگذرونم و تجربه مناسبی در کار سمت سرور کسب کنم همچنین تمرین بیشتر در جاوااسکریپت و جی کویری.
        از انتقاد من ناراحت نشین اگه اینجور انتقادها نباشه ممکنه حساسیت شما در کیفیت دوره ها حداقل تضعیف بشه و اتفاقا انتقادهای امثال من برای خود شما هم بهتره. 😉
        با تشکر از تیم سون لرن

        • ‏‏
          لقمان آوند(۹ آبان ۱۳۹۴)

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

      • ‏‏

        استاد گرامی خسته نباشید
        چطور میشه همراه data:frm.serialize(), یه داده دیگه که نوع رو مشخص میکنه به سرور ارسال کرد؟ من بدون استفاده از serialize میتونم اینکارو بکنم به این صورت:


        و در سمت سرور هم به درستی همونطور که شما گفتین درخواستها رو مدیریت میکنم و جواب هم میگیرم ولی با وجود frm.serialize هر کاری میکنم نمیشه اگه بازم ربط داره به دوره php ببخشید.

        • ‏‏
          لقمان آوند(۱۱ آبان ۱۳۹۴)

          serialize خروجیش کوئری استرینگ هست. یعنی همون پارامترهایی که ته ساختار url در متد get میچسبه. مثلا اگه یه فرم با دو فیلد username و password داشته باشیم خروجی سریالایزش اینطوری میشه :
          username=ali&password=alipass
          کافیه مقادیر دیگه رو به ته این بچسبونی. که یه جورایی شبیه این میشه :
          data:frm.serialize() + "&action=" + "login"

        • ‏‏

          بله متوجه شدم
          تشکر

  • ‏‏
    فرهاد(۸ آبان ۱۳۹۴)

    با سلام
    استاد آوند این کد من رو ببینید
    http://uploadboy.com/z7rc6l78ls36.html
    من با مطالبی که در دوره جاوا اسکریپت و دوره php گفته بودید این ها رو نوشتم.اما نمی دونم چرا وقتی یک بار یه درخواست ajax به سمت سرور ارسال میشه و شماره موبایل رو ثبت می کنه دفعه بعدی که می خوایم یه شماره موبایل دیگه وارد کنیم این کار انجام نمیشه و باید صفحه refresh بشه
    خیلی بهش ور رفتم اما نفهمیدم چرا این مشکل پیش میاد. حتی برنامه رو با debugger
    trace کردم همه چیز درست پیش میره فقط نمی دونم چرا درست کار نمی کنه
    ممنون میشم راهنمایی کنید. با تشکر

    • ‏‏
      لقمان آوند(۸ آبان ۱۳۹۴)

      باید در هر دو سمت دیباگ کنید ببینید چه اتفاقی میفته …

      • ‏‏
        فرهاد(۸ آبان ۱۳۹۴)

        چطوری میشه دیباگر رو طوری تنظیم کرد که هم روی breakpoint های کدهای جاوا اسکریپت و هم روی کدهای php متوقف بشه. البته احتمالا شما این رو در دوره php در یه جلسه مجزا گفتید اما من فعلا تا جلسه 7 دوره php بیشتر ندیدم. اگه امکانش براتون هست یه راهنمایی کوچیک بکنید. با تشکر

  • ‏‏

    با سلام
    استاد در مورد سوال جناب حسنی در درخواست ایجکس بجای if آیا سویچ هم همون کارو انجام میده؟

  • ‏‏
    کمال نصیری(۹ آبان ۱۳۹۵)

    با سلام یک سوال ajax با ajax از طریق jquery تفاوت داره؟؟؟

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

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram