본문 바로가기
PHP/PHP and AJAX

PHP AJAX 구문

by 진격의 파파 2013. 7. 18.
반응형

 

 

AJAX 의 기본적인 정의는 비동기식 즉, 웹페이지에 어떤 내용을 보여줄때 리로딩(새로고침) 되는것을 동기식이라고 하며 리로딩없이 페이지내에서 서버의 데이터를 가져오거나 보여줄때 비동기식이라고 하는데 AJAX 는 그러한 비동기적 방법을 구현 가능케 해줍니다. 

 

우선 예제를 보면서 설명하겠습니다. 아래 나오는 소스의 내용은 이름중에 성만 입력하면 그에 해당하는 이름 리스트를 가져옵니다.

첫번째 파일은 form 구문이며, 두번째 파일은 ajax 관련 파일입니다. 페이지의 리로딩이나 새로고침 없이 두개의 페이지가 서로 연동되는것을 확인할 수 있습니다.

------ ajax_form.php ------

<html>
 <head>
 <script>
 function showHint(str)
 {
 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","ajax.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>

 

 

------ ajax.php ------

<?php
 // 배열(array)에 값을 담습니다.
 $a[]="김태희";
 $a[]="김희선";
 $a[]="김혜수";
 $a[]="고현정";
 $a[]="구혜선";
 $a[]="공효진";
 $a[]="김남주";
 $a[]="민효린";
 $a[]="송지효";
 $a[]="손예진";
 $a[]="송혜교";
 $a[]="서우";
 $a[]="엄지원";
 $a[]="이나영";
 $a[]="오윤아";
 $a[]="임수정";
 $a[]="전지현";
 $a[]="조여정";
 $a[]="이효리";
 $a[]="최여진";
 $a[]="이연아";
 $a[]="남상미";
 $a[]="손연재";
 $a[]="한효주";
 $a[]="수지";
 $a[]="박한별";
 $a[]="박수미";
 $a[]="고준희";
 $a[]="박하선";
 $a[]="아이유";

 //get the q parameter from URL
 $q=$_GET["q"]; // ajax_form.php 에서 '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;
   }

 // 값을 출력함
 echo iconv("euc-kr","utf-8",$response);  // 한글이 깨져서 euc-kr로 값을 변환함
 ?>

// 두 개의 파일이 같은 폴더내 위치해 있다고 가정하고 테스트 하면 아래와 같이 성씨만 입력하면 해당되는 사람들의 이름이 나타납니다

// 구글이나 네이버 검색할때 많이 검색된 단어 위주로 미리 검색창에 보여지는데 그러한 기능과 유사한 기능이라 보면 되겠습니다.

 

AJAX는 이처럼 서로다른 몇개의 페이지와 실시간 연동이 가능하고, 리로딩없이 구현되기 때문에 방문자들에게 아주 좋은 기능들을 제공할 수 있습니다.

반응형

'PHP > PHP and AJAX ' 카테고리의 다른 글

PHP AJAX RSS Reader 구문  (0) 2013.07.24
PHP AJAX Live Search 구문  (0) 2013.07.23
PHP AJAX XML 연동  (0) 2013.07.22
PHP AJAX 데이터베이스 연동  (9) 2013.07.19