티스토리 뷰


안녕하세요 박스여우입니다.



오늘은 요렇게 페이지 새로고침 없이 페이지를 이동(?) 하는 방법에 대해서 알아보겠습니다.



Ajax - Asynchronous JavaScript and XML

Ajax는 웹브라우저와 웹 서버가 내부적으로 통신을 하고, 그 결과를 웹 페이지에 반영하여 웹 페이지를 로딩이나 새로고침 없이 이용할 수 있도록 하는 기술입니다.

이름을 보면 알 수 있겠지만, 자바스크립트를 이용하여 비동기적으로 서버와 브라우저가 데이터를 주고받는 방식으로 보면 됩니다.




그럼 본격적으로 Ajax를 사용하는 방법에 대해서 알아보겠습니다.


 Ajax - 예제


1 - JQuery를 사용한 예제


1
2
3
4
5
6
7
8
9
10
11
12
    $.ajax({
        type : "GET",
        url : "test.jsp",
        dataType : "text",
        error : function() {
            alert('통신실패!!');
        },
        success : function(data) {
            $('#Context').html(data);
        }
 
    });

cs

위의 코드는 get방식으로 test.jsp의 데이터를 얻어오는 예제 입니다. 우리가 일반적으로 웹페이지에 접속했을 때와 같이 test.jsp에서는 페이지를 뿌려줍니다. 그럼 ajax에서는 그 페이지의 데이터를 받아오게 되고, success에서 선언해 둔 함수를 통해 받아온 data를 Context에 넣게 됩니다.



위 코드를 활용하여 페이지를 만들어본다면


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<meta charset="UTF-8">
<body>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
 
  <div id="Context">
    test
  </div>
 
  <script type="text/javascript">
 
    function ajaxTest(){
      $.ajax({
        type : "GET",
        url : "test.jsp",
        dataType : "text",
        error : function() {
          alert('통신실패!!');
        },
        success : function(data) {
          $('#Context').html(data);
        }
 
      });
    }
 
    ajaxTest();
 
  </script>
</body>
 
</html>
cs

요렇게 됩니다. 위의 예제는 jquery를 사용해 jquery.min.js파일을 따로 불러왔습니다. jquery를 사용하지 않는 분은 아래 두 번째 예제를 통해 ajax를 살펴봅시다.




2- jquery를 사용하지 않는 예제


1
2
3
4
5
6
7
8
var xhttp = new XMLHttpRequest();
  xhttp.open("GET""test.jsp");
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("Context").innerHTML = xhttp.responseText;
    }
  };
  xhttp.send();
cs

우선 ajax를 사용하기 위해 XMLHttpRequest 객체를 생성하고 2번 줄에서 통신할 대상을 선택합니다. jquery를 사용한 예제와 마찬가지로 Get방식으로 test.jsp에 접속하도록 합니다.


3번 줄의 onreadystatechange 이벤트는 대상과의 통신이 끝났을 때 호출되는 이벤트 입니다. 따라서 함수를 지정해 두면 통신이 끝났을 때 해당 함수가 호출됩니다. 위의 예제에서는 익명함수를 선언하여 결과를 처리합니다.


4번 줄의 xHttp.readyState통신상태를 의미하고 4는 통신이 완료되었다는 뜻 입니다. 또, xhttp.status통신 결과를 의미하고 200은 통신이 성공했음을 의미합니다. readState와 status를 통해 통신의 결과를 확인하고 통신이 성공했다면 xhttp.responseText로 받아온 결과를 Context에 넣어줍니다.



'프로그래밍 > ' 카테고리의 다른 글

AngularJS  (0) 2016.08.18
AngularJS  (0) 2016.08.09
Web Worker - 웹에서 멀티 쓰레드 구현하기  (1) 2016.07.14
웹사이트에 facebook 로그인 적용하기  (2) 2016.07.04
javascript - 웹 페이지 속 javascript 사용하기  (0) 2016.04.15
댓글
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함