AJAX và ASP
Ví dụ ứng dụng AJAX và ASP
Chương này mình sẽ trình bày một ví dụ minh họa cách sử dụng kỹ thuật AJAX trên Client Side và ngôn ngữ ASP trên Server Side.
Trong ví dụ này, khi người dùng gõ một ký tự trong trường input, hàm JavaScript có tên là showHint() sẽ được thực thi. Hàm này được kích hoạt bởi sự kiện onkeyup.
<html>
<body>
<h3>Ban hay nhap mot ten trong truong input ben duoi:</h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
<script>
function showHint(str) {
var xhttp;
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "gethint.php?q="+str, true);
xhttp.send();
}
</script>
</body>
</html>
Giải thích
Đầu tiên, kiểm tra xem nếu trường input là trống hay không (điều kiện str.length == 0). Nếu là trống thì xóa nội dung của Placeholder và thoát khỏi hàm.
Nếu trường input là không trống, thực hiện:
Tạo một đối tượng XMLHttpRequest.
Tạo một hàm để thực thi khi Response từ Server đã sẵn sàng.
Gửi Request tới một ASP file (giả sử có tên là gethint.asp) trên Server.
Bạn nên chú ý rằng tham số q được thêm vào "gethint.asp?q=" + str.
Biến str giữ nội dung của trường input.
Nội dung của gethint.asp
ASP file này kiểm tra mảng các tên và sau đó trả về tên tương ứng cho trình duyệt.
<%
response.expires=-1
dim a(30)
'Mot mang cac ten Sinh Vien
a(1)="An"
a(2)="Bao"
a(3)="Chinh"
a(4)="Doanh"
a(5)="Em"
a(6)="Gam"
a(7)="Hoang"
a(8)="Kim"
a(9)="Linh"
a(10)="Ngoc"
a(11)="Oanh"
a(12)="Phuc"
a(13)="Anh"
a(14)="Nam"
a(15)="Sen"
a(16)="Dong"
a(17)="Sinh"
a(18)="Torres"
a(19)="Ronaldo"
a(20)="Messi"
a(21)="Suares"
a(22)="Morinho"
a(23)="Van Gan"
a(24)="Viet"
'Lay tham so q tu dia chi URL
q=ucase(request.querystring("q"))
'Tim tat ca cac hint co trong Array neu do dai cua 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
'Ket qua "Khong co suggestion nao" neu khong tim thay bat ky hint nao trong Array
'hoac ket qua la gia tri ten bat ky co trong Array
if hint="" then
response.write("Khong co suggestion nao")
else
response.write(hint)
end if
%>
Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Loạt bài hướng dẫn học Ajax cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
