Web 1.0 & Web 2.0...?
쌤 가라사대, web 은 1.0 이랑 2.0 세대로 구분할 수 있다.
1.0은 네이버 같은 포털 사이트 중심의 이미 가공된 정보를 수집해서 보여주는 역할 위주였고,
2.0 은 블로그 처럼 사용자가 직접 정보를 가공하고 게시하는 참여 중심으로 발전했다고 한다.
1.0 시대에는 페이지가 새로고침 위주로 구성되어있었다면,
2.0 시대부터는 한 페이지에서 새로고침 없이 데이터가 업데이트 되는 형식이 주를 이뤘다고 한다...?
( 과연 이걸로 시대를 구분지어도 되는지는 모르겠다 )
아무튼, web 2.0을 대표하는 기술 중 하나로는 Ajax가 있다.
Ajax 란?
A : Asynchronous
J : Javascript
A : And
X : Xml
의 약자로, javascript 의 라이브러리 중 하나다.
JSP 에서의 request 는 url 을 통한 get / post 방식을 통해 페이지간에 정보를 주거니 받거니 했고, 그로 인한 페이지의 '이동' == '새로고침' 이 있었다.
반면 Ajax 에서의 request 는 XMLHttpRequest 객체를 이용해서, 전체 페이지를 새로 고치지 않고도 페이지의 일부분만을 위한 데이터를 로드하는 기법이다.
Javascript를 통해 비동기적으로 == 병렬적으로 == 동시에 여러 script 를 실행해서 클라이언트와 서버간에 XML 데이터를 주고받는 기술!
그래서 동기 & 비동기가 어떻게 다르다구?
동기식은 하나의 요청이 처리 완료되고나서 다음 처리를 진행하는 방식이고, 비동기식은 하나의 요청이 완료될 때 까지 기다리지 않고 바로 다음 요청을 실행시키는 방식이다.
예를 들어 함수 A 와 B 가 있다고 가정했을 때,
function A () => 2초 후 실행 function B () => 3초 후 실행
A 는 실행까지 2초가 걸리는 함수고, B는 3초가 걸리는 함수다.
이때 동기식은 A 함수가 끝난 뒤에 실행되므로 전체 소요 시간은 5초가 되겠지만, 비동기 식은 A 함수를 실행시키고 B 함수도 쭉 읽어나가기 때문에 전체 소요시간은 3초가 된다.
동기식은 서버에 요청한 업무가 처리된 다음 순차적으로 페이지에 정보를 담아내는 방식이라 어디 한 작업의 지연이 생길 경우 전체 업무가 밀릴 수 있고, 새로운 컨텐츠를 추가하거나 불러오려면 페이지를 새로고침 또는 이동해야 한다.
반면에 비동기식은 업무를 각자 처리 속도대로 진행하기 때문에 페이지의 새로고침이나 이동 없이도 빠른 데이터 처리가 가능하고, 이미 처리 완료된 이미지/ 스크립트/ 기타 코드 등을 재요청 할 필요가 없기 때문에 효율적이다.
참고로 대표적인 동기식 언어는 JAVA, 비동기식 언어의 대표는 Javascript 라고 한다.
Ajax 의 처리 과정
- const request = new XMLHttpRequest();
- javascript 를 통해 서버로 정보를 담아보내 줄 request 객체를 생성한다
- request.onreadystatechange = function() { };
- 서버에 응답을 처리 할 함수 생성 및 지정
- readyState 를 통해서 현재 값이 어떻게 처리되고 있는지 알 수 있다.
- request.open('get','정보를 요청할 url', false);
- open()은 총 3가지 파라미터를 가지고 있다.
1) HTTP 요구 방식 : get / post
2) 요구하고자 하는 url
3) false : 동기식 / true : 비동기식
** default 값이 비동기식이기 때문에 생략 가능하다.
- open()은 총 3가지 파라미터를 가지고 있다.
- request.send();
- 대상 서버에 값을 전달.
- post 방식 : 파라미터에 서버로 보낼 데이터를 넣어줘야 함
- get 방식 : 파라미터 없음
- 2번 에서 실행된 readyState 의 상태값 == 응답상태에 따라 처리
- readyState : 데이터 응답
- status : 처리 결과
- responseText / responseXML 이용해서 응답완료 처리
XMLHttpRequest
readyState 속성 값
- 0 (uninitialized) - request가 초기화 안됨
- 1 (loading) - 서버와의 연결이 성사됨
- 2 (loaded) - 서버가 request를 받음
- 3 (interactive) - request(요청)을 처리 중
- 4 (complete) - 처리 & 응답할 준비 완료
status 속성 값
- 200 (OK) : 요청 성공
- 404 (Not Found) : 페이지 없음
- 500 (Internal Server Error) : 서버 오류 발생 등...
예제 코드
본적으로 Ajax를 구현할 때는 readyState(값:4) 와 status(값:200)를 비교하여 요청이 모두
정상적으로 완료된 것을 확인한 후에 다음 작업을 진행 해야 함
// readystate 를 통해서 현재 값이 어떻게 처리되고 있는지 알 수 있음
// send() 를 보내고 나서도 javascript 쪽에서 readystate 부분을 계속 감시중 (?)
request.onreadystatechange = function() {
if (request.readyState == 4){ // 요청 완료 되었니?
if (request.status == 200){ // 저 웹사이트가 정상이니?
// 정상 처리 작업
// 비동기식일때, readyState 흐름이 생기고
// 데이터가 readyState 에 들어가기 때문에
// 이쪽에 디자인 구문을 넣어줘야 화면에 데이터 출력을 할 수 있음
document.getElementById('result').innerHTML += request.responseText;
} else {
// 에러 처리 작업
document.getElementById('result').innerHTML += "Web Site Error";
}
}
};참고 :
