AJAX - XMLHttpRequest 객체
XMLHttpRequest 객체는 AJAX의 기초입니다.
- XMLHttpRequest 객체를 생성합니다
- 콜백 함수를 정의합니다
- XMLHttpRequest 객체를 엽니다
- 서버로 요청을 보냅니다
XMLHttpRequest 객체
모든 현대 브라우저가 지원합니다 XMLHttpRequest 객체.
XMLHttpRequest 객체는 배경에서 웹 서버와 데이터를 교환하는 데 사용될 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트할 수 있다는 것을 의미합니다.
XMLHttpRequest 객체를 생성합니다
모든 현대 브라우저(Chrome, Firefox, IE, Edge, Safari, Opera)는 내장된 XMLHttpRequest 객체.
XMLHttpRequest 객체를 생성하는 문법:
variable = new XMLHttpRequest();
콜백 함수를 정의합니다
콜백 함수는 다른 함수에 인자로 전달되는 함수입니다.
이 경우, 콜백 함수는 응답이 준비되면 실행되어야 하는 코드를 포함해야 합니다.
xhttp.onload = function() {
// 응답이 준비되면 무엇을 할지 정의합니다
}
요청을 보냅니다
서버로 요청을 보내기 위해 XMLHttpRequest 객체의 open() 및 send() 메서드:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
예제
// XMLHttpRequest 객체를 생성합니다
const xhttp = new XMLHttpRequest();
// 콜백 함수를 정의합니다
xhttp.onload = function() {
// 여기서 데이터를 사용할 수 있습니다
}
// 요청을 보냅니다
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
다중 도메인 접근(Cross Domain Access)
보안 이유로 현대 브라우저는 다중 도메인 접근을 허용하지 않습니다.
따라서 웹 페이지와 그가 로드하려는 XML 파일은 같은 서버에 위치해야 합니다.
CodeW3C.com에 있는 예제들은 CodeW3C.com 도메인 내의 XML 파일을 열어야 합니다.
위의 예제를 자신의 웹 페이지 중 하나에 사용하려면, 로드하는 XML 파일은 자신의 서버에 위치해야 합니다.
XMLHttpRequest 객체 메서드
| 메서드 | 설명 |
|---|---|
| new XMLHttpRequest() | 새 XMLHttpRequest 객체를 생성합니다. |
| abort() | 현재 요청을 취소합니다. |
| getAllResponseHeaders() | 헤더 정보를 반환합니다. |
| getResponseHeader() | 특정 헤더 정보를 반환합니다. |
| open(method, url, async, user, psw) |
요청을 정의합니다.
|
| send() | GET 요청에 사용되는 서버로 요청을 보냅니다. |
| send(string) | POST 요청에 사용되는 서버로 요청을 보냅니다. |
| setRequestHeader() | 보내려는 헤더에 태그/값 쌍을 추가합니다. |
XMLHttpRequest 객체 속성
| 속성 | 설명 |
|---|---|
| onload | 요청(로드)을 받을 때 호출되는 함수를 정의합니다. |
| onreadystatechange | readyState 속성이 변경될 때 호출되는 함수를 정의합니다. |
| readyState |
XMLHttpRequest의 상태를 저장합니다
|
| responseText | 문자열 형식으로 응답 데이터를 반환합니다 |
| responseXML | XML 데이터로 응답 데이터를 반환합니다 |
| status |
요청의 상태 번호를 반환합니다
완전한 목록을 보려면 방문하세요 Http 메시지 참조 매뉴얼 |
| statusText | 상태 텍스트를 반환합니다 (예: "OK" 또는 "Not Found") |
onload 속성
XMLHttpRequest 객체를 사용할 때, 응답을 수신할 때 실행할 콜백 함수를 정의할 수 있습니다
XMLHttpRequest 객체의 onload 이 함수를 정의하는 속성:
예제
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
여러 콜백 함수
웹사이트에 여러 AJAX 작업이 있을 경우, XMLHttpRequest 객체를 실행하는 함수를 생성하고, 각 AJAX 작업에 대해 콜백 함수를 생성해야 합니다
함수 호출은 URL과 응답이 준비되면 호출되는 함수를 포함해야 합니다
예제
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// 여기는 동작입니다
}
function myFunction2(xhttp) {
// 여기는 동작입니다
}
onreadystatechange 속성
readyState 속성은 XMLHttpRequest의 상태를 저장합니다
onreadystatechange 속성은 readyState가 변경될 때 실행되는 콜백 함수를 정의합니다
status 속성과 statusText 속성은 XMLHttpRequest 객체의 상태를 저장합니다
| 속성 | 설명 |
|---|---|
| onreadystatechange | readyState 속성이 변경될 때 호출되는 함수를 정의합니다 |
| readyState |
XMLHttpRequest의 상태를 저장합니다
|
| status |
요청의 상태 번호를 반환합니다
완전한 목록을 보려면 방문하세요 Http 메시지 참조 매뉴얼 |
| statusText | statusText |
반환된 상태 텍스트(예: "OK" 또는 "Not Found")를 표시합니다.
each time the readyState changes, the onreadystatechange function is called. 4 그리고 status가 200 그 때, 응답이 준비되었습니다:
예제
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
onreadystatechange 이벤트가 네 번(1-4) 동작되었으며, 각 readyState가 한 번씩 변했습니다.
