Ajax_1

AJAX

 

* 장점

페이지 이동 없이 빠르게 화면을 전환.

서버 처리를 기다리지 않고 비동기 요청이 가능.

ActiveX 나 플래시 없이도 상호작용하는 웹 페이지 작성이 가능.

Reload가 필요 없음.

 

* 일반 웹의 특징 : 동기식 모델, Page-Driven

  페이지 갱신시 이전 내용 분실 / 서버의 load로 인한 대역폭의 소비.

 

* AJAX

XML Http Request (XHR) 객체를 통해 통신.

웹 서버에서 동작

자바 스크립트 기반

 

 

 

1. XHTML과 CSS를 사용한 표준 기술 기반의 웹 페이지.

2. DOM을 사용한 동적인 화면 표시와 상호 작용.

동적인 웹 : 사용자의 동작에 대응하여 결과를 반영한다.

Dynamic HTML

웹 브라우저 측으로 보낼 수 있는 데이터는 XML

 

3. XML과 XSTL을 이용한 데이터의 변경

4. XHR을 이용한 비동기적 데이터 전송 (비동기식 동기식 선택 가능, POST/GET)

XMLHttpRequest는 현재 대부분의 브라우저에 내장되어 있으나, 기본적으로는 MS에서 IE 용으로 만듬

-> W3C 표준이 아님. -> 브라우저 구분이 선행되어야 함.

 

XHR Object 생성

버전 5.0 이전 이후의 버전으로 나눔(6.0이 기준이 되기도 함)

5.0 이후 (Msxml2.XMLHTTP)

5.0 이전 버전 (Microsoft.XMLHTTP)

 

if(window.XMLHttpRequest){

return new XMLHttpRquest()

}

 

Cross-Browsing

브라우저마다 XMLHttpRequest 객체의 명칭이 다르다.

각각의 객체를 통합하여 하나로 만들어 대응 -> 크로스 브라우징

var xhrObject;

 

function createXHR(){

if(window.ActiveXObject){

xhrObject = new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest){

xhrObject = new XMLHttpRequest();

}

 

}

 

 

브라우저 선택 코드느 공통사항이기 때문에 그대로 사용할 수 있음.

 

Method

void open(String method, String url, boolean asynch, String username, String password)

method : GET, POST, PUT

url

asynch : 동기/비동기 판단 (true가 디폴트 , 비동기)

 

void send(Object content)

요청이 동기이면 서버에서 응답할때까지 대기함.

컨텐츠의 값은 open메서드가 POST일때만 전송, GET방식일 경우에는 null로 설정하면 된다.

 

void setRequestHeader(String header, String value)

value값을 헤더에 설정, 반드시 open 메서드 다음에 위치

 

void abort()

 

String getAllResponseHeaders()

 

Attribute

onreadystatechange    :    자바 스크립트 콜백함수 명을 지정 (함수포인터지정)

readyState                  :    5가지의 요청 상태 , 계속 변경됨

0        uninitiallized

1        loading

2        loaded

3        interactive

4        complete

responseText    :    서버의 응답을 String으로 나타냄

responseXML    :    서버의 응답을 XML로 나타냄 DOM으로 파싱이 가능하다.

status               :   HTTP 상태 코드 (200, 404...)

statusText         :    Status에 대한 String 값 (OK, Not Found..)

 

5. 자바스크립트