1. ajax란?
Asynchronous Javascript And Xml의 약자로 js와 xml을 이용하여 비동기식으로 서버와 통신하는 방식입니다. json을 더 많이 이용합니다.
2. $.ajax(settigs)
ajax를 이용하려면 $.ajax API를 이용합니다. settings는 object 타입인 파라미터 입니다.
- 주요속성
- data: 서버에 전송할 데이터, key/vlaue 형식의 객체
- dataType : 서버가 return하는 데이터 타입 (json, xml…)
- type : 서버로 전송하는 데이터의 타입(POST, GET)
- url : 데이터를 전송할 URL
- success : ajax통신에 성공했을 떄 호출될 이벤트 핸들러
3. 예제
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<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()}, <!-- msg는 객체의 이름이고, id값이 msg인 elements의 value값을 가져와 key/value 객체로 세팅 -->
success:function(result){
if(result['result']==true){
$('#result').html(result['msg']);
}
}
});
})
</script>
</body>
</html>
id가 result인 elements에 서버에서 전달한 결과가 삽입이 됩니다. text필드의 id는 msg이고, button의 id는 getResult입니다.
button에 이벤트를 달아주고 결과를 출력해주는 html()으로 공백을 전달했습니다. 이는 결과값을 지워준다는 의미입니다. js에서 {}는 key/value로 이루어진 객체를 의미합니다.
댓글남기기