وباکا

آموزش تخصصی برنامه نویسی وب

در این جلسه با برنامه نویسی به زبان php برای پاسخگویی به درخواست های ایجکس  آشنا می شوید. لازم به ذکر است برنامه های سمت سرور برای پاسخگویی به درخواست های ایجکس می توانند با هر زبانی نوشته شوند.

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

<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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>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>

در این مثال ، زمانی که یک کاربر یک کاراکتر را در فیلد ورودی می نویسد، یک تابع به نام “showHint” اجرا می شود.این عمل توسط رویداد onkeyup انجام می شود.

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

  • یک شیء XMLHttpRequest ایجاد می کند
  • هنگامی که پاسخ سرور آماده است، تابع اجرا می شود
  • ارسال درخواست را به یک برنامه PHP بنام php در سرور
  • توجه داشته باشید که پارامتر q به php اضافه شده است؟ q = “+ str
  • متغیر Str محتوای محتوای فیلد ورودی را نگه می دارد.

فایل پی اچ پی – gethint.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;
?>

مطالب مرتبط

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فهرست مطالب