AJAX

참고 : https://opentutorials.org/course/1375/6842

[목표]

 자바스크립트를 이용해서 웹브라우저의 통신기능을 사용하는 방법을 알아보자.

 그 중 AJAX의 특징이자 장점은

 -서버와 클라이언트간의 데이터를 주고 받는 형식이다

 - JSON과 페이지 리로드 없이 웹페이지의 내용을 변경할수 있다

 - 웹애플리케이션을 구축하는데 중요하다.

Ajax는 Asynchronous JavaScript and XML의 약자

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

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

현재 상태를 확인하는 xmlhttpRegqeust 객체의 이벤트핸들러: onreadystatechange()

이걸 이용해서 서버쪽을 몰라도, ajax를 이용하여 동적으로 브라우저를 제어할수 있다.

그렇다고 꼭 XML을 사용해서 통신해야 하는 것은 아니다. 

사실 XML 보다는 JSON을 더 많이 사용한다.

[JSON을 사용하는 이유]

=JSON(JavaScript Object Notation)의 약자로 JavaScript에서 객체를 만들 때 사용하는 표현식을 의미한다. 

이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다. 

이런 이유로 최근에는 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송등에 많이 사용된다. 

[jQuery Ajax]

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

[ajax를 이용해서 json을 처리하는 방법]

php에서의 데이터를 json으로 encode해서 html에 출력해본다.

예>POST방식 

<script>

$('#execute').click(function(){

$.ajax({

url:'./time2.php',

type:'post',

data:$('form').serialize(), # Form element안에 내용을 이름=값 형태로 변환한다.

success:function(data){

$('#time').text(data); #time이라는 id를 가진 element 에 inline

}

})

})

</script>

xmlhttpRequest의 객체를 이용하여 데이터를 전송할때

서버로 전송하는 데이터는 이름=값&이름=값...의 형식을 지켜야 한다

따라서 그때는 아래와 같이 코드를 작성해야 했는데,
data += 'timezone='+document.getElementById('timezone').value;
data += '&format='+document.getElementById('format').value;
jquery의 ajax를 사용함으로써 
serialize() 를 이용하면 자동으로 이름=값 의 형태로 변환해주니까,
data: $('form').serialize()
의 형태로 코드가 간결해지기 때문에 편리하지 않는가 싶다.