이제 PHP 투토리얼 시리즈 마지막입니다. AJAX네요. 어차피 클라이언트와 데이터를 주고 받으려면 AJAX를 제일 많이 쓰지 않을까... 하는 생각이 듭니다. 써봐야 알겠지만요.
AJAX의 개념
- Asynchronous Javascript and XML
- 빠르고 동적인 웹페이지를 만드는 기술
- 서버간에 작은 데이터만 교환하면서 웹페이지가 비동기적으로 갱신되도록. 즉, 화면의 일부만 갱신 가능
- GoogleMaps, Gmail, Youtube 등이 모두 AJAX 활용
- AJAX는 인터넷 표준에 기초함
- XMLHttpRequest (데이터를 비동기적으로 서버와 주고 받음)
- Javascript/DOM (정보의 표현)
- CSS (데이터 스타일)
- XML (데이터 전달 포맷)
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에서 검색하여 존재하는 것을 모두 보여주는 방식
- 키보드를 누를때마다 계속해서 검색 결과가 바뀜