[ JavaScript ] JS Ajax XMLHttpRequest 사용

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

---

 

 

- Ajax

 

웹브라우저 초기에는 정적인 시스템이었습니다.

 

내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 하는 필요가 느껴졌습니다.

웹이 전자 문서를 염두에 두고 고안된 시스템이기 때문에 당연하게 생각 되었습니다.

 

 

그때 Ajax 개념이 도입이 되었습니다.

Ajax는 Asynchronous JavaScript and XML의 약자입니다.

한국어로는 비동기적 자바스크립트와 XML 정도로 직역할 수 있습니다.

자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미합니다.

 

Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 할 수 있게 해줍니다.

그리고 변경된 결과를 웹페이지에 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 해줍니다.

 

이 때 사용하는 API가 XMLHttpRequest입니다.

 

그렇다고 꼭 XML을 사용해서 통신해야 하는 것은 아니고, JSON을 더 많이 사용한다고합니다.

 

 

 

 

 

IE5,6 에서는 XMLHttpRequest 객체 대신 ActiveXObject("Msxml2.XMLHTTP.6.0")을 사용해야 합니다.

 

 

 

- XMLHttpRequest GET 

 

ajax 실습을 하기 위해서는 통신할 서버가 필요하기 때문에 php를 조금 사용하겠습니다.

<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone("asia/seoul"));
echo $d1->format('H:i:s');
?>

time.php

 

time.php는 현재 시간을 가져와주는 코드입니다.

 

 

 

 

 

 

 

<p>time : <span id="time"></span></p>
<input type="button" id="execute" value="execute" />
<script>
document.querySelector('input').addEventListener('click', function(event){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', './time.php');
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            document.querySelector('#time').innerHTML = xhr.responseText;
        }
    }
    xhr.send(); 
}); 
</script> 

test.php

 

test.php 파일은  time.php 에 접속하여 현재시간을 서버로부터 받아와 출력해주는 코드입니다.

 

 

 

 

코드의 설명은 아래와 같습니다.

 

var xhr = new XMLHttpRequest();

 

위 코드로 인해 XMLHttpRequest 객체가 생성됩니다.

 

 

 

xhr.open('GET', './time.php');

 

open 을 이용해 접속하려는 대상을 지정합니다.

 

첫번째 인자는 form 태그의 method 와 비슷하게 GET/POST 방식을 주로 사용합니다.

 

두번째 인자는 접속하고자 하는 서버쪽 리소스의 주소로 form 태그의 action 에 해당합니다.

 

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        document.querySelector('#time').innerHTML = xhr.responseText;
    }
}

 

onreadystatechange 이벤트는 서버와의 통신이 끝났을 때 호출되는 이벤트입니다.

 

readyState는 통신의 현재 상태를 알려줍니다.

이것은  4는 통신이 완료되었음을 의미합니다.

 

status는 HTTP 통신의 결과를 의미하는데 상태코드 "200"은 통신 성공을 의미합니다.

 

responseText 프로퍼티는 서버에서 전송한 데이터를 담고 있습니다.

 

이것을 id가 time 엘리먼트의 하위로 삽입합니다.

 

이를 통해서 현재 서버에서 가져온 현재시간을 페이지 리로딩 없이 가져올 수 있습니다.

그러면 execute 라는 버튼을 누를때마다 time.php에서 현재시간을 가져와 출력됩니다.

 

- XMLHttpRequest (POST 방식)

 

<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($_POST['timezone']));
echo $d1->format($_POST['format']);
?>

아래는 Ajax 를 이용해서 전송한 데이터를 받아 현재 시간을 출력해주는 서버쪽 구현입니다.

 

이제 중요한 부분을 살펴보도록 하겠습니다.

<p>time : <span id="time"></span></p>
<select id="timezone">
    <option value="Asia/Seoul">asia/seoul</option>
    <option value="America/New_York">America/New_York</option>
</select>
<select id="format">
    <option value="Y-m-d H:i:s">Y-m-d H:i:s</option>
    <option value="Y-m-d">Y-m-d</option>
</select>
<input type="button" id="execute" value="execute" />
<script>
document.querySelector('input').addEventListener('click', function(event){
    var xhr = new XMLHttpRequest();
    xhr.open('POST', './time2.php');
    xhr.onreadystatechange = function(){
        document.querySelector('#time').innerHTML = xhr.responseText;
    }
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var data = '';
    data += 'timezone='+document.getElementById('timezone').value;
    data += '&format='+document.getElementById('format').value;
    xhr.send(data); 
});
</script> 

 

 

 

xhr.open('POST', './time2.php');

 

데이터 전송방법을 GET에서 POST 로 변경했습니다.

 

 

 

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

 

 

서버로 전송할 데이터 타입의 형식(MIME) 을 지정해줍니다.

 

 

 

var data = '';
data += 'timezone='+document.getElementById('timezone').value;
data += '&format='+document.getElementById('format').value;

 

서버로 전송할 데이터를 형식에 맞추어 만듭니다.

 

유의할 점은, 이름=값&이름=값 ... 의 형태를 꼭 지켜야합니다.

 

 

xhr.send(data);

 

send 메소드의 인자로 전송할 데이터를 전달합니다.

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.