AJAX는 보다 동적인 애플리케이션을 만드는 데 사용됩니다.
다음 예는 사용자가 입력 상자에 문자를 입력할 때 웹 페이지가 웹 서버와 통신하는 방법을 보여줍니다. 아래 입력 상자에 문자(A - Z)를 입력하십시오.
입력 상자에 문자 a를 입력해 보세요.
프롬프트 정보:
사용자가 위의 입력창에 문자를 입력하면 "showHint()" 함수가 실행됩니다. 이 함수는 "onkeyup" 이벤트에 의해 트리거됩니다.
기능 쇼힌트 ( str ) { var xmlhttp ; ( str . 길이 == 0 ) { document.getElementById ( " txtHint " ) . innerHTML = " " } 만약에 ( 창 . XMLHttpRequest ) { // IE7+, Firefox, Chrome, Opera, Safari 브라우저 실행 코드 xmlhttp = 신규 XMLHttpRequest ( ) } 또 다른 { // IE6, IE5 브라우저 실행 코드 xmlhttp = 신규 ActiveXObject ( " Microsoft.XMLHTTP " ) } xmlhttp.onreadystatechange = 함수 ( ) { 만약에 ( xmlhttp . ReadyState == 4 && xmlhttp . status == 200 ) { document.getElementById ( " txtHint " ) .innerHTML = xmlhttp } } xmlhttp 열기 ( " GET " , " /try/ajax/gethint.php?q="+str,true ) ;소스 코드 분석:
입력 상자가 비어 있으면 str.length==0 함수는 txtHint 자리 표시자의 내용을 지우고 함수를 종료합니다.
입력 상자가 비어 있지 않으면 showHint() 함수는 다음 작업을 수행합니다.
XMLHttpRequest 객체 생성
서버 응답이 준비되면 함수 실행
서버의 파일로 요청 보내기
매개변수 q(입력 상자의 내용 포함)를 URL에 추가했습니다.
위의 JavaScript가 호출하는 서버 페이지는 "gethint.asp"라는 ASP 파일입니다.
아래에서는 두 가지 버전의 서버 파일을 생성합니다. 하나는 ASP로 작성되고 다른 하나는 PHP로 작성됩니다.
"gethint.asp"의 소스 코드는 이름 배열을 확인하고 해당 이름을 브라우저에 반환합니다.
<%response.expires=-1dim a(30)'다음으로 배열 채우기 namesa(1)="Anna"a(2)="브리타니"a(3)="신데렐라"a(4)="다이아나"a(5)="Eva"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)="토브 e"a(24)="언니"a(25)="바이올렛"a(26)="리자"a(27)="엘리자베스"a(28)="엘렌"a(29)="웬체" a(30)="비키"'get URLq=ucase(request.querystring("q"))'의 q 매개변수는 q의 길이가 0인 경우 배열에서 모든 힌트를 조회합니다. len(q)>0인 경우 q=ucase인 경우 i=1에서 30인 경우 힌트=""입니다. (mid(a(i),1,len(q))) then if 힌트="" then 힌트=a(i) else 힌트=힌트 & " , " & a(i) end if end if nextend if'Output 힌트가 발견되지 않은 경우 "제안 없음" 또는 올바른 값을 출력합니다. if 힌트="" then response.write("제안 없음")else response.write(hint)end if%>아래 코드는 PHP로 작성되었으며 위의 ASP 코드와 동일한 효과를 갖습니다.
<?php// 다음으로 배열 채우기 names$a[]="Anna";$a[]="브리타니";$a[]="신데렐라";$a[]="Diana";$a[]="Eva";$a[] ="피오나";$a[]="군다";$a []="헤게";$a[]="잉가";$a[]="요한나";$a[]="고양이";$a[]="린다";$a[]="니나 ";$a[]="오필리아";$a[]="페튜니아 ";$a[]="아만다";$a[]="라켈";$a[]="신디";$a[]="도리스";$a[]="이브";$a[ ]="에비타";$a[]="수니바";$a[]="받는 사람 ve";$a[]="우니";$a[]="바이올렛";$a[]="리자";$a[]="엘리자베스";$a[]="엘렌";$a []="웬체";$a[]="비키";//get URL$q=$_GET["q"]의 q 매개변수;//q의 길이가 0인 경우 배열에서 모든 힌트를 찾습니다.if (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] } } }}// 출력을 "no"로 설정 힌트가 없는 경우 제안"// 또는 올바른 값으로 설정if ($hint == ""){ $response="제안 없음";}else{ $response=$hint;}//응답 에코 출력 $응답;?>