XMLHttpRequest 객체 _
모든 최신 브라우저에는 서버에서 데이터를 요청하는 내장 XMLHttpRequest 객체가 있습니다.
모든 주요 브라우저에는 XML에 액세스하고 XML을 조작하기 위한 내장 XML 파서가 있습니다.
XMLHttpRequest 객체
XMLHttpRequest 객체는 웹 서버에서 데이터를 요청하는 데 사용할 수 있습니다.
XMLHttpRequest 객체는 개발자의 꿈 입니다 .
- 페이지를 새로고침하지 않고 웹페이지 업데이트
- 서버에서 데이터 요청 - 페이지가 로드된 후
- 서버에서 데이터 수신 - 페이지가 로드된 후
- 서버에 데이터 보내기 - 백그라운드에서
XMLHttpRequest 예제
아래 입력 필드에 문자를 입력하면 XMLHttpRequest가 서버로 전송되고 일부 이름 제안이 (서버에서) 반환됩니다.
예시
Start typing a name in the input field below:
Suggestions:
XMLHttpRequest 보내기
모든 최신 브라우저에는 XMLHttpRequest 객체가 내장되어 있습니다.
이를 사용하기 위한 일반적인 JavaScript 구문은 다음과 같습니다.
예시
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
XMLHttpRequest 객체 생성
위 예제의 첫 번째 줄은 XMLHttpRequest 객체를 생성합니다.
var xhttp = new XMLHttpRequest();
onreadystatechange 이벤트
readyState 속성 은 XMLHttpRequest의 상태를 유지합니다.
onreadystatechange 이벤트 는 readyState가 변경될 때마다 트리거됩니다.
서버 요청 중에 readyState는 0에서 4로 변경됩니다.
0: 요청이 초기화되지 않음
1: 서버 연결 설정
2: 요청 수신
3: 요청 처리
4: 요청 완료 및 응답 준비
onreadystatechange 속성에서 readyState가 변경될 때 실행할 함수를 지정합니다.
xhttp.onreadystatechange = function()
readyState가 4이고 상태가 200이면 응답이 준비된 것입니다.
if (this.readyState == 4 && this.status == 200)
XMLHttpRequest 속성 및 메서드
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
도메인 간 액세스
보안상의 이유로 최신 브라우저는 도메인 간 액세스를 허용하지 않습니다.
즉, 웹 페이지와 웹 페이지에서 로드하려는 XML 파일이 모두 동일한 서버에 있어야 합니다.
W3Schools의 예는 W3Schools 도메인에 있는 모든 열린 XML 파일입니다.
자신의 웹 페이지 중 하나에서 위의 예를 사용하려면 로드하는 XML 파일이 자체 서버에 있어야 합니다.
responseText 속성
responseText 속성은 응답을 문자열로 반환합니다.
응답을 텍스트 문자열로 사용하려면 responseText 속성을 사용하십시오.
예시
document.getElementById("demo").innerHTML = xmlhttp.responseText;
responseXML 속성
responseXML 속성은 응답을 XML DOM 개체로 반환합니다.
응답을 XML DOM 객체로 사용하려면 responseXML 속성을 사용하십시오.
예시
cd_catalog.xml 파일을 요청하고 응답을 XML DOM 개체로 사용합니다.
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
GET 또는 POST?
GET은 POST보다 간단하고 빠르며 대부분의 경우에 사용할 수 있습니다.
그러나 다음과 같은 경우 항상 POST 요청을 사용하십시오.
- 캐시된 파일은 옵션이 아닙니다(서버의 파일 또는 데이터베이스 업데이트).
- 많은 양의 데이터를 서버로 보내기(POST는 크기 제한이 없습니다)
- 사용자 입력(알 수 없는 문자를 포함할 수 있음)을 보내는 POST는 GET보다 강력하고 안전합니다.
URL - 서버의 파일
open() 메소드의 url 매개변수는 서버에 있는 파일의 주소입니다.
xmlhttp.open("GET", "xmlhttp_info.txt", true);
파일은 .txt 및 .xml과 같은 모든 종류의 파일이거나 .asp 및 .php와 같은 서버 스크립팅 파일(응답을 다시 보내기 전에 서버에서 작업을 수행할 수 있음)일 수 있습니다.
비동기 - 참 또는 거짓?
요청을 비동기적으로 보내려면 open() 메서드의 async 매개변수를 true로 설정해야 합니다.
xmlhttp.open("GET", "xmlhttp_info.txt", true);
비동기식으로 요청을 보내는 것은 웹 개발자에게 엄청난 개선입니다. 서버에서 수행되는 많은 작업은 시간이 많이 걸립니다.
비동기식으로 전송하면 JavaScript는 서버 응답을 기다릴 필요가 없지만 대신 다음을 수행할 수 있습니다.
- 서버 응답을 기다리는 동안 다른 스크립트 실행
- 응답이 준비되면 응답을 처리합니다.
비동기 = 참
async = true를 사용하는 경우 onreadystatechange 이벤트에서 응답이 준비될 때 실행할 함수를 지정합니다.
예시
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
비동기 = 거짓
async = false를 사용하려면 open() 메서드의 세 번째 매개변수를 false로 변경합니다.
xmlhttp.open("GET", "xmlhttp_info.txt", false);
async = false를 사용하는 것은 권장되지 않지만 몇 가지 작은 요청의 경우 괜찮을 수 있습니다.
JavaScript는 서버 응답이 준비될 때까지 계속 실행되지 않습니다. 서버가 사용 중이거나 느린 경우 응용 프로그램이 중단되거나 중지됩니다.
참고: async = false를 사용할 때 onreadystatechange 함수를 작성하지 말고 send() 문 뒤에 코드를 넣으면 됩니다.
예시
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
XML 파서
모든 최신 브라우저에는 XML 파서가 내장되어 있습니다.
XML 문서 개체 모델(XML DOM)에는 XML에 액세스하고 편집하는 많은 메서드가 포함되어 있습니다.
그러나 XML 문서에 액세스하려면 먼저 XML DOM 개체에 로드해야 합니다.
XML 파서는 일반 텍스트를 읽고 XML DOM 개체로 변환할 수 있습니다.
텍스트 문자열 구문 분석
이 예에서는 텍스트 문자열을 XML DOM 개체로 구문 분석하고 JavaScript를 사용하여 해당 개체에서 정보를 추출합니다.
예시
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
이전 브라우저(IE5 및 IE6)
이전 버전의 Internet Explorer(IE5 및 IE6)는 XMLHttpRequest 개체를 지원하지 않습니다.
IE5 및 IE6을 처리하려면 브라우저가 XMLHttpRequest 객체를 지원하는지 확인하거나 ActiveXObject를 생성하십시오.
예시
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Internet Explorer의 이전 버전(IE5 및 IE6)은 DOMParser 개체를 지원하지 않습니다.
IE5 및 IE6을 처리하려면 브라우저가 DOMParser 객체를 지원하는지 확인하거나 ActiveXObject를 생성하십시오.
예시
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
더 많은 예
헤더 정보 검색 리소스(파일)의 헤더 정보를 검색합니다.
검색합니다. 리소스(파일)의 특정 헤더 정보를 검색합니다.
사용자가 입력 필드에 문자를 입력하는 동안 웹 페이지가 웹 서버와 통신하는 방법.
웹 페이지가 XMLHttpRequest 개체를 사용하여 데이터베이스에서 정보를 가져오는 방법.
검색 XMLHttpRequest를 만들어 XML 파일에서 데이터를 검색하고 HTML 테이블에 데이터를 표시합니다.