비동기 처리

 

[ CDN 연결 방식 ]

 

 

 

복사 해서 사용 하면 된다.

 

 

[ 예제 코드 ]

 

<script type = "text/javascript">

</script>

 

무명함수 function() { ... }; 내부에 Ajax( { ... } ) 메서드가 있는 모습을 보면 된다.

 

function() {

         $.ajax( {

             ...     } );

};

 

Ajax는 중괄호 { } 안에 있는 데이터를 전송 한다.

 

$.ajax( { ... } );

 

라인별 코드 해석

 

1. 아이디가 photo인 아이의 프로퍼티를 괄호안의 값들로 해줘 ~

 

2. var 타입의 변수 res의 값을 'duck' 으로 ~

 

3. 아이디가 photo 라는 아이디값을 가진 이미지를 클릭 하면,

무명함수 function() 을 호출 한다.

 

4. 함수 내부는 Ajax 코드가 작성 되어 있다.

요청 처리가 성공하면, 데이터를 보낼 경로를 설정 한다.

 

test.do 경로로 설정 했고,

이때, 보낼 데이터의 값을 ? 뒤에 담아서 url 로 보내는 코드 이다.

 

이때, 서블릿 에서 데이터를 받으려면, 매개변수명이 동일 해야 한다.

 

5. 데이터 전송 방식을 POST 방식으로 한다는 의미 이다.

 

6. 서블릿 으로부터 데이터를 무사히 받는게 성공 했으면,

무명함수 function() 을 호출 한다.

 

이때, result 라는 매개변수를 무명함수의 인자로 넣어 줬는데,

이 매개변수명은 다른걸로 변경되도 무관 하다.

 

어쨌든, 성공 하면 Ajax 메서드는 서블릿 으로부터 전송 받은 데이터를 

가져와서 function() 함수의 인자로 넣어주는 기능을 가지고 있다.

 

6-2. 데이터가 잘 오는지를 확인 하기 위해서,

웹 브라우저 에서 로그가 나오도록, 콘솔 로그를 사용 했다.

 

console.log('result [' + result + ']');

 

 

위와 같이, result 값이 서블릿 으로 부터, 잘 넘어오는 것을 콘솔 로그를 통해 확인 가능 하다.

 

7. 서블릿 으로부터 온 result 값이 무엇이냐에 따라서,

보여줄 이미지를 세팅 해주는 코드 이다.

 

8. 그렇게 이미지를 보여주고, var 타입의 res 변수에 새롭게 값을 세팅 해준다.

 

9. 결론은, 이미지를 누를때마다, url 링크로 result = res (값) 형식으로

서블릿에게 데이터를 전해 주게 된다.

 

[ 서블릿 ]

 

package controller;

 

import java.io.IOException;

import java.io.PrintWriter;

 

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

@WebServlet("/test.do")

 

View 로 부터 오는 /test.do 요청은 이 서블릿이 받게 된다.

 

 

 

System.out.println("ajax 로그 : doPost 로 잘 왔어요 ~" + "\n");

PrintWriter out = response.getWriter();

 

>> out 객체를 사용 하기 위해 PrintWriter 클래스를 import.

 

 

V에게 온 데이터의 파라미터가 result 인 데이터가 duck 이랑 같아 ?

 

그러면 out.print("duck2") 

 

V에게 온 데이터의 파라미터가 result 인 데이터가 duck2 이랑 같아 ?

 

그러면 out.print("duck") 

 

View에서는 그러면 duck2 또는 duck 데이터를 받을 수 있게 된다.

(Ajax 메서드 덕분에 ~)

 

로그 확인 하기.

 

 

참고 :

.jsp 에서는, out 객체가 자체 내장 객체라 그냥 사용이 가능 했는데,

자바에서는 사용 하려면 import 를 해서 사용 하면 된다.

 

[ 결론 ]

 

비동기 처리는 페이지 이동 없이 데이터를 주고 받고 할 수 있는 개념 이다.

 

 

 

 

 

 

클릭 하면,

 

 

바뀐다.

 

 

다시 클릭 하면,

 

 

바뀐다.

 

 

별도의 페이지 이동 없이, 데이터가 처리되는 방식

>>

비동기 처리