네트워크 : Ajax

Ajax

* Asynchronous JavaScript and XML의 약자다

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

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

* JavaScript를 이용해 웹 서버와 웹 브라우저가 내부적으로 통신하게 된다.

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

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

* 반드시 비동기적으로 동작해야 한다.

XMLHttpRequest ( 실습에 서버 필요)

* 마이크로소프트가 만든 JavaScript의 객체로 HTTP를 통해 쉽게 데이터를 수신할 수 있게 해준다.

• 기본 사용

var req = new XMLHttpRequest();       
req.open('GET / POST', 'URL', false);
요청을 보낸다;

- var req = new XMLHttpRequest();    개체의 인스턴스를 생성한다. = XMLHttpRequest의 객체를 생성한다.

- req.open('GET', ' URL', false);           첫번째 인자로 GET/POST 방식, 두번째 인자로 접솔 할 서버 쪽의 리소스 

- req.send(null) ... dump(req.responseText);    요청을 한 후 동기적으로 동작, 동기적 동작은 UI가 멈추므로 사용하지 않는다.

• 기본 사용 - 비동기

var req = new XMLHttpRequest();
req.open('GET / POST', 'URL', true);
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      dump(req.responseText);
     else
      dump("Error loading page\n");
  }
};
req.send(null);

- re.onreadystatechange ,,, req.send(null);        비동기적 사용. 데이터가 오면 콜백을 받게되고, 브라우저가 요청한 내용을 처리하는 

동안에도 평상시처럼 계속 동작하게 된다.

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

- readyState는 통신의 현재 상태를 알려준다. 4이면 통신이 완료되었음 을 의미한다.

- state는 HTTP 통신의 결과를 의미하여 200은 통신이 성공했음을 의미한다.

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

• 예제 ( 현재시간을 페이지 리로딩 없이 가져오기)

<!-- time. php -->

<?php
date_default_timezone_set('UTC');    //타임존을 세계 표준시로
$d1 = new DateTime;    //DateTime 객체를 만든다.    
$d1->setTimezone(new DateTimezone("asia/seoul"));    //서울의 현재 시간
echo $d1->format('H:i:s');    // 출력 형식
?>
<!-- demoTime.html -->

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

- 비동기로 통신하여 id가 time인 엘리먼트의 자식으로 삽입한다. 

- date_default_timezone_set('표준시');   UTC 세계 표준시, KST 한국 표준시 등

• 결과    ( 페이지 전체의 리로딩 없이 통신)

• 예제 ( POST 방식, 서버로 데이터 전송을 추가하여 서울과 미국 시간 전송)

<!-- time2.php-->


<?php
date_default_timezone_set('UTC');
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($_POST['timezone']));    //서버로 전송받음 timezone 값
echo $d1->format($_POST['format']);    // 서버로 전송받음 format 값
?>


<!-- demoTime2.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');	// POST 방식 사용
    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> 

- Content-Type    :    요청에 실어보내는 데이터 타입의 정보를 표현한다. text, file, Application 타입이 있다.

- application/x-www-form-urlencode     :    Application 타입으로 key-value&key=value 형태로 전송한다.

• 결과