이제 대부분의 주요 웹 브라우저에는 서버에서 데이터를 요청하기 위한 기본 제공 XMLHttpRequest 객체가 있습니다.
XMLHttpRequest 개체는 서버에서 보낸 XML 데이터를 수신하고 처리하는 데 사용됩니다.
웹 페이지가 완전히 로드된 후에도 이 개체를 사용하여 서버에서 데이터를 요청하거나 받을 수 있습니다.
즉, 전체 웹 페이지를 다시 로드하지 않고 웹 페이지의 일부만 새로 고칠 수 있습니다.
XMLHttpRequest 객체 생성
JavaScript를 사용하여 XMLHttpRequest 개체를 만드는 방법.
바르 xmlHttp = 새로운 XMLHttp요청();
— readyState 속성
readyState 속성은 XMLHttpRequest 개체의 현재 상태를 나타냅니다.
이 속성의 값은 개체의 현재 상태에 따라 다음 주기로 변경됩니다.
1. UNSENT(숫자 0): XMLHttpRequest 객체가 생성됩니다.
2. OPEN(1번): open() 메서드가 성공적으로 실행되었습니다.
3. HEADERS_RECEIVED(2번): 모든 요청에 대한 응답이 도착했습니다.
4. LOAD(섹션 3): 요청된 데이터가 처리됩니다.
5. 완료(4번): 요청된 데이터가 처리되고 응답할 준비가 되었습니다.
— 상태 속성
status 속성은 서버에 있는 문서의 상태를 나타냅니다.
– 200 : 문서가 서버에 존재합니다.
– 404: 문서가 서버에 존재하지 않습니다.
예
JavaScript를 사용하여 XMLHttpRequest 객체를 보내는 방법.
|
하나
2
삼
4
5
6
7
8일
9
10
|
바르 xmlHttp = 새로운 XMLHttpRequest(); // XMLHttpRequest 객체를 생성합니다.
xmlHttp.onreadystatechange = 기능() { // onreadystatechange 이벤트 핸들러를 작성합니다.
// 서버에 문서가 존재하고 요청된 데이터가 처리되어 응답할 준비가 된 경우
만약에(그만큼.상태 == 200 && 그만큼.readyState == 그만큼.완전한) {
// 요청한 데이터를 문자열로 반환합니다.
문서.getElementById(“텍스트”).innerHTML = xmlHttp.responseText;
}
};
xmlHttp.open(“받다”, “/examples/media/xml_httpxmlrequest_data.txt”, 진실);
xmlHttp.send();
|
CS |
— responseText 속성
responseText 속성은 서버에 대한 요청에 대한 응답으로 받은 데이터를 문자열로 저장합니다.
|
하나
|
문서.getElementById(“텍스트”).innerHTML = xmlHttp.responseText;
|
CS |
— responseXML 속성
responseXML 속성은 서버에 대한 요청에 대한 응답으로 받은 데이터를 XML DOM 개체로 저장합니다.
|
하나
2
삼
4
5
6
7
8일
9
|
xmlObj = xmlHttp.responseXML; // 요청된 데이터를 XML DOM 객체로 반환합니다.
이름 목록 = xmlObj.getElementsByTagName(“성”); // XML DOM 객체에서 요소 이름이 “name”인 요소를 선택합니다.
결과 = “”;
~을 위한 (idx = 0; 아이디엑스 < 이름 목록.길이; 아이디엑스++) {
// id가 “name”인 요소의 텍스트 노드를 찾고 그 값을 반환합니다.
결과 += nameList(idx).childNodes(0).노드값 + “
“; }
문서.getElementById(“텍스트”).innerHTML = 결과;
|
CS |
비동기 요청
서버에 비동기 요청을 보내려면 open() 메서드에 세 번째 인수로 true를 전달하기만 하면 됩니다.
이러한 방식으로 요청을 비동기적으로 전송하면 JavaScript가 서버의 응답을 기다리는 동안 다른 작업을 수행할 수 있습니다.
|
하나
|
xmlHttp.open(“받다”, “/media/programming_languages.xml”, 진실);
|
CS |