자바스크립트 - HTML AJAX

AJAX가 무엇이고 왜 필요한 가? 

AJAX는 Asynchronous Javascript and Xml의 약자로서 번역하면 비동기적 자바스크립트와 xml이 됩니다. 여기서 사용되는 비동기적 이라는 용어의 뜻은 AJAX의 동작이 웹페이지와 서버의 연결에 지장을 주지 않은 상태로 이루어 진다는 것을 의미합니다.

 

AJAX는 다음과 같은 곳들에 사용됩니다.

1. 페이지가 로드된 후 웹 서버에서 데이터 읽기
2. 페이지를 다시 로드하지 않고 웹 페이지 업데이트
3. 백그라운드에서 웹 서버로 데이터 보내기

일반적으로 우리가 사용하는 http 프로토콜은 클라이언트 측에서 요청(Request)을 보내고 서버의 응답(Response)을 받으면 클라이언트측과 서버단의 연결이 끊어지도록 되어있습니다. 그렇기 때문에 클라이언트에게 보여지는 웹페이지의 내용을

갱신/업데이트 하기 위해서는 다시 요청을 보내고 서버로부터 응답을 받아서 페이지 전체를 다시 받게 됩니다.

 

물론 페이지의 내용이 많이 다른 경우 이러한 동작이 크게 문제가 되지 않습니다. 어차피 페이지의 대부분의 내용들이

변경되었기 때문에 변경된 요소들에 대한 정보를 일일이 받아와서 수정하는 것보다 차라리 전체 페이지를 다시 받아서

로딩하는 것이 훨신 간편하기 때문 입니다. 하지만 페이지에서 극히 작은 일부요소만 변경되는 경우 이 일부요소의 변경을 갱신하기 위해서 클라이언트가 서버로 다시 요청을 보내고 서버로부터 응답을 받아와서 페이지 전체를 다시 로딩하는 것은 비효율적이며 리소스의 낭비로 이어지게 됩니다.

 

간단하게 예를 들어보면 연필로 그림을 그리고 있다가 정말 미세한 실수를 해서 일부를 수정해야하는 상황을 생각해볼 수 있습니다. 만약 우리가 연필로 그림을 그리던 중에 작은 부분을 실수했다면 일반적인 이치로 지우개를 사용할 것입니다. 시간과 에너지를 가장 적게 사용하면서 잘못된 부분을 바로 잡을 수 있는 좋은 방법이기 때문입니다. 하지만 지금 http방식을 그림으로 비유하면 연필로 그림을 그리다가 일부를 조금 잘못그렸다고 방금까지 열심히 그렸던 그림을 버리고 처음부터 다시 그린다는 것과 마찬가지 입니다.

 

너무 극단적인 예시로 비유 했지만 결국 이 예시를 통해서 말하고 싶은 점은

"http 프로토콜의 방식만을 사용해서 웹 페이지를 서비스하게 되면, 자원낭비가 많이 발생하게 된다" 

라는 것입니다.

 

서비스에서 리소스는 곧 비용을 의미합니다. 뿐만 아니라 이는 사용자에게 제공되는 서비스의 성능에도 많은 영향을 미치게 됩니다. 그렇기 때문에 코드를 작성함에 있어서 리소스 사용에 대한 사항은 항상 고려되어야 합니다. 그렇기 때문에 사용자에게 서비스를 제공하는 웹 서비스를 개발하는 관점에서 AJAX는 공부해야할 그 가치가 충분합니다.

 

AJAX에 대해서 본격적으로 공부해보기에 앞서서 다음을 기억하는 게 좋습니다.

AJAX는 프로그래밍 언어가 아닙니다.

 

XMLHttpRequest 객체

AJAX는 웹 브라우져가 가지고 있는 XMLHttpRequest 라는 객체를 활용합니다.

-> 그래서 이를 통해서 웹 서버와 데이터를 교환하여 웹 페이지를 비동기식으로 업데이트 할 수 있습니다. 즉, 전체 페이지를 

다시 로드할 필요없이 웹 페이지의 일부를 업데이트 하는 것이 가능합니다.

 

AJAX 사용형식

AJAX는 다음과 같은 조합으로 사용됩니다.

• 웹 브라우져에 내장되어 있는 XMLHttpRequest 객체 (웹 서버에 데이터를 요청하기 위해 사용)
• 자바스크립트 및 HTML DOM (서버로부터 받아온 데이터를 표시하거나 사용하기 위해

(실제로 AJAX 애플리케이션은 XML을 사용하여 데이터를 전송하지만 데이터를 일반 텍스트 또는 JSON 텍스트로

전송하는 것이 일반적입니다.)

 

 

AJAX의 동작방식

AJAX의 동작방식을 이해하기 쉽도록 잘 설명해준 이미지 링크를 첨부하겠습니다.

해당 이미지를 참고하면 AJAX의 동작방식에 대해서 이해하기 어렵지 않을 것입니다.

www.w3schools.com/js/pic_ajax.gif

AJAX가 동작하는 절차를 순서대로 요약하여 정리해보면 다음과 같습니다.

1. 웹 페이지에서 이벤트가 발생(페이지가 로딩된 후 페이지에 있는 버튼을 클릭)
2. XMLHttpRequest 객체가 자바스크립트에 의해서 생성
3. XMLHttpRequest 객체가 웹 서버로 request
4. 서버가 클라이언트의 request를 처리
5. 서버가 클라이언트 웹 페이지로 response
6. 자바스크립트로 웹 서버로부터 받은 response를 해석
7. 자바스크립트로 response 내용에 대한 적절한 대응(예 : 일부 요소의 내용 업데이트)이 수행됨

 

 

XMLHttpRequest 객체

현재 사용되는 모든 최신 웹 브라우져들은 이 객체를 XMLHttpRequest 객체를 지원합니다.

이 객체는 뒤에서 웹 서버와 데이터를 교환할 수 있습니다. 즉, 전체 페이지를 다시 로딩하지 않고도 페이지의 일부를

업데이트 할 수 있습니다.

 

 

XMLHttpRequest 객체 생성하기

모든 최신 웹 브라우져에는 XMLHttpRequest 객체가 내장되어 있습니다. 그래서 아래의 형식으로 코드를 작성하여

XMLHttpRequest 객체를 생성할 수 있습니다.

var var_name = new XMLHttpRequest();

 

 

도메인 간의 엑세스

보안상의 이유 때문에 최신 웹 브라우져들은 도메인 간의 엑세스를 허용하지 않습니다. 그렇기 때문에 로드하려는 

웹 페이지와 XML 파일이 모두 동일한 서버상에 위치해 있어야 합니다.

 

 

 

XMLHttpRequest 객체 메소드(Method)

메소드(method)	내용
new XMLHttpRequest()	새로운 XMLHttpRequest 객체를 생성
abort()	현재의 요청을 취소
getAIIResponseHeaders()	header에 대한 정보를 반환
getResponseHeader()	특정 header 정보를 반환
open(method, url, async, user, psw)	요청(request)를 지정 method - request 타입(GET or POST) url - 파일의 위치 async - 동기 or 비동기식의 여부(비동기식 - true, 동기식 - false) user - 선택적 사용자 이름 (생략가능) psw - 선택적 사용자 비밀번호 (생략가능)
send()	GET 메소드를 사용해서 서버로 request를 보냄
send(string)	POST 메소드를 사용해서 서버로 request를 보냄
setRequestHeader(header, value)	전송할 header에 레이블/값을 한 쌍으로 추가 header - header의 이름 value - header의 값

 

 

XMLHttpRequest 객체 속성(Properties)

속성(Properties)	내용
onreadystatechange	readyState 속성이 변경될 때 호출할 함수를 정의 (readtState 속성이 변경될 때마다 지정한 함수를 호출시킴)
readyState	XMLHttpRequset의 상태값을 저장 0 - request가 초기화 되지 않은 상태 1 - 서버연결 설정 2 - request 접수 3 - 처리 request 4 - request 완료 및 response 준비
responseText	response 데이터를 문자열의 형태로 반환
responseXML	response 데이터를 XML 데이터 형태로 반환
status	request에 대한 상태번호를 반환 200 - 확인(OK) 403 - 금지/거부됨(Forbidden) 404 - 찾을 수 없음(Not Found)
statusText	상태를 텍스트의 형태로 반환

 

서버로 요청 보내기

서버에 요청을 보내기 위해서 XMLHttpRequest 객체의 open(), send() 메소드를 사용합니다.

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

위에서 언급하였듯이 open 메소드가 가지는 user, psw 매개변수를 생략가능 합니다.

 

 

콜백함수 사용

콜백함수는 다른 함수의 매개변수로 전달되는 함수를 말합니다.

웹 사이트 상에서 둘 이상의 AJAX 작업이 존재하는 경우 XMLHttpRequest 객체 실행을 위한 함수 하나와

가 AJAX 작업마다 하나의 콜백함수를 작성해 주어야 합니다.

이 함수호출에는 URL과 response 준비 시 호출할 함수가 포함되어야 합니다.

 

아래의 코드는 그 예시를 보여줍니다. 천천히 코드를 따라가보면 위의 내용이 이해가 될 것입니다.

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
  // action goes here
}
function myFunction2(xhttp) {
  // action goes here
}