반응형
AJAX : 비동기식 통신(request를 보내고 response가 돌아오기 전까지 다른일을 하다가 응답이 오면 처리한다)
동기식은 요청을 보내고 응답이 올때까지 아무것도 못한다.
xml : ex) <insert> </insert> 태그로 이루어져 있고 그 안에 데이터를 넣는 형태
ajax 기본구조
javaScript 에서의 객체 처럼 {}안에 .
url : 내가 요청할 server url
type: get / post -> 전송할 데이터가 있을때 필수로 적고 받아오기만 할때 생략가능
get방식 쿼리스트링에 데이터를 보낼때
? key = value & key=val 형식으로 보낸다.
success, error -> 성공, 실패 했을때의 함수 ( 화살표 함수 등 여러 함수표현 가능)
AJAX 데이터 전송방식 -> CSV, XML, JSON
csv : 컴마를 기준으로 나누어진 엑셀같은 파일 (용량이 적지만 가독성이 떨어진다)
xml : 가독성이 좋으나, 데이터의 기본 부피가 크다 (AJAX는 비동기방식으로 속도가 빨라야한다)
그래서 JSON 방식을 쓴다.
{"key값":"Value값"} 형태로 이루어져 있다.
ex01Ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button>Ajax 요청해보기</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
// 1. 버튼을 클릭했을 때
$('button').on('click',()=>{
// 2. ex01Ajax 서블릿 파일로 데이터를 요청
$.ajax({
// 요청할 서버의 url
url : 'ex01Ajax',
success : function(res){
// 매개변수는 out.print로 웹페이지 내부에 출력 된 코드를 받아오기 위한것으로
// 매개변수명은 상관없다.
// res --> 서버페이지(서블릿)에서 받아온 결과값
console.log(res);
},
error : function(){
alert('요청실패');
}
});
});
</script>
</body>
</html>ex01Ajax.java (servlet)
package com.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ex01Ajax")
public class ex01Ajax extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 웹페이지에 출력해줘야 ajax로 데이터를 보내줄 수 있다.
// 1. 인코딩
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
// 2. PrintWriter객체 생성
PrintWriter out = response.getWriter();
// 3. 웹페이지에 출력
out.print("멜론");
}
}오픈 api를 활용해서 데이터를 받아오고 그 안에서 원하는 데이터 가져오기
ex02MovieAjax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button>영화정보가져오기</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$('button').on('click',()=>{
$.ajax({
url : "https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20220501",
success : (res)=>{
console.log(res);
// res --> javascript 객체 형태
console.log(res.boxOfficeResult);
console.log(res.boxOfficeResult.weeklyBoxOfficeList);
console.log(res.boxOfficeResult.weeklyBoxOfficeList[0]);
console.log(res.boxOfficeResult.weeklyBoxOfficeList[0].movieNm);
},
error : ()=>{
console.log('실패');
}
});
});
</script>
</body>
</html>
console.log(res);
console.log(res.boxOfficeResult);
console.log(res.boxOfficeResult.weeklyBoxOfficeList);
console.log(res.boxOfficeResult.weeklyBoxOfficeList[0]);
console.log(res.boxOfficeResult.weeklyBoxOfficeList[0].movieNm);
순서대로 결과값.
ex03SendAjax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text">
<button>데이터 전송하기</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
// 1. 버튼을 클릭했을 때
$('button').on('click',()=>{
// 1-2. input태그 내부에 있는 값을 가져오기
// $('input').attr('value')
let data2 = $('input').val();
// 입력했던 데이터 지우기
$('input').val('');
// 1-3. 객체 형태로 만들어서 보내주기
let obj = {
data:data2,
name: 'jm'
}
// 2. ajax를 실행시킬 수 있도록 코드 작성
// url --> ex03SendAjax
$.ajax({
url:'ex03SendAjax',
type:'GET',
//반드시 키값을 달아서 데이터를 전송해줄것
//쿼리스트링 방식으로 쓸때는 띄어쓰기X
// key value 형태
//data:'data='+data2,
// 객체를 만들어서 보낼 data에 객체로
data : obj,
// 받아올 결과값의 자료형을 지정하기
dataType: 'json',
success:(res)=>{
console.log('성공');
console.log(res);
//json라이브러리에서 name(키)의 값을 가져오기
console.log(res.name);
},
error:()=>{
console.log('실패');
}
});
});
</script>
</body>
</html>ex03SendAjax.java(servlet)
package com.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Set;
import javax.servlet.ServletException;
import javax.servlet.WriteListener;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.model.Person;
@WebServlet("/ex03SendAjax")
public class ex03SendAjax extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// ajax로 보내준 데이터를 가져오기
String data = request.getParameter("data");
String name = request.getParameter("name");
System.out.println("받아온 data : "+data);
System.out.println("받아온 name : "+name);
// ajax를 활용해서 데이터를 돌려주려면 반드시 서버페이지에서
// 돌려줄 데이터를 웹페이지로 출력해줘야한다.
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
// 데이터를 돌려주기
// out.print("한규창,필감중,고진석,류민호");
// json 구조로 돌려주는 방법
// key:value 형태로 돌려줘야한다. 아래와 같이 \를 활용해 문자열로 끊어줘야해서 너무 비효율적
// --> java에서 json구조를 만들어주는 외부 라이브러리를 사용해보자
// out.print("{\"name\":\"고진석\"}");
// Gson 라이브러리 사용방법
// java 객체 형태를 javascript의 json 구조로 변환
// 1. 내가 전송해 줄 데이터를 java 객체 형태로 만들기
Person person = new Person("고진석",20);
// 2. 변환을 시켜줄 도구를 꺼내오기
Gson gson = new Gson();
// 3. 도구 사용하기
String json = gson.toJson(person);
// 4. 화면에 출력해주기
out.print(json);
}
}person.java(class)
package com.model;
public class Person {
// gson을 사용하면 필드명 == key값
private String name;
private int age;
public Person(String name, int age) {
this.name = name;
this.age = age;
}
}index.html 템플릿 가져와서 카카오맵 api 구동
<!DOCTYPE HTML>
<html>
<head>
<title>My Portfolio</title>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<div class="inner">
<a href="#" class="image avatar"><img src="images/avatar.jpg"
alt="" /></a>
<h1>
<strong>I am JM </strong>, a super simple<br /> responsive
site template freebie<br />
</div>
</header>
<!-- Main -->
<div id="main">
<!-- One -->
<section id="one">
<header class="major">
<h2></h2>
</header>
<p></p>
<ul class="actions">
<li><a href="#" class="button">Learn More</a></li>
</ul>
</section>
<!-- Two -->
<section id="two">
<h2>Recent Work</h2>
<div class="row">
<article class="col-6 col-12-xsmall work-item">
<canvas id='activeUsersChart' width='322' height='190'></canvas>
<h3>Graph</h3>
<p>Google api</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<div id='map' class="image fit thumb">
<img src="images/thumbs/02.jpg" alt="" />
</div>
<h3>KakaoMap</h3>
<p>Kakao map</p>
</article>
</div>
<ul class="actions">
<li><a href="#" class="button">Full Portfolio</a></li>
</ul>
</section>
<!-- Three -->
<section id="three">
<h2>Ajax Test</h2>
<p></p>
<div class="row">
<div class="col-8 col-12-small">
<form method="post" action="#">
<div class="row gtr-uniform gtr-50">
<div class="col-6 col-12-xsmall">
<input type="text" name="id" id="id" placeholder="Id" />
</div>
<div class="col-6 col-12-xsmall">
<input type="password" name="pw" id="pw" placeholder="Password" />
</div>
<div class="col-12">
<textarea name="message" id="message" placeholder="Message"
rows="4"></textarea>
</div>
</div>
</form>
<ul class="actions">
<li><input type="button" value="Send Message" id="button" /></li>
</ul>
</div>
<div class="col-4 col-12-small">
<ul class="labeled-icons">
<li>
<h3 class="icon solid fa-home">
<span class="label">Address</span>
</h3> <br />
</li>
<li>
<h3 class="icon solid fa-mobile-alt">
<span class="label">Phone</span>
</h3>
</li>
<li>
<h3 class="icon solid fa-envelope">
<span class="label">Email</span>
</h3> <a href="#"></a>
</li>
</ul>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span
class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-github"><span
class="label">Github</span></a></li>
<li><a href="#" class="icon brands fa-dribbble"><span
class="label">Dribbble</span></a></li>
<li><a href="#" class="icon solid fa-envelope"><span
class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© Untitled</li>
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<!-- 카카오맵 api 로딩 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=eb2146ebe6c9fd82bc8e13393c533615"></script>
<script>
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(35.110832999999644, 126.87590619999963), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
// 장소 검색 객체를 생성합니다
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
</script>
</body>
</html>
차트에 랜덤한 숫자 넣고 주기적 요청을 통해 차트가 변하게
<!DOCTYPE HTML>
<html>
<head>
<title>My Portfolio</title>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<div class="inner">
<a href="#" class="image avatar"><img src="images/avatar.jpg"
alt="" /></a>
<h1>
<strong>I am JM </strong>, a super simple<br /> responsive
site template freebie<br />
</div>
</header>
<!-- Main -->
<div id="main">
<!-- One -->
<section id="one">
<header class="major">
<h2></h2>
</header>
<p></p>
<ul class="actions">
<li><a href="#" class="button">Learn More</a></li>
</ul>
</section>
<!-- Two -->
<section id="two">
<h2>Recent Work</h2>
<div class="row">
<article class="col-6 col-12-xsmall work-item">
<canvas id='activeUsersChart' width='322' height='190'></canvas>
<h3>Graph</h3>
<p>Google api</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<div id='map' class="image fit thumb">
<img src="images/thumbs/02.jpg" alt="" />
</div>
<h3>KakaoMap</h3>
<p>Kakao map</p>
</article>
</div>
<ul class="actions">
<li><a href="#" class="button">Full Portfolio</a></li>
</ul>
</section>
<!-- Three -->
<section id="three">
<h2>Ajax Test</h2>
<p></p>
<div class="row">
<div class="col-8 col-12-small">
<form method="post" action="#">
<div class="row gtr-uniform gtr-50">
<div class="col-6 col-12-xsmall">
<input type="text" name="id" id="id" placeholder="Id" />
</div>
<div class="col-6 col-12-xsmall">
<input type="password" name="pw" id="pw" placeholder="Password" />
</div>
<div class="col-12">
<textarea name="message" id="message" placeholder="Message"
rows="4"></textarea>
</div>
</div>
</form>
<ul class="actions">
<li><input type="button" value="Send Message" id="button" /></li>
</ul>
</div>
<div class="col-4 col-12-small">
<ul class="labeled-icons">
<li>
<h3 class="icon solid fa-home">
<span class="label">Address</span>
</h3> <br />
</li>
<li>
<h3 class="icon solid fa-mobile-alt">
<span class="label">Phone</span>
</h3>
</li>
<li>
<h3 class="icon solid fa-envelope">
<span class="label">Email</span>
</h3> <a href="#"></a>
</li>
</ul>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span
class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-github"><span
class="label">Github</span></a></li>
<li><a href="#" class="icon brands fa-dribbble"><span
class="label">Dribbble</span></a></li>
<li><a href="#" class="icon solid fa-envelope"><span
class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© Untitled</li>
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<!-- 카카오맵 api 로딩 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=eb2146ebe6c9fd82bc8e13393c533615"></script>
<script>
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(35.110832999999644, 126.87590619999963), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
// 장소 검색 객체를 생성합니다
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
</script>
<!-- chart.js 로드하기 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>
<script>
// 랜덤한 숫자를 생성하는 함수 만들기
const random = ()=>{
// 랜덤한 수 생성해서 올림
return Math.round(Math.random()*100);
}
// 랜덤한 데이터 생성하는 함수 만들기
const randomData = ()=> {
return [random(),random(),random(),random(),random(),
random(),random(),random(),random(),random(),]
}
// 1. chart를 놓을 공간을 가져오기
const ctx = document.getElementById('activeUsersChart').getContext('2d');
// 2. chart 생성하기 chart 옵션들 --> 객체형태로 들어간다
// new Chart(공간, {chart 옵션들})
const myChart = new Chart(ctx, {
type: 'bar', // 차트의 종류 ex) pie, line, polarArea 등등
// 차트에 들어가는 데이터의 정보
data: {
// x축에 들어가게 될 label 정보
// ...을 통해서 return타입이 배열인 데이터를 하나씩 받아온다
labels: [...randomData(), ...randomData()],
datasets: [{
// 데이터에 대한 정보
label: '# of Votes',
// 실제로 넣어지고 있는 데이터들
data: [...randomData(), ...randomData()],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
/*['rgba(255, 99, 132, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)']*/
],
borderWidth: 0
}]
},
// 축에 대한 정보
options: {
scales: {
// 중괄호 구분 잘하기
// y축에 대한 정보
y: {
beginAtZero: true,
grid: {
// 그리드라인 없애는 방법
drawOnChartArea:false
}
},
// x축에 대한 정보
x: {
grid: {
drawOnChartArea:false
}
}
}
}
});
let randomUser = 0;
// 주기적으로 요청하는 방법
setInterval(() => {
randomUser = random();
myChart.data.datasets[0].data.splice(0,1);
myChart.data.datasets[0].data.push(randomUser);
myChart.update();
}, 1000);
</script>
</body>
</html>
차트가 1초(1000ms)마다 변한다.
반응형
'빅데이터 서비스 교육 > Java Script' 카테고리의 다른 글
| JaVaScript jQuery (0) | 2022.05.30 |
|---|---|
| Java Script DOM (0) | 2022.05.26 |
| Java Script 배열, 함수, 객체 (0) | 2022.05.24 |
| Java 입출력문, 조건문, 반복문 (0) | 2022.05.23 |