JSP Ajax(Asynchronus Javascript and XML)란?

Ajax (Asynchronus Javascript and XML)란?

 

Ajax는 비동기적으로 서버와 브라우저간 데이터를 교환할 수 있는 통신 방식이다.

이때, 웹 페이지 전체를 다시 로딩하지 않고 웹 페이지의 일부분만 갱신하는 게 키포인트다.

 

※ 주고 받을 수 있는 데이터 종류

• JSON
• XML
• HTML
• 텍스트파일

 

Ajax의 장점

 

1. 웹 페이지 전체를 다시 로딩하지 않고 웹 페이지의 일부분만 갱신할 수 있다.
2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보내거나 받을 수 있다.
3. 다양한 UI(동적 페이지) 구현이 가능해진다.

 

Ajax의 단점

 

1. 페이지 이동이 없기 때문에 히스토리 관리가 안된다.
2. 반복적인 데이터를 요청하면 느려지거나 작동하지 않게 된다.
3. 페이지의 이동이 없으므로 보안 상의 문제도 발생할 수 있다.

 

Ajax의 구성 요소

 

• 웹 페이지의 표현을 위한 HTML과 CSS
• 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위한 DOM 모델
• 데이터 교환을 위한 JSON이나 XML
• 웹 서버와의 비동기 통신을 위한 XMLHttpRequest 객체
• 위의 기술들을 결합하여 사용자가 작업 흐름을 제어하기 위한 자바스크립트

 

Ajax를 통한 서버에 요청하기

 

Ajax는 XMLHttpRequest 객체를 사용하여 서버와 데이터를 교환한다.

XMLHttpRequest 객체의 open 메서드와 send 메서드를 사용하여 처리한다.

 

▶ open 메소드

 

서버로 보낼 Ajax 요청 형식을 설정한다.

 

메서드 형식은 다음과 같다.

☞ open(전달방식, URL, 동기여부);

• 전달방식 : GET, POST 등 요청 방식
• URL : 요청을 처리할 서버의 파일 주소
• 동기여부 : true(비동기), false(동기)

 

▶ send 메소드

 

작성된 Ajax 요청을 서버로 전달

전달방식에 따라 인수를 가질 수도 가지지 않을 수도 있다.

 

• GET 방식 : send();
• POST 방식 : send(전송할 데이터의 전달 방식에 맞추어 작성);

    ★ POST 방식에서 전달할 데이터의 방식(타입) 설정은 setRequestHeader 메서드를 이용한다.

     ☞ setRequestHeader("Content-Type", "전달할 데이터의 방식");      

 

서버로부터의 응답 확인

 

Ajax에서 서버로부터의 응답 확인은 XMLHttpRequest 객체의 프로퍼티로 확인이 가능하다.

 

▶ readyState 프로퍼티

• UNSENT (0) : XMLHttpRequest 객체 초기 상태
• OPENED (1) : open 메서드가 성공적으로 실행된 상태
• HEADERS_RECEIVED (2) : 모든 요청에 대한 응답이 도착한 상태
• LOADING (3) : 요청한 데이터를 처리 중인 상태
• DONE (4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료된 상태

 

▶ status 프로퍼티

• 200 : 서버에 문서가 존재
• 404 : 서버에 문서가 존재하지 않음

이외에 다양한 값들이 존재함.

 

▶ onreadystatechange 프로퍼티

 

onreadystatechange 프로퍼티는 XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정한다.

설정한 함수는 서버로부터의 응답이 끝날 때까지 readyState 프로퍼티 값의 변화에 따라 최대 5번 호출된다.

이 프로퍼티를 이용하여 각 상황에 맞는 처리를 할 수 있다.

 

이번 시간에는 Ajax 이론에 대해 알아봤다.

GET 방식과 POST 방식 예제는 다음 포스팅을 참고하자.