در مثال بالا، زمانی که کاربر فردی را در لیست کشویی انتخاب می کند
در بالا، تابعی به نام "showUser()" اجرا می شود.
این تابع توسط رویداد onchange فعال می‌شود.
این کد HTML است:
مثال
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
توضیح کد:
ابتدا، بررسی کنید که آیا شخص انتخاب شده است یا خیر. اگر هیچ شخصی انتخاب نشده است (str == "")، پاک کنید
محتوای txtHint و خروج از تابع. اگر فردی انتخاب شده است، موارد زیر را انجام دهید:
- یک شی XMLHttpRequest ایجاد کنید
- عملکردی را ایجاد کنید که وقتی پاسخ سرور آماده شد اجرا شود
- درخواست را به فایلی در سرور ارسال کنید
- توجه کنید که یک پارامتر (q) به URL (با محتوای لیست کشویی) اضافه شده است