포스코DX X 비트교육센터 6기 - AJAX

Asynchronous Javascript And Xml

주소창 : 내 어플리케이션을 자바스크립트 엔진에 landing하는 역할
js code -> 내장 객체 -> 통신
내장객체

XMLHttpRequest : XMLHttpRequest 객체를 사용하여 서버로 HTTP 요청을 보낸다. 이 요청은 서버의 특정 URL에 대한 요청일 수 있으며, 데이터를 보내거나 받을 수 있다.
fetch() : 최신의 웹 API로, 네트워크 요청을 만들고 응답을 처리하는데 사용한다.

실습

파일 구조

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <parent>
      <groupId>com.poscodx</groupId>
      <artifactId>frontend-dev-basics</artifactId>
      <version>0.0.1-SNAPSHOT</version>
   </parent>
   <artifactId>ch08</artifactId>
   <packaging>war</packaging>

   <properties>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
      <project.build.outputEncoding>UTF-8</project.build.outputEncoding>
      <maven.compiler.source>17</maven.compiler.source>
      <maven.compiler.target>17</maven.compiler.target>
      <org-springframework-version>5.3.25</org-springframework-version>
   </properties>
   <dependencies>
      <!-- spring mvc -->
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-webmvc</artifactId>
         <version>${org-springframework-version}</version>
      </dependency>
      <!-- jstl -->
      <dependency>
         <groupId>jstl</groupId>
         <artifactId>jstl</artifactId>
         <version>1.2</version>
      </dependency>
      <!-- servlet -->
      <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>javax.servlet-api</artifactId>
         <version>4.0.1</version>
         <scope>provided</scope>
      </dependency>
      <dependency>
         <groupId>javax.servlet.jsp</groupId>
         <artifactId>jsp-api</artifactId>
         <version>2.2</version>
         <scope>provided</scope>
      </dependency>

      <!-- jackson -->
      <dependency>
         <groupId>com.fasterxml.jackson.core</groupId>
         <artifactId>jackson-databind</artifactId>
         <version>2.13.4.1</version>
      </dependency>

   </dependencies>

   <build>
      <finalName>ch08</finalName>
   </build>
</project>

WebConfig.java

package ch08;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import org.springframework.web.servlet.view.JstlView;

@Configuration
@EnableWebMvc
@ComponentScan({ "ch08.controller" })
public class WebConfig implements WebMvcConfigurer {
	@Bean
	public ViewResolver viewResolver() {
		InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
		viewResolver.setViewClass(JstlView.class);
		viewResolver.setPrefix("/WEB-INF/views/");
		viewResolver.setSuffix(".jsp");
		return viewResolver;

	}

	@Override
	public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
		configurer.enable();
	}
}

Ch08WebApplicationInitializer.java

package ch08;

import javax.servlet.Filter;

import org.springframework.web.filter.CharacterEncodingFilter;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;

public class Ch08WebApplicationInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {

	@Override
	protected Class<?>[] getRootConfigClasses() {
		return new Class<?>[] {};
	}

	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class<?>[] {WebConfig.class};
	}

	@Override
	protected String[] getServletMappings() {
		return new String[] {"/"};
	}

	@Override
	protected Filter[] getServletFilters() {
		return new Filter[] {new CharacterEncodingFilter("utf-8", false)};
	}
	
	

}

ApiTestController.java

package ch08.controller.test;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/test")
public class ApiTestController {

	@RequestMapping("/text")
	public String text() {
		return "text";
	}
}

text.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script></script>
</head>
<body>
	<h1>AJAX Test: Text Format Data</h1>
</body>
</html>

string 데이터 처리하기

ApiController.java

package ch08.controller.api;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/api")
public class ApiController {

	@ResponseBody
	@RequestMapping("/text")
	public String text() {
		return "Text 데이터";
	}
}

WebConfig.java : StringHttpMessageConverter 추가하기

package ch08;

import java.nio.charset.Charset;
import java.util.Arrays;
import java.util.List;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.MediaType;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.converter.StringHttpMessageConverter;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import org.springframework.web.servlet.view.JstlView;

@Configuration
@EnableWebMvc
@ComponentScan({ "ch08.controller" })
public class WebConfig implements WebMvcConfigurer {
	@Bean
	public ViewResolver viewResolver() {
		InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
		viewResolver.setViewClass(JstlView.class);
		viewResolver.setPrefix("/WEB-INF/views/");
		viewResolver.setSuffix(".jsp");
		return viewResolver;

	}
	
	// string 처리 (추가 코드)
	@Bean
	public StringHttpMessageConverter stringHttpMessageConverter() {
		StringHttpMessageConverter messageConverter = new StringHttpMessageConverter();
		
		messageConverter.setSupportedMediaTypes(Arrays.asList(new MediaType("text","html", Charset.forName("utf-8"))));
		return messageConverter;
	}


	@Override
	public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
		configurer.enable();
	}

	// string 처리 (추가코드)
	@Override
	public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
		converters.add(stringHttpMessageConverter());
	}
}

$.ajax({}) 함수 사용

WebConfig.java : http 메시지 컨버터

	@Bean
	public MappingJackson2HttpMessageConverter mappingJackson2HttpMessageConverter() {
		Jackson2ObjectMapperBuilder builder = new Jackson2ObjectMapperBuilder().indentOutput(true)
				.dateFormat(new SimpleDateFormat("yyyy-mm-dd"));

		MappingJackson2HttpMessageConverter messageConveter = new MappingJackson2HttpMessageConverter(builder.build());
		messageConveter
				.setSupportedMediaTypes(Arrays.asList(new MediaType("application", "json", Charset.forName("utf-8"))));

		return messageConveter;
	}

	@Override
	public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
		converters.add(stringHttpMessageConverter());
		converters.add(mappingJackson2HttpMessageConverter());
	}

ApiTestController.java

@RequestMapping("/json01")
	public String json01() {
		return "json01";
	}

ApiController.java

@ResponseBody
	@RequestMapping("/json")
	public JsonResult json() {
		GuestbookVo vo = new GuestbookVo();
		vo.setNo(1L);
		vo.setName("둘리");
		vo.setContents("호이~~");

		return JsonResult.success(vo);
	}

json.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>  

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="${pageContext.request.contextPath }/jquery/jquery-3.7.1.js"></script>

<script>

$(function(){

	$('button').click(function(){

		$.ajax({

			url: '${pageContext.request.contextPath }/api/json',

			async: true,

			type: 'get',

			dataType: 'json',

			success: function(response) {

				if(response.result !== "success") {

					console.error(response.message);

					return;

				}

				var vo = response.data;

				var htmls = "";

				htmls += ("<h3>" + vo.no + "</h3>");

				htmls += ("<h4>" + vo.name + "</h4>");

				htmls += ("<h5>" + vo.contents + "</h5>");

				$("#data").html(htmls);

			},

			error: function(xhr, status, error) {

				console.error(status, error);				

			}

		});	

	});

});

</script>

</head>

<body>

	<h1>AJAX Test: JSON Format Data: $.ajax({}) 함수 사용하기</h1>

	<button>데이터 가져오기</button>

	<div id='data'></div>

</body>

</html>

GuestbookVo.java

package ch08.vo;

public class GuestbookVo {
	private Long no;
	private String name;
	private String contents;
	private String password;
	private String regDate;
	public Long getNo() {
		return no;
	}
	public void setNo(Long no) {
		this.no = no;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getContents() {
		return contents;
	}
	public void setContents(String contents) {
		this.contents = contents;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getRegDate() {
		return regDate;
	}
	public void setRegDate(String regDate) {
		this.regDate = regDate;
	}
	@Override
	public String toString() {
		return "GuestbookVo [no=" + no + ", name=" + name + ", contents=" + contents + ", password=" + password
				+ ", regDate=" + regDate + "]";
	}	
}

JsonResult.java

package ch08.dto;

public class JsonResult {
	private String result;	//"success" or "fail"
	private Object data;	// if success, set! 
	private String message; // if fail, set!

	private JsonResult(Object data) {
		this.result = "success";
		this.data = data;
	}

	private JsonResult(String message) {
		this.result = "fail";
		this.message = message;
	}

	public String getResult() {
		return result;
	}
	public Object getData() {
		return data;
	}
	public String getMessage() {
		return message;
	}

	public static JsonResult success(Object data) {
		return new JsonResult(data);
	}

	public static JsonResult fail(String message) {
		return new JsonResult(message);
	}
}

send