مثال PHP AJAX

AJAX برای ایجاد برنامه‌های تعاملی‌تر استفاده می‌شود.

مثال PHP AJAX

در این مثال، نحوه ارتباط وب‌سایت با سرور وب در هنگام تایپ کاراکتر توسط کاربر نشان داده می‌شود:

مثال

لطفاً حروف الفبا A-Z را در فیلد ورودی زیر تایپ کنید:

نام:

پیشنهادات جستجو:

توضیح مثال

در مثال بالا، هنگامی که کاربر در فیلد ورودی کاراکتر تایپ می‌کند، تابع به نام "showHint()" اجرا می‌شود.

این تابع توسط رویداد onkeyup فعال می‌شود.

در اینجا کد HTML قرار دارد:

مثال

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<p><b>لطفاً نام را در فیلد ورودی زیر تایپ کنید：</b></p>
<form> 
نام خانوادگی یا نام：<input type="text" onkeyup="showHint(this.value)">
</form>
<p>پیشنهاد：<span id="txtHint"></span></p>
</body>
</html>

سعی کنید خودتان انجام دهید

توضیح کد:

ابتدا، بررسی کنید که فیلد ورودی خالی است یا خیر (str.length == 0)، اگر باشد، محتوای placeholder txtHint را پاک کنید و از تابع خارج شوید.

اما، اگر فیلد ورودی خالی نباشد، عمل زیر را انجام دهید:

  • اجتماع XMLHttpRequest ایجاد کنید
  • تابع‌ای را ایجاد کنید که در هنگام آماده شدن پاسخ سرور اجرا شود
  • درخواست را به فایل PHP (gethint.php) روی سرور ارسال کنید
  • لطفاً پارامتر q را به gethint.php اضافه کنید
  • متغیر str محتوای فیلد ورودی را ذخیره می‌کند

فایل PHP - "gethint.php"

این فایل PHP جداول نام را بررسی می‌کند و سپس نام‌های مطابقت‌دار را به مرورگر بازمی‌گرداند:

<?php
// جداول نام
 a[] = "Ava";
 a[] = "Brielle";
 a[] = "Caroline";
 a[] = "Diana";
 a[] = "Elise";
 a[] = "Fiona";
 a[] = "Grace";
 a[] = "Hannah";
 a[] = "Ileana";
 a[] = "Jane";
 a[] = "Kathryn";
 a[] = "Laura";
 a[] = "Millie";
 a[] = "Nancy";
 a[] = "Opal";
 a[] = "Petty";
 a[] = "Queenie";
 a[] = "Rose";
 a[] = "Shirley";
 a[] = "Tiffany";
 a[] = "Ursula";
 a[] = "Victoria";
 a[] = "Wendy";
 a[] = "Xenia";
 a[] = "Yvette";
 a[] = "Zoe";
 a[] = "Angell";
 a[] = "Adele";
 $a[] = "Beatty";
 $a[] = "Carlton";
 $a[] = "Elisabeth";
 $a[] = "Violet";
// پارامتر q از URL دریافت کنید
$q = $_REQUEST["q"];
$hint = "";
// همه hint‌های آرایه را بررسی کنید، آیا $q با "" مشابه است یا خیر
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            }
                $hint .= ", $name";
            }
         }
    }
}
// "no suggestion" را چاپ کنید، اگر hint پیدا نشد یا مقدار صحیح چاپ شود
  echo $hint === "" ? "no suggestion" : $hint;
?>
c.html" -->