반응형
Ajax
: 비동기적으로 데이터를 주고 받는 방식으로 서버와 데이터를 교환하는 기술의 하나다.
전체 페이지를 리로드 하지 않고 웹 페이지의 일부를 업데이트 가능하게 한다.
- Ajax 동작 원리
서버 Request
XMLHttpRequest객체를 이용하여 전체 페이지를 다시 로드 하지 않고 웹 페이지의 일부를 업데이트 할 수 있게 한다.
- 속성
| 속성 | 설명 |
| onreadystatechange | readyState값이 변경될 때 호출할 함수 정의 |
| readyState | 0: 요청 준비 1: 서버 연결 완료 2: 요청 받음 3: 요청 처리 중 4: 요청 처리 완료 후 응답 준비 |
| responseText | 서버로부터 반환된 응답 정보 (문자열) |
| responseXML | 서버로부터 반환된 응답 정보 (XML) |
| Status | 요청에 대한 상태 코드 200: “ok” 403: “Forbidden” 404: “Not Found” |
| statusText | 요청에 대한 상태 문자 |
- 메소드
| 메소드 | 설명 |
| Open(method, url, async, user, pw) | 요청 설정 method : 요청 유형 (get/post) url : 호출할 url async : 비동기 호출 여부 (true/false) |
| new XMLHttpRequest() | XMLHttpRequest 객체 생성 |
| abort() | 현재 요청 취소 |
| getAllResponseHeaders() | header 정보 반환 |
| getResponseHeader(key) | header 정보 중 특정 값 반환 |
| send() | 서버로 요청 전송 (get방식) |
| send(string) | 서버로 요청 전송 (post방식) |
| setRequestHeader() | 요청 header에 정보 설정 |
서버 Response
- 속성
| 속성 | 설명 |
| responseText | 서버로부터 반환된 응답 정보 (문자열) |
| responseXML | 서버로부터 반환된 응답 정보 (XML) |
- 메소드
| 메소드 | 설명 |
| getResponseHeader(key) | header 정보 중 지정된 정보만 반환 |
| getAllResponseHeaders() | 모든 header 정보를 반환 |
AJAX 작동 순서
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 1. 통신을 위한 객체 생성
let req = new XMLHttpRequest();
// 2. 요청 정보 설정
req.open("get", 'test.txt', true); // true(default이므로 생략 가능, 비동기로 작업)
// 3. 요청 정보 서버로 전달
req.send();
// 4. 이벤트를 통해 응답 가능 상태 알림
req.onreadystatechange = function(){
console.log(req.readyState); // 2(요청 받음), 3(요청 처리 중), 4(요청 처리 완료 후 응답 준비) 출력
if(req.readyState == 4 && req.status == 200){
console.log( req.responseText ); // 요청을 받아서 콘솔에서 표현
}
}
</script>
=> 일방적인 작성 순서
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 1. 통신을 위한 객체 생성
let req = new XMLHttpRequest();
// 2. 요청 정보 설정
req.open("get", 'test.txt', true); // true(default이므로 생략 가능, 비동기로 작업)
// 3. 요청 정보 서버로 전달
// req.send(); // 처리되는 데이터의 양이 미미할 때
// 4. 이벤트를 통해 응답 가능 상태 알림
req.onreadystatechange = function(){
console.log(req.readyState); // 2(요청 받음), 3(요청 처리 중), 4(요청 처리 완료 후 응답 준비) 출력
if(req.readyState == 4 && req.status == 200){
console.log( req.responseText ); // 요청을 받아서 콘솔에서 표현
}
}
// 3. 요청 정보 서버로 전달
// 요청에 대한 응답이 4번 항목의 처리보다 먼저 반환될 경우 상태코드가 누락될 가능성을 최소화하기 위해 3번을 가장 후순위로 처리한다.
req.send();
</script>
AJAX 예제
dummy.txt
목캔디
ajax.csv
이름,나이,만화
아시타카,17,원령 공주
키키,13,마녀 배달부 키키
메이,4,이웃집 토토로
하울,27,하울의 움직이는 성
ajax.json
[
{
"name":"뽀로로",
"type":"펭귄",
"alias":"뽀롱뽀롱"
},
{
"name":"크롱",
"type":"공룡",
"alias":"개구쟁이"
},
{
"name":"루피",
"type":"비버",
"alias":"요리공주"
},
{
"name":"에디",
"type":"여우",
"alias":"똑똑박사"
}
]
ajax.xml
<!-- XML
데이터로 표현하는 마크업 언어의 하나
주로 서버 간 데이터 통신에 활용
html과 같이 시작태그와 종료태그로 값을 정의하고 속성값으로 추가정보를 부여 -->
<friends>
<friend>
<name>포비</name>
<type>백곰</type>
<alias>낚시왕</alias>
</friend>
<friend>
<name>해리</name>
<type>벌새</type>
<alias>가수왕</alias>
</friend>
<friend>
<name>로디</name>
<type>로봇</type>
<alias>척척박사</alias>
</friend>
<friend>
<name>패티</name>
<type>펭귄</type>
<alias>춤신춤왕</alias>
</friend>
</friends>
위치
- ajax로 txt 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>ajax</button>
<div>출력영역</div>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
// 버튼 눌렀을 때 AJAX로 dummy.txt에서 제공하는 응답데이터를 화면상에 출력
let v_btns = document.querySelectorAll('button');
let v_disp = document.querySelector('div');
v_btns[0].addEventListener('click', function(){
let v_ajax = new XMLHttpRequest();
v_ajax.open('get', 'ajax/dummy.txt', true);
v_ajax.onreadystatechange = function(){
// v_ajax.onload = function(){ // 위와 같이 사용 가능
// v_ajax.onprogress = function(){ // 사용 불가능 : 3과 200을 출력
// v_ajax.onloadstart = function(){ // 사용 불가능 : 1과 0을 출력
// console.log("onload일때 >> ", v_ajax.readyState, v_ajax.status)
if(v_ajax.readyState == 4 && v_ajax.status == 200) {
v_disp.innerText = v_ajax.responseText;
}
}
v_ajax.send();
});
// JQ 방식
/* $('button').eq(0).on('click', function(){
let v_ajax = new XMLHttpRequest();
v_ajax.open('get', 'ajax/dummy.txt', true);
v_ajax.onreadystatechange = function(){
if(v_ajax.readyState == 4 && v_ajax.status == 200) {
$('div').text(v_ajax.responseText);
}
}
v_ajax.send();
}); */
</script>
</body>
</html>
- ajax로 csv 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>ajax</button>
<button>JSON가져오기</button>
<div>출력영역</div>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
// 버튼 눌렀을 때 AJAX로 dummy.txt에서 제공하는 응답데이터를 화면상에 출력
let v_btns = document.querySelectorAll('button');
let v_disp = document.querySelector('div');
// CSV정보 AJAX로 가져오기
// $('button').eq(0).on('click', function(){
v_btns[1].addEventListener('click', function(){
//1 XMLHttpRequest객체 생성
let req = new XMLHttpRequest();
//2 open(설정)
req.open("get", "ajax/ajax.csv");
//4 onreadystatechange readyState status responseText
req.onreadystatechange = function(){
if(req.readyState == 4 && req.status == 200) {
console.log(req.responseText);
f_csv(req.responseText);
}
}
//3 send()
req.send();
});
// css정보를 테이블 구조로 출력하기
function f_csv(p_data) {
// alert(p_data);
let v_line = p_data.split("\r\n"); // 한 줄씩 정보 나누기
let v_tbl = "<table border=1>";
for(let i=0; i<v_line.length; i++) {
v_tbl +="<tr>";
let v_cell = v_line[i].split(",");
console.log(v_cell);
for(let j=0; j<v_cell.length; j++) {
if(i<1) {
v_tbl += `<th>${v_cell[j]}</th>`;
} else {
v_tbl += `<td>${v_cell[j]}</td>`;
}
}
v_tbl += "</tr>";
}
v_tbl += "</table>";
v_disp.innerHTML = v_tbl;
}
</script>
</body>
</html>
- ajax로 JSON 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>JSON가져오기</button>
<div>출력영역</div>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
// 버튼 눌렀을 때 AJAX로 dummy.txt에서 제공하는 응답데이터를 화면상에 출력
let v_btns = document.querySelectorAll('button');
let v_disp = document.querySelector('div');
v_btns[0].addEventListener('click', function(){
let req = new XMLHttpRequest();
req.open('get', './ajax/ajax.json');
req.onreadystatechange = function(){
if(req.readyState == 4 && req.status == 200) {
// console.log(req.responseText);
//string 형태로 가기에 object로 보내줘야함
// json문자열 => js객체로 변환
let jsonObj = JSON.parse( req.responseText );
f_json(jsonObj);
}
}
req.send();
});
let f_json = function(p_json) {
// alert(typeof p_json); // object인 객체로 전송됨
console.log(p_json);
let v_tbl = "<table border=1>";
v_tbl += "<tr><th>이름</th><th>종류</th><th>별명</th></tr>"; // 제목 하드코딩
for(let i=0; i<p_json.length; i++) {
v_tbl += "<tr><td>" + p_json[i].name + "</td>";
v_tbl += `<td>${p_json[i].type}</td>`;
v_tbl += `<td>${p_json[i].alias}</td></tr>`;
}
v_tbl += "</table>";
v_disp.innerText = ""; // 영역 초기화
v_disp.insertAdjacentHTML('beforeend', v_tbl); // 추가
};
</script>
</body>
</html>
=> 제일 상단 하드코딩 대신 코드로 대체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>JSON가져오기</button>
<div>출력영역</div>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
// 버튼 눌렀을 때 AJAX로 dummy.txt에서 제공하는 응답데이터를 화면상에 출력
let v_btns = document.querySelectorAll('button');
let v_disp = document.querySelector('div');
v_btns[0].addEventListener('click', function(){
let req = new XMLHttpRequest();
req.open('get', './ajax/ajax.json');
req.onreadystatechange = function(){
if(req.readyState == 4 && req.status == 200) {
// console.log(req.responseText);
//string 형태로 가기에 object로 보내줘야함
// json문자열 => js객체로 변환
let jsonObj = JSON.parse( req.responseText );
f_json(jsonObj);
}
}
req.send();
});
let f_json = function(p_json) {
// alert(typeof p_json); // object인 객체로 전송됨
console.log(p_json); // json object, js객체
// 제목정보를 데이터의 key로 표시하기
// Object라는 내장객체가 제공하는 keys(), values(), entries()
let arrVal1 = Object.values(p_json)[0];
console.log(arrVal1);
let key = Object.keys(arrVal1);
console.log(key);
let v_tbl = "<table border=1>";
// v_tbl += "<tr><th>이름</th><th>종류</th><th>별명</th></tr>"; // 제목 하드코딩
v_tbl += `<tr><th>${key[0]}</th><th>${key[1]}</th><th>${key[2]}</th></tr>`;
for(let i=0; i<p_json.length; i++) {
v_tbl += "<tr><td>" + p_json[i].name + "</td>";
v_tbl += `<td>${p_json[i].type}</td>`;
v_tbl += `<td>${p_json[i].alias}</td></tr>`;
}
v_tbl += "</table>";
v_disp.innerText = ""; // 영역 초기화
v_disp.insertAdjacentHTML('beforeend', v_tbl); // 추가
};
</script>
</body>
</html>
- ajax로 xml 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>XML가져오기</button>
<div>출력영역</div>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
let v_btns = document.querySelectorAll('button');
let v_disp = document.querySelector('div');
v_btns[0].onclick = function(){
let ajax = new XMLHttpRequest();
ajax.open('get', './ajax/ajax.xml', true);
ajax.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200) {
// XML형식의 문자열 데이터는 접근이 어려움(정보를 얻기 힘듦)
// XML은 HTML과 같이 태그로 이루어졌기 때문에 DOM API의 활용이 가능하다
console.log(typeof this.responseXML); // object
f_xml(this.responseXML);
}
};
ajax.send();
};
function f_xml(p_xml){
console.log(p_xml);
let v_friends = p_xml.querySelectorAll('friend');
console.log(v_friends);
let v_tbl = "<table border=1>";
for(let i=0; i<v_friends.length; i++) {
v_tbl += `<tr>`;
let child = v_friends[i].children;
// console.log(v_friends[i].children[0].innerHTML);
for(let j=0; j<child.length; j++) {
v_tbl += `<td>${child[j].innerHTML}</td>`;
}
v_tbl += `</tr>`;
}
v_tbl += "</table>";
v_disp.innerHTML = v_tbl;
}
</script>
</body>
</html>
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] 22장 jQuery를 이용한 Ajax (0) | 2024.02.29 |
|---|---|
| [jQuery] 21장 Ajax를 이용한 페이지 예제 (0) | 2024.02.28 |
| [jQuery] 19장 JSON (1) | 2024.02.27 |
| [jQuery] 18장 콜백 함수와 체이닝, 동기와 비동기 (1) | 2024.02.27 |
| [jQuery] 17장 효과, 애니메이션 (0) | 2024.02.27 |
