728x90
반응형
JSON을 이용한 Ajax 통신 에서 JSON Array 안에 JSON Object를 추가하는 방법도 있다!
[Ajax/JSON] JSON을 이용한 Ajax 통신(JSON Object & JSON Array)
[JSON Object] Model > 요소 : model (String) , price(int), maker(String) /CarDTO.java package model; public class CarDTO { private String model; private int pirce; private String maker; public CarDTO..
creamilk88.tistory.com
[ 본문 보기 전에 !]
Ajax 란 비동기 웹통신이다.
비동기 웹 통신은 전체페이지 로딩 없이 "필요한 데이터"만 통신 받는 것을 의미한다.
XML or JSON이 필요한 이유는 비동기 통신을 위해 구조화된 데이터를 전달할 때 사용한다.
구조화된 데이터란 VO, DTO, List, Map 등을 의미한다.
[JSON Object]
Model
> 요소 : model (String) , price(int), maker(String)
/CarDTO.java
package model;
public class CarDTO {
private String model;
private int pirce;
private String maker;
public CarDTO() {
super();
}
public CarDTO(String model, int pirce) {
super();
this.model = model;
this.pirce = pirce;
}
public CarDTO(String model, int pirce, String maker) {
super();
this.model = model;
this.pirce = pirce;
this.maker = maker;
}
public String getModel() {
return model;
}
public void setModel(String model) {
this.model = model;
}
public int getPirce() {
return pirce;
}
public void setPirce(int pirce) {
this.pirce = pirce;
}
public String getMaker() {
return maker;
}
public void setMaker(String maker) {
this.maker = maker;
}
@Override
public String toString() {
return "CarDTO [model=" + model + ", pirce=" + pirce + ", maker=" + maker + "]";
}
}
> getCarInfo(maker) : maker를 입력받아, CarDTO의 정보를 반환해주는 기능
+ getCarList(maker) : maker를 입력받아, CarDTO를 ArrayList형식으로 반환해주는 기능
/CarDAO.java
package model;
import java.util.ArrayList;
public class CarDAO {
private static CarDAO instance = new CarDAO();
private CarDAO() {}
public static CarDAO getInstance() {
return instance;
}
public CarDTO getCarInfo(String maker) {
CarDTO car= null;
if (maker.contentEquals("테슬라")) {
car = new CarDTO("모델5", 1000);
} else if (maker.contentEquals("기아")) {
car = new CarDTO("K5", 800);
} else if (maker.contentEquals("쌍용")) {
car = new CarDTO("티볼리", 600);
}
return car;
}
public ArrayList<CarDTO> getCarList(String maker) {
ArrayList<CarDTO> carList = new ArrayList<CarDTO>();
if (maker.contentEquals("테슬라")) {
//car = new CarDTO("모델5", 1000);
carList.add(new CarDTO("모델5", 1000));
carList.add(new CarDTO("모델3", 800));
} else if (maker.contentEquals("기아")) {
//car = new CarDTO("K5", 800);
carList.add(new CarDTO("K5", 1000));
carList.add(new CarDTO("K7", 1200));
} else if (maker.contentEquals("쌍용")) {
//car = new CarDTO("티볼리", 600);
carList.add(new CarDTO("티볼리", 600));
carList.add(new CarDTO("코란도", 1000));
}
return carList;
}
}
Servlet
/CarJSONServlet.java
package step3;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import model.CarDAO;
import model.CarDTO;
@WebServlet("/CarJSONServlet")
public class CarJSONServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
String maker = request.getParameter("maker");
ArrayList<CarDTO> carList = CarDAO.getInstance().getCarList(maker);
JSONArray ja = new JSONArray(carList);
out.print(ja.toString());
out.close();
}
}
JSP
/step3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax (JSON Array)</title>
<style type="text/css">
table {
border-collapse: collapse;
}
table, tb, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
<script type="text/javascript">
var xhr;
var carComp;
function startAjax() {
//1. maker 가져와서 변수 할당
// + car Component 가져와서 변수 할당
var makerComp = document.getElementById("maker");
carComp = document.getElementById("carView");
//2. maker가 비어있으면 (= 입력이 아무것도 없으면)
// 기존 carComp를 비운다
if (makerComp.value === "") {
carComp.innerHTML = "";
return;
}
//3. XMLHttpRequest 객체 생성 -> xhr에 할당
xhr = new XMLHttpRequest();
//alert(xhr);
//4. 익명 함수 방식으로 콜백함수 등록
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200){
//5. JSON.parse()를 통해 js 배열로 변환
//JSON : 내장 클래스 (브라우저 지원)
var ja = JSON.parse(xhr.response);
//alert(ja.length);
//6. 데이터 받아오기
//for문으로 읽기 -> table로 만들기
var tb = ""; //tb = tbody에 들어갈 tr & td
for (var i = 0; i < ja.length; i++) {
tb += "<tr>";
tb += "<td>"+ (i+1) +"</td>";
tb += "<td>"+ ja[i].model +"</td>";
tb += "<td>"+ ja[i].price +"</td>";
tb += "</tr>";
}
//table에 value(innerHTML) 할당
carComp.innerHTML = tb;
}//if
}//callback
//7. open : url에 maker를 전송
xhr.open("GET", "CarJSONServlet?maker="+makerComp.value);
//8. send
xhr.send();
}//startAjax function
</script>
</head>
<body>
<!-- 서버로 submit하는 것이 아니기 때문에,
정보만 보내는 것이라서 select만 이용해서
ajax 방식으로 정보를 전송할 수 있다.
-->
<select id="maker" onchange="startAjax()">
<option value="">---</option>
<option value="테슬라">테슬라</option>
<option value="기아">기아</option>
<option value="쌍용">쌍용</option>
</select>
<br><br>
<table>
<thead>
<tr>
<th>순번</th>
<th>모델명</th>
<th>가격</th>
</tr>
</thead>
<tbody id="carView"></tbody>
</table>
</body>
</html>[ 결과 browser ]
1. 시작 화면
2_1. 모델 선택 했을 때
2_2. 모델 선택 했을 때
728x90
반응형
'Java Web Programming > 5. JavaScript | Ajax | jQuery (JSON)' 카테고리의 다른 글
| [Ajax/jQuery] 제이쿼리 활용 (0) | 2020.10.07 |
|---|---|
| [Ajax/jQuery] 제이쿼리 기초 : 시작하기 & 예제 코드 (0) | 2020.10.06 |
| [Ajax/JSON] JSON을 이용한 Ajax 통신(JSON Object & JSON Array) (2) | 2020.10.06 |
| [Ajax/JSON] JSON Basic! (개념, 특징, 기본문법) (0) | 2020.10.06 |
| [JSP/Ajax] Ajax 방식으로 정보 검색 - get / post 방식 (응답 대기중) (0) | 2020.10.05 |
