■ jQuery Ajax 부가 메서드
jQuery가 지원하는 추가적인 Ajax 메서드를 사용하면 정말 간단한 $.ajax( ) 메서드를 더 간단하게 사용할 수 있다. jQuery는 아래와 같이 Ajax 메서드를 지원한다.
※ jQuery의 Ajax 관련 메서드 |
|
메서드 이름 |
설명 |
$.get( ) |
get 방식으로 Ajax를 수행한다. |
$.post( ) |
post 방식으로 Ajax를 수행한다. |
| $.getJSON( ) | get 방식으로 Ajax를 수행해 JSON 데이터를 가져온다. |
$.getScript( ) |
get 방식으로 Ajax를 수행해 Script 데이터를 가져온다. |
| $.(selector).load( ) |
Ajax를 수행한 후에 선택자로 선택한 문자 객체 안에 응답받을 문자열을 넣는다. |
이 메서드는 $.ajax( ) 메서드의 옵션속성을 미리 설정하낟. $.get( ) 메서드와 $.post( ) 메서드로부터 살펴본다. 두 메서드는 사용 방법이 같지만 $.ajax( ) 메서드에서 type 옵션 속성이 미리 지정돼 있다. 이름 그대로 $.get( ) 메서드는 type 옵션 속성이 "GET"이고 $.post( ) 메서드는 type 옵션 속성이 "POST"이다. 두 메서드는 다음과 같은 형태로 사용할 수 있다.
$get(url, function (data, textStatus, jqXHR) { }); $post(url, function (data, textStatus, jqXHR) { }); $get(url, data, function (data, textStatus, jqXHR) { }); $post(url, data, function (data, textStatus, jqXHR) { }); |
코드01 처럼 $.get( ) 메서드를 사용해 보자.
코드01 : $get( ) 메서드 |
| <html> <head> <title>jQuery Ajax Basic</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script> <script> $(document).ready(function() { $.get('MyFirstStringAction.txt', function (data) { $('body').html(data); }); }); </script> </head> <body> </body> </html> |
| 출력결과 |
프로젝트를 실행하면 위와같은 결과를 출력한다.
마찬가지로 코드02처럼 $.post() 메서드를 사용할 수 도 있다.
| 코드02 : $post( ) 메서드 |
<html> |
출력결과 |
이렇게 HTML 태그를 가져와서 문서 객체에 출력할 때는 $(selector).load( ) 메서드를 사용하면 훨씬 간단하다. load( ) 메서드는 코드3처럼 사용한다.
| 코드03 : $(selector).load( ) 메서드 |
| <html> <head> <title>jQuery Ajax Basic</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script> <script> $(document).ready(function() { $('body').load('MyFirstStringAction.txt'); }); </script> </head> <body> </body> </html> |
출력결과 |
역시나 실행 결과 코드02 예제와 결과가 동일하다.
다음으로 사용할 jQuery Ajax 메서드는 $.getJSON( )이다. $getJSON( ) 메서드를 사용하면 JSON을 손쉽게 가져올 수 있다. 코드04는 액션 MyFirstringAction에서 JSON을 가져와 화면에 출력하는 예제이다.
| 코드04 : $(selector).load( ) 메서드 |
| <html> <head> <title>jQuery Ajax Basic</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script> <script> $(document).ready(function() { $.getJSON('MyFirstJSONAction.js', function (data) { for (var i in data) { $('<h1></h1>').text(i + ' : ' + data[i]).appendTo('body'); } }); }); </script> </head> <body> </body> </html> |
| MyFirstJSONAction.js |
| {"name":"사악미소", "gender":"리더", "part":"린디합 스윙댄서"} |
출력결과 |
eval( ) 함수를 사용하면 JSON을 자바 스크립트 객체로 변경할 필요가 없다. $.getJSON( ) 메서드를 사용해 가져온 문자열이 JSON 규정에 맞지 않으면 매개 변수 data가 문자열로 입력되므로 주의하여야 한다.
'jQuery' 카테고리의 다른 글
| [jQuery] 해쉬체인지를 이용한 AJAX 게시판에서 뒤로가기(back) 기능 구현 (0) | 2015.06.10 |
|---|---|
| [jQuery] append vs html 비교 (0) | 2015.05.22 |
| [jQuery] jQuery Ajax의 기초 (0) | 2015.05.10 |
| [jQuery] DOM 요소 선택하기 (0) | 2015.04.22 |
| [jQuery] 페이지 로드 전에 jQuery / 자바스크립트 실행하기 (0) | 2015.04.21 |
