티스토리 뷰
안녕하세요 박스여우입니다.
오늘은 요렇게 페이지 새로고침 없이 페이지를 이동(?) 하는 방법에 대해서 알아보겠습니다.
■ 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 (424) | 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 |