<h4>ajax를 이용한 데이터 전송</h4>
<button type="button">확인</button>
<div></div
$('button:button').on('click', function() {
let request = new XMLHttpRequest();
request.open('get', 'newTest.jsp', true);
request.send();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let a = JSON.parse(this.responseText);
let result = "<table>";
result += "<tr>";
result += "<th>이름</th>";
result += "<th>주소</th>";
result += "<th>번호</th>";
result += "</tr>";
$.each(a,function(){
result += "<tr>";
result += "<td>" + this.name + "</td>";
result += "<td>" + this.addr + "</td>";
result += "<td>" + this.tel + "</td>";
result += "</tr>";
});
result += "</table>";
$('div').html(result);
}
};
});
let request = new XMLHttpRequest();
request.open('get', 'newTest.jsp', true);
request.send();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let a = JSON.parse(this.responseText);
let result = "<table>";
result += "<tr>";
result += "<th>이름</th>";
result += "<th>주소</th>";
result += "<th>번호</th>";
result += "</tr>";
$.each(a,function(){
result += "<tr>";
result += "<td>" + this.name + "</td>";
result += "<td>" + this.addr + "</td>";
result += "<td>" + this.tel + "</td>";
result += "</tr>";
});
result += "</table>";
$('div').html(result);
}
};
readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타낸다.
이 프로퍼티의 값은 객체의 현재 상태에 따라 다음과 같은 주기로 변화한다.
상태 | 코드 값 | 설명 |
---|---|---|
UNSENT | 0 | XMLHttpRequest 객체가 생성됨. |
OPEND | 1 | open() 메소드가 성공적으로 실행됨. |
HEADERS_RECEIVED | 2 | 모든 요청에 대한 응답이 도착함. |
LOADING | 3 | 요청한 데이터를 처리 중임. |
DONE | 4 | 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨. |
상태 코드 | 설명 |
---|---|
200 | 서버에 문서가 존재, 정상적으로 응답을 받음 |
403 | 요청 오류 |
404 | 서버에 문서가 존재하지 않음, 페이지를 찾지 못함 |
500 | 서버에러 |
let a = JSON.parse(this.responseText);
$.each(a,function(){
let result = "<table>";
result += "<tr>";
result += "<td>" + this.name + "</td>";
result += "<td>" + this.addr + "</td>";
result += "<td>" + this.tel + "</td>";
result += "</tr>";
[
{"name" : "장재훈", "addr" : "대전", "tel" : "010-1111-1111"},
{"name" : "윤재열", "addr" : "대전", "tel" : "010-2222-2222"},
{"name" : "김미정", "addr" : "대전", "tel" : "010-3333-3333"},
{"name" : "김성겸", "addr" : "대전", "tel" : "010-1234-1234"}
]