목차
AJAX - The XMLHttpRequest Object
- description : AJAX - The XMLHttpRequest Object
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-02
AJAX의 핵심은 XMLHttpRequest 오브젝트입니다.
The XMLHttpRequest Object
모든 최신 브라우저는 XMLHttpRequest 객체를 지원합니다.
XMLHttpRequest 객체는 이면에서 웹 서버와 데이터를 교환하는 데 사용할 수 있습니다.
이는 전체 페이지를 리로딩하지 않고도 웹 페이지의 일부를 업데이트 할 수 있음을 의미합니다.
Create an XMLHttpRequest Object
모든 최신 브라우저 (Chrome, Firefox, IE7 +, Edge, Safari, Opera)에는 내장 XMLHttpRequest 오브젝트가 있습니다.
XMLHttpRequest 오브젝트 생성을 위한 구문 :
variable = new XMLHttpRequest();
예제
var xhttp = new XMLHttpRequest();
Access Across Domains
보안상의 이유로, 최신 브라우저는 도메인 간 액세스를 허용하지 않습니다.
이는 브라우저가 로딩하려는 웹 페이지와 XML 파일이 모두 동일한 서버에 있어야 함을 의미합니다.
W3Schools의 모든 예제는 W3Schools 도메인에 있는 XML 파일을 사용합니다.
웹 페이지에 위의 예제를 사용하려면, 로딩하는 XML 파일이 서버에 있어야 합니다.
Modern Browsers (Fetch API)
최신 브라우저는 XMLHttpRequest 오브젝트 대신 Fetch API를 사용할 수 있습니다.
Fetch API 인터페이스를 사용하면 웹 브라우저가 웹 서버에 HTTP 요청을 할 수 있습니다.
XMLHttpRequest 오브젝트를 사용하는 경우 Fetch는 더 간단한 방법으로 동일한 작업을 수행할 수 있습니다.
Old Browsers (IE5 and IE6)
이전 버전의 Internet Explorer (5/6)는 XMLHttpRequest 오브젝트 대신 ActiveX 개체를 사용합니다.
variable = new ActiveXObject("Microsoft.XMLHTTP");
IE5 및 IE6을 처리하려면, 브라우저가 XMLHttpRequest 오브젝트를 지원하는지 확인하거나, ActiveX 개체를 만듭니다:
예제
if (widnow.XMLHttpRequest) { // code for modern browsers xmlhttp = new XMLHttpRequest(); } else { // code for old IE browsers xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
XMLHttpRequest Object Methods
| Method | Description |
|---|---|
| new XMLHttpRequest() | 새로운 XMLHttpRequest 오브젝트를 생성합니다. |
| abort() | 현재의 요청을 취소합니다. |
| getAllResponseHeaders() | 헤더 정보를 반환합니다. |
| getResponseHeader() | 특정 헤더 정보를 반환합니다. |
| open(method, url, async, user, psw) | 요청을 지정합니다. |
| method: 요청 유형 GET 또는 POST | |
| url: 파일 위치 | |
| async: true(비동기) 또는 false(동기) | |
| user: 선택적 사용자 이름 | |
| psw : 선택적 암호 | |
| send() | 서버에 요청을 보냅니다. |
| GET 요청에 사용 | |
| send(string) | 서버에 요청을 보냅니다. |
| POST 요청에 사용 | |
| setRequestHeader() | 보낼 헤더에 라벨/값 쌍을 추가합니다. |
XMLHttpRequest Object Properties
| Property | Description |
|---|---|
| onreadystatechange | readyState 속성이 변경될 때 호출되는 함수를 정의합니다. |
| readyState | XMLRequest의 상태를 보유합니다. |
| 0: 요청의 초기화되지 않았습니다. | |
| 1: 서버 연결 설정 | |
| 2: 요청 수신 | |
| 3. 요청 처리 | |
| 4. 요청 완료 및 Response 준비 | |
| responseText | Response 데이터를 문자열로 반환합니다. |
| responseXML | Respnose 데이터를 XML 데이터로 반환합니다. |
| status | 요청의 상태 번호(status-number)를 반환합니다. |
| 200: “OK” | |
| 403: “금지됨(Forbidden)” | |
| 404: “찾을 수 없음(Not Found)” | |
| 전체 목록을 보려면 HTTP Messages Reference로 이동하세요 | |
| statusText | 상태 텍스트(status-text)를 반환합니다.(예: “OK” 또는 “Not Found”) |
