Javascript 네트워크 통신 - Ajax

 

네트워크 통신

 

 

자바스크립트를 이용해서 웹브라우저의 통신 기능을 사용하는 방법인 서버와 클라이언트 간의 데이터를 주고 받는 형식으로서 예를 들자면 JSON과 페이지 리로드 없이 웹페이지의 내용을 변경할 수 있는 Ajax는 웹에플리케이션을 구축하는데 중요하다.

 

 

 

 

Ajax

 

• Ajax는 Asynchronous JavaScript and XML의 약자다.
• Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다. 
•  자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다. 이 때 사용하는 API가 XMLHttpRequest이다. 그렇다고 꼭 XML을 사용해서 통신해야 하는 것은 아니다. 사실 XML 보다는 JSON을 더 많이 사용한다.

 

 

 

 

 

XMLHttpRequest

 

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

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

 

 

 

 

 

 

아래 코드는 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> 

↓

코드분석

 

• 위의 코드에서 var xhr = new XMLHttpRequest();는 객체를 생성한다.
• xhr.open('GET', './time.php');는 접속하려는 대상을 지정한다.  첫번째 인자는 form 태그의 method에 대응하는 것으로 GET/POST 방식을 주로 사용한다. 두번째 인자는 접속하고자 하는 서버쪽 리소스의 주소로 form 태그의 action에 해당한다. 
• onreadystatechange 이벤트는 서버와의 통신이 끝났을 때 호출되는 이벤트이다.
• readyState는 통신의 현재 상태를 알려준다.
• 4는 통신이 완료되었음을 의미한다.
• status는 HTTP 통신의 결과를 의미하는데 200은 통신이 성공했음을 의미한다. 
• responseText 프로퍼티는 서버에서 전송한 데이터를 담고 있다. 이것을 id가 time 엘리먼트의 하위로 삽입한다. 

 

 

 

 

 

 

 

 

 

 

 

POST 방식

 

 

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

<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)을 지정했다. 
• xhr.send(data);는 send 메소드의 인자로 전송할 데이터를 전달한다.

 

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

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

 

 

 

 

 

 

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

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

 

 

 

 

jQuery Ajax

 

 

jQuery이용해서 Ajax를 사용하게 되면 많은 이점이 있는데 그 중의 하나가 크로스브라우징의 문제를 jQuery가 알아서 해결해준다는 것이다. 뿐만 아니라 여러가지 편리한 기능들을 제공한다. 

 

 

 

jQuery는 Ajax와 관련해서 많은 API를 제공한다. 그 중에서 가장 중요한 API는 $.ajax이다.

 

아래는 API 제공하는 사이트 주소

http://api.jquery.com/category/ajax/

Ajax | jQuery API Documentation

 

 

 

 

 

 

$.ajax

 

$.ajax의 문법은 아래와 같다.

	jQuery.ajax( [settings ] )

 

setting는 Ajax 통신을 위한 옵션을 담고 있는 객체가 들어간다. 주요한 옵션을 열거해보면 아래와 같다.

 

• data : 서버로 데이터를 전송할 때 이 옵션을 사용한다. 
• dataType : 서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html이다. 형식을 지정하지 않으면 jQuery가 알아서 판단한다.
• success : 성공했을 때 호출할 콜백을 지정한다.
  Function( PlainObject data, String textStatus, jqXHR jqXHR )
• type : 데이터를 전송하는 방법을 지정한다. get, post를 사용할 수 있다.

 

 

 

 

 

XMLHttpRequest대신 사용한 $.ajax 코드

 

<p>time : <span id="time"></span></p>
<input type="button" id="execute" value="execute" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#execute').click(function(){
        $.ajax({
            url:'./time.php',
            success:function(data){
                $('#time').append(data);
            }
        })
    })
</script>

코드가 훨씬 간결해진 것을 확인 할 수 있다.

 

 

 

 

 

 

POST 방식

<p>time : <span id="time"></span></p>
<form>
    <select name="timezone">
        <option value="Asia/Seoul">asia/seoul</option>
        <option value="America/New_York">America/New_York</option>
    </select>
    <select name="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>
</form>
<input type="button" id="execute" value="execute" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#execute').click(function(){
        $.ajax({
            url:'./time2.php',
            type:'post',
            data:$('form').serialize(),
            success:function(data){
                $('#time').text(data);
            }
        })
    })
</script>

• 위의 코드 중 data:$('form').serialize(),는 form 태그의 정보를 값의이름=값의내용&값 의 형식으로 바꿔준다.
• type : 'post'는 데이터 전송 방법을 post 형식으로 바꾼다.