웹브라우저 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. smrkdeogks@gmail.com
    잘만되네여~ ^^ 강의 잘 보고 있습니다.
  2. 감사합니다.
  3. 신입1
    감사합니다
  4. 감사
    최곱니다.
  5. egoing
    여러분 약간의 다툼이 있었네요~ 제 설명이 부족해서 착오가 있으셨을 것 같습니다. 여유로운 마음으로 이해하고 넘어가주셨으면 좋겠습니다. 응원 감사드리고요. ^^
  6. ㅇㅇ
    이걸 그대로 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 (오늘은 여기까지!)
                  잘 봤습니다.
                • 감사합니당~
                • 코딩!
                  감사합니다!
                • will
                  123214
                • ㅎㅎ
                  꿀성대 이고잉
                • 방랑객
                  강의는 다 봤네요. 앞으로도 꾸준하게 계속 공부해야겠죠.. 정말 감사드립니다!
                • quki
                  정말 감사합니다.
                  대박강의네요 ^^
                • Sung Gil Yun
                  감사함을 잊지않으려고 노력합니다.
                  첫술에 배부를 순 없겠죠!
                  그래서 계속 돌아와도... 갑니다.^^
                • jjw
                  원래 jQuery는 브라우저에 상관없이 호환이 다 되었기 때문에 ajax를 jQuery에 접목시키는게 효율적이라 ....
                  크로스브라우징의 문제를 jQuery가 알아서 해결해준다는것이다 <<는 jquery 개발하신 분이 개발을 그렇게하셨겠졍
                  대화보기
                  • Youngmin Kweon
                    좋은 강의 정말 감사합니다.
                  • 심드렁
                    감사합니다! 숙지를 위해 이제 세세한 공부에 돌입해야겠네요!
                  • 광수생수
                    크로스브라우징의 문제를 jQuery가 알아서 해결해준다는 것이다.

                    어떤 부분이 문제를 해결해 준다는 것인지

                    알고 싶습니다.
                  • 육점이
                    항상 감사합니다. 이렇게 해서 실습 20시간 - 클라이언트 HTML - 클라이언트 CSS - 언어 Javascript - 웹브라우저 Javascript 강의 순으로 마무리했네요!!!!

                    마지막 부분의 Ajax통신은 어렴풋이 감만 잡히고 서버쪽 Php를 공부하면서 다시 훑으며 공부해야 겠어요!!!

                    이렇게 훌륭한 강의 공유해주셔서 감사하고, 앞으로도 잘 부탁드립니다 항상 건강하세요!!!
                  • 골뱅이미디어스크린앤드
                    감사합니다!
                  • socialg
                    감사합니다~
                  • Daknichu
                    ㅎㅎ 검색해서 여기로 오면 괜히 기분 좋네요. 감사합니다.
                  • 열혈남아
                    끝까지 수고하셧습니다.
                  • 하늘을날다
                    $timezones = array("Asia/Seoul", "America/New_York");
                    로 수정 후 사용.
                    php 5.3 이하버전일 경우...
                    대화보기
                    • 이수곤
                      간지럽고 꼭 짚고 넘어가야 할 부분에 대해서 자세하게 설명 해주시고.
                      자바 스크립트 강의 하시느라 수고 많으셨구요.....우리 모두들 화이팅 합시다.!!!
                    • T-BONE Steak
                      감사합니다.
                      .
                    • 하늘을날다
                      테스트를 하기위해 cafe24에서 호스팅하고 위 예제를 돌려는데
                      에러가 나네요.
                      그래서
                      <?php
                      $timezones = ["Asia/Seoul", "America/New_York"];
                      echo json_encode($timezones);
                      ?>
                      부분중 cafe24에서 수정해서 보내준게
                      $timezones = ["Asia/Seoul", "America/New_York"]; 이부분을
                      $timezones = '["Asia/Seoul", "America/New_York"]';
                      '를 추가해서 수정을 하니깐 결과는 나오는데
                      한글자씩 잘려서 출력됩니다.
                      뭐가 문제인지 모르겠네요.
                      json 예제만 문제를 일으키네요.
                    • egoing
                      고생하셨습니다!
                      대화보기
                      • rustypassion
                        너무 좋은 강의 덕분에 마지막 강의까지 무사히 마칠 수 있었습니다. 혼자서 꾸준히 연습해야겠다 라는 생각이 많이 드네요.항상 초심자의 입장에서 생각해 주시고 강의를 제작해 주셔서 정말 감사합니다. 그럼 저는 연습하러 뿅!
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기