آجكس براي ايجاد برنامه تعاملي بيشتر مورد استفاده قرار ميگيرد.
مثال زير نشان ميدهد كه چگونه يك صفحه وب ميتواند با يك وب سرور ارتباط برقراركند در حالي كه كاربر كراكترها را در يك فيلد ورودي تايپ ميكند:
Start typing a name in the input field below:
Suggestions:
First name:
تشــريح مثال:
در مثال فوق كاربر كراكتري را در فيلد وردي تايپ ميكند، تابعي بنام showHint( )اجرا ميگردد .اين اتفاق توسط رويداد onkeyupانجام ميشود . هر كراكتري كه تايپ ميگردد، توسط تابع پيشنهاد ها در بخشSeggestions ظاهر ميشود .
كد آن مطابق زيراست:
<p Start typing a name in the input field below:</p> <p Suggestions: id="txtHint"></p> <form> First name: <input type="text" onkeyup="showHint(this.value)"> </form> <script> function showHint(str) { if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } else { const xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() { document.getElementById("txtHint").innerHTML = this.responseText; } xmlhttp.open("GET", "gethint.php?q=" + str); xmlhttp.send(); } } </script >
توضيح كد:
ابتدا ، اگر فيلد ورودي تهي باشد، يعني(str.lenght==0) اگر اين شرط برقرار. باشد، محتوي مكان نمايtxtHint پاك شده واز تابع خارج ميشود.
اما اگر فيلد ورودي خالي نيست، موارد زير انجام ميشود:
فايل پي اچ پي"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; ?>