열심히 끝까지
디바이스 융합 자바(Java) day35 - ajax(비동기처리=실시간반영),Json,API 본문
디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(수업내용)
디바이스 융합 자바(Java) day35 - ajax(비동기처리=실시간반영),Json,API
노유림 2022. 7. 29. 17:31[오늘 수업]
AJAX
: 비동기처리(실시간반영)
ex ) 아이디 중복 검사, 네이버 지도, ...
: jQuery에서 비동기처리를 담당하는 메서드
: JSON 데이터와 함께 활용됨 - 단독으로 사용되는 경우는 없음
>> JSON이란?
: Python과 함께 급부상하는 것, 가독성이 좋지는 않음(중괄호로 시작, 끝)
: collection framework에 map처럼 구성
ex) 네이버 뉴스의 RSS >> 보내주는 끝은 .xml로 구성
>> 마크업 언어로 tag(태그)로 구성,
xml 데이터 파일 : 기사에서 많이 확인 가능, 특정 구성으로 약속해 놓은 것으로 데이터 관리
>> 마크업언어보다 JSON으로 하는 것이 더 좋음
ex ) 기상관측데이터 -> 프로그램
미세먼지데이터 -> 모듈
>> 데이터 : 연산 가능 + 엑셀에 넣어서 가능
>> JSON + AJAX 를 해볼 것
: JSON 데이터 받아보려고 했지만 입맛에 맞는 것이 없기에 직접 제작!
>> data.json
[
{"name": "홍길동", "score1": 95, "score2": 90, "score3": 80, "score4": 85},
{"name": "홍길순", "score1": 80, "score2": 75, "score3": 60, "score4": 75}
]
>> Ajax + JSON 받아오는 html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax() 메서드와 JSON 데이터</title>
<style type="text/css">
table{
width:100%;
border:1px solid black;
}
th,td{
border:1px solid black;
text-align:center;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<!-- ajax 부르는 법 -->
<script type="text/javascript">
$.ajax({
type:"GET", // DEFAULT << POST와 DEFAULT방식이 확연히 차이 남
url:"data.json",
dataType:"json",
success:function(data){ // data인자는 data.json의 전체 데이터를 의미
console.log("성공!");
var elem="";
$.each(data,function(index,obj){ // obj는 json파일에 저장된 개별 객체를 의미
// 두번째 인자가 해당되기 때문에 무조건 인자를 두개 맞춰주어야 함
elem+="<tr>";
elem+="<td>"+obj.name+"</td>";
elem+="<td>"+obj.score1+"</td>";
elem+="<td>"+obj.score2+"</td>";
elem+="<td>"+obj.score3+"</td>";
elem+="<td>"+obj.score4+"</td>";
elem+="</tr>";
}); // 데이터의 개수만큼 function 수행해 달라는 메서드
$("table tbody").append(elem); // tbody에 들어간 데이터를 가져오기
}, // 성공
error:function(error){ // 에러가 발생하면?
console.log(error.status); // 에러 상태
console.log(error.errorText); // 에러 메세지 등장
} // 실패
// 중괄호 대괄호 콤마의 개수로 에러가 날 가능성 존재
});
// jQuery 라이브러리가 가진,
// 비동기처리를 담당하는(실시간으로 데이터를 로드하는) 메서드
</script>
</head>
<body>
<table>
<caption>학생들의 시험점수</caption>
<thead>
<tr>
<th>이름</th>
<th>시험1</th>
<th>시험2</th>
<th>시험3</th>
<th>시험4</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
-------------------------
<간단 예제>
AJAX & JSON 이용하여
사진을 넣어서 사진에 링크 걸어두기
>>imgData.json
[
{"name":"주사위4", "imgName":"4.png", "link":"https://www.naver.com/"},
{"name":"주사위5", "imgName":"5.png", "link":"https://www.daum.net/"},
{"name":"주사위6", "imgName":"6.png", "link":"https://comic.naver.com/index"}
]
>> Ajax+JSON 받아오는 html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<!-- ajax 부르는 법 -->
<script type="text/javascript">
$.ajax({
type:"GET", // DEFAULT << POST와 DEFAULT방식이 확연히 차이 남
url:"imgData.json",
dataType:"json",
success:function(data){ // data인자는 data.json의 전체 데이터를 의미
console.log("성공!");
var elem="";
$.each(data,function(index,obj){ // obj는 json파일에 저장된 개별 객체를 의미
// 두번째 인자가 해당되기 때문에 무조건 인자를 두개 맞춰주어야 함
elem+="<h2>"+obj.name+"</h2>";
elem+="<a href="+obj.link+"><img alt="+obj.imgName+" src= 'images/"+obj.imgName+"'>";
elem+="</tr>";
}); // 데이터의 개수만큼 function 수행해 달라는 메서드
$("#img").append(elem)
}, // 성공
error:function(error){ // 에러가 발생하면?
console.log(error.status); // 에러 상태
console.log(error.errorText); // 에러 메세지 등장
} // 실패
// 중괄호 대괄호 콤마의 개수로 에러가 날 가능성 존재
});
// jQuery 라이브러리가 가진,
// 비동기처리를 담당하는(실시간으로 데이터를 로드하는) 메서드
</script>
</head>
<body>
<div id="wrapper">
<h1>ajax() 메서드 실습</h1>
<div id="img">
</div>
</div>
</body>
</html>
------------------------------
API
외부 모듈을 연결
ex ) 구글맵, 카카오맵, ...
>> 구글맵 API
API 연결할 때, 구글맵 API가 필요
>> 좌표 찍어서 표현
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구글 맵 API</title>
<style type="text/css">
*{
margin:5px;
padding:5px;
}
#map{
width:500px;
height:300px;
border:2px solid blue;
}
</style>
<!-- 구글맵 api링크 쓰는 곳 -->
<script src="http://maps.google.com/maps/api/js?key=key값®ion=kr"></script>
</head>
<body>
<div id="map">
</div>
<button id="btn1">지도의 중심 이동-1</button>
<button id="btn2">지도의 중심 이동-2</button>
<script type="text/javascript">
// 자바스크립트 제공
var btn1=document.getElementById('btn1');
btn1.addEventListener('click',func1);
var btn2=document.getElementById('btn2');
btn2.addEventListener('click',func2);
var map; // 전역변수로 만듦
function initMap(){
var ll={lat:37.719925,lng:127.203216} // 주소 입력
map=new google.maps.Map(
document.getElementById("map"),
{zoom:17,center:ll}
);
new google.maps.Marker(
{position:ll,map:map,label:"마커-내 현재위치"}
);
}
initMap();
function func1(){ // 중심을 바꾸는 과정
var ll={lat:37.654463, lng:127.060565}; // 이동시킬 위치
map.panTo(ll);
map.setZoom(12);
}
function func2(){
var ll={lat:37.534979, lng:127.317845};
map = new google.maps.Map( // 지도를 새로 만드는 과정
document.getElementById('map'),
{zoom:14,center:ll}
);
}
</script>
</body>
</html>
>> 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예제</title>
<style type="text/css">
* {
margin: 10px;
padding: 5px;
}
#map {
width: 1000px;
height: 750px;
}
</style>
<script
src="http://maps.google.com/maps/api/js?key=키값&callback=initMap®ion=kr"></script>
</head>
<body>
<div id='map'></div>
<button id='origin'>기본장소</button>
<button id='btn1'>두물머리</button>
<button id='btn2'>remember1910</button>
<script type="text/javascript">
var origin = document.getElementById('origin');
origin.addEventListener('click', normal);
var btn1 = document.getElementById('btn1');
btn1.addEventListener('click', domul);
var btn2 = document.getElementById('btn2');
btn2.addEventListener('click', remember1910);
var map; // 전역변수로 만듦
function initMap() {
var ll = {
lat : 37.500004,
lng : 127.035591
} // 주소 입력
map = new google.maps.Map(document.getElementById("map"), {
zoom : 17,
center : ll
});
new google.maps.Marker({
position : ll,
map : map,
label : "코리아IT아카데미 강남점"
});
}
initMap();
function normal() { // 중심을 바꾸는 과정
var ll = {
lat : 37.500004,
lng : 127.035591
}; // 이동시킬 위치
map.panTo(ll);
map.setZoom(17);
new google.maps.Marker({
position : ll,
map : map,
label : "코리아IT아카데미 강남점"
});
}
function domul() { // 새 창 가져오기
var ll = {
lat : 37.534732,
lng : 127.317886
}; // 이동시킬 위치
map = new google.maps.Map(document.getElementById("map"), {
zoom : 19,
center : ll
});
new google.maps.Marker({
position : ll,
map : map,
label : {
text : "두물머리",
color : "green",
font : "bold"
},
icon:{
url:"images/domul1.jpg",
scaledSize:new google.maps.Size(180, 180),
origin:new google.maps.Point(0,0),
anchor:new google.maps.Point(45,150)
}
});
}
function remember1910() { // 새 창 가져오기
var ll = {
lat : 37.632871,
lng : 127.206527
}; // 이동시킬 위치
map = new google.maps.Map(document.getElementById("map"), {
zoom : 19,
center : ll
});
new google.maps.Marker({
position : ll,
map : map,
icon:{
url:"images/domul.jpg",
scaledSize:new google.maps.Size(150, 150),
origin:new google.maps.Point(0,0),
anchor:new google.maps.Point(30,150)
},
label : {
text : "REMEMBER1910 남양주 역사체험관",
font : "bold",
color : "yellow"
}
});
}
</script>
</body>
</html>
>> 보면 좋은 사이트
: 코더들의 고민 등이 올라오는 좋은 사이트 및 게시물