반응형
Ajax를 이용하면 웹 어플리케이션과 비동기적으로 데이터를 주고 받은후 클라이언트에서 해당 데이터에 대한 처리를 할 수 있다. 쉽게 이야기하면 Ajax를 이용할 경우 별도의 웹 페이지를 호출하지 않더라도, 클라이언트 화면을 유지한채 다른 페이지를 호출할 수 있다.
Ajax에 대한 설명은 위키백과를 참고하기 바란다. - http://ko.wikipedia.org/wiki/Ajax
이러한 Ajax를 jQuery를 이용하면 정말 손쉽게 사용할 수 있는데, 기본적인 설정값만 넣어주면 바로 사용이 가능하다.
다음 예제는 웹페이지가 로딩된 후 ajax를 이용하여 ajaxData.jsp를 호출하는 예제이다.
ajaxData.jsp는 텍스트 형식의 값을 리턴하며 리턴된 값을 alert창과 div에 출력한다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax 간단 테스트</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$.ajax({
type : "GET",
url : "ajaxData.jsp?type=1",
dataType : "text",
error : function(){
alert('통신실패!!');
},
success : function(data){
alert("통신데이터 값 : " + data) ;
$("#dataArea").html(data) ;
}
});
});
</script>
</head>
<body>
<div id="dataArea"></div>
</body>
</html>
위의 예제는 ajax 통신을 할때 가장 기본이 되는 항목만 사용하였다. 적어도 위의 설정값 정도는 최소한으로 넣어주는게 좋다.
속성 |
설명 |
type |
http 전송 method를 지정한다. GET, POST |
url |
호출 URL. GET 방식일경우 URL 뒤에 파라미터를 붙여서 사용해도 된다. |
dataType |
Ajax를 통해 호출한 페이지의 Return 형식이다. 형식에 따라 xml, json, html, text 등을 사용하면 된다. |
error |
에러났을때의 처리 부분이다. |
success |
성공했을때의 처리 부분이다. 보통 해당 부분에서 데이터 핸들링을 하면 된다. |
'Language > JQuery' 카테고리의 다른 글
| [jQuery] Ajax Form 데이터 전송하기 (8) | 2015.03.30 |
|---|---|
| [jQuery] Ajax 통신시 Header에 값 추가하여 전송하기 (4) | 2015.03.24 |
| [jQuery] html()을 이용하여 태그 삽입(추가)하기 (0) | 2015.02.26 |
| [jQuery] slideUp(), slideDown()를 이용한 객체 펼치기/접기 (0) | 2015.02.23 |
| [Javascript] 숫자 3자리 단위마다 콤마(comma) 찍기 (13) | 2015.01.27 |