웹브라우저 JavaScript

jQuery Ajax

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

jQuery는 Ajax와 관련해서 많은 API를 제공한다. 

http://api.jquery.com/category/ajax/

그 중에서 가장 중요한 API는 $.ajax이다.

$.ajax

http://api.jquery.com/jQuery.ajax/

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

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

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

demo1.html 

<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

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

demo2.html

<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>

아래 코드는 form 태그의 정보를 값의이름=값의내용&값 의 형식으로 바꿔준다.

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

JSON 처리

$.ajax를 이용해서 JSON을 처리하는 방법을 알아보자.

time3.php

<?php
$timezones = ["Asia/Seoul", "America/New_York"];
echo json_encode($timezones);
?>

demo3.html

<p id="timezones"></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:'./time3.php',
			dataType:'json',
			success:function(data){
				var str = '';
				for(var name in data){
					str += '<li>'+data[name]+'</li>';
				}
				$('#timezones').html('<ul>'+str+'</ul>');
			}
		})
	})
</script>

댓글

댓글 본문
  1. 헤밍웨이
    220906_완강! 감사합니다
  2. 이현송
    2번째 동영상 json 전까지봄
  3. 임앤강
    2022-02-22 감사합니다.
  4. 드림보이
    2022.01.05. 네트워크 통신 - jQuery Ajax 파트 수강완료
  5. pmxsg
    2021.12.23. 수강
  6. labis98
    20210916 좋은 강의 감사합니다.
  7. ajou univ
    2주동안 완강

    감사합니다
  8. 한강
    이번주도 시작합니다~~^^!
    200720
  9. 준바이
    url 안의 값을 ./라고 지정하면 연결이 되지 않는 문제가 발생했고 해결하여 그 부분을 공유드립니다.

    일단은 ./이 아닌 http://본인 아이피/time.php 로 해야 jquery api가 일단 정상 작동하는 것을 확인하였고

    그 후에 url 값을 ./time.php로 해도 기능이 정상 동작하는 것을 확인했습니다.

    아마 내부적으로 처음 호출만 명시적으로 받은 후에, url에 대한 정보를 캐싱처리하는 메커니즘이 숨어있지 않을 까 싶네요.

    감사합니다 !
  10. student
    getJson() 도 다루어주셨으면 좋겠습니다
  11. 굼벵이
    완료
  12. 감사합니다
  13. ??????

    ??????
    대화보기
    • rainydaymusickr
      잘읽었습니다~. jsp파일안에 ajaxcommsubmit()과 ajaxsubmit, ajaxcommsubmitcallback() 같은 함수가 있길래 뭐지 싶었는데 이것들은 jquery ajax 관련함수가 아닌 개발쪽에서 사용하는 오픈프레임웍에서 자체적으로 만든 함수더군요. 이리저리 많이 알게되네요. :D
    • 열공
      잘 모르겠지만, time3.php 는

      $timezones = array("Asia/Seoul", "America/New_York");

      로 수정해야 동작하는 듯 합니다
    • 정병찬
      후하
      동영상을 다 보고 이해는 했지만
      이걸 이제 실제로 써보려니 막막하네요 ㅠㅠ
      그래도 열심히 해보겠습니다
      감사합니다
      후하
    • 박인호
      1-4
      수강완료.
      감사합니다.
    • Byungsoo Kim
      감사합니다.
    • momo
      이전 Ajax 수업에서 보면 서버로 전송하는 데이터는 이름=값&이름=값...의 형식을 지켜야 한다고 했어요.

      따라서 그때는 아래와 같이 코드를 작성해야 했는데,

      data += 'timezone='+document.getElementById('timezone').value;
      data += '&format='+document.getElementById('format').value;

      serialize() 를 이용하면 자동으로 이름=값 의 형태로 변환해주니까,

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

      의 형태로 코드가 간결해지기 때문에 사용하는 것이 아닐까요.. ^^
      대화보기
      • 아사다마오리족
        post 방식에서 serialize 하는이유가 post방식에서는 클라이언트에서 인코딩하고 서버쪽에서 디코딩하기때문에 하는건가요?
      • 아이보
        감사합니다 쉽게 설명해주셔서 훨씬 이해하기 쉬웠어요 *^^*
      • illliilllliillliii
        감사합니다 !
      • crable
        감사합니다.
      • Byeong Heon Lee
        감사합니다~
      • smrkdeogks@gmail.com
        잘만되네여~ ^^ 강의 잘 보고 있습니다.
      • codeX
        감사합니다.
      • 신입1
        감사합니다
      • 감사
        최곱니다.
      • egoing
        여러분 약간의 다툼이 있었네요~ 제 설명이 부족해서 착오가 있으셨을 것 같습니다. 여유로운 마음으로 이해하고 넘어가주셨으면 좋겠습니다. 응원 감사드리고요. ^^
      • ㅇㅇ
        이걸 그대로 ctrl c,v해서 갔다 쓰라고 올려 놓은게 아니라 이걸 보고 니가 알아서 공부하고 응용해서 사용하라는건데 무슨 소리를 하고 있는거지 ㅋㅋㅋㅋ 전부 갔다가 복붙해서 문제가 해결이 되면 누가 프로그래밍 공부를 하겠냐 ㅋㅋ 다 검색만 잘해서 복붙하고 끝내지 ㅋㅋ
        대화보기
        • 지완이
          정말 좋은 강의 감사합니다.
        • mindFilter
          정신수준보소.... 몇살이니
          대화보기
          • ECMAscript
            ㅁㄴㄹㅇ 님, 최소한의 기본 에티켓은 지켜주시면서 댓글을 다셔야지요.
            그리고 예제 모두 잘됩니다. 다시 한번 유심히 보시면서 따라해 보시구요.
            그래도 안되시면 그 때 정중히 댓글로 문의하시는 겁니다.
          • springstar
            고잉 엉아~!

            너무 잘봤어요~!
            다 되옹~!! 뽀뽀~!
          • ㅁㄴㅇㄹ님 이런 고품격 강의를 무료로 보면 감사한줄 알아야지 본인 지식이 부족한걸

            egoing님 탓으로 돌리면 안되죠. 제가 다 화가 나네요..

            한달에 수십만원 이상을 받는 수많은 개발자 양성 학원들보다 훨씬 더 퀄리티있는 강의를 제공해주는데

            꼭 그런식으로 댓글을 달아야 하나요?
            대화보기
            • ㅇㅁㅇ
              ㅁㄴㅇㄹ 님... 잘만됩니다....
              대화보기
              • ㅅㅇㅅ
                감사합니다
              • 카구카구
                있어도 그닥 상관없습니다 ㅋㅋ 궁금할때는 해보는게 짱! 해보세요!
                대화보기
                • ㅅㅇㅅ
                  없어도됨.. 세미클론 안찍어도됨..
                  대화보기
                  • 진짜 한유송
                    죄송합니다 제가 안했어요... 누가 장난쳤는데 비밀번호를 까먹어서 삭제가 안됩니다..ㅠㅠ
                    대화보기
                    • tachyon
                      감사합니다!
                    • 소스를 보면
                      $('#execute') ... .(function() {} ) 세미콜론 안찍으셨고
                      $.ajax({}) 세미콜론이 없는것 같습니다
                    • JustStudy
                      2016.07.18 월
                      고맙습니다 3.
                    • JustStudy
                      2016.07.04 월
                      고맙습니다 2.
                    • 온달장군
                      강좌 잘보고 갑니다. 감사합니다.
                    • JustStudy
                      고맙습니다
                    • 툰아미
                      serialize() 사용할 때 form 태그 안에 있는 태그들은 반드시 name 속성을 가지고 있어야 직렬화되네요.
                      ajax 강의에서 작성했던 코드 중에 같은 코드 있어서 복사해서 썼더니 id로 지정이 되어 있어서 꽤나 시간을 허비했네요. 설마 form 태그에서 뭐가 잘못된 건 아니겠지 하고 넘어갔더니 결국은..ㅠㅠ
                    • WayneKing
                      정신이 혼미...
                    • 으어
                    • 2015-11-13 (오늘은 여기까지!)
                      잘 봤습니다.
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기