ASP AJAX
AJAX는 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트하는 것입니다.
AJAX란 무엇입니까?
AJAX = 비동기 JavaScript 및 XML.
AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다.
AJAX를 사용하면 배후에서 서버와 소량의 데이터를 교환하여 웹 페이지를 비동기식으로 업데이트할 수 있습니다. 즉, 전체 페이지를 다시 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있습니다.
AJAX를 사용하지 않는 클래식 웹 페이지는 콘텐츠가 변경되어야 하는 경우 전체 페이지를 다시 로드해야 합니다.
AJAX를 사용하는 애플리케이션의 예: Google 지도, Gmail, Youtube 및 Facebook 탭.
AJAX 작동 방식
AJAX는 인터넷 표준을 기반으로 합니다.
AJAX는 인터넷 표준을 기반으로 하며 다음을 조합하여 사용합니다.
- XMLHttpRequest 객체(서버와 비동기적으로 데이터 교환)
- JavaScript/DOM(정보 표시/상호작용)
- CSS(데이터 스타일 지정)
- XML(종종 데이터 전송 형식으로 사용됨)
AJAX 애플리케이션은 브라우저와 플랫폼에 독립적입니다!
구글 추천
AJAX는 2005년 Google Suggest와 함께 Google에서 대중화되었습니다.
Google Suggest 는 AJAX를 사용하여 매우 동적인 웹 인터페이스를 만듭니다. Google의 검색 상자에 입력을 시작하면 JavaScript가 서버로 문자를 보내고 서버는 제안 목록을 반환합니다.
지금 AJAX 사용 시작
ASP 자습서에서 AJAX가 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트할 수 있는 방법을 보여줍니다. 서버 스크립트는 ASP로 작성됩니다.
AJAX에 대해 자세히 알아보려면 AJAX 자습서 를 방문하세요 .
AJAX ASP 예제
다음 예는 사용자가 입력 필드에 문자를 입력하는 동안 웹 페이지가 웹 서버와 통신하는 방법을 보여줍니다.
예시
Start typing a name in the input field below:
Suggestions:
예시 설명
위의 예에서 사용자가 입력 필드에 문자를 입력하면 "showHint()"라는 함수가 실행됩니다.
함수는 onkeyup 이벤트에 의해 트리거됩니다.
HTML 코드는 다음과 같습니다.
예시
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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>Start typing a name in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
코드 설명:
먼저 입력 필드가 비어 있는지 확인합니다(str.length == 0). 그렇다면 txtHint 자리 표시자의 내용을 지우고 함수를 종료합니다.
그러나 입력 필드가 비어 있지 않으면 다음을 수행하십시오.
- XMLHttpRequest 객체 생성
- 서버 응답이 준비되었을 때 실행할 함수 생성
- 서버의 ASP 파일(gethint.asp)로 요청 보내기
- q 매개변수가 gethint.asp?q="+str 추가되었습니다.
- str 변수는 입력 필드의 내용을 보유합니다.
ASP 파일 - "gethint.asp"
ASP 파일은 이름 배열을 확인하고 해당 이름을 브라우저에 반환합니다.
<%
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
%>
AJAX는 데이터베이스와의 대화식 통신에 사용할 수 있습니다.
AJAX 데이터베이스 예
다음 예는 웹 페이지가 AJAX를 사용하여 데이터베이스에서 정보를 가져오는 방법을 보여줍니다.
예시
예제 설명 - HTML 페이지
사용자가 위의 드롭다운 목록에서 고객을 선택하면 "showCustomer()"라는 함수가 실행됩니다. 함수는 "onchange" 이벤트에 의해 트리거됩니다.
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (this.readyState==4 && this.status==200)
{
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
소스 코드 설명:
고객이 선택되지 않은 경우(str.length==0), 함수는 txtHint 자리 표시자의 내용을 지우고 함수를 종료합니다.
고객이 선택되면 showCustomer() 함수는 다음을 실행합니다.
- XMLHttpRequest 객체 생성
- 서버 응답이 준비되었을 때 실행할 함수 생성
- 서버의 파일로 요청 보내기
- URL에 매개변수(q)가 추가됩니다(드롭다운 목록의 내용 포함).
ASP 파일
위의 JavaScript가 호출하는 서버의 페이지는 "getcustomer.asp"라는 ASP 파일입니다.
"getcustomer.asp"의 소스 코드는 데이터베이스에 대해 쿼리를 실행하고 HTML 테이블에 결과를 반환합니다.
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>