웹브라우저 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. ㅅㅇㅅ
    감사합니다
  2. 카구카구
    있어도 그닥 상관없습니다 ㅋㅋ 궁금할때는 해보는게 짱! 해보세요!
    대화보기
    • ㅅㅇㅅ
      없어도됨.. 세미클론 안찍어도됨..
      대화보기
      • 진짜 한유송
        죄송합니다 제가 안했어요... 누가 장난쳤는데 비밀번호를 까먹어서 삭제가 안됩니다..ㅠㅠ
        대화보기
        • 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
                너무 좋은 강의 덕분에 마지막 강의까지 무사히 마칠 수 있었습니다. 혼자서 꾸준히 연습해야겠다 라는 생각이 많이 드네요.항상 초심자의 입장에서 생각해 주시고 강의를 제작해 주셔서 정말 감사합니다. 그럼 저는 연습하러 뿅!
              • 배고파요
                강좌 너무 고맙고 감사합니다
              • 도로시
                서버 쪽에 대한 지식이 부족해서인지 네트워크 통신 쪽은 약간 추상적인 느낌이 들었지만
                예제와 설명의 힘으로 잘 극복했습니다 ㅎ

                이미 전문 프로그래머이신데도 이제 프로그래머가 되려 하는 초심자들의 마음을 정확히 파악하셔서 매번 놀라곤 합니다
                JSON 들을 때 '이걸 왜 하나 생각하면서 멈춰 계신 분들이 있을 텐데요'라고 하셔서 혼자 뜨끔했네요 ㅎㅎ

                멋진 강의 감사드립니다!!
                다음으로 JavaScript 들으면서 계속 군침이 돌던 jQuery 수업을 들을 생각을 하니 신이 나네요!
              • bara
                이고잉님 강의 잘 들었습니다. 항상 초반보다는 나중이 힘드네요. 초반에는 쉬운것 같다가도 나중되면 점점 힘이 빠지고 그래요. 나중에는 좀 나아지겠죠? 항상 좋은 강의 감사합니다.
              • 환글
                좋은 강의 고맙습니다^^
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기