AJAX – 서버에 Request 보내기

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


서버에 Request 보내기

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


xhttp.open("GET", "ajax_info.txt", true);
xhttp.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

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


The XMLHttpRequest Object

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

Example

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


The XMLHttpRequest Object

Click the button several times to see if the time changes, or if the file is cached.

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

Example

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


The XMLHttpRequest Object


POST Requests

간단한 POST request:

Example

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


The XMLHttpRequest Object

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

Example

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


The XMLHttpRequest Object

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

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


url – Server에 있는 파일

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


xhttp.open("GET", "ajax_test.asp", true);

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


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

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

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


xhttp.open("GET", "ajax_test.asp", true);

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

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

onreadystatechange 속성

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

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

Example

The XMLHttpRequest Object


The XMLHttpRequest Object

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


동기(Synchronous) Request

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


xhttp.open("GET", "ajax_info.txt", false);

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

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

Example

The XMLHttpRequest Object

Let AJAX change this text.


The XMLHttpRequest Object

Let AJAX change this text.

출처: AJAX – Send a Request To a Server

Leave a comment