Mô hình ASP AJAX
- Trang trước AJAX PHP
- Trang tiếp theo Cơ sở dữ liệu AJAX
AJAX được sử dụng để tạo ra các ứng dụng tương tác hơn.
Mô hình ASP AJAX
Ví dụ dưới đây minh họa: Khi người dùng gõ ký tự trong trường nhập, trang web sẽ giao tiếp với máy chủ web như thế nào:
Mô hình
Vui lòng nhập các chữ cái A-Z trong trường nhập dưới đây:
Tên:
Đề xuất tìm kiếm:
Giải thích ví dụ
Trong ví dụ trên, khi người dùng gõ ký tự trong trường nhập, hàm "showHint()" sẽ được thực hiện.
Hàm này được kích hoạt bởi sự kiện onkeyup.
Dưới đây là mã HTML:
Mô hình
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
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>Vui lòng nhập chữ cái A-Z vào trường nhập dưới đây:</b></p>
<form>
Tên:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Đề xuất tìm kiếm:<span id="txtHint"></span></p>
</body>
</html>
Giải thích mã:
Trước tiên, kiểm tra trường nhập có trống hay không (str.length == 0）；nếu có, xóa nội dung của thanh ghi nhớ txtHint và thoát hàm.
Nhưng, nếu trường nhập không để trống, thì thực hiện như sau:
- Tạo đối tượng XMLHttpRequest
- Tạo hàm sẽ được thực thi khi máy chủ phản hồi
- Gửi yêu cầu đến tệp ASP (gethint.asp) trên máy chủ
- Vui lòng thêm tham số q vào gethint.asp
- biến str lưu trữ nội dung của trường nhập
Tệp ASP - "gethint.asp"
Tệp ASP này kiểm tra mảng tên, sau đó trả về tên tương ứng cho trình duyệt:
<%
response.expires=-1
dim a(32)
điền tên vào mảng
a(1)="Ava"
a(2)="Brielle"
a(3)="Caroline"
a(4)="Diana"
a(5)="Elise"
a(6)="Fiona"
a(7)="Grace"
a(8)="Hannah"
a(9)="Ileana"
a(10)="Jane"
a(11)="Kathryn"
a(12)="Laura"
a(13)="Millie"
a(14)="Nancy"
a(15)="Opal"
a(16)="Petty"
a(17)="Queenie"
a(18)="Rose"
a(19)="Shirley"
a(20)="Tiffany"
a(21)="Ursula"
a(22)="Victoria"
a(23)="Wendy"
a(24)="Xenia"
a(25)="Yvette"
a(26)="Zoe"
a(27)="Angell"
a(28)="Adele"
a(29)="Beatty"
a(30)="Carlton"
a(31)="Elisabeth"
a(32)="Violet"
Lấy tham số q từ URL
q=ucase(request.querystring("q"))
Xem tất cả các hint trong mảng, độ dài của q có lớn hơn 0 không
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
Nếu không tìm thấy hint, xuất "không có gợi ý", hoặc xuất giá trị chính xác
if hint="" then
response.write("không có gợi ý")
else
response.write(hint)
end if
%>
- Trang trước AJAX PHP
- Trang tiếp theo Cơ sở dữ liệu AJAX
