ASP - AJAX와 ASP
- 이전 페이지 AJAX 소개
- 다음 페이지 AJAX 데이터베이스
AJAX는 더 동적이고 강력한 애플리케이션을 생성하는 데 사용됩니다。
AJAX ASP 예제
아래의 예제는 사용자가 입력 창에 문자를 입력할 때 웹 페이지가 서버와 어떻게 통신하는지 보여줍니다：
예제
아래의 입력 창에 알파벳(A - Z)을 입력하세요：
추천：
예제 설명 - HTML 페이지
사용자가 위의 입력 창에 문자를 입력할 때 "showHint()" 함수가 실행됩니다. 이 함수는 "onkeyup" 이벤트로 트리거됩니다：
<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
// IE7+, Firefox, Chrome, Opera, Safari에 대한 코드
xmlhttp=new XMLHttpRequest();
}
else
// 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>입력 상자에 영문자를 입력하세요:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>추천: <span id="txtHint"></span></p>
</body>
</html>
원본 코드 설명:
입력 상자가 비어 있으면 (str.length==0) 함수는 占位符 txtHint의 내용을 비우고 함수를 종료합니다.
입력 상자가 비어 있지 않으면 showHint() 함수는 다음 단계를 수행합니다:
- XMLHttpRequest 객체를 생성합니다
- 서버 응답이 준비되면 실행할 함수를 생성합니다
- 서버에 파일에 대한 요청을 보냅니다
- URL 끝에 추가된 매개변수(q)를 주의하세요. (입력 상자의 내용 포함)
ASP 파일
위의 JavaScript 호출 서버 페이지는 "gethint.asp"라는 ASP 파일입니다.
"gethint.asp" 中的源代码会检查姓名数组，然后向浏览器返回对应的姓名：
"gethint.asp"에서 원본 코드는 이름 배열을 확인한 후에 브라우저에对应的 이름을 반환합니다:
<%
response.expires=-1
dim a(30)
배열에 이름을 채우기
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"
URL에서 매개변수 q를 가져옵니다
q=ucase(request.querystring("q"))
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
추가를 찾지 못하면 "no suggestion"을 출력
또는 올바른 값을 출력
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
원본 코드 설명:
만약 JavaScript가 어떤 텍스트를 전송하면( 즉 strlen($q)가 0보다 크다면), 다음이 발생합니다:
- JavaScript에서 가져온 문자의 일치를 찾다
- 일치하는 것이 없으면 응답 문자열을 "no suggestion"으로 설정하다
- 이름이 하나나 다수가 일치하면 모든 이름을 사용하여 응답 문자열을 설정하다
- 응답을 대체 텍스트 "txtHint"에 보내다
- 이전 페이지 AJAX 소개
- 다음 페이지 AJAX 데이터베이스
