PHP 5 투토리얼 (6) - AJAX

기타/웹 2.0 2014.06.26 16:24 Posted by 드론쟁이 푸른하늘이

이제 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에서 검색하여 존재하는 것을 모두 보여주는 방식
  • 키보드를 누를때마다 계속해서 검색 결과가 바뀜





















댓글을 달아 주세요

BLOG main image
드론과 지도
드론이 세상을 바꾸고 있습니다.드론의 활용처가 계속 넓어지고 있고, 글로벌 기업들의 참여가 많아지고 있으며, 새로운 기술들이 속속 등장하고 있습니다. 하지만 우리나라의 드론 산업은 일부 기업을 제외하면 중국에서 생산된 드론을 가져다가 조립하는 수준이 대부분입니다. 드론은 하드웨어, 소프트웨어, 데이터처리가 복합된 기술입니다. 어떤 기술들을 어떻게 조합할지에 성패가 달렸죠. 5년뒤 10년뒤에 이 블로그엔 어떤 글이 적힐까요? 그것이 궁금합니다.
by 푸른하늘이
Profile for bluesky61

달력

«   2018/04   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          

카테고리

전체보기 (1576)
구글어스 (829)
공간정보 (221)
사진 (103)
드론/쿼드콥터 (239)
지오캐싱 (47)
기타 (136)
  • 4,377,645
  • 862811
TNM Media textcube get rss

드론과 지도

푸른하늘이's Blog is powered by Tistory. / Supported by TNM Media.
Copyright by 푸른하늘이 [ http://www.ringblog.com ]. All rights reserved.

Textcube TNM Media
푸른하늘이's Blog is powered by Tistory. Designed by Qwer999. Supported by TNM Media.