반응형

이전 시간에 배운 jsonObejct와 Array를 이용하여

ajax 예제 소스를 구현해 보도록 하겠습니다.

 

ajax란?

  • 비동기식을 이용한 통신방법으로 웹서버의 응답과 무관하게 데이터를 빠르게 처리가 가능
  • 보통 저장이나 조회를 누르면 웹페이지가 한번 새고로침(깜빡임)을 하게 되는데 ajax는 그런 현상 없이
    바로 처리가 되는 장점이 있음
  • 예) 네이버 스포츠의 실시간 점수 갱신, 뉴스 속보 등
  • 깜빡임이 없기 때문에 딜레이 없이 서버에 reqeust를 요청할 수 있음.
  • jquery 기반으로 작동되기 때문에 jquery js 필요

 

json 라이브러리 설치

https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple

위의 홈페이지에서 json.simple 라이브러리를 다운로드하여

프로젝트 내에 적용시켜 줍니다.

 

jqeury 적용

https://jquery.com/download/

 

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

ajax를 사용하기 위해서는 jquery 가 필요합니다.

해당 사이트에 접속해서 jqeury를 다운로드하여 프로젝트에 적용합니다.

 

ajax 예제 소스

예제 프로젝트는 이전 emp 조회 프로그램을 약간 변형하여 사용하도록 하겠습니다.

 

프로젝트 구조

 

Jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<script src="../js/jquery-3.x-git.js"></script>
<title></title>

 <script type="text/javascript">
 function executeAjax(){
	 
		$.ajax({
				url : "/getAjax",
				type : "get",
				data : '',
				dataType : "json",
				success : function(data) {
					
					var innerHtml = "";
					innerHtml  += "<table>";
					
					for(var i=0; i<data.length; i++){
						innerHtml  += "<tr>";
						innerHtml  += "<td>"+ data[i].name;
						innerHtml  += "</td>";
						innerHtml  += "<td>"+ data[i].sal;
						innerHtml  += "</td>";
						innerHtml  += "</tr>";
					}
					
					innerHtml  += "</table>";
					
					$("#ajaxResult").html(innerHtml);
				},
				error : function(request) {
					alert("실패");
				}
			});
		}
 
 
	</script>
</head>
<body>
	<button onclick="executeAjax()">실행</button>
	<div id ="ajaxResult"></div>
	
</body>
</html>

 

Java

package com.company;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;



@WebServlet("/getAjax")
public class MainDataController extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	@SuppressWarnings("unchecked")
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
		
		DataGetDao dao = new DataGetDao();
		List<DataVo> dvo = null; 
		JSONArray ja = new JSONArray();
		
		try {
			dvo = dao.getDataByNum(20);
			
			for(int i=0; i<dvo.size(); i++) {
				
				JSONObject obj = new JSONObject();
				
				obj.put("name", dvo.get(i).getpersonal_name());
				obj.put("sal", dvo.get(i).getpersonal_sal());
				
				ja.add(obj);
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		
		PrintWriter out = response.getWriter();
		out.print(ja.toString());
		
	}

}

 

소스 결과

 

반응형

'Dev > WEB, JSP' 카테고리의 다른 글

MVC 모델2 구조 및 모델1 차이점  (0) 2023.02.09
JSP 기본객체(내장객체) 기능 및 정리  (0) 2023.02.06
JSP에서 List ArrayList 파라미터 가져와 사용하기  (0) 2022.11.30
JSP 오라클 연동하여 SELECT 값 가져 오기  (0) 2022.11.29
자식 컨테이너를 시작 중 실패했습니다. 톰캣 에러 해결법  (0) 2022.11.27

+ Recent posts

티스토리툴바