AJAX PHP 예제

AJAX는 더 많은 상호작용성을 가진 애플리케이션을 생성하는 데 사용됩니다。

AJAX PHP 예제

아래 예제에서 사용자가 입력 필드에 문자를 입력할 때, 웹 페이지가 웹 서버와 어떻게 통신하는지 보여줍니다:

실례

아래 입력 필드에 알파벳 A-Z를 입력하십시오:

이름:

검색 제안:

예제 설명

위의 예제에서 사용자가 입력 필드에 문자를 입력할 때, "showHint()" 함수가 실행됩니다。

이 함수는 onkeyup 이벤트가 발생할 때 호출됩니다。

아래는 HTML 코드입니다：

실례

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.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 대체 텍스트의 내용을 비우고 함수를 종료합니다。

하지만, 입력 필드가 비어 있지 않으면 다음과 같이 합니다：

  • XMLHttpRequest 객체를 생성합니다
  • 서버가 응답이 준비되면 실행할 함수를 생성합니다
  • 서버에 있는 PHP 파일(gethint.php)로 요청을 보냅니다
  • gethint.php에 q 파라미터를 추가하세요
  • str 변수는 입력 필드의 내용을 저장합니다

PHP 파일 - "gethint.php"

이 PHP 파일은 이름 배열을 확인하고, 브라우저에 해당 이름을 반환합니다：

<?php
// 이름 배열
 $a[] = "Ava";
 $a[] = "Brielle";
 $a[] = "Caroline";
 $a[] = "Diana";
 $a[] = "Elise";
 $a[] = "Fiona";
 $a[] = "Grace";
 $a[] = "Hannah";
 $a[] = "Ileana";
 $a[] = "Jane";
 $a[] = "Kathryn";
 $a[] = "Laura";
 $a[] = "Millie";
 $a[] = "Nancy";
 $a[] = "Opal";
 $a[] = "Petty";
 $a[] = "Queenie";
 $a[] = "Rose";
 $a[] = "Shirley";
 $a[] = "Tiffany";
 $a[] = "Ursula";
 $a[] = "Victoria";
 $a[] = "Wendy";
 $a[] = "Xenia";
 $a[] = "Yvette";
 $a[] = "Zoe";
 $a[] = "Angell";
 $a[] = "Adele";
 $a[] = "Beatty";
 $a[] = "Carlton";
 $a[] = "Elisabeth";
 $a[] = "Violet";
// URL에서 q 파라미터 가져오기
$q = $_REQUEST["q"];
$hint = "";
// 배열 내 모든 hint을 확인, $q가 ""와 같은지 확인
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            }
                $hint .= ", $name";
            }
         }
    }
}
// "no suggestion" 출력, hint을 찾지 못하거나 올바른 값을 출력
  echo $hint === "" ? "no suggestion" : $hint;
?>
c.html" -->