AJAX는 보다 대화형 애플리케이션을 만드는 데 사용됩니다.
다음 예에서는 사용자가 입력 상자에 문자를 입력할 때 웹 페이지가 웹 서버와 통신하는 방법을 보여줍니다.
사용자가 위의 입력창에 문자를 입력하면 "showHint()" 함수가 실행됩니다. 이 함수는 "onkeyup" 이벤트에 의해 트리거됩니다.
<html><head><script>function showHint(str){ if (str.length==0) { document.getElementById("txtHint").innerHTML="" } 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.php?q="+str,true); xmlhttp.send();}</script></head><body><p><b>입력 상자에서 이름 입력:</b></p><form> 이름: <input type="text" onkeyup="showHint(this.value)"></form><p>반환 값: <span id="txtHint"></span></p></body></html>소스코드 설명:
입력 상자가 비어 있는 경우(str.length==0) 이 함수는 txtHint 자리 표시자의 내용을 지우고 함수를 종료합니다.
입력 상자가 비어 있지 않으면 showHint()는 다음 단계를 수행합니다.
XMLHttpRequest 객체 생성
서버 응답이 준비되면 실행되는 함수 만들기
서버의 파일에 요청 보내기
URL(입력 상자의 내용 포함) 끝에 추가된 매개변수(q)를 참고하세요.
위에서 JavaScript를 통해 호출되는 서버 페이지는 "gethint.php"라는 이름의 PHP 파일입니다.
"gethint.php"의 소스 코드는 이름 배열을 확인하고 해당 이름을 브라우저에 반환합니다.
<?php// 배열을 이름으로 채웁니다 $a[]="Anna";$a[]="Brittany";$a[]="Cinderella";$a[]="Diana";$a[]="Eva" ; $a[]="피오나";$a[]="군다";$ a[]="헤게";$a[]="잉가";$a[]="요한나";$a[]="고양이";$a[]="린다";$a[]=" 니나";$a[]="오필리아";$a[]="페튜니아";$ a[]="아만다";$a[]="라켈";$a[]="신디";$a[]="도리스";$a[]="이브";$a[]=" 에비타";$a[]="수니바";$a[]="토베";$a []="언니";$a[]="바이올렛";$a[]="Liza";$a[]="엘리자베스";$a[]="엘렌";$a[]="웬체 ";$a[]="Vicky";//요청 URL 주소에서 q 가져오기 매개변수 $q=$_GET["q"];//q>0인 경우 일치하는 값이 있는지 확인합니다. (strlen($q) > 0){ $hint="" for($i=0; $ i< count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint==" ") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i] } } }}// 일치하는 값이 없으면 출력을 "제안 없음"으로 설정합니다. " if ($ 힌트 == ""){ $response="제안 없음";}else{ $response=$hint;}//반환 값 출력 echo $response;?>설명: JavaScript가 텍스트(예: strlen($q) > 0)를 보내면 다음과 같은 일이 발생합니다.
JavaScript에서 보낸 문자와 일치하는 이름 찾기
일치하는 항목이 없으면 응답 문자열을 "제안 없음"으로 설정합니다.
일치하는 이름이 하나 이상 발견되면 모든 이름으로 응답 문자열을 설정합니다.
"txtHint" 자리 표시자에 응답을 보냅니다.
비동기 요청이 도메인을 거쳐야 하는 경우 PHP Ajax 도메인 간 문제 해결 방법을 확인해 보세요.