به آموزشگاه بیاموز خوش آمدید!

سبد خرید (0)

آموزش آجاکس php

مثالی از آجاکس در php

مثال زیر نشان می دهد که چطور یک صفحه ی وب می تواند با یک سرور ارتباط برقرار کند به طوری که یک کاربر کاراکترها را درون یک فیلد ورودی وارد کند:

مثال

درون کادر زیر یک نام را وارد کنید:

نام: 

پیشنهادات:


توضیح مثال

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

تابع مورد نظر، به وسیله ی رویداد onkeyup راه اندازی می شود. 

در زیر کد HTML مورد نظر قرار دارد:

مثال

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form> 
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
خودتان امتحان کنید »

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

ابتدا بررسی می کنیم که آیا فیلد input خالی است یا نه(str.length==0). اگر که فیلد مورد نظر خالی باشد فضای txtHint را خالی می کنیم و از تابع خارج می شویم. 

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

  • ایجاد یک شیء XMLHttpRequest
  • ایجاد تابعی که باید هنگامی که پاسخ سرور آماده است، اجرا شود. 
  • ارسال درخواست به یک فایل php در سرور مورد نظر (فایل  gethint.php)
  • توجه کنید که پارامتر q اضافه شده است: gethint.php?q="+str
  • متغیر str محتوای فیلد input را نگهداری می کند.

فایل پی اچ پی gethint.php 

فایل php مورد نظر، یک آرایه از نام ها را بررسی می کند و نام متناظر را برگردانده و به مرورگر اضافه می کند: 

<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from "" 
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}

// Output "no suggestion" if no hint was found or output correct values 
echo $hint === "" ? "no suggestion" : $hint;
?>