نحوه ساخت نوار جستجو با AJAX در PHP

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

مرحله اول: صفحه HTML

هنگامی که کاربر یک کاراکتر را در قسمت ورودی تایپ می کند، تابع showResult() اجرا می شود. عملکرد توسط رویداد onkeyup فعال می شود:

توضیحات برای کد بالا:

در خط 5 بررسی می کنیم که اگر فیلد ورودی خالی باشد (str.length==0)، تابع محتوای تگ div با id="livesearch" را پاک می کند و از تابع خارج می شود.

اگر فیلد ورودی خالی نباشد، تابع showResult() موارد زیر را اجرا می کند:

• خط 10 یک شیء XMLHttpRequest ایجاد می شود.
• خط 11 تابعی تعریف می کنیم که وقتی پاسخ از سمت سرور آماده است اجرا شود. (یعنی درخواست رو فرستادیم، حالا پاسخ رو از سرور گرفتیم، کد های داخل تابع اجرا می شود)
• خط 17 یک درخواست از نوع GET به اسکریپت livesearch.php همراه با کوئری ?q= ارسال می کنیم. (شما می توانید آدرس URL کامل اسکریپت را وارد کنید مثلاً: https://localhost/projectname/livesearch.php)

مرحله دوم: اسکریپتِ سمت سرور

صفحه ای که توسط جاوا اسکریپت در سرور فراخوانی شده یک فایل PHP با نام livesearch.php است.

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

اگر متنی از سمت کاربر توسط جاوا اسکریپت ارسال شود (strlen($q) > 0)، موارد زیر اتفاق می‌افتد:

• در خط 2 و 3 یک فایل XML را در قالب یک شیء XML DOM جدید استخراج می کنیم.
• در خط 13 برای پیدا کردن رشته های منطبق، حلقه ایجاد کرده ایم و تمام عناصر <title> را در فایل xml بررسی می کنیم.
• اگر هیچ مقدار منطبقی پیدا نشد، متغیر $response روی “no suggestion” تنظیم می شود.
• در خط 40 اگر مقدار منطبقی پیدا شده باشد، آدرس و عنوان صحیح را در متغیر $response تنظیم می کند.