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 sẽ chứng minh 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:
Thí dụ
Start typing a name in the input field below:
Suggestions:
First name:
Giải thích ví dụ
Trong ví dụ trên, khi người dùng nhập một ký tự vào trường nhập, một hàm được gọi showHint()sẽ được thực thi.
Chức năng được kích hoạt bởi onkeyupsự kiện.
Đây là mã:
Thí dụ
<p>Start typing a name in the input field below:</p>
<p>Suggestions: <span id="txtHint"></span></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.asp?q=" + str);
xmlhttp.send();
}
}
</script>
Giải thích mã:
Đầu tiên, hãy kiểm tra xem trường đầu vào có trống không (str.length == 0). Nếu đúng như vậy, hãy xóa nội dung của trình giữ chỗ txtHint và thoát khỏi hàm.
Tuy nhiên, nếu trường đầu vào không trống, hãy làm như sau:
- Tạo một đối tượng XMLHttpRequest
- Tạo chức năng được 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 vào gethint.asp? Q = "+ str
- Biến str chứa 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
%>