[JavaScript] JS의 라이브러리 AJAX

비동기식 자바스크립트 라이브러리인
AJAX(Asysnchronous Javascript And XML)

 

 

JSP Servlet에서는 form을 이용해 action, method를 설정해 서버와 연동하는 방식과,

AJAX를 이용해 서버와 연동하는 방식 두가지고 나눌 수 있는데,

둘의 차이는 동기/비동기 방식이라는 것이다.

 

오늘은 이 중 Ajax에 대해서 정리하고자 한다.

 

AJAX(Asysnchronous Javascript And XML)란?

 

: Javascript 라이브러리 중 하나

: Javascript를 이용한 비동기 통신 및 클라이언트와 서버간의 XML 데이터를 주고 받는 것

: 브라우저가 가지는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지 않고도 페이지의 일부를 위해 데이터를 로드

 

즉, 자바스크립트로 서버에 데이터를 요청하는 것을 말한다.

 

---

 

그렇다면 왜 AJAX를 사용할까?

 

form을 이용해 action, method를 설정해 데이터를 보내줄 경우

데이터를 보내거나, 조회하거나, 부르고 싶을 때 새로고침을 피할 수 없게 되는데

이를 해결하기 위해 사용한다고 보면 된다.

 

Http 프로토콜은 클라이언트에서 요청을 보내고 서버 쪽에서 응답을 받으면 연결되는데,

화면의 내용을 변경하기 위해서는 다시 요청을 보내고 응답을 받아 페이지 전체를 변경했어야 했다. 

이럴 경우 자원낭비와 시간을 낭비할 뿐 아니라 원하는데로 데이터를 주고 받을 수 없게된다.

따라서, 전체 페이지가 아닌 일부만 갱신할 수 있도록 XMLHTtpRequest 객체를 통해서 서버에 요청을 보내고,

JSON/XML 형식으로 필요한 데이터만을 받아 갱신할 수 있게 되는 것이다.

 

---

 

AJAX는 어떻게 사용할까?

 

사용하는 방법은 크게 어렵지 않다.

어디로 어떻게 어떤 데이터를 어떻게 받아올지에 대해서 작성한다고 보면 된다.

 

 

1. XMLHttpRequest Object를 만든다.

- request를 보낼 준비를 하는 것으로 mothod를 갖춘 object가 필요하다.

 

2. callback 함수를 만든다.

- 응답에 대한 처리를 할 함수

 

3. Open a request

 - 응답이 왔을 때 실행시킬 함수로 HTML 페이지 업데이트

 

 

코드를 통해 조금 더 설명하고자 한다.

 

$.ajax({
      url : 'request',
      type : 'post',
      dataType : 'json',
      data : {'data1': data1},
      success:function (response){
      		console.log(response)
      },
      error:function (error){
            console.log(error)
      }
})

 

위 코드를 해석해보자면 request 라는 url을 가진 것을 찾아서 post 방식으로 요청하며 data1이라는 값을 가지고 간다.

이는 json 타입으로 값을 받아오고 응답 값은 response가 되며, 에러가 달 경우 error에서 받아서 처리한다.

 

즉, url/method/data를 지정해 요청을 보낼 준비를 한 다음

success/error를 통해 응답에 대한 결과를 가지고 실행할 함수들을 안에 적어주면 되는 것이다.

 

---

 

 

AJAX를 쓴다고 무작정 좋은 것은 아니다.

속도가 향상되고 새로고침을 하지 않아도 페이지 변경이 가능하기는 하지만,

많이 사용할수록 서버에 부하가 걸릴 수 있고, 요청이 완료되지 않았는데 페이지가 오작동할 우려가 발생할 수 있기 때문이다.

 

그렇기에 사용할 때 어떻게 사용할지에 대해 충분히 생각하고 사용하기를 바란다.