📌 Ajax란
JavaScript의 라이브러리 중 하나로 Asynchronous Javascript And Xml의 약자이다.
자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식이다
비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미이다.
html 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XML의 HttpRequest객체를 통해 서버에 Request를 한다.
JSON 이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.
그럼 여기서 말하는 Request와 연관되는 Response에 대한 개념을 알고 넘어가자.
📢 Request, Response란
사용자가 인터넷 사이트에서 키워드를 치고 검색을 요청한다. 이 처럼 사용자(클라이언트)가 웹 서버로 데이터를 요청하는것을 Request라고 한다.
Response는 웹에서 클라이언트의 요청에 대한 서버의 응답을 의미한다.
이를 통해 웹에서는 사용자와 상호 작용하고 필요한 데이터를 주고받을 수 있다.
아래의 있는 예제 코드를 보면서 이해하자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
document.getElementById("btnOk1").onclick = function () {
sijak();
}
// 위 보다 아래 두 줄이 요즘 방식
document.querySelector("#btnOk2").onclick = sijakXML;
document.querySelector("#btnOk3").onclick = sijakJSON;
}
let xhr;
function sijak() {
//alert("a"); // 부분데이터 : csv, json, xlm, txt~~
// Ajax : 비동기 방식으로 웹서버와 js 객체 간의 통신. 웹서버로부터 부분 데이터를 수신할 수 있다!!!
xhr=new XMLHttpRequest(); // 비동기 방식 처리 클래스
//alert(xhr);
//xhr.open("요청 방식","요청 파일명", true); // true : 비동기 방식 ,,,, false : 동기 방식
//let fname="js20.txt"
let fname="js20csv.txt"
xhr.open("get", fname, true);
xhr.onreadystatechange = function() {
//alert(xhr.readyState); // readyState가 4여야 일이 정상적으로 처리됬는지 알 수 있음
if(xhr.readyState == 4){ // 통신 상태 양호
//alert(xhr.status);
if(xhr.status == 200){ // 요청 성공
processFunction(); // callback함수
}
}
}
xhr.send(null); // get방식일때 null이라고 쓰기
}
function processFunction() {
let data = xhr.responseText; // xhr을 문자열로 받음==>responseText
//document.querySelector("#disp").innerText=data;
//let my=document.createTextNode(data);
//document.querySelector("#disp").appendChild(my);
// 행은 엔터로 구분
let rowData = data.split(String.fromCharCode(13)); // 아스키코드 13:cr
//alert(rowData.length);
let str = "";
for(let i = 0; i < rowData.length; i++){
let colData = rowData[i].split(",");
for(let j=0; j<colData.length; j++){
str += colData[j]; + " ";
}
str+="<hr>";
}
document.querySelector("#disp").innerHTML=str;
}
function sijakXML() {
xhr=new XMLHttpRequest();
xhr.open("get", "js20.xml", true)
xhr.onreadystatechange = function() {
if(xhr.readyState === 4){
if(xhr.status === 200) {
processXML();
}
}
}
xhr.send(null);
}
function processXML() {
// let data = xhr.responseText; // XML문서는 responseText를 읽으면 객체로 인정하지 않기 때문에 DOM 사용 불가
let data = xhr.responseXML; // XML 객체 읽기
//alert(data);
let sangpumItem = data.getElementsByTagName("sangpum");
//alert(sangpumItem.length);
let codeItem = data.getElementsByTagName("code");
let sangItem = data.getElementsByTagName("sang");
let str = "";
for(let i=0; i < sangpumItem.length; i++){
str += codeItem[i].childNodes[0].nodeValue + " ";
str += sangItem[i].firstChild.nodeValue + " ";
str += codeItem[i].getAttribute("price");
str += "<br>";
}
document.querySelector("#disp").innerHTML=str; // 덮어쓰기 함,,, appencChild면 추가로 쓰기
}
function sijakJSON() {
xhr=new XMLHttpRequest();
xhr.open("get", "js20.json", true)
xhr.onreadystatechange = function() {
if(xhr.readyState === 4){
if(xhr.status === 200) {
processJSON();
}
}
}
xhr.send(null);
}
function processJSON(){
let data = xhr.responseText;
//alert(data);
let parseData = JSON.parse(data); // 문자열을 JSON 객체로 변환. 이제 배열 처리 가능
//alert(parseData);
//alert(parseData.sangpum.length);
let str = "";
for(let i=0; i < parseData.sangpum.length; i++){
str += parseData.sangpum[i].code+ " " +
parseData.sangpum[i].sang+ "<br>";
}
document.querySelector("#disp").innerHTML = str;
}
function sijakJSON2(){
// ECMA6 이후 XMLHttpRequest를 대신해 비동기 처리를 하는 promise 객체 등장
// 내부적으로 promise 객체를 지원하는 fetch ~ then 사용
// fetch(url, {method:"GET"}).then ~
const fname="js20.json";
fetch(fname).then(res => {
if(res.status === 200){
return res.json()
}else{
console.log(`http error! status=${res.status}`)
}
}).then(jsonData => {
processJSON2(jsonData);
}).catch(err => {
console.log(err);
});
}
function processJSON2(jsonData){
let str = "";
for(let i=0; i < jsonData.sangpum.length; i++){
str += jsonData.sangpum[i].code+ " " +
jsonData.sangpum[i].sang+ "<br>";
}
document.querySelector("#disp").innerHTML = str;
}
// 내부적으로 promise 객체를 지원하는 async ~ await 사용
async function sijakJSON3(){
const fname = "js20.json";
const response = await fetch(fname);
const data = await response.json();
// alert(data);
processJSON2(data);
}
</script>
</head>
<body>
<h2>**Ajax 처리**</h2>
<button id="btnOk1">Ajax 원리 이해1</button><br>
<button id="btnOk2">XML 읽기</button><br>
<button id="btnOk3">JSON 읽기</button><br>
<hr>
<div id="disp"></div>
</body>
</html>
백엔드 개발자 유광진 입니다.