PHP와 AJAX 요청

AJAX 요청

아래 AJAX 예제에서, 사용자가 웹 양식에 데이터를 입력할 때 웹 페이지가 온라인 웹 서버와 어떻게 통신하는지 보여줍니다.

아래 텍스트 박스에 이름을 입력하세요：

추천:

이 예제는 세 페이지를 포함하고 있습니다：

  • 간단한 HTML 양식
  • JavaScript 코드
  • PHP 페이지

HTML 양식

이는 HTML 양식입니다. 이는 간단한 HTML 양식과 JavaScript에 대한 링크를 포함하고 있습니다：

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>추천: <span id="txtHint"></span></p>
</body>
</html>

예제 설명 - HTML 양식

그렇게 보면, 위의 HTML 페이지에는 "txt1"라는 이름의 입력 필드가 있는 간단한 HTML 양식이 포함되어 있습니다.

이 양식은 이렇게 작동합니다：

  1. 사용자가 입력 필드에서 키를 누르고 떼 때, 이벤트가 발생합니다
  2. 이 이벤트가 발생할 때, showHint()라는 이름의 함수가 실행됩니다
  3. 양식 아래에 "txtHint"라는 이름의 <span>가 있습니다. 이는 showHint() 함수가 반환하는 데이터의 대체 텍스트로 사용됩니다.

JavaScript

JavaScript 코드가 "clienthint.js" 파일에 저장되어 있으며, 이는 HTML 문서에 링크되어 있습니다：

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return;
  }
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null)
  {
  alert("브라우저는 HTTP 요청을 지원하지 않습니다");
  return;
  } 
var url = "gethint.php";
url = url + "?q=" + str;
url = url + "&sid=" + Math.random();
xmlHttp.onreadystatechange = stateChanged; 
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
} 
function stateChanged() 
{ 
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
 { 
 document.getElementById("txtHint").innerHTML = xmlHttp.responseText; 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp = null;
try
 {
 // 파이어폭스, 오퍼라 8.0+, 사파리
 xmlHttp = new XMLHttpRequest();
 }
catch (e)
 {
 // 인터넷 익스플로러
 try
  {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

예시 설명:

showHint() 함수

입력 필드에 한 문자를 입력할 때마다 이 함수가 한 번씩 실행됩니다

텍스트 박스에 내용이 있을 경우 (str.length > 0), 이 함수는 다음과 같이 실행됩니다:

  1. 서버로 보내야 할 URL (파일 이름)을 정의합니다
  2. 입력 필드 내용을 포함한 파라미터 (q)를 이 URL에 추가합니다
  3. 서버가 캐시 파일을 사용하지 않도록 랜덤 수를 추가합니다
  4. GetXmlHttpObject 함수를 호출하여 XMLHTTP 객체를 생성하고, 이벤트가 발생할 때 "stateChanged"라는 함수를 실행하도록 알립니다
  5. 주어진 URL을 사용하여 이 XMLHTTP 객체를 열어주세요
  6. 서버에 HTTP 요청을 보냅니다

입력 필드가 비어 있으면 함수는 단순히 txtHint 대체 문자의 내용을 비웁니다。

stateChanged() 함수

XMLHTTP 객체의 상태가 변경될 때마다 이 함수를 실행합니다。

상태가 4(또는 "complete")가 되면, txtHint 대체 문자 txtHint의 내용으로 응답 텍스트를 채웁니다。

GetXmlHttpObject() 함수

AJAX 애플리케이션은 XML을 완벽히 지원하는 웹 브라우저에서만 실행될 수 있습니다。

위 코드는 GetXmlHttpObject() 함수를 호출합니다。

이 함수의 역할은 다른 브라우저에서 다른 XMLHTTP 객체를 생성하는 문제를 해결합니다。

이 점은 이전 장에서 설명했습니다。

PHP 페이지

JavaScript 코드가 호출하는 서버 페이지는 "gethint.php"라는 간단한 서버 페이지입니다。

"gethint.php" 의 코드는 이름 배열을 확인하고 클라이언트에게 해당 이름을 반환합니다：

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of 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 suggestion"으로 출력 설정
//정확한 값을 설정하거나
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//response 출력
echo $response;
?>

JavaScript에서 전달된 텍스트가 있으면 (strlen($q) > 0) then:

  1. JavaScript에서 전달된 문자와 일치하는 이름을 찾다
  2. 여러 이름을 찾으면, 모든 이름을 response 문자열에 포함하다
  3. 일치하는 이름을 찾지 못하면, response를 "no suggestion"으로 설정하다
  4. 이름을 하나나 여러 개 찾으면, response를 이 이름으로 설정하다
  5. response를 "txtHint" 대체자로 보내기