본문 바로가기
Web & Mobile/ajax

Lecture 44 - AJAX(1) 개요, XMLHttpRequest, request_csv, request_json, JSON 요청과 조작, jQuery Ajax

by Bennyziio 2023. 6. 20.
반응형
* 실시간

구글
    검색제시어
    구글맵
아이디 추천

AJAX(Asynchronous Javascript & XML) 기술

* Asynchronous - 비동기
* Synchronous - 동기

클라이언트                                      서버

web 1.0 generation

브라우저        -> url -> 
        랜더링       <- html/css/javascript -
* 새로고침(깜빡임)

web 2.0 generation(js)

브라우저
        js      -> url(AJAX) ->
        dom 생성    <- csv/json/xml(순수데이터) -

* javascript - 데이터베이스(X)

Ajax 개요
Ajax는 자바스크립트처럼 특정한 프로그래밍 언어도, jQuery와 같은 프레임워크도 아닌 구현하는 방식이다. 예를 들어 네이버 같은 검색 엔진에서 검색 사이트 자동 완성 기능들이 대표적인 예이다.

포털 사이트에 로그인할 때 아이디와 비밀번호를 입력하고 '로그인' 버튼을 누르는 순간 데이터가 서버로 전송된다. 서버에서는 아이디와 비밀번호가 일치하는지 확인하고 일치하면 로그인된 페이지를, 그렇지 않으면 비밀번호 재입력을 요구하는 페이지를 보여준다. 이때 아주 잠시지만 모바일은 페이지가 전환되는 1~2초동안 정지하게 된다.

그러나 Ajax를 사용하면 페이지를 전환하지 않고 서버에서 데이터를 받아와 사용자에게 보여줄 수 있다. 

데이터 전송 형식
csv 형식 - ,를 이용하여 데이터를 구분하여 나열한 형식
xml 형식 - 현대에 가장 많이 사용되고 있는 데이터 표현 방식(RSS 형식도 XML 형식을 기반으로 만듬)
json 형식 - CSV와 XML의 단점을 모두 극복한 형식. AJAX에서 거의 표준으로 사용되는 데이터 형식

XMLHttpRequest
AjaxEx01.request01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- request01.html -->
<script type="text/javascript">
	window.onload = function() {
		document.getElementById('btn').onclick = function() {
			var request = new XMLHttpRequest();
			request.open('GET', './data/data.html', false);
			request.send();
			
			//console.log(request.responseText);
			var result = document.getElementById('result');
			result.innerHTML += request.responseText;
		};
	};
</script>
</head>
<body>
<!-- 
	버튼을 클릭하면 원격데이터 요청
 -->
 
<button id="btn">요청하기</button>

<br /><hr /><br />

<div id="result"></div>

</body>
</html>

AjaxEx01.data.html

<!-- 데이터 html -->
<div>
	<h1>우유</h1>
	<h2>2000</h2>
</div>
<div>
	<h1>홍차</h1>
	<h2>5000</h2>
</div>
<div>
	<h1>커피</h1>
	<h2>3000</h2>
</div>

보안성 때문에 에러가 나야 정상임

AjaxEx01.request02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
	window.onload = function() {
		document.getElementById('btn').onclick = function () {
			var request = new XMLHttpRequest();
			// false면 Synchronous
			request.open('GET', './data/data.csv', false);
			request.send();
			
			var data = request.responseText;
			var rowdatas = data.trim().split('\n');
			
			var result = '<table border="1">';
			for(var i=0; i<rowdatas.length; i++) {
				var coldatas = rowdatas[i].split(',');
				
				result += '<tr>';
				result += ' <td>' + coldatas[0] + '</td>';
				result += ' <td>' + coldatas[1] + '</td>';
				result += ' <td>' + coldatas[2] + '</td>';
				result += '</tr>';
			}
			result += '</table>';
			
			console.log(result);
			
			var resultHTML = document.getElementById('result');
			resultHTML.innerHTML += result;
		};
	};
</script>
<body>

<button id="btn">요청하기</button>
<br /><hr /><br />
<div id="result"></div>

</body>
</html>

AjaxEx01.data.csv

모던 웰 디자인을 위한 HTML5 + CSS3 입문, 한빛미디어, 윤인성, 30000원
모던 웹을 위한 JavaScript + jQuery 입문, 한빛미디어, 윤인성, 32000원
모던 웹을 위한 node.js 프로그래밍, 한빛미디어, 윤인성, 22000원
모던 웹을 위한 HTML5 프로그래밍, 한빛미디어, 윤인성, 30000원

콘솔창을 추가하여 result내용을 출력시켰다

AjaxEx01.request03

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	window.onload = function() {
		document.getElementById('btn1').onclick = function() {
			var request = new XMLHttpRequest();
			console.log('1');
			request.open('GET', './data/data.html', false);
			console.log('2');
			request.send();
			console.log('3');
			console.log(request.responseText);
			console.log('4');
		};
		
		document.getElementById('btn2').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.open('GET', './data/data.html', true);
			console.log('2');
			request.send();
			console.log('3');
			console.log(request.responseText);
			console.log('4');
		};
	};

</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<button id="btn1">동기시 요청</button>
<button id="btn2">비동기시 요청</button>
<br /><hr /><br />
<div id="result"></div>

</body>
</html>

동기시
비동기시

3번과 4번 사이에 잠시 멈춤 현상이 생기는데 비동기시는 이 멈춤을 기다리지 않고 값을 가져오기 때문에 아무런 값도 읽어오지를 못한다
자바스크립트는 데이터가 배달된 것을 onreadystatechange 이벤트로 알 수 있습니다. 이벤 
트에 이벤트 리스너를 연결합니다. onreadystatechange 이벤트는 XMLHttpRequest 의 상태 
가 변경될 때마다 이벤트를 호출합니다.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	window.onload = function() {
		document.getElementById('btn1').onclick = function() {
			var request = new XMLHttpRequest();
			console.log('1');
			request.open('GET', './data/data.html', false);
			console.log('2');
			request.send();
			console.log('3');
			console.log(request.responseText);
			console.log('4');
		};
		
		document.getElementById('btn2').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.open('GET', './data/data.html', true);
			console.log('2');
			request.send();
			console.log('3');
			console.log(request.responseText);
			console.log('4');
		};
		
		document.getElementById('btn3').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.onreadystatechange = function() {
				console.log('readystate : ' + request.readyState);
				if(request.readyState == 4) {
					console.log(request.responseText);
				}
				
			};
			console.log('2');
			request.open('GET', './data/data.html', true);
			console.log('3');
			request.send();
			console.log('4');
		};
	};

</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<button id="btn1">동기식 요청</button>
<button id="btn2">비동기식 요청</button>
<button id="btn3">비동기식 요청 상태</button>
<br /><hr /><br />
<div id="result"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	window.onload = function() {
		document.getElementById('btn1').onclick = function() {
			var request = new XMLHttpRequest();
			console.log('1');
			request.open('GET', './data/data.html', false);
			console.log('2');
			request.send();
			console.log('3');
			console.log(request.responseText);
			console.log('4');
		};
		
		document.getElementById('btn2').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.open('GET', './data/data.html', true);
			console.log('2');
			request.send();
			console.log('3');
			console.log(request.responseText);
			console.log('4');
		};
		
		document.getElementById('btn3').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.onreadystatechange = function() {
				console.log('readystate : ' + request.readyState);
				if(request.readyState == 4) {
					console.log(request.responseText);
				}
				
			};
			console.log('2');
			request.open('GET', './data/data.htm', true);
			console.log('3');
			request.send();
			console.log('4');
		};
	};

</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<button id="btn1">동기식 요청</button>
<button id="btn2">비동기식 요청</button>
<button id="btn3">비동기식 요청 상태</button>
<br /><hr /><br />
<div id="result"></div>

</body>
</html>

html을 htm으로 오타났을때 404 에러가 난다

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	window.onload = function() {
		document.getElementById('btn1').onclick = function() {
			var request = new XMLHttpRequest();
			console.log('1');
			request.open('GET', './data/data.html', false);
			console.log('2');
			request.send();
			console.log('3');
			console.log(request.responseText);
			console.log('4');
		};
		
		document.getElementById('btn2').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.open('GET', './data/data.html', true);
			console.log('2');
			request.send();
			console.log('3');
			console.log(request.responseText);
			console.log('4');
		};
		
		document.getElementById('btn3').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.onreadystatechange = function() {
				console.log('readystate : ' + request.readyState);
				if(request.readyState == 4) {
					if(request.status == 200) {
						console.log(request.responseText);	
					} else {
						alert('서버 오류입니다');
					}
				}
			};
			console.log('2');
			request.open('GET', './data/data.htm', true);
			console.log('3');
			request.send();
			console.log('4');
		};
	};

</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<button id="btn1">동기식 요청</button>
<button id="btn2">비동기식 요청</button>
<button id="btn3">비동기식 요청 상태</button>
<br /><hr /><br />
<div id="result"></div>

</body>
</html>

if문에 이러한 에러를 구별하는 구문을 넣어 에러 발생시 alert창 발생하게 함

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	window.onload = function() {
		document.getElementById('btn1').onclick = function() {
			var request = new XMLHttpRequest();
			console.log('1');
			request.open('GET', './data/data.html', false);
			console.log('2');
			request.send();
			console.log('3');
			console.log(request.responseText);
			console.log('4');
		};
		
		document.getElementById('btn2').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.open('GET', './data/data.html', true);
			console.log('2');
			request.send();
			console.log('3');
			console.log(request.responseText);
			console.log('4');
		};
		
		document.getElementById('btn3').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.onreadystatechange = function() {
				console.log('readystate : ' + request.readyState);
				if(request.readyState == 4) {
					if(request.status == 200) {
						console.log(request.responseText);	
					} else {
						alert('서버 오류입니다');
					}
				}
			};
			console.log('2');
			request.open('GET', './data/data.html', true);
			console.log('3');
			request.send();
			console.log('4');
		};
	};

</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<button id="btn1">동기식 요청</button>
<button id="btn2">비동기식 요청</button>
<button id="btn3">비동기식 요청 상태</button>
<br /><hr /><br />
<div id="result"></div>

</body>
</html>

정상 동작하게되면(request.status == 200) 정상 동작한다

정상적인 활용 예제는 아래와 같다

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	window.onload = function() {	
		document.getElementById('btn').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.onreadystatechange = function() {
				console.log('readystate : ' + request.readyState);
				if(request.readyState == 4) {
					if(request.status == 200) {
						console.log(request.responseText);	
					} else {
						alert('서버 오류입니다');
					}
				}
			};
			request.open('GET', './data/data.html', true);
			request.send();
		};
	};

</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="btn">비동기식 요청 상태</button>
<br /><hr /><br />
<div id="result"></div>

</body>
</html>

AjaxEx01.request_csv

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	window.onload = function() {		
		document.getElementById('btn').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.onreadystatechange = function() {
				console.log('readystate : ' + request.readyState);
				if(request.readyState == 4) {
					if(request.status == 200) {
						//console.log(request.responseText);	
						var data = request.responseText;
						var rowdatas = data.trim().split('\n');
						
						var result = '<table border="1">';
						for(var i=0; i<rowdatas.length; i++) {
							var coldatas = rowdatas[i].split(',');
							
							result += '<tr>';
							result += ' <td>' + coldatas[0] + '</td>';
							result += ' <td>' + coldatas[1] + '</td>';
							result += ' <td>' + coldatas[2] + '</td>';
							result += '</tr>';
						}
						result += '</table>';
						
						console.log(result);
						
						var resultHTML = document.getElementById('result');
						resultHTML.innerHTML = result;
					
					} else {
						alert('서버 오류입니다');
					}
				}
			};
			request.open('GET', './data/data.csv', true);
			request.send();
		};
	};

</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<button id="btn">요청</button>
<br /><hr /><br />
<div id="result"></div>

</body>
</html>

AjaxEx01.data.json

[{
	"name": "모던 웹 디자인을 위한 HTML5 + CSS3 입문",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "30000원"
}, {
	"name": "모던 웹을 위한 JavaScript + jQuery 입문",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "32000원"
}, {
	"name": "모던 웹을 위한 node.js 프로그래밍",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "22000원"
}, {
	"name": "모던 웹을 위한 HTML5 프로그래밍",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "30000원"
}]

jsonlint.com에서 validate한다

AjaxEx01.request_json

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	window.onload = function() {		
		document.getElementById('btn').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.onreadystatechange = function() {
				console.log('readystate : ' + request.readyState);
				if(request.readyState == 4) {
					if(request.status == 200) {
						//console.log(request.responseText);	

						// 문자열
						var data = request.responseText.trim();
						// json
						var json = eval('(' + data + ')');
						//console.log(json);
						
						var result = '<table border = "1">';
						for(var i=0; i<json.length; i++) {
							result += '<tr>';
							for(var key in json[i]) {
								result += '<td>' + json[i][key] + '</td>';
							} 
							result += '</tr>';
						}
						
						result += '</table>';
						
						var resultHTML = document.getElementById('result');
						resultHTML.innerHTML = result;
					
					} else {
						alert('서버 오류입니다');
					}
				}
			};
			request.open('GET', './data/data.json', true);
			request.send();
		};
	};

</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<button id="btn">요청</button>
<br /><hr /><br />
<div id="result"></div>

</body>
</html>

데이터 요청과 조작
: 데이터를 요청하고 조작하는 방법

JSON 요청과 조작
Ajax로 JSON을 가져와 다루는 방법은 지금까지 배운 XMLHttpRequest 객체로 Ajax 요청을 수행하고 응답받은 JSON을 자바스크립트로 변환하면 된다.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	window.onload = function() {		
		document.getElementById('btn').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.onreadystatechange = function() {
				console.log('readystate : ' + request.readyState);
				if(request.readyState == 4) {
					if(request.status == 200) {
						//console.log(request.responseText);	

						// 문자열
						var data = request.responseText.trim();
						// json
						//var json = eval('(' + data + ')');
						var json = JSON.parse(data);
						//console.log(json);
						
						var result = '<table border = "1">';
						for(var i=0; i<json.length; i++) {
							result += '<tr>';
							for(var key in json[i]) {
								result += '<td>' + json[i][key] + '</td>';
							} 
							result += '</tr>';
						}
						
						result += '</table>';
						
						var resultHTML = document.getElementById('result');
						resultHTML.innerHTML = result;
					
					} else {
						alert('서버 오류입니다');
					}
				}
			};
			request.open('GET', './data/data.json', true);
			request.send();
		};
	};

</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<button id="btn">요청</button>
<br /><hr /><br />
<div id="result"></div>

</body>
</html>

XML 요청과 조작
AjaxEx01.data_xml

<?xml version="1.0" encoding="utf-8" ?>
<books>
	<book>
		<name>모던 웹 디자인을 위한 HTML 5 + CSS3 입문</name>
		<publisher>한빛미디어</publisher>
		<author>윤인성</author>
		<price>30000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 JavaScript + jQuery 입문</name>
		<publisher>한빛미디어</publisher>
		<author>윤인성</author>
		<price>32000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 node.js 프로그래밍</name>
		<publisher>한빛미디어</publisher>
		<author>윤인성</author>
		<price>22000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 HTML 5 프로그래밍</name>
		<publisher>한빛미디어</publisher>
		<author>윤인성</author>
		<price>38000원</price>
	</book>
</books>

이름은 배열로 가져온다

AjaxEx01.request_xml

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	window.onload = function() {		
		document.getElementById('btn').onclick = function () {
			var request = new XMLHttpRequest();
			console.log('1');
			request.onreadystatechange = function() {
				console.log('readystate : ' + request.readyState);
				if(request.readyState == 4) {
					if(request.status == 200) {
						//console.log(request.responseText);	
						var data = request.responseXML;
						//console.log(data);
						
						var names = data.getElementsByTagName("name");
						var publishers = data.getElementsByTagName("publisher");
						var authors = data.getElementsByTagName("author");
						var prices = data.getElementsByTagName("price");
						//console.log(names.length);
						// childNode라는 상자안에 데이터가 있는 것이라 childNode를 깨줘야 한다
						var result = '<table border = "1">';
						for(var i=0; i<names.length; i++) {
							//console.log(names[i].childNodes[0].nodeValue);	
							result += '<tr>';
							result += ' <td>' + names[i].childNodes[0].nodeValue + '</td>';
							result += ' <td>' + publishers[i].childNodes[0].nodeValue + '</td>';
							result += ' <td>' + authors[i].childNodes[0].nodeValue + '</td>';
							result += ' <td>' + prices[i].childNodes[0].nodeValue + '</td>';
							result += '</tr>';
						}
						result += '</table>';
						
						var resultHTML = document.getElementById('result');
						resultHTML.innerHTML = result;
					} else {
						alert('서버 오류입니다');
					}
				}
			};
			request.open('GET', './data/data_xml.xml', true);
			request.send();
		};
	};

</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<button id="btn">요청</button>
<br /><hr /><br />
<div id="result"></div>

</body>
</html>

jQuery Ajax

AjaxEx01.ex01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', function() {
			$.ajax('./data/data.csv', {
				success: function() {
					alert('연결 성공');
				}
			});
		});	
	});
	
</script>
</head>
<body>

<button id="btn">요청</button>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', function() {
			$.ajax('./data/data.csv', {
				success: function(data) {
					alert('연결 성공 : ' + data);
				}
			});
		});	
	});
	
</script>
</head>
<body>

<button id="btn">요청</button>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', function() {
			/*
			$.ajax('./data/data.csv', {
				success: function(data) {
					alert('연결 성공 : ' + data);
				}
			});
			*/
			$.ajax({
				url : './data/data.csv',
				success: function(data) {
					alert('연결 성공 : ' + data);
				}
			});
		});	
	});
	
</script>
</head>
<body>

<button id="btn">요청</button>

</body>
</html>

url을 사용하여 경로 지정 하는 법

data : 요청 매개변수
success : 성공시
type : get, post냐
url : url 지정
error : 실패 이벤트 리스너 지정
요정도를 많이 쓴다

정형화된 코드 식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', function() {
			/*
			$.ajax('./data/data.csv', {
				success: function(data) {
					alert('연결 성공 : ' + data);
				}
			});
			
			$.ajax({
				url : './data/data.csv',
				success: function(data) {
					alert('연결 성공 : ' + data);
				}
			});
			*/
			$.ajax({
				url: './data/data.csv',
				type: 'GET',
				dataType: 'text',	// text, json, xml
				success: function(data) {
					alert('연결 성공 : ' + data);
				}, 
				error: function() {
					alert('에러');
				}
			});
		});	
	});
	
</script>
</head>
<body>

<button id="btn">요청</button>

</body>
</html>

에러 내용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', function() {
			/*
			$.ajax('./data/data.csv', {
				success: function(data) {
					alert('연결 성공 : ' + data);
				}
			});
			
			$.ajax({
				url : './data/data.csv',
				success: function(data) {
					alert('연결 성공 : ' + data);
				}
			});
			*/
			$.ajax({
				url: './data/data.cs',
				type: 'GET',
				dataType: 'text',	// text, json, xml
				success: function(data) {
					alert('연결 성공 : ' + data);
				}, 
				error: function(e) {
					alert('에러 : ' + e.status);
				}
			});
		});	
	});
	
</script>
</head>
<body>

<button id="btn">요청</button>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', function() {
			/*
			$.ajax('./data/data.csv', {
				success: function(data) {
					alert('연결 성공 : ' + data);
				}
			});
			
			$.ajax({
				url : './data/data.csv',
				success: function(data) {
					alert('연결 성공 : ' + data);
				}
			});
			*/
			$.ajax({
				url: './data/data.cs',
				type: 'GET',
				dataType: 'text',	// text, json, xml
				success: function(data) {
					alert('연결 성공 : ' + data);
				}, 
				error: function(e) {
					//alert('에러 : ' + e.status);
					alert('에러 : ' + e.responseText);
				}
			});
		});	
	});
	
</script>
</head>
<body>

<button id="btn">요청</button>

</body>
</html>

AjaxEx01.ex02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', function() {
			$.ajax({
				url: './data/data.json',
				type: 'GET',
				dataType: 'text',	// text, json, xml
				success: function(data) {
					console.log('연결 성공 : ' + data);
				}, 
				error: function(e) {
					//alert('에러 : ' + e.status);
					console.log('에러 : ' + e.responseText);
				}
			});
		});	
	});
	
</script>
</head>
<body>

<button id="btn">요청</button>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', function() {
			$.ajax({
				url: './data/data.json',
				type: 'GET',
				dataType: 'json',	// text, json, xml
				success: function(data) {
					console.log(data);
					console.log(data.length);
				}, 
				error: function(e) {
					//alert('에러 : ' + e.status);
					console.log('에러 : ' + e.responseText);
				}
			});
		});	
	});
	
</script>
</head>
<body>

<button id="btn">요청</button>

</body>
</html>

xml로 불러올 시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', function() {
			$.ajax({
				url: './data/data_xml.xml',
				type: 'GET',
				dataType: 'xml',	// text, json, xml
				success: function(data) {
					console.log(data);
					//console.log(data.length);
				}, 
				error: function(e) {
					//alert('에러 : ' + e.status);
					console.log('에러 : ' + e.responseText);
				}
			});
		});	
	});
	
</script>
</head>
<body>

<button id="btn">요청</button>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').on('click', function() {
			$.ajax({
				url: 'https://maps.googleapis.com/maps/api/geocode/json',
				/*
				data: {
					address: '%EC%84%9C%EC%9A%B8%EC%8B%9C%EC%B2%AD'
				},
				*/
				data : {
					address: '서울시청'
				},
				type: 'GET',
				dataType: 'text',	// text, json, xml
				success: function(data) {
					console.log(data);
					//console.log(data.length);
				}, 
				error: function(e) {
					//alert('에러 : ' + e.status);
					console.log('에러 : ' + e.responseText);
				}
			});
		});	
	});
	
</script>
</head>
<body>

<button id="btn">요청</button>

</body>
</html>

 

반응형
저작자표시 동일조건

댓글

티스토리툴바