JavaScript – Page 2

Ajax 를 이용한 프로그램을 작성해 보자. 이 프로그램은 서버에 POST 방식의 요청을 한다. 서버에 문자열을 전송한다. 서버의 PHP 스크립트는 문자열의 길이를 계산하여 웹브라우저로 보낸다.

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

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

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

countCharacters() 함수를 작성하자.

함수 정의를 시작한다.

function countCharacters() {

XMLHttpRequest 객체를 생성한다.

var xmlhttp = new XMLHttpRequest();

xmlhttp 객체의 인스턴스를 생성한다. POST 방식으로 요청한다. count.php 는 요청을 처리하는 서버 스크립트 파일이다.

xmlhttp.open(“POST”, “count.php”);

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

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

폼 데이터를 변수에 저장한다.

var userForm = document.getElementById(“userForm”);

var userData = new FormData(userForm);

요청을 서버로 보낸다.

xmlhttp.send(userData);

함수 정의를 마친다.

}

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

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

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

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

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

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

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

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

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

<!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>

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

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