비동기 ajax

1. 동기, 비동기란

1) 동기적 통신(synchronous) 

순차적으로 통신

작업은 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기

2) 비동기적(asynchronous) 

순차적으로 통신하지 않어 좀 더 유연하게 통신

작업이 종료되지 않은 상태라도 대기하지 않고 다음 작업을 실행

2. Ajax

(Asynchronous Javascript And XML)

비동기적으로 웹페이지에서 일부 정보가 달라졌을때 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술

3. JSON

(JavaScript Object Notation)

JavaScript에서 객체를 만들 때 사용하는 표현식을 의미, 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작음

#Ajax 요청에 대한 서버의 응답은 주로 'JSON' 사용

1) JSON 메소드

JSON.parse()

인자로 전달된 문사열을 자바스크립트의 데이터로 변환

JSON.stringify()

인자로 전달된 자바스크립트의 데이터를 문자열로 변환

4. Ajax와 jQuery

jQuery는 Ajax 요청과 응답을 위해 유용한 메소드들을 제공

1) jQuery Ajax 문법

$.ajax( "url" [, settings ] )

$.ajax( [settings ] )

url - 데이터의 url

setting - Ajax 통신을 위한 옵션을 담고 있는 객체

#주요한 옵션

url - 데이터의 url

data - 서버로 데이터를 전송할 때 이 옵션을 사용

dataType - 서버 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정

success - 성공했을 때 호출할 콜백 함수

type - 데이터를 전송하는 방법을 지정

2) 예시

<script>

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

$.ajax({

url:'./test.php',

type:'post',

data:$('form').serialize(),

success:function(data){

$('#test').text(data);

}

})

})

</script>