AJAX - XMLHttpRequest
- 이전 페이지 AJAX XMLHttp
- 다음 페이지 AJAX 응답
XMLHttpRequest 객체는 서버와 데이터를 교환하는 데 사용됩니다。
서버로 요청을 보냅니다
서버로 요청을 보내기 위해 XMLHttpRequest 객체의 open() 와 send() 메서드：
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| 메서드 | 설명 |
|---|---|
| open(method, url, async) |
요청 유형을 정의합니다
|
| send() | 서버로 요청을 보냅니다（GET에 사용） |
| send(string) | 서버로 요청을 보냅니다（POST에 사용） |
GET이냐 POST이냐?
GET은 POST보다 간단하고 빠르며 대부분의 경우에 사용할 수 있습니다。
그러나 다음과 같은 경우 항상 POST를 사용하십시오：
- 캐시 파일은 선택사항이 아닙니다（서버 상의 파일이나 데이터베이스 업데이트）
- 서버로 많은 데이터를 전송합니다（POST는 크기 제한이 없습니다）
- 사용자 입력을 전송합니다（알 수 없는 문자 포함），POST는 GET보다 더 강력하고 안전합니다
GET 요청
단순한 GET 요청：
예제
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
위의 예제에서 캐시된 결과를 얻을 수 있습니다. 이를 방지하기 위해 URL에 유일한 ID를 추가하세요：
예제
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
GET 메서드로 정보를 보내려면 URL에 이 정보를 추가하세요：
예제
xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();
POST 요청
단순한 POST 요청：
예제
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
HTML 양식과 같이 데이터를 POST하려면 다음을 통해 setRequestHeader() HTTP 헤더를 추가하세요. 다음과 같이 send() 메서드에서 보내야 할 데이터를 정의합니다：
예제
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");
| 메서드 | 설명 |
|---|---|
| setRequestHeader(header, value) |
요청에 HTTP 헤더 추가
|
url - 서버 상의 파일
open() 메서드의 url 파라미터는 서버 상의 파일의 주소입니다:
xhttp.open("GET", "ajax_test.asp", true);
이 파일은 .txt와 .xml과 같은 모든 유형의 파일이 될 수 있으며, 서버 스크립트 파일(.asp와 .php)도 될 수 있습니다(이들은 응답을 보내기 전에 서버에서 작업을 수행할 수 있습니다).
비동기 - true 또는 false?
비동기적으로 요청을 보내기 위해:open() 메서드의 async 파라미터를 설정해야 합니다: true：
xhttp.open("GET", "ajax_test.asp", true);
비동기적인 요청을 보내는 것은 웹 개발자에게 큰 진보입니다. 서버에서 수행되는 많은 작업은 매우 시간이 많이 걸립니다. AJAX 이전에는 이 작업이 애플리케이션을 대기 상태로 만들거나 중지시킬 수 있습니다.
비동기적으로 전송함으로써, JavaScript는 서버 응답을 기다리지 않고:
- 서버 응답을 기다리는 동안 다른 스크립트를 실행
- 응답이 준비되면 처리
onreadystatechange 속성
XMLHttpRequest 객체를 통해, 요청이 응답을 받았을 때 실행할 함수를 정의할 수 있습니다.
이 함수는 XMLHttpResponse 객체의 onreadystatechange 속성에서 정의된:
예제
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
稍후의 장에서 onreadystatechange에 대해 더 많은 내용을 배울 수 있습니다.
동기 요청
동기적인 요청을 실행하려면, open() 메서드의 세 번째 매개변수로 설정됩니다 false：
xhttp.open("GET", "ajax_info.txt", false);
async = false가 빠른 테스트에 사용되기도 하며, 더 오래된 JavaScript 코드에서 동기적 요청도 볼 수 있습니다.
서버가 완료될 때까지 코드가 기다리기 때문에 onreadystatechange 함수가 필요하지 않습니다:
예제
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
동기적 XMLHttpRequest (async = false)을 권장하지 않습니다. 왜냐하면 JavaScript는 서버 응답이 준비되기까지 실행을 멈추기 때문입니다. 서버가 바쁘거나 느리다면, 애플리케이션이 멈추거나 중지될 수 있습니다.
동기적 XMLHttpRequest은 Web 표준에서 제거되고 있지만, 이 과정은 많은 시간이 필요할 수 있습니다.
동기적 요청을 사용하는 것은 권장되지 않으며, 이 경우 InvalidAccessError 예외가 발생할 수 있습니다.
- 이전 페이지 AJAX XMLHttp
- 다음 페이지 AJAX 응답
