MLHttpRequest 객체
현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있습니다.
XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는 데 사용됩니다.
이 객체를 사용하면 웹 페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있습니다.
즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신할 수 있게 됩니다.
XMLHttpRequest 객체의 생성
자바스크립트를 이용하여 XMLHttpRequest 객체를 생성하는 방법은 다음과 같습니다.
예제
var xmlHttp = new XMLHttpRequest();
서버로부터의 응답(response) 확인
Ajax에서 서버로부터의 응답을 확인하기 위해 사용하는 XMLHttpRequest 객체의 프로퍼티는 다음과 같습니다.
- readyState 프로퍼티
- status 프로퍼티
- onreadystatechange 프로퍼티
readyState 프로퍼티
readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타냅니다.
이 프로퍼티의 값은 객체의 현재 상태에 따라 다음과 같은 주기로 변화합니다.
1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성됨.
2. OPENED (숫자 1) : open() 메소드가 성공적으로 실행됨.
3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착함.
4. LOADING (숫자 3) : 요청한 데이터를 처리 중임.
5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.
1.파일을 읽기 위해 MLHttpRequest 객체를 생성한다.
2.파일 로드를 할 수 있게 함수를 생성한다
3.MLHttpRequest 객체를 변수로 지정한 xhttp에 onreadystatechange
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id = "demo">p tag</p>
<button type="button" onclick = "loadXMLDoc()">내용변경</button>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();//xml 파일 읽기
function loadXMLDoc() {
xhttp.onreadystatechange = function () {
//console.log(this.responseText);//response:응답
//console.log(this.status);
//console.log(this.readyState);
if(this.readyState == 4 && this.status == 200){
document.getElementById("demo").innerHTML = this.responseText;
}
}
xhttp.open("GET","test.txt", true);
console.log("xhttp.open");
xhttp.send();
console.log("xhttp.send");
}
/*
readyState: 진행상태
0->open 메소드를 수행하기 전 상태
1->loading 중..
2->loading완료
3->Server 처리중
4->Server 차리완료
status
이게 200이 나온다 ->success
403->접근 금지
404-> 못찾겠다는 에러
index1.html:23 GET http://localhost:8090/sample01/test1.txt 404
500->구문에러 문법이 틀렸다
*/
</script>
</body>
</html>'HTML' 카테고리의 다른 글
| 39일차//XML// 🧶3. xml 파일을 생성해 데이터작성 후 불러오기 (0) | 2021.03.09 |
|---|---|
| 39일차//XML// 🧶2. parser.parseFromString 문자열 파싱 (0) | 2021.03.09 |
| 39일차//XML// XML 시작 구조 (0) | 2021.03.09 |
| 39일차//XML// XML 실습1 (노드로 접근) (0) | 2021.03.09 |
| jQuery 요소의 선택 , 선택자 정리 블로그 (0) | 2021.03.08 |
