문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======AJAX - The XMLHttpRequest Object======
<WRAP left notice 80%>
  * description : AJAX - The XMLHttpRequest Object
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-02
</WRAP>
<WRAP clear></WRAP>
\\
AJAX의 핵심은 %%XMLHttpRequest%% 오브젝트입니다.\\
=====The XMLHttpRequest Object=====
모든 최신 브라우저는 ''%%XMLHttpRequest%%'' 객체를 지원합니다.\\
\\
''%%XMLHttpRequest%%'' 객체는 이면에서 웹 서버와 데이터를 교환하는 데 사용할 수 있습니다.\\ 
이는 전체 페이지를 리로딩하지 않고도 웹 페이지의 일부를 업데이트 할 수 있음을 의미합니다.\\
\\
=====Create an XMLHttpRequest Object=====
모든 최신 브라우저 (Chrome, Firefox, IE7 +, Edge, Safari, Opera)에는 내장 ''%%XMLHttpRequest%%'' 오브젝트가 있습니다.\\
\\
''%%XMLHttpRequest%%'' 오브젝트 생성을 위한 구문 :
<code javascript>
variable = new XMLHttpRequest();
</code>
====예제====
<code javascript>
var xhttp = new XMLHttpRequest();
</code>
\\
=====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 개체를 사용합니다.\\
\\
<code javascript>
variable = new ActiveXObject("Microsoft.XMLHTTP");
</code>
IE5 및 IE6을 처리하려면, 브라우저가 ''%%XMLHttpRequest%%'' 오브젝트를 지원하는지 확인하거나, ''%%ActiveX%%'' 개체를 만듭니다:\\
\\
====예제====
<code javascript>
if (widnow.XMLHttpRequest) {
  // code for modern browsers
  xmlhttp = new XMLHttpRequest();
  } else {
  // code for old IE browsers
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}  
</code>
\\
=====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)"                                                                          |
|        :::          | 전체 목록을 보려면 [[https://www.w3schools.com/tags/ref_httpmessages.asp|HTTP Messages Reference]]로 이동하세요  |
| statusText          | 상태 텍스트(status-text)를 반환합니다.(예: "OK" 또는 "Not Found")                                                |











{{tag>오션, Javascript AJAX - The XMLHttpRequest Object}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
