반응형
오늘은 AJAX의 개념과 장단점에 대한 포스팅을 해보려고 합니다.
AJAX란? (Asynchronous Javascript And XMl)
AJAX란 자바스크립트를 이용해 서버,브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능입니다.
AJAX 사용시 서버와 통신하기 위해서 XMLHttpRequest객체를 사용한다는 특징이 있습니다.
JSON, XML, HTML, TXT형식 등 다양한 포맷을 주고 받을 수 있습니다.
AJAX의 가장 큰 특징은 이름에서도 찾아볼 수 있듯이 비동기성(Asynchronous)이라고 할 수 있습니다.
- 동기: 한 개의 데이터 요청에 대한 서버의 응답이 이루어질 때까지 다른 요청은 대기 상태
- 비동기: 데이터 요청의 순서에 상관없이 여러 프로세스가 한꺼번에 처리되는 방식
AJAX의 특징
AJAX는 프로그래밍 언어가 아니며,
웹 서버에 데이터 요청을 보내기 위한 XMLHttpRequest 객체 브라우저와
데이터를 보여주기 위한 JavaScript, HTML, DOM의 조합입니다.
AJAX가 필요한 상황
HTTP는 클라이언트에서 서버에 요청을 보내고, 서버는 요청을 처리해서 응답한다.
HTPP는 Connectionless, Stateless 하게 이루어지기 때문에
서버에 연결하고, 요청해서 응답을 받고 나면 연결이 끊어진다.
연결이 끊어지게 되면 클라이언트의 이전 상태를 알 수 없기 때문에
클라이언트가 과거에 로그인을 성공하더라도 로그 정보를 유지할 수 없게 되는 등 웹서비스를 하는데 문제가 생긴다.
따라서 서버와 계속 통신이 필요한 경우, AJAX나 SOCKET.IO 등의 특수한 방법이 필요하다.
AJAX의 장점
- 페이지 전체를 리로드하지 않고 수행되므로 처리 속도가 빠릅니다.
- 비동기성 특징이 있으므로 여러 프로세스가 동시에 수행될 수 있습니다.
- 서버에서 DATA만 전송하면 되므로 전체적인 코드의 양이 줄어듭니다.
- JSON이나 XML로 필요한 데이터만 받아 갱신하므로 자원과 시간을 아낄 수 있습니다.
AJAX의 단점
- 히스토리 관리가 되지 않습니다.
- 페이지 이동이 없는 통신으로 인해 보안 위협 문제가 있습니다.
- 연속으로 데이터를 요청하면 서버 부하가 발생할 수 있습니다.
- XMLHttpRequest로 통신하는 경우, 사용자에게 진행 정보가 주어지지 않습니다.
- AJAX를 사용할 수 없는 브라우저에서 사용하는 경우, 정상 작동하지 않을 수 있습니다.
- script로 작성되므로 디버깅이 용이하지 않습니다.
- 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가합니다.
AJAX의 작동 순서
- 웹페이지 이벤트 발생 (페이지 로딩, 버튼 클릭 등)
- XMLHttpRequest object가 JavaScript에 의해 생성
- XMLHttpRequest object가 웹 서버에 요청 전송
- 서버가 요청 처리
- 서버가 웹페이지에 응답 전송
- 서버에서 온 응답을 JavaScript가 읽음
- JavaScript가 응답에 상응하는 action을 수행
AJAX 문법, 형식
$.ajax({
type : 'post', // 타입 (get, post, put 등등)
url : '/test', // 요청할 서버url
async : true, // 비동기화 여부 (default : true)
headers : { // Http header
"Content-Type" : "application/json",
"X-HTTP-Method-Override" : "POST"
},
dataType : 'text', // 데이터 타입 (html, xml, json, text 등등)
data : JSON.stringify({ // 보낼 데이터 (Object , String, Array)
"no" : no,
"name" : name,
"nick" : nick
}),
success : function(result) { // 결과 성공 콜백함수
console.log(result);
},
error : function(request, status, error) { // 결과 에러 콜백함수
console.log(error)
}
})
| type | GET / POST |
| url | AJAX로 요청할 대상 URL 지정 |
| async | 동기 / 비동기 지정 |
| datatype | 받아올 데이터의 자료형 지정 |
| data | 요청할 때 보낼 데이터 지정 |
| success | AJAX 요청 성공 시 실행할 이벤트 지정 (function, array) |
| error (xhr, status, error) | AJAX 요청 실패 시 실행할 이벤트 지정 (function) |
| complete | AJAX 요청 완료 시 실행할 이벤트 지정 (function) |
반응형