AJAX ASP/PHP
AJAX는 보다 동적인 애플리케이션을 만드는 데 사용됩니다.
AJAX ASP/PHP 예제
다음 예제에서는 사용자가 입력 상자에 문자를 입력할 때 웹 페이지가 웹 서버와 통신하는 방법을 보여줍니다. 아래 입력란에 문자(A - Z)를 입력하세요.
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요
인스턴스 분석 - showHint () 함수
사용자가 위의 입력창에 문자를 입력하면 "showHint()" 함수가 실행됩니다. 이 함수는 "onkeyup" 이벤트에 의해 트리거됩니다:
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML=" ";
return;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari용 코드
=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function( )
{
if (xmlhttp.readyState==4 && ).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.html?q="+str,true);
xmlhttp .send();
}
ㅋㅋㅋ $a[]="브리타니";
$a[]="신데렐라";
$a[]="다이아나";
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML=" ";
return;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari용 코드
=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function( )
{
if (xmlhttp.readyState==4 && ).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.html?q="+str,true);
xmlhttp .send();
}
소스 코드 분석:
입력 상자가 비어 있는 경우(str.length==0) 이 함수는 txtHint 자리 표시자의 내용을 지우고 함수를 종료합니다.
입력 상자가 비어 있지 않으면 showHint() 함수는 다음 작업을 수행합니다.
XMLHttpRequest 객체 생성
서버 응답이 준비되면 함수 실행
다음으로 요청 보내기
-
URL
AJAX 서버 페이지 - ASP 및 PHP
위의 JavaScript에 의해 호출되는 서버 페이지에 매개변수 q(입력 상자의 내용 포함)를 추가했습니다. "gethint.asp"라는 ASP 파일입니다.
아래에서는 ASP로 작성된 서버 파일과 PHP로 작성된 두 가지 버전의 서버 파일을 만듭니다.
ASP 파일
"gethint.asp"의 소스 코드는 이름 배열을 확인하고 해당 이름을 브라우저에 반환합니다.
<%
response.expires=-1
dim a(30)
'이름으로 배열 채우기
a(1)="Anna"
a(2)="브리타니"
a(3)=" 신데렐라"
a(4)="다이아나"
a(5)="에바"
a(6)="피오나"
a(7)="군다"
a(8)="헤게"
a( 9)="잉가"
a(10)="요한나"
a(11)="고양이"
a(12)="린다"
a(13)="니나"
a(14)="오필리아 "
a(15)="페튜니아"
a(16)="아만다"
a(17)="라켈"
a(18)="신디"
a(19)="도리스"
a(20 )="이브"
a(21)="에비타"
a(22)="수니바"
a(23)="토베"
a(24)="언니"
a(25)="바이올렛"
a(26)="리자"
a(27)="엘리자베스"
a(28)="엘렌"
a(29)="웬체"
a(30)="비키"
'받기 URL의 q 매개변수
q=ucase(request.querystring("q"))
' 길이가 q>0인 경우 배열에서 모든 힌트를 조회합니다
len(q)>0인 경우
힌트=""
i=1부터 30까지
if q=ucase(mid(a(i),1,len(q))) then
힌트=""이면
힌트=a(i)
또
힌트=힌트 & " , " & a(i)
만약에 종료
만약에 종료
next
end if
'힌트가 없으면 "제안 없음"을 출력
'하거나 올바른 값을 출력
if 힌트="" then
response.write("제안 없음")
else
response.write(힌트)
end if
%>
response.expires=-1
dim a(30)
'이름으로 배열 채우기
a(1)="Anna"
a(2)="브리타니"
a(3)=" 신데렐라"
a(4)="다이아나"
a(5)="에바"
a(6)="피오나"
a(7)="군다"
a(8)="헤게"
a( 9)="잉가"
a(10)="요한나"
a(11)="고양이"
a(12)="린다"
a(13)="니나"
a(14)="오필리아 "
a(15)="페튜니아"
a(16)="아만다"
a(17)="라켈"
a(18)="신디"
a(19)="도리스"
a(20 )="이브"
a(21)="에비타"
a(22)="수니바"
a(23)="토베"
a(24)="언니"
a(25)="바이올렛"
a(26)="리자"
a(27)="엘리자베스"
a(28)="엘렌"
a(29)="웬체"
a(30)="비키"
'받기 URL의 q 매개변수
q=ucase(request.querystring("q"))
' 길이가 q>0인 경우 배열에서 모든 힌트를 조회합니다
len(q)>0인 경우
힌트=""
i=1부터 30까지
if q=ucase(mid(a(i),1,len(q))) then
힌트=""이면
힌트=a(i)
또
힌트=힌트 & " , " & a(i)
만약에 종료
만약에 종료
next
end if
'힌트가 없으면 "제안 없음"을 출력
'하거나 올바른 값을 출력
if 힌트="" then
response.write("제안 없음")
else
response.write(힌트)
end if
%>
$a[]="신데렐라";
$a[]="다이아나";
$a[]="에바";
$a[]="피오나";$a[]="군다";
$a[]="헤게";$a[]="잉가";
$a[]="요한나";
$a[]="고양이";
$a[]="린다";
$a[]="니나";
$a[]="오필리아";
$a[]="페튜니아";
$a[]="아만다";
$a[]="라켈";
$a[]="신디";
$a[]="도리스";
$a[]="이브";
$a[]="에비타";
$a[]="Sunniva";
$a[]="Tove";
$a[]="언니";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//URL에서 q 매개변수 가져오기
$q=$_GET["q"];
//길이가 q>0인 경우 배열에서 모든 힌트를 찾습니다
if (strlen($q) > 0)
{
$힌트="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$힌트=$a[$i];
}
또
{
$hint=$힌트." , ".$a[$i];
}
}
}
}
// 힌트가 발견되지 않은 경우 출력을 "제안 없음"으로 설정
//하거나 올바른 값으로 설정
if ($hint == "")
{
$response="제안 없음";
}
else
{
$응답=$힌트;
}
//응답 출력
echo $response;
?>
$a[]="고양이";
$a[]="린다";
$a[]="니나";
$a[]="오필리아";
$a[]="페튜니아";
$a[]="아만다";
$a[]="라켈";
$a[]="신디";
$a[]="도리스";
$a[]="이브";
$a[]="에비타";
$a[]="Sunniva";
$a[]="Tove";
$a[]="언니";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//URL에서 q 매개변수 가져오기
$q=$_GET["q"];
//길이가 q>0인 경우 배열에서 모든 힌트를 찾습니다
if (strlen($q) > 0)
{
$힌트="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$힌트=$a[$i];
}
또
{
$hint=$힌트." , ".$a[$i];
}
}
}
}
// 힌트가 발견되지 않은 경우 출력을 "제안 없음"으로 설정
//하거나 올바른 값으로 설정
if ($hint == "")
{
$response="제안 없음";
}
else
{
$응답=$힌트;
}
//응답 출력
echo $response;
?>
