مثال‌های PHP در AJAX

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
۱مقدمه
۲ AJAX XMLHttp
۳درخواست AJAX
۴پاسخ سرور
۵مثال‌های XML در AJAX
۶مثال‌های PHP در AJAX
۷مثال‌های ASP در AJAX
۸مثال پایگاه داده در AJAX
۹نرم‌افزارهای XML
۱۰مثال‌های AJAX
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

AJAX برای ساخت نرم‌افزارهایی که نسبت به سایر نرم‌افزارها تعاملی‌تر هستند استفاده می‌شود. [۱]

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

مثال

نوشتن یک نام را در فیلد ورودی زیر شروع کنید:

توصیه‌ها:

نام:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


توضیح مثال

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

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

در زیر کد HTML مثال را می‌بینید:

مثال

 1 <html>
 2 <head>
 3 <script>
 4 function showHint(str) {
 5   if (str.length == 0) {
 6     document.getElementById("txtHint").innerHTML = "";
 7     return;
 8   } else {
 9     var xmlhttp = new XMLHttpRequest();
10     xmlhttp.onreadystatechange = function() {
11       if (this.readyState == 4 && this.status == 200) {
12         document.getElementById("txtHint").innerHTML = this.responseText;
13       }
14     };
15     xmlhttp.open("GET", "gethint.php?q=" + str, true);
16     xmlhttp.send();
17   }
18 }
19 </script>
20 </head>
21 <body>
22 
23 <p><b>Start typing a name in the input field below:</b></p>
24 <form>
25 First name: <input type="text" onkeyup="showHint(this.value)">
26 </form>
27 <p>Suggestions: <span id="txtHint"></span></p>
28 </body>
29 </html>


مشاهدهٔ نتیجه


توضیح کد:

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

اما، در صورتی که فیلد ورودی خالی نباشد، کارهای زیر را انجام می‌دهد:

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

فایل PHP - "gethint.php"

فایل PHP آرایه‌ای از نام‌ها را بررسی کرده و نام مربوط را به مرورگر بازمی‌گرداند:

 1 <?php
 2 // Array with names
 3 $a[] = "Anna";
 4 $a[] = "Brittany";
 5 $a[] = "Cinderella";
 6 $a[] = "Diana";
 7 $a[] = "Eva";
 8 $a[] = "Fiona";
 9 $a[] = "Gunda";
10 $a[] = "Hege";
11 $a[] = "Inga";
12 $a[] = "Johanna";
13 $a[] = "Kitty";
14 $a[] = "Linda";
15 $a[] = "Nina";
16 $a[] = "Ophelia";
17 $a[] = "Petunia";
18 $a[] = "Amanda";
19 $a[] = "Raquel";
20 $a[] = "Cindy";
21 $a[] = "Doris";
22 $a[] = "Eve";
23 $a[] = "Evita";
24 $a[] = "Sunniva";
25 $a[] = "Tove";
26 $a[] = "Unni";
27 $a[] = "Violet";
28 $a[] = "Liza";
29 $a[] = "Elizabeth";
30 $a[] = "Ellen";
31 $a[] = "Wenche";
32 $a[] = "Vicky";
33 
34 // get the q parameter from URL
35 $q = $_REQUEST["q"];
36 
37 $hint = "";
38 
39 // lookup all hints from array if $q is different from ""
40 if ($q !== "") {
41   $q = strtolower($q);
42   $len=strlen($q);
43   foreach($a as $name) {
44     if (stristr($q, substr($name, 0, $len))) {
45       if ($hint === "") {
46         $hint = $name;
47       } else {
48         $hint .= ", $name";
49       }
50     }
51   }
52 }
53 
54 // Output "no suggestion" if no hint was found or output correct values
55 echo $hint === "" ? "no suggestion" : $hint;
56 ?>


منابع آموزشی