1. 프롤로그
json의 기본개념을 익혔다면 구글버전 json인 gson라이브러리로 ajax실습 시작~
실습에 앞서, 먼저 메이븐레지스토리에서 gson을 다운받아 lib에 저장해야합니다.
2. 필요한 파일.
- product.vo.java
- productListController.java
- ajax.jsp
3. 파일 기본 셋팅.
1) product.vo
먼저 product.vo를 셋팅해줍니다.
간단히 테스트용으로 만들어 db를 따로 연결하지 않을 거기 때문에 전체
속성을 불러올 필드도 하나 생성해줍니다.
package sample3;
public class Product {
private int no;
private String name;
private String company;
private int price;
private int discountPrice;
private boolean isOnSell;
public Product() {}
public Product(int no, String name, String company, int price, int discountPrice, boolean isOnSell) {
super();
this.no = no;
this.name = name;
this.company = company;
this.price = price;
this.discountPrice = discountPrice;
this.isOnSell = isOnSell;
}
public int getNo() {
return no;
}
public void setNo(int no) {
this.no = no;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCompany() {
return company;
}
public void setCompany(String company) {
this.company = company;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
public int getDiscountPrice() {
return discountPrice;
}
public void setDiscountPrice(int discountPrice) {
this.discountPrice = discountPrice;
}
public boolean isOnSell() {
return isOnSell;
}
public void setOnSell(boolean isOnSell) {
this.isOnSell = isOnSell;
}
}
2) ProductListController.java
controller도 frontController없이 임시로 만드는 것이기 때문에
webservlet을 여기서 바로 적용해줘야합니다.
별도의 인터페이스가 없기 때문에 httpserlvet을 상속받아 service메서드를 재정의해야합니다.
데이터는 간단하게 3개정도 vo를 불러와 list로 넣어주고, gson에 담아줍니다.
응답컨텐츠 타입을 json으로 설정하고 받았을 때 글씨가 깨지지않도록 UTF-8으로 설정해야합니다.
package sample3;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import com.google.gson.Gson;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
@WebServlet("/product/list.hta")
public class ProductListController extends HttpServlet{
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Product> productList = List.of(new Product(100, "갤럭시z플립", "삼성전자", 1500000, 1350000, true),
new Product(200, "아이폰2", "애플", 1500000, 1350000, true),
new Product(300, "갤럭시z플립2", "삼성전자", 1500000, 1350000, true));
Gson gson = new Gson();
// json 형식의 텍스트를 전달. 여러개라 배열형식 텍스트로 보여짐. [{},{},{}]
String jsonText = gson.toJson(productList);
System.out.println(jsonText);
//String jsonText = gson.toJson(product); => 1개만 보내면 배열이 아니라 그냥 객체하나로 보임.{}
// 응답컨텐츠의 타입을 json으로 설정한다.
response.setContentType("application/json; charset=UTF-8");
// 브라우저로 텍스트 컨텐츠를 내려보내는 출력스트림을 획득한다.
PrintWriter writer = response.getWriter();
// 브라우저로 jsonText를 내려보낸다.
writer.write(jsonText);
writer.flush();
}
}3) ajax.jsp
이 파일은 화면에 보여지는 디자인요소파일이다.
ajax로 데이터를 받아오는 화면이니 기본 테이블만 만들어놓는다.
그리고 깔아놓은 gson라이브러리 스크립트를 넣어준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" >
<title></title>
</head>
<body>
<div class="container">
<table class="table" id="table-products">
<thead>
<tr>
<th>번호</th>
<th>상품명</th>
<th>제조회사</th>
<th>가격</th>
<th>할인가격</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>이러면 기본셋팅 끝!
4. ajax로 값 불러오기.
ajax는 자바스크립트를 통해 서버로 HTTP를 통신하여 비동기로 값을 불러오는 것을
말한다.
- ajax.jsp파일에 자바스크립트를 추가하여 $.getJSON으로 값을 다음과 같이 불러와야합니다.
- 매개변수로 URL,데이터처리할 함수를 넣어줍니다.
- 여기서 처리하는 data는 서버에서 내려보낸 데이터를 의미합니다.
- forEach()는 el표현식에서의 용도와 동일하게 list를 하나씩 꺼내는 enhanced for문이다. 그 안에는 product라는 변수를 넣어 값을 하나씩 꺼내면 ajax를 통해 값이 출력됩니다.
이를 사용하면 번거롭게 값을 보내고 td에 ${}을 사용해 값을 일일히 붙이지 않고도 javascript의 ajax로 값을 꺼내 querySelector와 innerHtml을 이용해 값을 집어넣을 수 있게 됩니다.
별도의 라이브러리가 필요하긴 하지만 이로써 서버와 통신하기가 훨씬 쉬워짐을 알 수 있습니다.
<script type="text/javascript">
/*
객체 이름이 $
자바스크립트에서 서버로 HTTP통신하기
$.getJSON(url, 함수)
url : 클라이언트의 요청을 처리하는 웹애플리케이션의 URL => @WebServlet("/product/list.hta")
함수 : 서버가 클라이언트의 요청을 처리하고, 응답데이터를 내려보내면 실행되는 함수다.
function(data){...}
* data에는 서버가 내려보낸 데이터가 전달된다.
* jQuery는 서버가 json텍스트를 내려보내면 자바스크립트 객체나 배열로 변환 후 data에전달해준다.
별도의 라이브러리가 필요하긴 하지만 서버와 통신하기가 훨씬 쉬워짐.
*/
$.getJSON("/script2/product/list.hta", function(data){
var htmlContent = "";
data.forEach((product) => {
htmlContent += "<tr>";
htmlContent += "<td>"+product.no+"<td>";
htmlContent += "<td>"+product.name+"<td>";
htmlContent += "<td>"+product.company+"<td>";
htmlContent += "<td>"+product.discountPrice+"<td>";
htmlContent += "</tr>";
})
document.querySelector("#table-products tbody").innerHTML = htmlContent;
})
</script>아까 webservlet에 저장한 주소로 들어가보면
(script2/product/list.hta)
json형태로 값이 잘 전달되어 출력되는 것을 볼 수 있습니다.
그리고 ajax.jsp파일 주소로 들어가면!
이렇게 자바스크립트에서 queryselector.innerHTML로 JSON데이터를 넣어준 값이 제대로 출력되는 것을 확인할 수 있습니다.
(근데 왜 한칸씩 밀려서 나오는거지...ㅎㅎ
일단 값은 잘 출력됐네요...)
$객체가 뭘까?
아까 jsp에서 json값을 꺼낼 때 사용한 객체가 $입니다.
이미 라이브러리에 내재된 객체이긴하지만 어떤 원리로 우리가 $로 값을 꺼내올 수 있었던 걸까요?
대략적인 원리는 아래의 코드를 보면 알 수 있습니다.
onreadystatechange라는 요청처리상태에 따라 0-4까지 변하는 메서드에서 성공적인 응답을 받은 경우에만 데이터를 받는 함수를 실행시키는 원리의 객체입니다.
그래서 값이 안받아진 경우에는 실행이 되지않아 페이지 오류가 뜨는 것이 아니라 값이 없는 정상적인 jsp페이지가 뜨게 됩니다.
실습정리.
진짜 스프링프로그램에선 gson라이브러리를 추가할 필요없이 모든것이 내재되어있지만
그걸 사용하기 전에 어떤 원리로 ajax를 이용할 수 있는 건지 실습을 해 보았습니다.
gson의 출력스트림으로 브라우저에 jsontext를 저장하는 것과 $객체를 사용해 getGson메서드를 사용하여 값을 받아오는 연습을 통해 어떻게 서버와 비동기적으로 값을 요청하고 받는지를 알 수 있었던 실습이었습니다.
