AJAX – 서버에 Request 보내기

XMLHttpRequest 객체는 서버와 데이터를 교환하기 위해 사용됩니다.


서버에 Request 보내기

서버에 request를 보내기 위해, XMLHttpRequest 객체의 open() and send() 메소드를 사용합니다:

Method Description
open(method, url, async) Specifies the type of request

method: request의 유형(type): GET or POST
url: 서버 (파일) 위치
async: true (비동기, asynchronous) 또는 false (동기, synchronous)

send() 서버에 request 보내기 (GET에 사용)
send(string) 서버에 request 보내기 (POST에 사용)

GET 또는 POST?

GET은 POST보다 간단하고 빠르며, 대부분의 경우 사용할 수 있습니다.

그러나 다음 경우에는 항상 POST requests를 사용합니다:

  • 캐시된 파일은 옵션이 아닙니다 (서버의 파일 또는 데이터베이스를 업데이트).
  • 서버에 많은 양의 데이터를 전송합니다 (POST는 크기 제한이 없습니다).
  • 사용자 입력내용 (알 수 없는 문자가 포함될 수 있음)을 보내는 것은, POST가 GET보다 강력하고 안전합니다.

GET Requests

간단한 GET request:

Example

클릭해서 테스트 해보십시오!

위의 예제에서는 캐시된 결과를 가져올(get) 수 있습니다. 이를 방지하려면, URL에 고유한 ID를 추가하십시오:

Example

클릭해서 테스트 해보십시오!

GET 메소드를 사용하여 정보를 보내려면, URL에 정보를 추가하십시오:

Example

클릭해서 테스트 해보십시오!


POST Requests

간단한 POST request:

Example

클릭해서 테스트 해보십시오!

HTML 폼처럼 데이터를 보내려면(POST), setRequestHeader()로 HTTP 헤더를 추가하십시오. send() 메소드 안에 전송할 데이터를 지정하십시오:

Example

클릭해서 테스트 해보십시오!

Method Description
setRequestHeader(header, value) request에 HTTP headers를 추가

header: header name을 지정
value: header value를 지정


url – Server에 있는 파일

open() 메소드의 url 매개변수는, 서버에 있는 파일의 주소입니다:

이 파일은 .txt 및 .xml과 같은 모든 종류의 파일이거나, .asp 및 .php와 같은 서버 스크립팅 파일((응답을 보내기 전에, 서버에서 작업을 수행할 수 있음)일 수 있습니다.


비동기(Asynchronous) – True 또는 False?

서버 requests는 비동기(asynchronously)로 보내야 합니다.

open() 메소드의 async 매개변수는 true로 설정해야 합니다:

비동기적으로 전송함으로써, 자바스크립트는 서버 응답을 기다리지 않아도 되지만, 대신 다음을 수행할 수 있습니다:

  • 서버 응답을 기다리는 동안 다른 스크립트를 실행합니다.
  • 응답이 준비되면 응답을 처리합니다.

onreadystatechange 속성

XMLHttpRequest 객체로, 요청이 응답을 받을 때, 실행될 함수를 정의할 수 있습니다.

이 함수는 XMLHttpResponse 객체의 onreadystatechange 속성에 정의됩니다:

Example

The XMLHttpRequest Object

onreadystatechange에 대한 자세한 내용은 이후 장에서 배웁니다.


동기(Synchronous) Request

동기식 요청을 실행하려면 open() 메소드의 세 번째 매개 변수를 false로 변경합니다:

때때로 async = false는 빠른 테스트를 위해 사용됩니다. 또한 이전 자바스크립트 코드에서 동기식 요청을 찾을 수 있습니다.

코드가 서버 완료를 기다리므로, onreadystatechange 함수가 필요 없습니다:

Example

The XMLHttpRequest Object

Let AJAX change this text.

출처: AJAX – Send a Request To a Server

댓글 남기기