특징

• 같은 이름의 메서드를 여러 개 정의
• 매개변수의 타입, 개수, 순서가 달라야함
• 반환 타입은 달라도 상관 없음
• 컴파일 타임에 결정됨

예시 코드:

public class Example {
    void print(int a) {
        System.out.println("Integer: " + a);
    }

    void print(String a) {
        System.out.println("String: " + a);
    }
}

오버라이딩 (Overriding)

특징

• 상위 클래스의 메서드오ㅘ 동일한 시그니처를 가짐
• 접근 제어자는 상위 클래스보다 넓거나 동일해야 함
• 런타임에 결정됨
• 부모 클래스에서 정의된 메서드를 자식 클래스에서 재정의 하는 것

class Animal {
    void sound() {
        System.out.println("Animal makes a sound");
    }
}

class Dog extends Animal {
    @Override
    void sound() {
        System.out.println("Dog barks");
    }
}

-> 자바에서 메모리 관리를 자동으로 처리하는 중요한 기능

자바 프로그램이 실행되면 객체는 heap 메모리에 생성된다. 힙 메모리에 생성된 객체들은 프로그램에서 참조되며, 참조되지 않는 객체는 더 이상 사용되지 않는 객체로 간주된다.

Stop - the - World : 가비지 컬렉션이 실행될 때는 모든 애플리케이션 스레드가 멈추고, 가비지 컬렉션 작업이 진행된다. 이를 Stop - the - World라고 한다.

자바가 실행되는 JVM에서 사용되는 객체, 즉 Heap 영역의 객체를 관리해 주는 기능을 말한다. 이 과정에서 stop the world가 일어나게 되며, 이 일련 과정을 효율적으로 하기 위해서는 카비지 컬렉터 변경 또는 세부 값 조정이 필요하다.

요구사항은 소프트웨어가 어떤 문제를 해결하기 위해 제공하는 서비스에 대한 설명과 운영되는데 필요한 제약 조건이다.

요구사항의 유형

• 기능 요구사항(Functional requirements)
• 비기능 요구사항 (Non-functional requirements)
• 사용자 요구사항(User requirements)
• 시스템 요구사항 (System requirements)

기능 요구사항 (Functional requirements)

: 시스템이 무엇을 하는지, 어떤 기능을 하는지 등의 기능이나 수행과 관련된 요구사항이다. : 사용자가 시스템을 통해 제공받기를 원하는 기능 : 시스템이 어떤 데이터를 저장하거나 연산을 수행해야 하는지에 대한 사항 : 시스템이 반드시 수행해야 하는 기능 ex) 사용자는 회원 ID와 비밀번호를 입력하여 로그인 할 수 있다. 금융 시스템은 조회, 인출, 송금의 기능이 있어야함

비기능 요구사항(Non-functional requirements)

: 비기능 요구사항은 품질이나 제약사항과 관련된 요구사항이다. : 시스템 장비 구성 요구사항 : 성능, 인터페이스 요구사항 : 데이터를 구추가기 위해 필요한 요구사항 : 테스트, 보안 요구사항 : 품질 요구사항 -> 가용성, 정합성, 상호 호환성, 이식성, 확장성 등 : 제약사항 : 프로젝트 관리/자원 요구사항

ex) 시스템은 1년 365일, 하루 24시간 운용이 가능해야 한다. 시스템의 처리량, 반응시간드으이 성능이나 품질 요구사항 차량 대여 시스템이 제공하는 모든 화면이 3초 이내에 사용자에게 보여야함(성능 요구사항)

사용자 요구사항(User requirements)

: 사용자 요구사항은 사용자 관점에서 본 시스템이 제공해야 할 요구사항이다. : 자언어, 친숙한 표현으로 이해하기 쉬움

시스템 요구사항(System requirements)

: 시스템 요구사항은 개발자 관점애서 본 시스템 전체가사용자와 다른 시스템에 제공해야 할 요구사항 이다. : 소프트웨어 요구사항 : 기술적 용어 이용으로 인하여 사용자가 이해하기 어려움

polymorphism -> TV.java 인터페이스 생성

package polymorphism;

public interface TV {
    public void powerOn();

    public void powerOff();

    public void volumeUp();

    public void volumeDown();
}

TV 소리를 출력해줄 Speak 인터페이스도 생성

package polymorphism;

public interface Speaker {

    void volumeUp();

    void volumeDown();

}

polymorphism -> SamsungTV.java class 생성

package polymorphism;

public class SamsungTV implements TV{

    @Override
    public void powerOn() {
        System.out.println("SamsungTV 전원을 켠다.");
    }

    @Override
    public void powerOff() {
        System.out.println("SamsungTV 전원을 끈다.");
    }

    @Override
    public void volumeUp() {
        System.out.println("SamsungTV 볼륨을 올린다.");
    }

    @Override
    public void volumeDown() {
        System.out.println("SamsungTV 볼륨을 내린다.");
    }

polymorphism -> LgTV.java 클래스 생성

package polymorphism;

public class LgTV implements TV {

    @Override
    public void powerOn() {
        System.out.println("LgTV 전원을 켠다.");
    }

    @Override
    public void powerOff() {
        System.out.println("LgTV 전원을 끈다.");
    }

    @Override
    public void volumeUp() {
        System.out.println("LgTV 볼륨을 올린다.");
    }

    @Override
    public void volumeDown() {
        System.out.println("LgTV 볼륨을 내린다.");
    }
}

TVuser.java 클래스 생성

package polymorphism;

public class TVuser {
    public static void main(String[] args) {
        TV tv = new SamsungTV();
        tv.powerOn();
        tv.volumeUp();
        tv.volumeDown();
        tv.powerOff();

        System.out.println();

        TV tv = new LgTV();
        tv.powerOn();
        tv.volumeUp();
        tv.volumeDown();
        tv.powerOff();
            /*
                SamsungTV 전원을 켠다.
                SamsungTV 볼륨을 올린다.
                SamsungTV 볼륨을 내린다.
                SamsungTV 전원을 끈다.

                LgTV 전원을 켠다.
                LgTV 볼륨을 올린다.
                LgTV 볼륨을 내린다.
                LgTV 전원을 끈다.
             */
    }
}

n = len(Str) -> 문자열 변수 str 길이인 8을 변수 n의 초기값으로 할당한다.

--> 그래서 n = 8 (Sinagong 글자수)

💻 len()은 문자열이나 배열의 길이를 반환

st = list() -> 변수 st를 비어있는 리스트로 선언한다.

for k in range(n) -> 반복문 for문, n에 8을 넣어야 하지만 최종값 n-1 하여 7을 대입한다. 07까지 반복할 예정 st.append(str[k]) -> 07까지 반복하여 비어있는 st에 값을 추가한다.

💻 append :추가

= Sinagong

for k in range(n-1, -1, -1): -> (반복문) range(초기값, 최종값, 증가값) 이므로

n-1 = 8-1 = 7 , -1(최종값) = 증가값이 음수이므로 +1 = -1+1 = 0 -1(증가값) = -1씩 감소한다.

=> 7부터 0까지 -1씩 감소한다.

print(st[k], end=") -> 문자열을 가로로 나열해서 출력.

정답=> gnoganiS

lombok.jar 다운로드

명령어 -> java -jar lombok.jar

ide 선택

/Application/STS.app

앱 → 패키지 내용 보기 → Contents → Eclipse → STS.ini

✢ 밑줄 친 부분 보면 lombok이 잘 들어온 걸 알 수 있음.

Maven 설정

MVN REPOSITORY 사이트에서 lombok 검색

https://mvnrepository.com/artifact/org.projectlombok/lombok/1.18.24

Maven 코드 copy !

<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.24</version>
    <scope>provided</scope>
</dependency>

pom.xml

들어가서 dependencies → 사이에 복사한 코드 붙여넣기

Maven Dependencies 클릭 후 룸북 들어왔는지 확인

lombok 배포 완료 ! 이클립스와 다르니 주의 하기😌

라이브러리 → Add Extrernal Class Folder → ojdbc11.jar

배포 완료

→ java의 웹 프레임워크로 java 언어를 기반으로 사용한다.

→ java로 다양한 어플리케이션을 만들기 위한 프로그래밍 틀이라 할 수 있다.

스프링 프레임워크의 특징

1. IoC (Inversion of Control, 제어 반전)

   개발자는 java 코딩시 new 연산자, 인터페이스 호출, 데이터 클래스 호출 방식으로 객체를 생성 , 소멸 시킨다.

   제어권이 개발자가 아닌 IoC에 있으며, IoC가 개발자의 코드를 호출해 필요한 객체를 생성, 소멸 하며 생명주기를 관리하는 것이다.

2. DI(Dependency Injection 의존성 주입)

   프로그램에서 구성 요소의 의존 관계가 소스코드 내부가 아닌 외부의 설정 파일을 통해 정의 되는 방식, 코드 간의 재사용을 높이고 모듈간의 결합도를 낮출 수 있다.

   대표적으로 라이브러리나 API, 프레임워크를 연동 할 떄 연결하는 소스코드를 직접 작성하는게 아닌 외부 파일을 연결해 불러오는 방식이다.

3. POJO(Plain Old Java Object) 방식

   다른 클래스나 인터페이스를 상속/implements 받아 메서드가 추가된 클래스가 아닌 일반적으로 우리가 알고 있는 getter, setter 같이기본적인 기능만 가진 자바 객체를 말한다.

어노테이션방식의 bean 등록

@Component 스캔 : 일반 클래스

@Service : 비즈니스 로직 (xxxServiceImpl) → 인터페이스와 클래스가 상속되게 만들어짐 ( 확장성으로 인하여 )

@Repository : 데이터 베이스 처리 (xxxDAO)

@Controller : 사용자의 요청을 처리 (xxxController)

3. 앱 만들기 클릭 !

4. Facebook 로그인을 통한 인증 및 사용자의 데이터 요청 클릭

5. 원하는 앱 이름 추가 하고 본인 이메일 작성 -> 다시 내 앱 클릭

6. 내 앱 누르면, 해당 화면이 나옵니다. facebook 로그인 클릭

7. 전 웹으로 하기에, 웹 클릭

8. 사용하는 톰켓 서버 주소 작성

9. 전부 다음 버튼 클릭

10. 생성 완료 !!!!

화면에 나와있는 기본코드를 복사 해주세요 !

이클립스에 html파일을 생성해서 붙여넣기 해주세요.

꼭, app-id / api-version 바꿔주세요 !!!!!!!!

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };

  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

</script>


<!-- The JS SDK Login Button -->

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

이제 실행 시키면, 해당 페이지 처럼 로그인 버튼이 생성 됩니다.

로그인 클릭 후 각자 아이디로 해주시면 되요 ~~

1. 가입 후, 원하는 자료 검색 !

2. 수업에서는 " 광진구 약국 " OPEN API 사용 예정이라 광진구 약국을 검색 !

-> 광진구 약국

3. 검색 후, open API click 및 활용 신청을 눌러주세요. ( 기다리면 바로 신청완료 됨 )

4. 신청 완료후, 마이페이지 들어가서 api 신청 클릭!

5. 신청한 " 광진구 약국 " 클릭하여 들어갑니다.

6. 일반 인증키(Decoding)를 복사하여 인증키 설정 진행합니다.

-> 인증키 설정 클릭

7. 복사한 일반 인증키를 칸에 붙여 넣기 해주세요

설정 완료 누르면 설정 되어 있습니다.

이제 되는지 실행 해볼 차례 !

API 목록을 클릭 후, open api 실행 준비 클릭 !!!

성곡적으로 뜨니 이제 request url을 복사해서 url에 복사 붙여넣기 합니다. _Requet URl -> 인증코드 등 전부 들어가 있으니 수정하지 말고 그대로 copy 사용 해주세요 ! _

chrom인 경우 json view 로 보면 더 깔끔히 볼 수 있습니다.

성공적으로 가져온 모습을 볼 수 있습니다.

오늘도 즐코...

part2

네이버 개발자 센터에서 설정이 끝났으면,

Servlet을 Servie만 체크하고 생성해줍니다.

네이버 애플리케이션 생성시 아이디랑 비밀번호를 따로 메모해 두세요. 애플리케이션 클라이언트 아이디 /시크릿에 메모해둔 걸 입력하세요 !

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String clientId = "YOUR_CLIENT_ID"; // 애플리케이션 클라이언트 아이디
        String clientSecret = "YOUR_CLIENT_PW"; //애플리케이션 클라이언트 시크릿 
    }

}

네이버 개발자 센터에서 검색 -> 블로그 부분 들어가면 , 예제 코드 및 오류 부분 전부 나오니까 해당 부분 이용 해서 작성하면 됩니다.

** 위에 부분 추가 후 아래 코드 **

// 스타트 페이지 
        int startNum = 0;
        String text = null;
        try {

           startNum = Integer.parseInt(req.getParameter("startNum"));
           String searchText = req.getParameter("keyword");   
            text = URLEncoder.encode(searchText, "UTF-8");
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException("검색어 인코딩 실패",e);
        }

        String apiURL = "https://openapi.naver.com/v1/search/blog?query=" + text 
              + "&display=10&start=" + startNum;  // json 형식 

        Map<String, String> requestHeaders = new HashMap<>();
        requestHeaders.put("X-Naver-Client-Id", clientId);
        requestHeaders.put("X-Naver-Client-Secret", clientSecret);
        String responseBody = get(apiURL,requestHeaders);


        System.out.println(responseBody);   

        resp.setContentType("text/html; charset=utf-8");
        resp.getWriter().write(responseBody);
   }

   private static String get(String apiUrl, Map<String, String> requestHeaders){
        HttpURLConnection con = connect(apiUrl);
        try {
            con.setRequestMethod("GET");
            for(Map.Entry<String, String> header :requestHeaders.entrySet()) {
                con.setRequestProperty(header.getKey(), header.getValue());
            }


            int responseCode = con.getResponseCode();
            if (responseCode == HttpURLConnection.HTTP_OK) { // 정상 호출
                return readBody(con.getInputStream());
            } else { // 오류 발생
                return readBody(con.getErrorStream());
            }
        } catch (IOException e) {
            throw new RuntimeException("API 요청과 응답 실패", e);
        } finally {
            con.disconnect();
        }
    }

   private static HttpURLConnection connect(String apiUrl){
        try {
            URL url = new URL(apiUrl);
            return (HttpURLConnection)url.openConnection();
        } catch (MalformedURLException e) {
            throw new RuntimeException("API URL이 잘못되었습니다. : " + apiUrl, e);
        } catch (IOException e) {
            throw new RuntimeException("연결이 실패했습니다. : " + apiUrl, e);
        }
    }

   private static String readBody(InputStream body){
        InputStreamReader streamReader = new InputStreamReader(body);


        try (BufferedReader lineReader = new BufferedReader(streamReader)) {
            StringBuilder responseBody = new StringBuilder();


            String line;
            while ((line = lineReader.readLine()) != null) {
                responseBody.append(line);
            }


            return responseBody.toString();
        } catch (IOException e) {
            throw new RuntimeException("API 응답을 읽는 데 실패했습니다.", e);
        }
    }




    }

part3

이제, view 부분을 작성하여 연결이 되는지 확인 해야 합니다.

우선 webapp -> folder 를 생성해 주고, jsp 파일을 만들어 줍니다 .

html 먼저 작성하겠습니다.

• 일련의 처리 절차를 정해진 문법에 따라 순서대로 기술하는 언어이다.
• 프로그램이 실행되는 절차를 중요시 한다.
• 자연어에 가까운 단어와 문장으로 구성된다.
• 과학 계산이나 하드웨어 제어에 주로 사용된다.

종류

• C : 1972s 미국 벨 연구소 데니스 리치에 의해 개발, 고급 프로그래밍언어이면서 저급 프로그램 언어의 특징을 모두 갖춤, 이식성이 좋아 관계없이 작성 가능
• ALGOL : 수치 계산, 논리 연산을 위한 과학 기술 계산용 언어, pascal 과 c언어의 모체가 됨
• COBOL : 사무 처리용 언어, 영어 문장 형식으로 구성, 4개의 DIVISION으로 구성
• FORTRAN : 과학 기술 계산용 언어, 공학 분야의 공식이나 수식과 같은 형태로 프로그래밍 할 수 있음

객체지향 프로그래밍 언어

• 현실 세계의 개체를 하나의 객체로 만들어 객체들을 조립해서 프로그램을 작성하는 기법
• 프로시저 보다는 명력과 데이터로 구성된 객채를 중심으로 하는 프로그램 ㄱ법
• 한 프로그램을 다른 프로그램에서 이용할 수 있다.

종류

• JAVA : 분산 네트워크 환경에 적용 가능, 멀티 스레드 제공, 운영체제 및 하드웨어에 독립적, 이식성 강함
• C++ : C언어에 객체지향 개념을 적용한 언어, 모든 문제를 객체로 모델링하여 표현
• Smalltalk : 1세대 객체지향 프로그래밍 언어, 최초로 GUI를 제공

*GUI : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스

사용자로부터 입력받은 아이디(userid)를 서버로 전송하고, 서버에서 해당 아이디의 로그인 상태를 JSON 형식으로 받아와 화면에 표시하는 기능을 구현.

clientGson.jsp


<%@ 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="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- 제이쿼리  -->
<script>


 $(function(){
        $("#check").click(function(){
            /* 유효성 검증 (제이쿼리방식) */
            if($("#userid").val() == 0){
                $("#result").text("아이디를 입력하세요.");
                return;
            }
            $.ajax({
                url:"./ajaxServerGson1.jsp",
                type:"post",
                data:{userid:$('#userid').val()},
                dataType: 'json',
                success:function(data){
                    alert("성공");
                    $("#result").text(data.loginid + data.loginsuccess);
                },
                error: function(err) {
                    alert("실패 원인 : " + err);
                }
            });
        });

    });

</script>
</head>
<body>
    <input type = "text" id="userid">
    <button type= "button" id="check">Check</button>
    <p id ="result"></p>
</body>
</html>

유효성 검사:

사용자가 아이디 입력 필드에 값을 입력했는지 확인합니다. 값이 없으면 "아이디를 입력하세요."라는 메시지를 표시하고 Ajax 요청을 중단합니다.

Ajax 요청:

아이디 입력 필드의 값을 서버로 전송합니다. 서버에서 JSON 형식의 응답을 받아서 결과를 화면에 표시합니다.

*import="com.google.gson." **: Gson 라이브러리를 사용하기 위해 필요한 import 문입니다.

- JsonObject obj = new JsonObject();: Gson의 JsonObject를 사용하여 새로운 JSON 객체를 생성합니다.

- obj.addProperty("loginid", userid);: JSON 객체에 "loginid"라는 키와 클라이언트로부터 받은 사용자 아이디를 속성으로 추가합니다.

- obj.addProperty("loginsuccess", message);: JSON 객체에 "loginsuccess"라는 키와 로그인 성공 메시지를 속성으로 추가합니다.

serverGson.jsp

<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import ="com.google.gson.*"%>

<%
    String userid = request.getParameter("userid");
    String message = " 님 로그인 성공 ";

    Gson gson = new Gson();
    JsonObject obj = new JsonObject();

    obj.addProperty("loginid",userid);
    obj.addProperty("loginsuccess", message);

    out.print(gson.toJson(obj));
%>

이클립스에 배포해주세요!

 $(function(){
        $("#check").click(function(){

            if($("#userid").val() == 0){
                $("#result").text("아이디를 입력하세요.");
                return;
            }
        });
    });

1. 사용자가 '제출' 클릭
2. 서버는 JSON 형식의 응답을 반환
3. 클라이언트는 서버에서 반환된 데이터를 받아서 웹 페이지의 특정 부분 (#nickName, #ph_number, #address)을 업데이트

ajaxClient3.jsp

<%@ 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="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- 제이쿼리  -->
<script>
    $(function(){
        $("#buttonSubmit").on('click',function(){
            $.ajax({
                url : "./ajaxServer3.jsp",
                type : "post",
                dataType: 'json',
                success:function(data){
                    alert("성공");
                    $("#nickName").text(data.nickName);
                    $("#ph_number").text(data.ph_number);
                    $("#address").text(data.address);

                },
                error: function(err) {
                    alert("실패 원인 : " + err);
                }
            })
        })
    })

</script>
</head>
<body>
    <input id = "buttonSubmit" type = "button" value = "제출">
    <p id = "nickName"></p>
    <p id = "ph_number"></p>
    <p id = "address"></p>

</body>
</html>

ajaxServer3.jsp
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>

{
    "nickName": "홍길동",
    "ph_number" : "010-1234-5678",
    "address" : "신촌"

}

비동기적으로 수행되어 페이지를 새로 고침하지 않고도 데이터를 전송하고 받을 수 있습니다.

결과

$.ajax({ ... });: 이 부분은 jQuery의 AJAX 함수를 호출합니다. AJAX 요청을 초기화하고, 서버에 데이터를 전송하며, 서버로부터의 응답을 처리하는 데 사용됩니다.

url - 이동할 페이지이다. 이동한 페이지에서 데이터를 처리하고 다시 현재 페이지로 돌아온다. 필요한 경우 데이터를 전달할 수 있다. type - 전달 방식을 의미한다. GET/POST가 있다. data - 데이터 처리를 할 페이지에게 전달할 정도이다. Array 형식일 때 위와 같이 적으면 된다. dataType - 전달받는 인자의 형식. success - 데이터 처리가 성공했을 경우 해당 함수(함수가 아니어도 되 는듯 하다)를 실행한다. json으로 처리할 경우 데이터를 처리하는 페이지에서 전달해 주는 값이 인자로 받아진다.

1. 사용자가 "제출" 버튼을 클릭
2. nickName이라는 데이터를 서버로 전송
3. 서버에서 반환된 데이터를 받아 웹 페이지의 특정 부분을 업데이트
4. 실패시 원인을 알림으로 표시

ajaxClient2.jsp

<%@ 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="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- 제이쿼리  -->
<script>

/* Ajax를 사용하여 서버와 비동기 통신을 하는 방식*/    
 $(function(){
        $("#buttonSubmit").on('click',function(){
            $.ajax({
                url : "./ajaxServer2.jsp",
                type : "post",
                data : { nickName : '닉네임'},
                dataType: 'json',
                success:function(data){
                    alert("성공");
                    console.log(data.nickName);
                    $("#nickname").text(data.nickName);
                },
                error: function(err) {
                    alert("실패 원인 : " + err);
                }
            })
        })
    })

</script>
</head>
<body>
    <input id = "buttonSubmit" type = "button" value = "제출">
    <p id = "nickname"></p>
</body>
</html>

ajaxServer2.jsp

<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String nickName = request.getParameter("nickName");

%>
{
    "nickName": "<%= nickName %>"

}

결과 제출 클릭시, 닉네임 반환