دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۷
  • تیر

جلسه ۵۵ : آموزش ایجاد جستجوی زنده در Ajax

  • دسته‌بندی‌ها :
جلسه ۵۵ : آموزش ایجاد جستجوی زنده در Ajax
    • جزئیات
    • نوع محتواآموزشی

      مقدمه

      با عرض سلام و وقت به خیر خدمت کاربران سایت پی وی لرن و کاربرانی که دوره ی آموزش php 7 را دنبال می کنند.
      در جلسه گذشته به بررسی رابطه Ajax و XML پرداختیم و آموختیم که می توان از AJAX برای ارتباط تعاملی با یک فایل XML استفاده کرد.
      در ادامه این دوره آموزش ایجاد جستجوی زنده در Ajax را به علاقمندان این دوره ارائه می نماییم.

      آموزش ایجاد جستجوی زنده در Ajax

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

      AJAX Live Search یا جستجوی زنده در AJAX

      مثال زیر یک جستجوی زنده یا Live Search را نشان می دهد، به این معنا که در هنگام تایپ نتایج جستجو را دریافت می کنید.
      جستجوی زنده دارای مزایای بسیاری در مقایسه با جستجوی سنتی است:

      • نتایج تایپ شده نشان داده می شود.
      • نتایج همچنان که تایپ می کنید محدود می شوند.
      • اگر نتایج خیلی محدود شود، می توان با حذف کاراکترها این محدوده را کمتر کرد.

      می توانید نمونه ای از جستجوی زنده را مشاهده نمایید:

      آموزش ایجاد جستجوی زنده در Ajax

      AJAX Live Search

      نتایج در مثال بالا در یک فایل (XML (links.xml پیدا می شود.
      برای این مثال کوچک و ساده، تنها شش نتیجه در دسترس هستند.

      تشریح نمونه بالا – صفحه HTML

      هنگامی که کاربر CD را از لیست کشویی بالا انتخاب می کند، یک تابع به نام “()showCD” اجرا می شود.
      این تابع توسط رویداد  “onchange” event فعال می گردد:

      مثال : 

      توضیح منبع کد:

      اگر فیلد ورودی خالی باشد (str.length == 0)، تابع محتوای را livesearch را پاک می کند و از تابع خارج می شود.
      اما اگر این فیلد خالی نبود؛ موارد زیر توسط تابع ()showResult اجرا می شود:

      • ساخت یک شیء XMLHttpRequest.
      • اجرا تابع هنگامی که پاسخ سرور آماده است.
      • ارسال request یک فایل به سرور.
      • توجه داشته باشید که پارامتر (q) به URL اضافه می شود (با محتوای ورودی)

      آموزش ایجاد جستجوی زنده در Ajax را با بررسی فایل php می پردازیم.

      فایل PHP

      صفحه سرور تحت نام جاوا اسکریپت یک فایل php به نام “livesearch.php” است.

      کد منبع در “livesearch.php” یک فایل XML که عناوین مطابق با رشته جستجو دارد را جستجو می کند و نتیجه را برمی گرداند:

      مثال : 

      اگر همه متون ارسال شده از جاوا اسکریپت (strlen($q) > 0) باشد؛ موارد زیر رخ می دهند:

      • یک فایل XML جدید به یک XML DOM object جدید بارگذاری می شود.
      • همه عناصر <title> برای یافتن انطباق با متن ارسالی از جاوا اسکریپت حلقه می شوند.
      • URL صحیح و عنوان در متغیر “response$” تنظیم می شوند.
        اگر بیش از یک انطباق یافت شود؛ همه انطباق ها به متغیر مذکور اضافه می شود.
      • اما اگر هیچ انطباقی یافت نشد؛ متغیر response$ به “no suggestion” تنظیم می شود.

      کلام آخر

      در این جلسه به آموزش ایجاد جستجوی زنده در Ajax پرداختیم.
      در جلسه بعد که آخرین جلسه از دوره آموزش php 7 است به آموزش ایجاد نظر سنجی در Ajax می پردازیم.
      با پی وی لرن همراه باشید.

      QR:  جلسه ۵۵ : آموزش ایجاد جستجوی زنده در Ajax
      به اشتراک بگذارید