5. Advanced Project




    5. 2 . Chat with Ajax

        Spring Boot is a tool that facilitates the rapid and easy development of Java-based web applications. Built on top of the Spring Framework, Spring Boot automates many configuration tasks required for starting and configuring projects, thereby enhancing productivity. When discussing it comprehensively, it can be structured into key aspects: history and evolution, core features, internal operational mechanisms, as well as use cases and ecosystem.


        Here's a detailed list of the topics


  • 1.2.1 History and Evolution:
  • 1.2.2 Core Concepts:
  • 1.2.3 Internal Operation Mechanism:
  • 5.2.4 Ajax:


1.2.1 History and Evolution:

   - Spring Boot was released in 2014 by the Spring development team with the aim of making it easier for developers to build Spring-based applications.

   - In its initial versions, Spring Boot focused on simplifying and integrating certain functionalities of the Spring Framework, allowing developers to minimize basic configurations and start quickly.





package com.example.adminproject.chat;
import org.springframework.data.jpa.repository.JpaRepository;
public interface ChatroomRepository extends JpaRepository<Chatroom, Integer> {
}


package com.example.adminproject.chat;
import org.springframework.data.jpa.repository.JpaRepository;
public interface ChatmsgRepository extends JpaRepository<Chatmsg, Integer> {
}







1.2.2 Core Concepts:

   - Auto-configuration: Spring Boot automatically loads configuration information related to the application's classpath, eliminating the need for developers to write separate configurations.

   - Embedded server: Spring Boot provides an embedded server, allowing developers to run and test applications easily without configuring an external server.

   - Starters: Spring Boot offers starters to manage dependencies on various Spring Framework modules, enabling developers to easily add required functionalities.


1.2.3 Internal Operation Mechanism:

   - Spring Boot configures applications using core features of the Spring Framework. It utilizes mechanisms such as auto-configuration, conditional configuration, property sources, and external environment configuration.

   - Additionally, Spring Boot supports rapid application startup and execution using embedded servers.


5.2.4 Ajax:

Ajax is a technology used to asynchronously exchange data between a web browser and a web server without needing to refresh the entire web page. It allows for dynamic updates to parts of a web page, enhancing the user experience. Instead of relying on traditional page refreshes, Ajax enables web applications to fetch and send data in the background, making interactions smoother and more responsive.


Key components of Ajax include:


1. Fetch API: A modern interface for fetching resources (such as JSON, HTML, or images) across the network. It is designed to be more powerful and flexible than its predecessor, XMLHttpRequest.


2. Promises: Asynchronous operations in JavaScript are often handled using promises, which provide a cleaner and more readable way to manage asynchronous code execution. Promises simplify the handling of asynchronous tasks, including those involved in Ajax requests.


3. Event handlers: JavaScript's event handling mechanism allows developers to define functions that execute in response to specific events, such as when an Ajax request completes or encounters an error.


4. JSON (JavaScript Object Notation): JSON has largely replaced XML as the preferred data format for exchanging structured data in Ajax requests and responses due to its simplicity and ease of use with JavaScript.


By leveraging these components, developers can create web applications that provide a more seamless and interactive user experience, fetching data from the server and updating the web page dynamically without requiring full page reloads. This approach is fundamental to modern web development practices and is widely used in building various types of web applications, including single-page applications (SPAs) and progressive web apps (PWAs).


        BasicController.java

package com.example.ajaxexam;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class BasicController {

@GetMapping("/")
public String index() {
return "index";
}

@GetMapping("/test1")
public String test1get() {
return "test1";
}

@PostMapping("/test1")
public String test1post(@RequestParam("data1") String data1,
                        @RequestParam("data2") String data2) {

System.out.println(data1);
System.out.println(data2);
return "success";
}

}

       index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>index.html</h1>
<br><br>
<a href="/test1">test1</a>
<br><br>
<a href="/test2">test2</a>
</body>
</html>



test1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>test1.html</h1>

<form action="/test1" method="post">

<p>Data 1<input type="text" name="data1">
<p>Data 2<input type="text" name="data2">

<input type="submit" value="Send">

</form>
</body>
</html>

        success.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<h1>success.html</h1>

</body>
</html>




Ajax


package com.example.ajaxexam;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class AjaxController {

@GetMapping("/test2")
public String test2get() {
return "test2";
}

@PostMapping("/test2")
public String test2post(
@RequestParam ("data1") String data1,
@RequestParam ("data2") String data2
 ) {
System.out.println(data1);
System.out.println(data2);

return "test2";
 }

}



<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>test2.html</h1>

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

<script>

function test2() {

data1 = $("#data1").val();
data2 = $("#data2").val();

$.ajax({

type : "POST",
url : "/test2",
data : {

data1 : data1,
data2 : data2

},
/*beforeSend : function(xhr) { // for Spring Security
 xhr.setRequestHeader("${_csrf.headerName}", "${_csrf.token}");
 }, */
 success : function(result) {
alert("Success");
},
error : function(request, status, error) {
alert(request.status + " " + request.responseText);
}

});

}

</script>

<p>Data 1<input type="text" id="data1" name="data1">
<p>Data 2<input type="text" id="data2" name="data2">
<p><a href="javascript:test2()">test 2</a>

</body>
</html>















한국정보시스템개발원 |
Hankook Information System Institute

austiny@snu.ac.kr / austiny@gatech.edu