[Ajax] Ajax를 활용하여 다른페이지에 있는 데이터 받아오기

이번 포스팅에서는 Ajax를 활용하여 다른페이지에있는 데이터를 받아오는 방법에 대해 알아보겠습니다. 저번 포스팅에서 말씀 드렸다시피 Ajax를 사용하지 않은 웹의 흐름에서는 갱신시 새로운 URL을 다시 호출 되면서 페이지가 새로 뿌려지지만, AJAX를 사용하면 비동기 통신 방식으로 일부만을 로드해올 수 있습니다. 그럼 예제를 통해서 Ajax에서 페이지간의 통신은 어떻게 이루어지는지 확인해보겠습니다.


다음예제는 Main.jsp와 InputData.jsp를 상호간 통신해여 Main.Jsp에서 InputData.jsp에 있는 데이터들을 호출하는 예제입니다.


Ajax를 활용하여 다른페이지에 있는 데이터 받아오기

Main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax 기본적인 통신방법
 
<script type="text/javascript" language="javascript">
 
    $(document).ready(function(){
    	
        $.ajax({
            type : "GET", //전송방식을 지정한다 (POST,GET)
            url : "InputData.jsp?type=2",//호출 URL을 설정한다. GET방식일경우 뒤에 파라티터를 붙여서 사용해도된다.
            dataType : "text",//호출한 페이지의 형식이다. xml,json,html,text등의 여러 방식을 사용할 수 있다.
            error : function(){
                alert("통신실패!!!!");
            },
            success : function(Parse_data){
                $("#Parse_Area").html(Parse_data); //div에 받아온 값을 넣는다.
                alert("통신 데이터 값 : " + Parse_data);
            }
             
        });
    });
 
</script>
 
</head>
<body>
    <div id="Parse_Area"gt;lt;/div>
</body>
</html>


InputData.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>InputData</title>
</head>

<body>
데이터
</body>

</htm>


결과화면

Ajax통신

InputData.jsp에 있는 데이터들을 Main.jsp에서 받아옵니다. alert("통신데이터 값 : " + Parse_data); 이 부분에서 InputData.jsp의 HTML태그들은 Alert창으로 받고 $("#Parse_Area").html(Parse_data); 이 부분에서 div안에 InputData의 Text를 받습니다.


댓글(3)

Designed by JB FACTORY