jQuery의 ajax 처리

1. jQuery로 AJAX(비동기 통신) 처리하기

• jQuery는 AJAX 처리를 위한 다양한 메소드를 지원한다.
• jQuery의 AJAX는 text, html, xml, json, jsop 타입의 응답데이터를 처리할 수 있다.

---

주요 메소드

• url과 function은 필수적인 매개변수이고, data와 responseDataType은 생략 가능하다
• $.get(URL, data, function(data, status, xhr) { … }, dataType)
• $.post(URL, data, function(data, status, xhr) { … }, dataType)
• $.getJSON(URL, data, function(data, status, hxr) { … })
• $.ajax({name:value, name:value, …})

---

메소드의 매개변수 (data와 dataType은 상황에 따라 생략 가능하다)

• url: 요청된 url
• data: 응답데이터를 보내는 두가지 방식
  • {page:1, no:14}
  • “page=1&no=14”
• function(responseData): 성공적인 응답이 왔을 때 실행될 콜백함수
  • responseData에는 서버에서 응답으로 보낸 데이터가 전달된다
  • jQuery는 이 데이터를 자바스크립트 객체/배열, XML DOM 객체로 변환 후 전달한다
• dataType: 응답데이터의 컨텐츠 타입
  • text: plain text
  • json: json 형식의 데이터 -> javascript 배열, 객체로 변환 후 반환
  • xml: xml 형식의 데이터 -> XML Documnet 객체로 변환 후 반환
  • jsonp: 다른 사이트의 서버로부터 데이터를 요청할 때 사용

2. $.get()을 활용한 AJAX 예제

localhost에서 프로젝트명/product/list.hta url로 접속하면 아래 사진과 같은 텍스트 형식의 데이터가 전달된다.
이 더미데이터가 곧 서버에서 전송되는 데이터이다.

@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, "갤럭시", "삼성", 15000000, 1300000, true),
				new Product(200, "Iphone 13 Pro", "애플", 16000000, 1400000, true),
				new Product(300, "apple watch", "애플", 600000, 500000, false));
        
    Gson gson = new Gson();
    // 위에서 생성한 더미데이터 전달
    String jsonText = gson.toJson(productList);
    response.setContentType("application/json; charset=UTF-8");
    
    PrintWriter writer = response.getWriter():
    writer.write(jsonText);
    writer.flush();
  }
}

서버에서 보내는 데이터(productList의 텍스트)를 ajax를 통해 화면에 뿌려보자.

아래의 코드를 입력하면 사진과 같은 화면이 뜨고,
데이터 불러오기 버튼을 클릭하면 서버에서 받아온 json 데이터를 화면에 뿌릴 수 있다.

<div>
    <div class="row mb-3">
        <div class="col">
            <h1>상품 리스트<button class="btn btn-dark btn-sm float-end mt-3" id="btn-load-products">데이터 불러오기</button></h1> 
        </div>
    </div>
</div>
<div class="row mb-3">
    <div class="col">
        <table class="table" id="table-products">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>상품명</th>
                    <th>제조회사</th>
                    <th>가격</th>
                    <th>할인가격</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

---

• $.get(url, function(data)) 메소드에 요청할 url과 요청된 데이터로 실행할 함수를 정의한다.
• function(data)에서 data 안에는 url에서 가져온 데이터가 들어있다.
  console.log로 data를 찍어서 확인해 보면 배열의 형태로 들어가 있는 것을 확인할 수 있다.

• $.each(배열, function(index, item) {}) 메소드는 배열에 저장된 개수만큼 함수를 실행한다.
  product에는 배열에 저장된 값이 순서대로 전달된다.

  <script>
    $('#btn-load-products').click(function() {
        // 데이터를 불러올 곳은 아이디가 table-products인 tbody 안이다. 
        var $tbody = $('#table-products tbody');
  
        $.get("/script2/product/list.hta", function(data) {
            $.each(data, function(index, product) {
                var row = "<tr>";
                row += "<td>"+product.no+"</td>";
                row += "<td>"+product.name+"</td>";
                row += "<td>"+product.company+"</td>";
                row += "<td>"+product.price.toLocaleString()+" 원</td>";
                row += "<td><strong>"+product.discountPrice.toLocaleString()+"</strong> 원</td>";
                row += "</tr>";
  				
                $tbody.append(row);
            });
        }, "json");
    });
  </script>
  

  위와 같이 입력 후, 데이터 불러오기 버튼을 클릭하면 아래 사진과 같아진다!

가격을 잘못 적었다 ^~^..

---

3. $.ajax()을 활용한 AJAX 예제

• $.ajax()
  • type: ‘GET’ or ‘POST’ -> 요청방식
  • url : ‘요청 url’ -> 요청URL
  • data: {no:14, page:1} or “no=14&page=1” -> 서버로 보내는 데이터
  • contentType: ‘application/json’ or ‘text/xml’
    -> 서버로 보내는 데이터의 컨텐츠 타입, 기본값은 “application/x-www-form-unlencoded”다.
  • dataType: ‘text’ or ‘json’ or ‘xml’ or ‘jsonp’
  • success: function(responseData) { … }
  • error: function() { … }

<script>
$('#btn-load-products').click(function() {
    // 서버와 HTTP 통신하고 데이터 받아와서 표현하기
    $.ajax({
        type: 'get',
        url: '/script2/product/list.hta',
        dataType: 'json',
        success: function(products) {
            var $tbody = $('#table-products tbody');
            $.each(products, function(index, product) {
                var row = "<tr>";
                row += "<td>"+product.no+"</td>";
                row += "<td>"+product.name+"</td>";
                row += "<td>"+product.company+"</td>";
                row += "<td>"+product.price.toLocaleString()+" 원</td>";
                row += "<td><strong>"+product.discountPrice.toLocaleString()+" 원</strong> </td>";
                row += "</tr>";
                
                $tbody.append(row);
            })
        }
    });
});
</script>