GET 요청 방식에 의한 Ajax 프로그램 작성하기

Ajax 를 이용한 프로그램을 작성한다. 프로그램은 문자열을 입력받아 문자의 개수를 알려준다.

프로그램은 count.html 파일과 count.php 파일로 구성된다.

아래와 같이 count.html 파일을 작성한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax GET 요청</title>
<script>
// 자바스크립트 코드가 삽입되는 부분
</script>
</head>
<body>
<div id="response">응답 메시지</div>
<button type="button" onclick="countCharacters()">문자수 세기</button>
</body>
</html>

countCharacters() 함수를 작성하자.

함수 정의를 시작한다.

function countCharacters() {

XMLHttpRequest 객체를 생성한다.

var xmlhttp = new XMLHttpRequest();

xmlhttp 객체의 인스턴스를 생성한다. count.php 파일에 xtmci 라는 문자열을 전달한다. 전달할 때 string 이라는 이름을 사용한다.

xmlhttp.open(“GET”, “count.php?string=xtmci”);

readystatechange 이벤트의 이벤트 리스너를 정의한다.

xmlhttp.onreadystatechange = function () {
  // 요청이 완료되었는지 확인한다.
  // 요청이 성공적인지 확인한다.
  if (this.readystate == 4 && this.status == 200) {
    // 서버로부터의 응답 메시지를 HTML 엘리먼트에 삽입한다.
    document.getElementById("response").innerHTML = this.responseText;
  }
};

요청을 서버로 보낸다.

xmlhttp.send();

함수 정의를 마친다.

}

이상의 내용을 연결하면 다음과 같다.

function countCharacters() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "count.php?string=xtmci");
  xmlhttp.onreadystatechange = function () {
    if (this.readystate == 4 && this.status == 200) {
      document.getElementById("response").innerHTML = this.responseText;
    }
  };
  xmlhttp.send();
}

이 함수를 <script> 태그 안에 포함시킨다.

count.php 파일은 count.html 파일로부터 GET 요청을 받아 처리하는 파일이다.

아래와 같이 count.php 파일을 작성한다.

<?php
if (isset($_GET['string'])) {
  $string = trim($_GET['string']);
  // 문자열의 문자 개수를 구해 변수에 저장한다.
  $count = strlen($string);
  // 응답 메시지를 웹브라우저에게 보낸다.
  echo $string . " 의 문자 개수: " . $count . " 개";
} else {
  // $_GET['string'] 변수가 세팅되어 있지 않으므로 처리할 수 없다.
  echo "처리 불가";
}
?>

count.html 파일과 count.php 파일을 웹서버에 저장한다. 두 파일을 같은 디렉토리에 저장해야 한다.

웹브라우저로 count.html 파일을 읽어들인다. ‘문자수 세기’ 버튼을 눌러서 GET 요청이 제대로 처리되는지 확인해 보자.

One reply on “GET 요청 방식에 의한 Ajax 프로그램 작성하기”

Leave a Reply Cancel reply