[Js]네트워크 통신 | Ajax

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

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#

웹브라우저 Javascript (자바스크립트) - 인프런

---

네트워크 통신

서버와 클라이언트 간의 데이터를 주고 받는 형식으로서 JSON과 페이지 리로드 없이 웹페이지의 내용을 변경할 수 있는 Ajax는 웹에플리케이션을 구축하는데 중요한 내용이기 때문에 주의해서 학습해야 한다.

 

Ajax

웹브라우저는 대단히 정적인 시스템이었다. 내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 했다. 이것은 웹이 전자 문서를 염두에 두고 고안된 시스템이기 때문에 당연하게 생각 되었다.

그러다 Ajax 개념이 도입되면서 모든 것이 바뀌었다. Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다. 

Ajax는 Asynchronous JavaScript and XML의 약자다. 한국어로는 비동기적 자바스크립트와 XML 정도로 직역할 수 있는데 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다. 이 때 사용하는 API가 XMLHttpRequest이다. 그렇다고 꼭 XML을 사용해서 통신해야 하는 것은 아니다. 사실 XML 보다는 JSON을 더 많이 사용한다.

 

IE5,6 에서는 XMLHttpRequest 객체 대신 ActiveXObject("Msxml2.XMLHTTP.6.0")을 사용해야 한다. 여기서는 다루지 않는다.

---

예전 웹브라우저는 정적인 시스템이라서, 내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 했다.

웹이 전자 문서를 염두해두고 고안된 시스템이기 때문이다.

 

Ajax 개념이 도입되면서 모든 것이 바뀌었다.

Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다.

그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영하여, 웹페이지에서 로딩 없이 서비스를 사용할 수 있게 한다. 

---

 Ajax 

Ajax는 Asynchronous JavaScript and XML의 약자다.

한국어로는 비동기적 자바스크립트와 XML 정도로 직역할 수 있는데, 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다.

※ 참고 - 비동기적 : 어떠한 프로그램이 로딩되고 있을 때 다른일을 할 수 있는 것을 의미한다. - 동기적 : 어떠한 프로그램이 로딩되고 있을 때 다른 일을 하지 못하는 것을 의미한다.

---

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

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

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

---

 XMLHttpRequest 

예제를 통해서 알아보자. ( 해당 예제는 서버 환경이 구축되어있어야 실행이 가능하다. )

---

time.php

아래 코드는 현재 시간을 출력한다.

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

---

demo1.html

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'); //open하고 send해야된다. GET방식
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                document.querySelector('#time').innerHTML = xhr.responseText;
            }
        }
        xhr.send(); 
    }); 
</script> 

---

코드를 분석해보자.

1. XMLHttpRequest 객체를 생성하는 코드이다.

var xhr = new XMLHttpRequest();

2. 접속하려는 대상을 지정한다.

첫번째 인자는 form 태그의 method에 대응하는 것으로 GET/POST 방식을 주로 사용한다.

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

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

3. 현재 서버에서 가져온 현재시간을 페이지 리로딩 없이 가져올 수 있다.

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

 

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

4는 모든 통신이 완료되었음을 의미하며, status는 HTTP 통신의 결과를 의미하는데 200은 통신이 성공했음을 의미한다.

 

responseText 프로퍼티는 서버에서 전송한 데이터를 담고 있다. 이것을 id가 time 엘리먼트의 하위로 삽입한다.

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

---

 POST 방식 

time2.php

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

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

 

demo2.html

아래 예제는 시간대와 시간의 출력 형식을 지정하는 예제다. 

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

---

소스코드를 살펴보자.

 

데이터 전송방법을 GET에서 POST로 변경하였다. 

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

 

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

이렇게 하면, 서버는 전송하는 정보가 html에 form을 통해서 전송한 정보로 인식된다.

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

 

서버로 전송할 데이터를 형식에 맞게 만든다. 이름=값&이름=값... 의 형식을 지켜야 한다. 

즉, 예를 들어 timezone=Asia/Seoul & format = Y-m-d와 같이 형식을 지켜야 한다.

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

 

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

xhr.send(data);