Ajax 통신 정의
Ajax 통신은 비동기적인 웹 어플리케이션의 제작을 위한 웹 개발 기법이다.
*여기서 비동기적인이란 서버에 웹페이지를 요청할 때 정식루트로 데이터가 오가든 말든 서버에 요청을 따로 요구할 수 있다는 것이다.
쉽게 얘기하면 한 페이지에서 어느 부분에 대한 변화를 요청한다면( 예시: 네이버 메인에서 웹툰, 푸드 카테고리 변화) 그 부분에 대해서만 통신하여 결과를 변화로 반영하는 형식이다.
Ajax 통신의 필요성
단적으로 말해서 Ajax 통신이 없다면 페이지의 한 부분만 변화시키고 싶어도 항상 서버와 클라이언트사이에는 전체 페이지의 데이터를 주고받아야한다. 이는 중복되는 데이터를 계속주고 받음으로써 대역폭낭비를 야기하고 대역폭 낭비는 곧 금전적 손실과 속도 하향 등 많은 문제를 야기한다.
따라서 Ajax 통신을 사용하여 필요한 부분만 데이터를 주고 받게 함으로써 중복성을 피할 수 있다.
Ajax 통신의 예제
위 사진에서 카테고리를 선택하면 아래의 화면이 부분적으로 빠르게 변화하는 것을 볼 수 있을 것이다. 여기서 Ajax 통신을 사용하고있다. 단순한 카테고리 변화이기 때문에 각 카테고리의 해당 부분만 서버에서 가져오면 되는 것이다.
예시 코드
예시는 많지만 HTTP예제중 하나인 XMLHTTPRequest를 사용해서 작성해보도록 한다.
Ajax의 예시는 다양하게 있으니 검색해서 알아보는게 좋은 것이다.
function ajax(data) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
console.log(this.responseText);
});
oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음.
oReq.send();
}1.open을 하면 해당 URL에 데이터를 요청을 준비한다.
2.send를 통해서 해당 서버에 데이터를 요청합니다.
3.addEventListener에 load이벤트 리스너를 추가하여 데이터가 load되면 해당 함수를 실행합니다.
Ajax통신에는 XML뿐만 아니라 다양한 데이터형식들을 주고받을 수 있습니다.
출처:https://www.edwith.org/boostcourse-web/lecture/16701/
'Web' 카테고리의 다른 글
| Servlet - Hellow World 출력하기(intellij) (0) | 2020.01.18 |
|---|---|
| Web - Event & EventListener (0) | 2020.01.18 |
| JSP(Java Server Page) - 정의, 문법 (0) | 2020.01.18 |
| Scope (유효변수)에 대하여 (0) | 2020.01.18 |
| Page scope (0) | 2020.01.18 |
