[jQuery] ajax란?

ajax란?

• Asynchronous JavaScript and XML 약자
• 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식.
• 꼭 xml을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.

 

$.ajax(settings) 으로 사용한다.

data : 서버에 전송할 데이터, key/value 형식의 객체
dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)
type : 서버로 전송하는 데이터의 타입 (POST, GET)
url : 데이터를 전송할 URL
success : ajax통신에 성공했을 때 호출될 이벤트 핸들러

 

- 예제

<div id="result"></div>
<input type="text" id="msg" />
<input type="button" value="get result" id="getResult" />

<script>
    $('#getResult').click( function() {
    	$('#result').html('');
        $.ajax({
            url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',
            dataType:'json',
            type:'POST',
            data:{'msg':$('#msg').val()},
            success:function(result){
            	if(result['result']==true){
            		$('#result').html(result['msg']);
        	}
            }
        });
    })
</script>

data에 담긴 POST 형식의 데이터를 url로 전달하고, json 타입으로 리턴받는다.
통신에 성공했을 시 반환 받은 json 데이터를 result에 저장하고,

result 배열의 result 값이 true 일 경우 // result['result']==true
id가 result인 엘리먼트의 인자로 result 배열의 msg 값을 넣어준다. // $('#result').html(result['msg']);