<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);
}
};
request.onreadystatechange = function(){}
readyState ํ๋กํผํฐ
์ํ | ์ฝ๋ ๊ฐ | ์ค๋ช |
---|---|---|
UNSENT | 0 | XMLHttpRequest ๊ฐ์ฒด๊ฐ ์์ฑ๋จ. |
OPEND | 1 | open() ๋ฉ์๋๊ฐ ์ฑ๊ณต์ ์ผ๋ก ์คํ๋จ. |
HEADERS_RECEIVED | 2 | ๋ชจ๋ ์์ฒญ์ ๋ํ ์๋ต์ด ๋์ฐฉํจ. |
LOADING | 3 | ์์ฒญํ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌ ์ค์. |
DONE | 4 | ์์ฒญํ ๋ฐ์ดํฐ์ ์ฒ๋ฆฌ๊ฐ ์๋ฃ๋์ด ์๋ตํ ์ค๋น๊ฐ ์๋ฃ๋จ. |
status ํ๋กํผํฐ
status ํ๋กํผํฐ๋ ์๋ฒ์ ๋ฌธ์ ์ํ๋ฅผ ๋ํ๋๋ค.
์ํ ์ฝ๋ | ์ค๋ช |
---|---|
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>";