کنترل رویداد های آجاکس در Javascript

با سلام خدمت شما دوستای عزیز

خب این ادامه ای برای مبحث قبلی هست فقط اینطوری ادامه هست که یک مثال واضح زدم تا متوجه بشین خب قبل شروع کردن بگم که به دوتا صفحه احتیاج داریم که اسم یکی هست index.php و اسم دومی ajax.php ، خب شروع کنیم :

اول سه تا المنت درست میکنیم :

  • یه جعبه متن برای گرفتن متن از کاربر
  • یک دکمه که کاربر با فشار دادنش درخواست آجاکس رو شروع کنه
  • یک div برای نمایش اطلاعات گرفته شده از صفحه سرور

خب تو قسمت اسکریپت هم یک تابع به اسم test مینویسیم تا کاربر با کلیک کردن روی دکمه اجرا بشه :

خب یه متغیر تعریف کردیم به اسم xhr که از شی آجاکس است .

دوتا متغیر دیگه هم به اسم های txt و dd که متغیر txt مقدار جعبه متنی رو تو خودش ذخیره میکنه و dd هم به المنت div دسترسی پیدا میکنه.

خب تو کد بالا هم یک تابع به متد onloadend از شی xhr به عنوان Handler دادیم که هربار درخواست تموم شد تابع ما رو اجرا کنه ، دقت کنید که onloadend براش فرقی نداره درخواست خطا داشته یا نه همین که تموم شده براش کافیه ، یعنی درخواست تموم شد تابع ما رو اجرا میکنه و براش اصن مهم نیس درخواست ما خطا داشته یا بدون خطا تموم شده ،

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

خب تو کد بالا هم اول توسط متد open یه درخواست باز کردیم از نوع GET که قراره با صفحه ajax.php تبادل اطلاعات بکنه ، درخواست get همون طور که میدونید علامت سوال و… داره و ما از این طریق متنی رو که کاربر تایپ کرده فرستادیم.

بعدش هم توسط xhr.responseText متنی رو که صفحه سرور برامون فرستاده تو div ریختیم . یادم نرفته بگم responseText پاسخی هست که صفحه سرور به ما ارسال میکنه و از نوع متنی هست .

آخرین قسمت هم توسط xhr.send درخواست رو فرستادیم.

خب کد کامل این صفحه ما باید به شکل زیر باشه :

بریم سراغ صفحه ajax.php :

تو این صفحه هم متغیری به اسم q رو که برامون ارسال میشه رو تو یه متغیر دیگه به اسم $res ذخیره کردیم و بعد هم با اضافه کردن یه متن تو خروجی چاپش کردیم .

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

دیدگاه‌تان را بنویسید:

20 + نوزده =