JavaScript 의 이해 - [AJAX] JSON 객체 다루기

Today

Total

Recent Comments

Recent Posts

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

관리 메뉴

💻

JavaScript 의 이해 - [AJAX] JSON 객체 다루기 본문

KITRI/JAVASCRIPT

JavaScript 의 이해 - [AJAX] JSON 객체 다루기

또효니 2020. 7. 15. 16:50

Ajax란?

AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.

AJAX의 주요 두가지 특징

페이지 새로고침 없이 서버에 요청
서버로부터 데이터를 받고 작업을 수행

Ajax는 언어나 프레임 워크가 아닌 구현하는 방식을 의미합니다. 데이터를 이동하고 화면을 구성하는데 있어서 웹 화면을 갱신하지 않고 필요한 데이터를 서버로 보내고 가져오는 방법입니다. 화면 갱신이 없어서 사용자 입장에서는 매우 편리하고 빠르게 작업을 처리하는 것처럼 느끼게 합니다. 하지만, 동적으로 화면을 구성하는 만큼 개발자의 구현은 복잡해 집니다.

JavaScript 에서의 Ajax 구현 방법

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

Ajax 시작하기

본 문서는 AJAX의 기본을 익힐수 있도록 해주며, 두 가지 간단한 훈련용 예제를 제공합니다.

developer.mozilla.org

json01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="json01.js"></script>
</head>
<body onload="toServer()">
	<div id="disp"></div>
</body>
</html>

json01.js

/**
 * 
 */
var xhr = null;
var arr = new Array();

function toServer(){
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest;
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xhr.open("GET", "json01.txt", true);
	xhr.send();
	xhr.onreadystatechange = resultProcess;
}
function resultProcess(){
	if(xhr.readyState==4 && xhr.status==200){
		arr.push(xhr.responseText);
		//alert(arr);
		
		var obj = JSON.parse(xhr.responseText);
		
		var disp = document.getElementById("disp");
		var ul = document.createElement("ul");
		
		var liNode1 = document.createElement("li");
		liNode1.innerHTML = obj.name;
		
		var liNode2 = document.createElement("li");
		liNode2.innerHTML = obj.age;
		
		var liNode3 = document.createElement("li");
		liNode3.innerHTML = obj.ki;
		
		ul.appendChild(liNode1);
		ul.appendChild(liNode2);
		ul.appendChild(liNode3);
		disp.appendChild(ul);
	}
}

json01.txt

서버에서 데이터를 받을 때 json파일로 받지만 여기서 연습을 위해 json형식으로 .txt 파일에 작성하였다.

{
  "name": "홍길동",
  "age": "10",
  "ki": "170.5"
}

json02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="json02.js"></script>
</head>
<body onload="toServer()">
	<div id="disp"></div>
</body>
</html>

json02.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="json02.js"></script>
</head>
<body onload="toServer()">
	<div id="disp"></div>
</body>
</html>

json02.txt

객체는 {}에 넣어주고, 배열은 []에 담아준다.

{
	"name": "홍길동",
	"age" : "30",
	"cars":[
		{	"name": "Ford",
		 	"model": ["Fiesta", "Focus", "Mustang"]
		},
		
		{	"name": "BMW",
		 	"model": ["320", "X3", "X5"]
		},
		
		{	"name": "hyundai",
		 	"model": ["sonata", "santafe", "avante"]
		}
	]
}

'KITRI > JAVASCRIPT' 카테고리의 다른 글

JavaScript 의 이해 - [AJAX] 한줄 답글 달기(CRUD) (0)	2020.07.16
JavaScript 의 이해 - [AJAX] XHR(XMLHttpRequest) (0)	2020.07.16
JavaScript 의 이해 - JS/jQuery 자동완성 플러그인 설치 (0)	2020.07.14
JavaScript 의 이해 - 오브젝트(Object) (0)	2020.06.05
JavaScript 의 이해 - 기본 개념 및 문법/ 이벤트(Event) / 함수(Function) (0)	2020.06.04

'KITRI/JAVASCRIPT' Related Articles

Comments

💻

JavaScript 의 이해 - [AJAX] JSON 객체 다루기 본문

JavaScript 의 이해 - [AJAX] JSON 객체 다루기

Ajax란?

'KITRI > JAVASCRIPT' 카테고리의 다른 글

티스토리툴바