Ajax 기초
1. Ajax란?
- Asynchronous JavaScript and XML 의 약자
- 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다.
- 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.
- 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미.
2. 선행지식
- 폼
3. $.ajax(settings)
- jQuery를 이용한 ajax통신의 가장 기본적인 API
- 주요속성
data : 서버에 전송할 데이터, key/value 형식의 객체
dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)
type : 서버로 전송하는 데이터의 타입 (POST, GET)
url : 데이터를 전송할 URL
success : ajax통신에 성공했을 때 호출될 이벤트 핸들러
예제1-1. 웹페이지
<!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('');
// 사용자가 getResult 버튼을 눌렀을 때 텍스트 노드에 있는 결과값을 지워준다.
$.ajax({
url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',
dataType:'json',
// 서버가 리턴해주는 데이터 타입이 json이다.
type:'POST',
data:{'msg':$('#msg').val()},
// data 속성 내부에 또다른 {}가 있다. 중괄호 내부는 객체이다.
// data: 서버에 전송할 데이터로서 값은 key와 value로 이루어진 객체
success:function(result){
// 인자 result에는 서버에서 리턴해준 배열이 들어감
// 배열이 들어온 이유는 dataType속성을 JSON으로 했기 때문에 리턴되는 데이터가 텍스트더라도 내부적으로 그 데이터를 // JSON으로 해석하여 배열로 변환
// 그래서 배열에 있는 result값을 체크하면 result가 true라면 성공 이벤트 관련 로직을 출력한다.
// 서버와의 통신이 성공하면 호출되는 이벤트 핸들러인 function(result)
// result 인자에는 서버가 리턴해주는 데이터가 들어감
if(result['result']==true){
//result['result']는 연상 배열인가 확인하자
$('#result').html(result['msg']);
}
}
});
})
// 자바스크립트에서 중괄호는 객체를 의미 , $ajax{}도 마찬가지이다.
</script>
</body>
</html>
예제 1-2. 서버 쪽 로직
<?
echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));
?>
//json_encode메소드로 배열을 JSON 데이터 형식으로 php가 변경해줌
'WebFont-end > jQuery' 카테고리의 다른 글
| [jQuery] 문서 준비 이벤트 (0) | 2015.01.11 |
|---|---|
| [jQuery] Ajax 설정 (0) | 2015.01.11 |
| [jQuery] Chain (0) | 2014.12.07 |
| [jQuery] Animation (0) | 2014.12.07 |
| [jQuery] Effects (0) | 2014.12.07 |