ASP - AJAX và ASP

AJAX được sử dụng để tạo ra các ứng dụng có tính động hơn.

Ví dụ AJAX ASP

Ví dụ dưới đây sẽ minh họa cách trang web giao tiếp với máy chủ khi người dùng gõ字符 trong hộp nhập:

Ví dụ

Vui lòng gõ các chữ cái (A - Z) vào hộp nhập bên dưới:

Tên:

Đề xuất:

Thử mã nguồn ngay bây giờ

Giải thích ví dụ - Trang web HTML

Khi người dùng gõ字符 trong hộp nhập trên, hàm "showHint()" sẽ được thực thi. Hàm này được sự kiện "onkeyup" kích hoạt:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  // Mã dành cho IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  // Mã dành cho IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<p><b>Quý vị vui lòng nhập các ký tự tiếng Anh vào ô nhập:</b></p>
<form>
Tên đầu tiên: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Ý kiến: <span id="txtHint"></span></p>
</body>
</html>

Giải thích mã nguồn:

Nếu ô nhập trống (str.length==0), hàm này sẽ xóa nội dung của thẻ chèn txtHint và thoát khỏi hàm.

Nếu ô nhập không trống, hàm showHint() sẽ thực hiện các bước sau:

  • Tạo đối tượng XMLHttpRequest
  • Tạo hàm sẽ được thực thi khi máy chủ phản hồi sẵn sàng
  • Gửi yêu cầu đến tệp trên máy chủ
  • Lưu ý thêm tham số vào cuối URL (q) (bao gồm nội dung của ô nhập)

Tệp ASP

Trang web gọi server bằng JavaScript này là tệp ASP có tên là "gethint.asp".

Mã nguồn trong "gethint.asp" sẽ 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(30)
điền mảng với các tên
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"
lấy tham số q từ URL
q=ucase(request.querystring("q"))
nếu độ dài q>0, thì tìm tất cả các gợi ý trong mả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 gợi ý, thì xuất ra "no suggestion"
hoặc xuất ra các giá trị chính xác
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

Giải thích mã nguồn:

Nếu JavaScript gửi bất kỳ văn bản nào (tức là strlen($q) lớn hơn 0), sẽ xảy ra:

  • Tìm kiếm tên khớp từ ký tự JavaScript
  • Nếu không tìm thấy khớp, thiết lập chuỗi phản hồi thành "no suggestion"
  • Nếu tìm thấy một hoặc nhiều tên khớp, thiết lập chuỗi phản hồi bằng tất cả các tên
  • Gửi phản hồi đến khung "txtHint"