JavaScript | Ajax 기초

 

 

기초

 

개요

AJAX (Asynchronous JavaScript And XML) — 비동기 자바스크립트와 XML

• 페이지 전체를 리프레쉬 하지 않고도 수행되는 '비동기성' : 필요한 데이터만 처리
• 서버와 통신하기 위해 XMLHttpRequest 객체를 사용

비동기적인 웹 애플리케이션 제작을 위해 html, css, DOM, javascript, xml, xslt,, XMLHttpRequest 등과 조합을 이용하는 웹 개발 기법을 Ajax라고 합니다.

 

Ajax 프레임워크

Prototype

script.aculo.us

dojo

jQuery

 

Ajax 구성 요소

Html과 CSS : 웹 페이지의 표현

DOM 모델 : 데이터에 접근 하거나 화면 구성을 동적으로 조작

JSON 이나 XML : 데이터의 교환

XMLHttpRequest :  웹서버와의 비동기적 통신

JavaScript : 사용자의 작업 흐름을 제어하는 데 사용

 

Ajax 동작 원리

1. 사용자에 의해 요청 이벤트 발생

2. 이벤트 핸들러에 의해 자바스크립트 호출

3. XMLHttpRequest 객체를 사용하여 서버로 요청 -> 서버의 응답을 기다릴 필요가 없습니다.

4. 서버는 전달받은 XMLHttpRequest객체로 Ajax 요청을 처리

5. 서버는 처리한 결과를 HTML, XML, JSON형태의 데이터로 웹 브라우저에 전달

6. 전달받은 데이터로 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출 -> 갱신

 

 

 

XMLHttpRequest

 

XMLHttpRequest 객체 

Ajax의 핵심적인 구성 요소로 대부분의 웹브라우저는 XMLHttpRequest 객체를 내장하고 있습니다.

 

1. XMLHttpRequest 객체 사용 : 익스플로러 7이상, 크롬, 파이어폭스, 사파리, 오페라

var 변수명 = new XMLHttpRequest();

 

2. ActiveXObject 객체 사용 : 익스플로러 5, 6

var 변수명 = new ActiveXObject("Microsoft.XMLHTTP");

 

var httpRequest;
 
function createRequest() {
 
    if (window.XMLHttpRequest)  {
        return new XMLHttpRequest();
    } else {                  
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

 

서버에 요청(request)

open() 메소드 : 서버로 보낼 Ajax 요청의 형식을 설정

open(전달방식, URL주소, 동기여부)

 

send() 메소드 : 작성된 Ajax요청을 서버로 전달

GET방식 

httpRequest.open("GET", "/examples/media/request_ajax.php?city=Seoul&zipcode=06141", true);
httpRequest.send();

 

POST방식 : open메소드 3번째 인자 true면 비동기식 요청

httpRequest.open("POST", "/examples/media/request_ajax.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("city=Seoul&zipcode=06141");

 

서버로부터의 응답(reponse)

readyState 프로퍼티 : XMLHttpRequest 객체의 현재 상태를 나타냅니다.

• UNSENT (숫자 0) : XMLHttpRequest 객체 생성
• OPENED (숫자 1) : open메서드 성공
• HEADERS_RECEIVED (숫자 2) : 모든 요청에 응답
• LOADING (숫자 3) : 요청한 데이터 처리 중
• DONE (숫자 4) : 요청한 데이터 처리가 완료

status 프로퍼티 : 서버의 문서 상태

• 200 : 서버에 문서 존재
• 404 : 서버에 문서 존재 안함.

onreadystatechange 프로퍼티 : readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수

 

 

 

 

 

 

 

 

 

HTTP 헤더  

 

HTTP 요청 헤더

클라이언트와 서버 사이에 HTTP 요청과 응답은 HTTP 헤더를 사용하여 수행됩니다.

Ajax에서는 요청을 보내기 전 setRequestHeader() 메소드를 사용해 HTTP 요청 헤더를 작성합니다.

 

HTTP 응답 헤더

Ajax에서는 HTTP응답 헤더 내용을 2개의 메소드를 이용하여 확인합니다.

1. getAllResponseHeaders() 메소드 : HTTP 응답 헤더의 모든 헤더를 문자열로 반환

2. getResponseHeader() 메소드 : HTTP 응답 헤더 중 인수로 전달받은 이름과 일치하는 헤더의 값을 반환

 

Content-Type 헤더

미설정시 text/html 타입으로 자동 설정

 

 

 

Ajax 활용   

 

주기적으로 Ajax 요청

주기적으로 Ajax요청을 보내도록 설정하여 실시간 서비스처럼 보이게 만들 수 있습니다.

데이터가 변경된 경우에만 Ajax 응답하도록 설정하여 자원 낭비를 막습니다.

 

문서 타입별 응답 데이터 확인

responseText 프로퍼티 : 서버에 요청하여 응답으로 받은 데이터를 문자열로 반환

responseXML 프로퍼티 : 서버에 요청하여 응답으로 받은 데이터를 XML DOM객체로 반환

 

Ajax 메소드

$.ajax([옵션]) 메소드 : 제이쿼리 Ajax 메소드

• url : 전송 페이지
• type : 전송방식
• data : 전송할 데이터
• dataType : 요청한 데이터 타입
• async : 비동기식 실행 (Deprecation)
• success : function(result) {} : 전송 성공 시 실행
• error : 통신의 문제가 있을 경우

$.get() 메소드 : 서버에 GET방식의 HTTP 요청

$.POST() 메소드 : 서버에 POST방식의 HTTP 요청

$.getScript : 웹페이지에 스크립트를 추가

$.getJSON : 응답으로 JSON 파일을 전송받음

$load() 메소드 : 선택한 요소에서 호출하는 유일한 jquery Ajax 메소드

 

 

 

 

 

 

 

 

 

 

관련포스트

• JavaScript | 자바 스크립트 개요
• JavaScript | 자바스크립트 객체
• JavaScript | 자바스크립트 그래픽
• JavaScript | 자바스크립트 개발도구
• JavaScript | jQuery 셀렉터와 동작
• JavaScript | jQuery UI
• XML 기초