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

دسته بندی: جاوا اسکریپت
زمان مطالعه: ۲ دقیقه
۰۳ آبان ۱۳۹۴

در جلسه گذشته دلایل و کاربردهای استفاده از Ajax در صفحات وب رو متوجه شدیم و به تشریح نحوه کدنویسی ایجکس جاوااکرسپت خالص پرداختیم. امروز می خوایم به کدنویسی ایجکس با استفاده از کتابخانه محبوب جی کوئری بپردازیم و نکات و تکنیک های مهمی رو در این رابطه به شما آموزش بدیم. این کار رو با استفاده از دو مثال کاربردی و مناسب برای شما انجام دادیم که به خوبی با ایجکس در jQuery آشنا بشید .

مطالب مطرح شده در این جلسه عبارتند از :

  • مروری بر مفهوم ایجکس و کاربردها و مزیت های آن
  • نحوه کدنویسی ایجکس با استفاده از جی کوئری
  • معرفی متد ajax و پارامترهای آن
  • تعین متد ارسال درخواست
  • تعین url مقصد درخواست
  • ارسال داده های دلخواه به همراه درخواست ایجکس
  • متد serialize و پک کردن داده های فرم ها
  • نحوه ارسال درخواست ایجکس
  • نحوه دریافت درخواست ایجکس در جی کوئری و انجام اقدامات لازم
  • تعین timeout و حداکثر زمان انتظار برای دریافت پاسخ ایجکس
  • نحوه نمایش پیام خطا در هنگام مواجهه با مشکل
  • نحوه نمایش متن و یا انیمیشن لودینگ برای انتظار کاربر
  • مینی پروژه : ارسال داده های فرم های html با ایجکس
  • نحوه کدنویسی پارامتری برای ارسال داده های فرم از طریق ایجکس
  • نمونه مثال ارسال داده های فرم لاگین و ثبت نام با استفاده از ایجکس
  • توضیح در مورد نحوه مدیریت و پاسخگویی درخواست در سمت سرور
  • شبیه سازی زمان اجرای درخواست در سمت سرور با متد sleep در php
  • ارسال و دریافت داده ها با استفاده از ساختار JSON
:: توجه

این مطلب یک جلسه از آموزش javascript می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش javascript

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

امین

ممنون از پاسخگویی سریعتون.
این دو سوال زیر رو هم در جلسه 8 از 24 آذر و 1 اذر و 10 آذر پرسیدم 😥 ولی هنوز پاسخ دریافت نشده آیا اسپم شده چی شده؟

-این ورژن ECMAScript که مثلا در این دوره آموزش دادین آیا بعد از مدتی منقرض میشه یا همیشه قابل استفاده هستش؟
پیشنهاد : میشه در هر دوره ای که دارین جاوا اسکریپت ، php و … هر موقع که ورژن جدیدی میاد واسش یه آموزش به عنوان مثلا بروز رسانی بزارین بعد جلسه آخر که هر کسی خواست بتونه با پرداخت هزینش اطلاعاتشو نسبت به ورژن جدید که میاد بروز کنه ، مثلا همین php که الان 7 اومده و یا همین جاوا اسکریپت که الان تقریبا اکثر مرورگرا +90 درصد اکثر مرورگرا (kangax.github.io/compat-table/es6) پشتیبانی میکنن ، اینطوری دوره های آموزشیتون قدیمی نمیشه و همیشه بروزه و ما هم میتونیم بهتر و راحت تر بفهمیم و بدونیم چه تغییراتی ایجاد شده و خودمون رو مطابق با ورژن جدید بروز کنیم .

لقمان آوند

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

امین

سلام وقت بخیر
1-الان با ajax میشه درخواست فرستاد و محتوای فایل xml رو خوند و نمایش داد که این کار رو انجام دادم ، فقط الان میخواستم بدونم که چطوری میشه مثلا بگم از سایت 7learn.com بیاد اون تگی که کلاس فلان داره رو متنشو لینکشو و …. رو برداره و نشون بده؟ سرچ که کردم نوشته بودن که php هم باید استفاده بشه درسته یا با جی کوئری و ajax هم میشه انجام داد؟
2- هنگام فراخونی از دامنه خودت باشه مشکلی نداره فراخونی میشه اما اگر بخوای از دامنه دیگری در دامنت فراخونی کنی این ارور رو در کنسول میده :
XMLHttpRequest cannot load http://site.com. No ‘Access-Control-Allow-Origin’ …
هر چی سرچ کردم نفهمیدم چطوری مشکل برطرف میشه ، اکثرا گفته بودن نمیشه از دامنه دیگری داده هاش رو گرفت و برخی هم گفته بودین یه سری مقادیر رو در هدر قرار بدین درست میشه که این رو هم تست کردم نشد اینم راهنمایی کنید چطوری این ارور رو برطرف کنم
ممنون

لقمان آوند

سلام
1- بله باید از php و curl استفاده کنید. توی دوره php در موردش صحبت کردیم.
2- امکانش نیست. مگه اینکه هر دو سرور مال خودتون باشه. در این حالت باید یه سری کدها رو به سرور پاسخ دهنده اضافه کنید تا در خواست دامنه های دیگه رو هم بپذیره.

کمال نصیری

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

وحید صالحی

سلام ماهیت و عملکردشون یکسانه با jqury یکم ساده تر هستش

nader70

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

لقمان آوند

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

فرهاد

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

لقمان آوند

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

فرهاد

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

لقمان آوند

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

hassani

سلام
ایجکس با جی کویری خیلی راحت تر شده تا استفاده از جاوااسکریپت.
فقط یه تذکر اینکه مگه این دوره پایه تا پیشرفته نیست؟ خب فکر نمیکنین برای مواردی مثل ایجکس نیاز به مثالهای بیشتر و کاربردی تر باشه من تقریبا اصل نحوه کار با ایجکس رو فهمیدم ولی برای اینکه دوره جامعتر بشه بهتر نیست یه جلسه رو به مثالهای بیشتری از ایجکس بپردازین؟ ما باید کاربردی تر و با مثالهای بیشتری از ایجکس این مبحث رو یاد بگیریم مثل همین نکته که دوستمون گفته بودن اینکه آیا برای هر درخواست ایجکس ما باید یه فایل جداگانه 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) می تونه اینطوری باشه :

 $ajaxAction = false;
if(isset($_POST['action']))  // action received ok
   $ajaxAction = $_POST['action'];
if($ajaxAction == 'login'){
   // response generation for ajax login request
}else if($ajaxAction == 'register'){
   // response generation for ajax register request
}else if($ajaxAction == 'example'){
   // response generation for ajax example request
} // ela Akhar ;D

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

hassani

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

 $.ajax({
   type:frm.attr('method'),
   url:frm.attr('action'),
   data:{username:$('#username').val(),password:$('#password').val(),action:'login'},
   success:function(response){
    frm.find('div.result').html(response)
   }
  })

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

hassani

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

لقمان آوند

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

hassani

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

لقمان آوند

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

لقمان آوند

ممنون
ایشالله اواخر امسال

پایان زمان پشتیبانی

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

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل