ajax 예제 소스 및 사용법 (json 데이터 사용)

2022. 12. 20. 15:49

이전 시간에 배운 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

We Can it