기타/웹 2.02014. 6. 26. 16:24

이제 PHP 투토리얼 시리즈 마지막입니다. AJAX네요. 어차피 클라이언트와 데이터를 주고 받으려면 AJAX를 제일 많이 쓰지 않을까... 하는 생각이 듭니다. 써봐야 알겠지만요.


AJAX의 개념


  • Asynchronous Javascript and XML
  • 빠르고 동적인 웹페이지를 만드는 기술
  • 서버간에 작은 데이터만 교환하면서 웹페이지가 비동기적으로 갱신되도록. 즉, 화면의 일부만 갱신 가능
  • GoogleMaps, Gmail, Youtube 등이 모두 AJAX 활용
  • AJAX는 인터넷 표준에 기초함
    • XMLHttpRequest (데이터를 비동기적으로 서버와 주고 받음)
    • Javascript/DOM (정보의 표현)
    • CSS (데이터 스타일)
    • XML (데이터 전달 포맷)
<html>
<head>
<script>
function showHint(str) {        // key를 하나씩 누를때마다 실행됨
  if (str.length==0) { 
    document.getElementById("txtHint").innerHTML="";    //공백일 경우, 힌트도 공백으로
    return;
  }
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {        // 상태가 변할때 실행될 함수를 등록
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","gethint.php?q="+str,true);    // GET 모드로 호출
  xmlhttp.send();
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form> 
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>


AJAX 와 MySQL


  • AJAX를 사용하여 데이터베이스와 대화식으로 통신
  • html 파일

<html>

<head>

<script>

function showUser(str) {        // user를 선택했을 때 실행되는 함수

  if (str=="") {

    document.getElementById("txtHint").innerHTML="";

    return;

  } 

  xmlhttp=new XMLHttpRequest();

  xmlhttp.onreadystatechange=function() {      // 상태변경시 실행되는 함수 등록

    if (xmlhttp.readyState==4 && xmlhttp.status==200) {

      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

    }

  }

  xmlhttp.open("GET","getuser.php?q="+str,true);  // GET 모드로 호출

  xmlhttp.send();

}

</script>

</head>

<body>


<form>

<select name="users" onchange="showUser(this.value)">      // 폼 요소 생성. 

<option value="">Select a person:</option>

<option value="1">Peter Griffin</option>

<option value="2">Lois Griffin</option>

<option value="3">Joseph Swanson</option>

<option value="4">Glenn Quagmire</option>

<option value="5">민 허</option>

</select>

</form>

<br>

<div id="txtHint"><b>Person info will be listed here.</b></div>    // 여기에 표시됨.


</body>

</html>

  • PHP 파일

<?php

$q = intval($_GET['q']);        // integer 로 받음.


$con = mysqli_connect('localhost','id','password','db_name');  // 데이터베이스 연결

if (!$con) {

  die('Could not connect: ' . mysqli_error($con));

}


mysqli_select_db($con,"Persons");        // 테이블 선택    

$sql="SELECT * FROM user WHERE id = '".$q."'";        // id 를 기준으로 선택 (1...5)

$result = mysqli_query($con,$sql);        // query 결과는 $result


echo "<table border='1'>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

<th>Hometown</th>

<th>Job</th>

</tr>";


while($row = mysqli_fetch_array($result)) {        // $result 를 배열로 변환

  echo "<tr>";

  echo "<td>" . $row['FirstName'] . "</td>";

  echo "<td>" . $row['LastName'] . "</td>";

  echo "<td>" . $row['Age'] . "</td>";

  echo "<td>" . $row['Hometown'] . "</td>";

  echo "<td>" . $row['Job'] . "</td>";

  echo "</tr>";

}

echo "</table>";


mysqli_close($con);

?>


AJAX XML


  • form에서는 거의 동일함. PHP에서 XML을 처리하는 방법만 차이남
  • XML을 직접 처리하는 방법은 많이 까다로워서... 생략
  • 차라리 XML 그 자체를 반환한 후, 클라이언트 쪽에서 JQuery로 처리하는 게 나을 듯


AJAX Live Search


  • 실시간으로 XML에서 검색하여 존재하는 것을 모두 보여주는 방식
  • 키보드를 누를때마다 계속해서 검색 결과가 바뀜





















Posted by 푸른하늘 푸른하늘이

댓글을 달아 주세요