티스토리 뷰

ajax 개념

ajax


jQuery이용해서 Ajax를 사용하게 되면 많은 이점이 있는데 그 중의 하나가 크로스브라우징의 문제를 jQuery가 알아서 해결해준다는 것이다. 뿐만 아니라 여러가지 편리한 기능들을 제공한다. 이번 시간에는 jQuery를 이용해서 Ajax 통신을 하는 법을 알아보자.

$.ajax의 문법은 아래와 같다.

1
jQuery.ajax( [settings ] )

setting는 Ajax 통신을 위한 옵션을 담고 있는 객체가 들어간다. 주요한 옵션을 열거해보면 아래와 같다.

  • data
    서버로 데이터를 전송할 때 이 옵션을 사용한다. 
  • dataType
    서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html이다. 형식을 지정하지 않으면 jQuery가 알아서 판단한다.
  • success
    성공했을 때 호출할 콜백을 지정한다.
    Function( PlainObject data, String textStatus, jqXHR jqXHR )
  • type
    데이터를 전송하는 방법을 지정한다. get, post를 사용할 수 있다.

위의 내용을 바탕으로 Ajax 통신을 해보자. 다음 예제는 Ajax 수업의 예제를 JQuery화한 것이다.

time.php

1
2
3
4
5
<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone("asia/seoul"));
echo $d1->format('H:i:s');
?>

demo1.html 

1
2
3
4
5
6
7
8
9
10
11
12
13
<p>time : <span id="time"></span></p>
<input type="button" id="execute" value="execute" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#execute').click(function(){
$.ajax({
url:'./time.php',
success:function(data){
$('#time').append(data);
}
})
})
</script>

XMLHttpRequest에 비해서 코드가 훨씬 간결해졌다. 

POST 방식

POST 방식으로 통신을 할 때는 아래와 같이 처리한다. 다음 예제는 Ajax 수업의 예제를 JQuery화한 것이다.

time2.php

1
2
3
4
5
<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($_POST['timezone']));
echo $d1->format($_POST['format']);
?>

demo2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<p>time : <span id="time"></span></p>
<form>
<select name="timezone">
<option value="Asia/Seoul">asia/seoul</option>
<option value="America/New_York">America/New_York</option>
</select>
<select name="format">
<option value="Y-m-d H:i:s">Y-m-d H:i:s</option>
<option value="Y-m-d">Y-m-d</option>
</select>
</form>
<input type="button" id="execute" value="execute" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#execute').click(function(){
$.ajax({
url:'./time2.php',
type:'post',
data:$('form').serialize(),
success:function(data){
$('#time').text(data);
}
})
})
</script>


출처 : 생활코딩

'퍼블리싱' 카테고리의 다른 글

네이버 지도 API 사용하기  (0) 2017.06.28
스크롤 이벤트  (0) 2017.06.26
ajax 개념  (0) 2017.06.13
[Javascript] 함수에서 return과 break의 차이  (0) 2017.06.07
box-sizing에 대해 알아보자  (0) 2017.06.01
줄바꿈 처리하기  (0) 2017.05.19

Recent Comments