서버에 요청(request)하기[AJAX개발]

서버에 요청(request)하기

XMLHttpRequest 인스턴스의 open() 메소드와 send() 메소드를 사용하여 요청보내기 가능

 

 

 

 

 

 

open() 메소드

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

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

 

 

send() 메소드

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

send();       // GET 방식

send(문자열); // POST 방식

 

 

 

 

GET 방식과 POST 방식

 

GET 방식: 주소에 데이터(data)를 추가하여 전달하는 방식으로 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됨

보통 쿼리 문자열(query string)에 포함되어 전송되어, 길이의 제한이 있음

보안상 취약점이 존재(중요한 데이터는 POST 방식을 사용하여 요청하는 것이 better)

 

POST 방식: 데이터(data)를 별도로 첨부하여 전달하는 방식으로HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에 남지않음

HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송되어 데이터의 길이에 대한 제한도 없음

GET 방식보다 보안성이 높음

 

 

 

GET 방식으로 요청하기

 

Ajax에서는 서버에 GET 방식의 요청을 보내기

서버로 전송하고자 하는 데이터는 URI에 포함되어 전송

 

EXAMPLE

// GET 방식으로 요청을 보내면서 데이터를 동시에 전달함.

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

httpRequest.send();

//XMLXttpRequest 객체의 현재 상태와 서버 상의 문서 존재 유무를 확인 가능

 

 

EXAMPLE

if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {

    ...

}

 

코드리뷰 |

readyState 프로퍼티의 값이 XMLHttpRequest.DONE이면,

서버에 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었다는 의미입

status 프로퍼티의 값이 200이면 요청한 문서가 서버 상에 존재한다는 의미

 

 

 

 

 

 

 

POST 방식으로 요청하기

 

서버로 전송하고자 하는 데이터는 HTTP 헤더에 포함되어 전송

setRequestHeader() 메소드를 이용하여 헤더를 작성한 후, send() 메소드로 데이터 전송

 

EXAMPLE

/ 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");

 

 

 

 

비동기식(asynchronous) 요청

open() 메소드의 세 번째 인수로 true를 전달하므로 서버에 비동기식 요청을 보낸다

이렇게 비동기식 요청을 보내면, 자바스크립트는 서버로부터의 응답을 기다림과 동시에 다른 일이 가능하다

 

만약 open() 메소드의 세 번째 인수로 false를 전달하면, 서버에 동기식 요청을 보내지고

자바스크립트는 서버로부터 응답이 도착할 때까지 대기하게됨으로, 사용자는 대기하는 동안 다른 어떤 작업도 할 수 없다

 

 

 

 

 

 

 

 

 

 

사진: Unsplash의Ben Kolde