서버에 요청하기
서버에 요청(request)하기
Ajax에서는 XMLHttpRequest 객체를 사용하여 서버와 데이터를 교환합니다.
따라서 서버에 요청을 보내기 위해서는 우선 XMLHttpRequest 인스턴스를 생성해야 합니다.
XMLHttpRequest 인스턴스의 open() 메소드와 send() 메소드를 사용하여 요청을 보낼 수 있습니다.
open() 메소드
open() 메소드는 서버로 보낼 Ajax 요청의 형식을 설정합니다.
문법
open(전달방식, URL주소, 동기여부);
전달 방식은 요청을 전달할 방식으로 GET 방식과 POST 방식 중 하나를 선택할 수 있습니다.
URL 주소는 요청을 처리할 서버의 파일 주소를 전달합니다.
동기 여부는 요청을 동기식으로 전달할지 비동기식으로 전달할지를 전달합니다.
send() 메소드
send() 메소드는 작성된 Ajax 요청을 서버로 전달합니다.
이 메소드는 전달 방식에 따라 인수를 가질 수도 안 가질 수도 있습니다.
문법
send(); // GET 방식
send(문자열); // POST 방식
GET 방식과 POST 방식
GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식입니다.
GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됩니다.
또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있습니다.
따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋습니다.
POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식입니다.
POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않습니다.
또한, POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송됩니다.
따라서 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높습니다.
GET 방식으로 요청하기
Ajax에서는 서버에 GET 방식의 요청을 보내기 위해서 다음과 같이 작성합니다.
이때 서버로 전송하고자 하는 데이터는 URI에 포함되어 전송됩니다.
예제
// GET 방식으로 요청을 보내면서 데이터를 동시에 전달함.
httpRequest.open("GET", "/examples/media/request_ajax.php?city=Seoul&zipcode=06141", true);
httpRequest.send();
위의 예제에서 사용된 다음 코드로 XMLXttpRequest 객체의 현재 상태와 서버 상의 문서 존재 유무를 확인할 수 있습니다.
예제
if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
...
}
위의 예제에서 readyState 프로퍼티의 값이 XMLHttpRequest.DONE이면, 서버에 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었다는 의미입니다.
또한, status 프로퍼티의 값이 200이면, 요청한 문서가 서버 상에 존재한다는 의미입니다.
readyState 프로퍼티와 status 프로퍼티에 대한 더 자세한 사항은 AJAX 서버로부터의 응답 수업에서 확인할 수 있습니다.
POST 방식으로 요청하기
Ajax에서는 서버에 POST 방식의 요청을 보내기 위해서 다음과 같이 작성합니다.
이때 서버로 전송하고자 하는 데이터는 HTTP 헤더에 포함되어 전송됩니다.
따라서 setRequestHeader() 메소드를 이용하여 먼저 헤더를 작성한 후에, send() 메소드로 데이터를 전송하게 됩니다.
예제
// POST 방식의 요청은 데이터를 Http 헤더에 포함시켜 전송함.
httpRequest.open("POST", "/examples/media/request_ajax.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("city=Seoul&zipcode=06141");
HTPP 헤더에 대한 더 자세한 사항은 Ajax HTTP 헤더 수업에서 확인할 수 있습니다.
비동기식(asynchronous) 요청
서버에 비동기식 요청을 보내기 위해서는 open() 메소드의 세 번째 인수로 true를 전달하면 됩니다.
이렇게 서버로 비동기식 요청을 보내면, 자바스크립트는 서버로부터의 응답을 기다리면서 동시에 다른 일을 할 수 있게 됩니다.
만약 open() 메소드의 세 번째 인수로 false를 전달하면, 서버에 동기식 요청을 보내게 됩니다.
이때 자바스크립트는 서버로부터 응답이 도착할 때까지 대기하게 됩니다.
따라서 사용자는 대기하는 동안 다른 어떤 작업도 할 수 없게 됩니다.
