Ví dụ về AJAX ASP
AJAX được sử dụng để tạo ra nhiều ứng dụng tương tác hơn.
Ví dụ về AJAX ASP
Ví dụ sau đây sẽ minh họa cách một trang web có thể giao tiếp với máy chủ web trong khi người dùng nhập các ký tự vào trường nhập:
Ví dụ
Start typing a name in the input field below:
Ví dụ giải thích
Trong ví dụ trên, khi người dùng nhập một ký tự vào trường đầu vào, một hàm có tên "showHint()" sẽ được thực thi.
Chức năng này được kích hoạt bởi sự kiện onkeyup.
Đây là mã HTML:
Ví dụ
<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.asp?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> Hãy tự mình thử »Giải thích mã:
Trước tiên, hãy kiểm tra xem trường nhập có trống không (str.length == 0). Nếu đúng như vậy, hãy xóa nội dung của phần giữ chỗ txtHint và thoát khỏi hàm.
Tuy nhiên, nếu trường nhập không trống, hãy làm như sau:
- Tạo một đối tượng XMLHttpRequest
- Tạo hàm để thực thi khi phản hồi của máy chủ sẵn sàng
- Gửi yêu cầu tới tệp ASP (gethint.asp) trên máy chủ
- Lưu ý rằng tham số q được thêm gethint.asp?q="+str
- Biến str giữ nội dung của trường đầu vào
Tệp ASP - "gethint.asp"
Tệp ASP kiểm tra một mảng tên và trả về (các) tên tương ứng cho trình duyệt:
<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>