Ajax, Asynchronous JavaScript and XML

Ajax, Asynchronous JavaScript and XML

  - 비동기 자바스크립트 and XML

  - 자바스크립트 기반의 비동기 통신 기법

  - 브라우저와 웹 서버간의 자바스크립트를 사용한 데이터를 주고 받는 기술

 

 

1. HTTP Request 만들기

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

서버에 요청(Request)을 하기에 앞서, 서버로 보낸 요청에 대한 응답을 받았을 때 어떤 동작을 할 것인지 정해야한다. 생성한 httpRequest 의 onreadystatechange property에 특정 함수를 할당하면 요청에 대한 상태가 변화할 때 특정 함수(nameOfTheFunction)가 불리게 된다.

httpRequest.onreadystatechange = nameOfTheFunction;

** 해당 함수를 수행하는 것이 아니라 단순하게 어떤 함수가 불릴 것인지만 지정한다. 그러므로 그 함수로 어떠한 변수도 전달하지 않는다. 서버로 부터 응답을 받은 후의 동작을 결정 한 뒤에 요청한다. 아래와 같이 HTTP request 객체의 open()과 send()를 사용한다.

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);

open() 메소드의 파라미터

• 첫번째 파라미터는 HTTP 요구 방식( GET, POST, HEAD)이다. 모두 대문자로 표기한다.
• 두번째 파라미터는 요구하고자하는 URL
• 세번째 파라미터는 생략 가능하며, 비동기식(Asynchronous)으로 수행될 지를 결정한다. 만약 true(기본값) 으로 설정된 경우 자바스크립트 함수가 지속적으로 수행될 수 있어 서버로부터 응답을 받기 전에 유저와 페이지의 상호작용이 계속 진행된다. (AJAX의 비동기성)

데이터는 서버에서 쉽게 parse할 수 있는 형식이어야 한다.multipart/form-data, JSON, XML, SOAP 등과 같은 다른 형식도 가능하다.

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

 

데이터를 POST 형식으로 보낼 때 -  요청(request)에 MIME type을 먼저 설정한다.

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');