books.xml
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<title>겨울왕국</title>
<author>디즈니</author>
</book>
<book>
<title>이솝우화</title>
<author>미드</author>
</book>
<book>
<title>힐러리의삶</title>
<author>클린턴</author>
</book>
<book>
<title>수지의 어린시절</title>
<author>EBS</author>
</book>
</books>
changeHtmlUsingDom.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- dom 객체를 이용하여 추가 삭제 -->
<script type="text/javascript">
var count = 0;
// 추가 버튼
function addItem() {
count++;
var newItemE = document.createElement("div"); // div요소 객체 하나 만들겠다는 소리
newItemE.setAttribute("id","item_"+ count) // 속성의 이름을 넣고 value값 -> <div id ="item_01">
var html = "새로 추가된 아이템[" + count + "] ";
html += "<input type=\"button\" value=\"삭제\" "+
"onclick=\"removeItem('item_" + count + "');\"/>";
// <div id="item_00">
// 새로 추가된 아이템[00]<input type="button" value="삭제"
// onclick="removeItem('item_00');/>"
// </div>
newItemE.innerHTML = html;
var itemListDiv = document.getElementById("itemList"); // 뿌릴곳
itemListDiv.appendChild(newItemE); // 위에서만든 newItemE를 자식 노드 추가
}
// 삭제버튼
function removeItem(itemId) {
var removeItem = document.getElementById(itemId); // 위에있는 'item_" + count 를 받는다.
removeItem.parentNode.removeChild(removeItem); // 부모노드에서 자식노드를 삭제
}
</script>
</head>
<body>
<h1>HTML DOM을 이용한 화면 변경</h1>
<input type="button" value="추가" onclick="addItem();"/>
<div id="itemList"></div>
</body>
</html>
getBooksXML.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>
<script type="text/javascript">
function getBookList() {
sendRequest("books.xml",null,displayBookList,"GET"); // 아쟉스는 _ok로 보냈는데 , xml은 books.xml를 만들어놔서 소스가 books.xml이다. 바로 접근가능
// null 넘어오는데이터가없고 , 콜백함수 , get방식으로 보냄
}
// 콜백함수
function displayBookList() {
if(httpRequest.readyState==4) {
if(httpRequest.status==200) {
// 전달받은 XML을 DOM객체를 넣음
var Document = httpRequest.responseXML; // XML를 반환받을때는 responseXML
//alert(Document);
// DOM 객체에서 Element추출
var booksE = Document.documentElement;
// book의 갯수 호출
var bookNL = booksE.getElementsByTagName("book"); // <book> : 태그 태그이름으로 찾는다.
//alert(bookNL.length + "개"); // books.xml에서 <book>이 4개이므로
// 전체데이터
var html = "";
html += "<ol>";
for(var i=0; i<bookNL.length;i++){ // 4 <bookNL배열
var bookE = bookNL.item(i); // var f = document.myForm 과 같은개념
// ★ ITEM은 머지
// title를 읽어낸다.겨울왕국이 0 firstChild 자식노드 값을가져옴
var titleStr = bookE
.getElementsByTagName("title")
.item(0)
.firstChild // 겨울왕국
.nodeValue;
var authorStr = bookE
.getElementsByTagName("author")
.item(0)
.firstChild // 디즈니
.nodeValue;
html += "<li>"
+ titleStr
+ " "
+ authorStr + "</li>";
}
html += "</ol>";
document.getElementById("bookDiv").innerHTML = html; // 한번에 써줄수있다.
}
}
}
window.onload = function() {
getBookList();
}
</script>
</head>
<body>
<h1 id="list">Book List</h1>
<hr/>
<div id="bookDiv" style="display: block; margin: 0 auto;"></div>
</body>
</html>
jsonUse.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* id는 #으로 받음 */
#result{
border: 1px dotted #0000ff;
}
div{
margin: auto;
width: 600;
height: 100%
}
</style>
<script type="text/javascript">
function useJson(){
/* JSON형태로 데이터 저장 */
/* 여러개면 대괄호 */
/* home의 0번째는 031-111-1111 1번째는 032-222-2222 */
//배열0 여기까지 하나의 데이터 (많이 사용함)
/* 번호를 안쓰려면 {} */
var userArray = [
{
userId:"suzi",
name:"배수지",
age:27,
phone:[
{home:["031-111-1111","032-222-2222"]},
{office:["02-333-3333","02-555-5555"]}
]
},//배열0
{
userId:"inna",
name:"유인나",
age:40,
phone:[{},{}]
},
{
userId:"insun",
name:"정인선",
age:30,
phone:[{},{}]
}
];
//한개의 데이터
var id = userArray[0].userId;
var name = userArray[0].name;
var age = userArray[0].age;
var homePhone1 = userArray[0].phone[0].home[0]; // 031-111-1111 를 가져온다.
var homePhone2 = userArray[0].phone[0].home[1]; // 032-222-1111 를 가져온다.
var officePhone1 = userArray[0].phone[1].office[0];
var officePhone2 = userArray[0].phone[1].office[1];
var printData = id + ", " + name + ", " + age + "<br/>";
printData += homePhone1 + "<br/>";
printData += homePhone2 + "<br/>";
printData += officePhone1 + "<br/>";
printData += officePhone2 + "<br/>-----------<br/>";
// 전체데이터를 다 가져오는 방법
for(var i=0;i<userArray.length;i++){
var userId = userArray[i].userId;
var userName = userArray[i].name;
var userAge = userArray[i].age;
printData += userId + ", " + userName +
", " + userAge + "<br/>"
}
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = printData;
}
window.onload = function(){
useJson();
}
</script>
</head>
<body>
<h1>JSON(Javascript Object Notation)</h1>
<hr/>
<div id="result"></div>
</body>
</html>
newsTitleXML.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>
<style type="text/css">
div{
margin: auto;
border: 1px solid #0000ff;
width: 700px;
height: 70%;
padding: 10px;
}
</style>
<title>Insert title here</title>
<script type="text/javascript">
function newsTitle() {
sendRequest("newsTitleXML_ok.jsp",null,displayNewsTitle,"GET"); // 경로 , 데이터 , 콜백함수 , 방식
setTimeout("newsTitle()",3000); // 자기자신을 3초마다 호출
}
//콜백함수
function displayNewsTitle() {
if(httpRequest.readyState==4){
if(httpRequest.status==200) {
var doc = httpRequest.responseXML;
var count = doc
.getElementsByTagName("count")
.item(0)
.firstChild
.nodeValue;
if(count>0) {
var titleNL = doc.getElementsByTagName("title");
var htmlData = "<ol>";
for(var i=0;i<titleNL.length;i++) {
htmlData += "<li>"
+ titleNL.item(i).firstChild.nodeValue;
+ "</li>";
}
htmlData += "</ol>";
var newsDiv = document.getElementById("news");
newsDiv.innerHTML = htmlData;
}
}
}
}
window.onload = function() {
newsTitle();
}
</script>
</head>
<body>
<h1>실시간 뉴스</h1>
<hr/>
<div id="news"></div>
</body>
</html>
newsTitleXML_ok.jsp
<%@page import="java.util.Date"%>
<%@page import="javax.xml.crypto.Data"%>
<%@ page contentType="text/xml; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<%!
// db에서 읽어온 데이터
String[] newsTitle = {
"[속보aaaaaaa]윤석열 부동산 정책, 집값 '대세 하락' 가속화하나",
"물가는 뛰고, 경기는 힘 빠지고…韓 경제 스태그플레이션 진입하나",
"조국사태 교훈? 尹측 靑 인사 추천만, 법무 경찰이 검증",
"'친문 전력' 김오수 어떡하나…권성동 스스로 거취 정해야",
"[강준만의 직설] '충성 경쟁'이 대통령을 망친다",
"코로나 신규확진 40만명대…정부는 감염병 등급 하향",
};
/* 위 데이터를 xml로 만들것임 */
%>
<!-- 내보내는 데이터가 xml이므로 ontentType="text/xml; 로 고침 -->
<!-- 공공데이터를 xml로 읽어와서 띄어준다. -->
<!-- result count data title 내가만들어가는 태그 -->
<result>
<count><%=newsTitle.length%></count>
<data>
<%for(int i=0;i<newsTitle.length;i++){ %>
<title><%=newsTitle[i] + "|" + new Date() %></title>
<%} %>
</data>
</result>
newsTitleJSON.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.news {
font-size: 10pt;
display: block; /* 화면을 보여주겠다 none은 숨기는것 */
margin: 0 auto;
background: yellow;
color: blue;
border: 1px dashed black;
width: 50%;
}
.newsError {
font-size: 10pt;
display: block; /* 화면을 보여주겠다 none은 숨기는것 */
margin: 0 auto;
background: orange;
color: red;
border: 1px dashed black;
width: 50%;
}
</style>
<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>
<script type="text/javascript">
function newsTitle() {
// 보냄
sendRequest("newsTitleJSON_ok.jsp",null,displayNewsTitle,"GET");
}
// 콜백함수
function displayNewsTitle() {
if(httpRequest.readyState==4) {
if(httpRequest.status==200) {
// json 데이터 받음
var jsonStr = httpRequest.responseText;
// alert(jsonStr);
// eval은 변수를 javascript의 함수처럼 사용하는 명령어
// 객체화 해서 집어넣는다.
// jsonStr 내용을 객체화 해서 jsonObject에 넣는다.(돔객체로바꿈)
var jsonObject = window.eval('(' + jsonStr + ')');
// alert(jsonObject);
// alert(jsonObject.count); // 객체화 했기때문에 접근할수있다. 6
// alert(jsonObject.titles[2].publisher); // 한국
var count = jsonObject.count;
if(count>0){
var htmlData = "<ol>";
for(var i=0; i<jsonObject.titles.length;i++){
// 데이터 꺼냄
var publisherStr = jsonObject.titles[i].publisher;
var headlineStr = jsonObject.titles[i].headline;
htmlData += "<li>" + headlineStr + " [" +
publisherStr + "]</li>";
}
htmlData += "</ol>";
var newsDiv = document.getElementById("newsDiv");
newsDiv.innerHTML = htmlData;
}
}
}
}
window.onload = function() {
newsTitle();
}
</script>
</head>
<body>
<h1>헤드라인 뉴스</h1>
<hr/>
<br/>
<div style="width: 50%; margin: 0 auto;">뉴스보기</div>
<div id="newsDiv" class="news"></div>
</body>
</html>
newsTitleJSON_ok.jsp
<%@ page contentType="text/plain; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!-- text/plain 으로 바꿔줌 일반적인 텍스트 이니까 -->
{
"count":6,
"titles":[
{
"publisher":"동아",
"headline":"[속보] 김세환 선관위 사무총장 사의 표명"
},
{
"publisher":"CNN",
"headline":"50만원짜리 삼성폰 실물공개…'가성비 갑vs충전기는?'"
},
{
"publisher":"한국",
"headline":"1억 넣으면 하루 5400원씩 매일 이자 준다는 '이것'"
},
{
"publisher":"JTBC",
"headline":"'GOS 논란 삼성 사과하라'…주총 찾은 1600명 개미들"
},
{
"publisher":"KBS",
"headline":"피해 급증 우크라…젤렌스키 대통령, 결단 내렸다"
},
{
"publisher":"MBC",
"headline":"중립국 핀란드 변화에…'푸틴, 땅치고 후회할 수도'"
}
]
}
newsTitleJSON2.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.news {
font-size: 10pt;
display: block; /* 화면을 보여주겠다 none은 숨기는것 */
margin: 0 auto;
background: yellow;
color: blue;
border: 1px dashed black;
width: 50%;
}
.newsError {
font-size: 10pt;
display: block; /* 화면을 보여주겠다 none은 숨기는것 */
margin: 0 auto;
background: orange;
color: red;
border: 1px dashed black;
width: 50%;
}
</style>
<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>
<script type="text/javascript">
function newsTitle() {
// 보냄
sendRequest("newsTitleJSON2_ok.jsp",null,displayNewsTitle,"GET");
}
// 콜백함수
function displayNewsTitle() {
if(httpRequest.readyState==4) {
if(httpRequest.status==200) {
// json 데이터 받음
var jsonStr = httpRequest.responseText;
// alert(jsonStr);
// eval은 변수를 javascript의 함수처럼 사용하는 명령어
// 객체화 해서 집어넣는다.
// jsonStr 내용을 객체화 해서 jsonObject에 넣는다.(돔객체로바꿈)
var jsonObject = window.eval('(' + jsonStr + ')');
// alert(jsonObject);
// alert(jsonObject.count); // 객체화 했기때문에 접근할수있다. 6
// alert(jsonObject.titles[2].publisher); // 한국
var count = jsonObject.count;
if(count>0){
var htmlData = "<ol>";
for(var i=0; i<jsonObject.titles.length;i++){
// 데이터 꺼냄
var publisherStr = jsonObject.titles[i].publisher;
var headlineStr = jsonObject.titles[i].headline;
htmlData += "<li>" + headlineStr + " [" +
publisherStr + "]</li>";
}
htmlData += "</ol>";
var newsDiv = document.getElementById("newsDiv");
newsDiv.innerHTML = htmlData;
}
}
}
}
window.onload = function() {
newsTitle();
}
</script>
</head>
<body>
<h1>헤드라인 뉴스</h1>
<hr/>
<br/>
<div style="width: 50%; margin: 0 auto;">뉴스보기</div>
<div id="newsDiv" class="news"></div>
</body>
</html>
newsTitleJSON2_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<%!
/* db에서 가져온 데이터 라고 생각해본다. */
String[] newsTitle = {
"[속보]윤석열 부동산 정책, 집값 '대세 하락' 가속화하나",
"물가는 뛰고, 경기는 힘 빠지고…韓 경제 스태그플레이션 진입하나",
"조국사태 교훈? 尹측 靑 인사 추천만, 법무 경찰이 검증",
"'친문 전력' 김오수 어떡하나…권성동 스스로 거취 정해야",
"[강준만의 직설] '충성 경쟁'이 대통령을 망친다",
"코로나 신규확진 40만명대…정부는 감염병 등급 하향",
};
String[] newsPublisher = {
"중앙","CNN","한국","JTBC","KBS","MBC"
};
%>
<!-- 데이터 이니까 {} 중괄호 있어야됨 -->
{
"count":<%=newsTitle.length %>,
"titles":[
<!-- 일반적인 데이터를 json 형태로 만듬 -->
<%
for(int i=0; i<newsTitle.length;i++) {
out.print("{");
out.print("headline:\""+newsTitle[i] + "\""); /* { 헤드라인 만듬 */
out.print(",");
out.print("publisher:\""+newsPublisher[i] + "\"");
out.print("}");
/* 계속 만드는데 마지막에 , 안오게함 */
if(i!=(newsTitle.length-1)) {
out.print(",");
}
}
%>
]
}
log.js
// 로그파일을 만듬
function log(msg) {
var consoleE = document.getElementById("console");
consoleE.innerHTML += msg + "<br/>";
}
member.js
//자바스크립트 객체
// 버전이 높아지면서 자바스크립트도 객체를 쓸수있게 바뀌었다
// Member 클래스
// 자바스크립트로 member 클래스 만듬
Member = function(id,name,addr){
this.id = id;
this.name = name; // 초기화도 가능 인스턴스 변수
this.addr = addr;
}
//메소드(함수)정의 - setter
// 프로토타입 : 클래스안에 메소드를 만듬
// setValue 라는 메소드를 만드는데 3개의 값을 넣어서 초기화
Member.prototype.setValue = function(id,name,addr){
this.id = id;
this.name = name;
this.addr = addr;
}
// 메소드(함수)정의--getter
Member.prototype.getValue = function() {
return "[" + this.id + "]" + this.name + "(" + this.addr + ")";
}
memberJson.js
// 자바스크립트로 패키지를 만들수 있다.
var com = new Object(); // com이라는 이름으로 객체 하나 생성
com.util = new Object(); // com.util이 생기면서 객체 하나 생성
// 패키지만듬
com.util.Member = function(id,name,addr){ //패키지 만든것.
this.id = id;
this.name = name;
this.addr = addr;
};
// 메소드를 json형식으로
com.util.Member.prototype = { // json의 중괄호 newsTitleJson
//KEY VALUE
setValue:function(id,name,addr){
this.id = id;
this.name = name;
this.addr = addr;
},
// 하나의 데이터를 가져오는 setter
setId:function(id){ //하나의 데이터 입력하는 setter
this.id = id;
},
// 전체데이터 가져오는 getter
getValue:function(){ //전체데이터 가져오는 getter
return this.id + ":" + this.name + ":" + this.addr;
},
getId:function(){ //하나의 데이터 가져오는 getter
return this.id;
},
// 메소드로 만드는 getter
toString:function(){ //메소드로 만든 getter
return this.id + ":" + this.name + ":" + this.addr;
}
};
memberClass.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- data/js log.js,member.js 자바스크립트 클래스,메소드 정의한걸 가져옴 -->
<script type="text/javascript" src="<%=cp%>/data/js/log.js"></script>
<script type="text/javascript" src="<%=cp%>/data/js/member.js"></script>
<script type="text/javascript">
function memberClass() {
//1.member.js없이 실행
var object1 = {}; // 객체를 만드는 방법 json방법
object1.id = "suzi";
object1.name = "배수지";
log("log1:" + object1.id + ", " + object1.name); // log(msg)
//2.member.js없이 실행
var object2 = new Object(); // new로 객체를 만들수있다.
object2.id="inna";
object2.name="유인나";
log("log2:" + object2.id + ", " + object2.name);
//3.Member 클래스 객체
var member = new Member("insun","정인선","서울");
log("member1: " + member.id + ", " + member.name + ", " + member.addr);
//4.setter 로 객체 만듬
member.setValue("suzin","경수진","옥탑방");
log("member2: " + member.id + ", " + member.name + ", " + member.addr);
// 5.getter로 호출
var memberInfo = member.getValue(); // suzin,경수진,옥탑방을 memberInfo에 넣는다
log("member.getValue(): " +memberInfo);
}
window.onload = function() {
memberClass();
}
</script>
</head>
<body>
<h1>JavaScript 클래스 사용 </h1>
<hr/>
<div id="console"></div> <!-- log.js 의 console에 출력 -->
</body>
</html>
memberJSONClass.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=cp%>/data/js/log.js"></script>
<script type="text/javascript" src="<%=cp%>/data/js/memberJson.js"></script>
<script type="text/javascript">
function memberClass(){
//1.
var member = new com.util.Member("dami","다미","서울"); //생성자로 초기화
log("member1 : " + member.id + ", " + member.name + ", " + member.addr);
//2.
member.setValue("inna","인나","부산");
log("member2 : " + member.id + ", " + member.name + ", " + member.addr);
//3.
var memberInfo = member.getValue();
log("member.getValue(): " + memberInfo);
//4.
member.setId("insun");
log("member.toString(): " + member.toString());
//5.
var id = member.getId();
log("member.getId(): " + id);
}
window.onload = function(){
memberClass();
}
</script>
</head>
<body>
<h1>Javascript 클래스 사용[JSON]</h1>
<hr/>
<div id="console"></div>
</body>
</html>
'FRONTEND > Ajax' 카테고리의 다른 글
| [Ajax] Ajax로 방명록 게시판 만들기 (0) | 2022.03.18 |
|---|---|
| [Ajax] Ajax로 데이터 넘기기 (아이디,POST,clock ) (0) | 2022.03.18 |
| [Ajax] Ajax를 이용하여 비동기 통신 (0) | 2022.03.16 |
| [Ajax] Ajax란 무엇인가? (0) | 2022.03.15 |
