JSP(Ajax)_00

2024-12-30

 

# AJAX(Asynchronous Javascript And XML)
  - HTML, CSS, JavaScript 를 활용해서 동적이면서 인터렉티브한
    사용자 화면 조작은 물론 서버와의 비동기 데이터 통신을 통해서
    응답성이 좋은 데이터 처리를 가능하게 하는 웹 개발 기법.
  
  
  - 동기 방식과 비동기 방식의 차이점
    * 동기 방식은 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동적을 수행할 
      수 있음.
    * 비동기 방식은 그와 반대로 신호를 보냈을 때 응답 상태와 상관없이 다음
      동작을 수행할 수 있음.
       
  - Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 
    기법의 하나임.
    
  - Ajax를 사용하기 전의 클라이언트의 요청에 대한 응답은
    1. 클라이언트는 선택된 제품 정보를 담아 서버에 요청을 하게 됨.
    2. 서버는 요청한 내용과 상황에 따라 데이터베이스에 있는
       데이터를 비롯해 기타 다양한 정보를 조합하여 하나의
       커다란 완성된 페이지를 만듦.
    3. 이제 서버는 완성된 페이지를 브라우저에 응답으로 보냄.
    4. 끝으로 브라우저는 페이지를 새로고침(refresh)하면서
       기존 페이지 대신 새 페이지를 화면에 보여주게 됨.
       
  - 이 경우 문제점은 무엇일까? 제품 정보를 출력할 때 기존과
    똑 같은 정보라도 기존에 출력된 내용을 지우고 갱신하는 구조로
    되어 있어서 메인 메뉴 영역과 상품 목록 영역에 대한 정보까지
    반드시 함께 보내 주어야 한다는 점임. 배보다 배꼽이 크다라는
    속담이 바로 이럴 때 사용하는 말임. 즉, 바뀌는 부분은 10%도
    안 되는데 이 부분을 위해 바뀌지 않아도 되는 나머지 90% 부분
    까지 함께 다시 보내야 한다는 이야기임.
  
  - Ajax를 이용하는 이유는 화면 전환 없이 클라이언트(사용자 컴퓨터)와 
    서버(서비스를 제공하는 컴퓨터) 간에 XML, JSON(JavaScript 
    Object Notation), 텍스트, HTML 등의 정보를 교환하기 위해서 
    사용됨. 
    다시 말해서 Ajax를 이용하면 사용자가 서버에 자료를 요청할 때 화면 
    전환 없이 요청한 자료를 전송받을 수 있음. 또한 자료를 요청할 경우 
    어느 정도 시간이 소요되는데 반해 Ajax를 이용하면 사용자가 기다릴 
    필요 없이 다른 작업을 수행할 수 있음.
  
  - Ajax를 사용해 사용자가 서버에 자료를 요청할 경우에는 서버 스크립트 
    페이지(화면이 잠시 깜빡 거리는 것을 말함)를 거치지 않아도 자료를 
    받아올 수 있음. 즉, 사용자는 서버에 자료를 요청하는 사이에도 다른 
    작업을 할 수 있게 됨. 카페나 블로그에서 페이지 전환 없이 게시글에 
    바로 댓글을 달 수 있는 것도 Ajax를 사용하기 때문임. 그리고 페이스북의 
    댓글 기능과 구글 지도 등에서도 Ajax를 사용하고 있음. 
    
  - 그러면 Ajax를 사용하는 경우에는 어떻게 처리가 되는가?
    1. 클라이언트는 선택한 제품 정보를 담아 서버에 요청을 하게 됨.
    2. 서버는 요청한 내용에 따라 데이터베이스에 있는 데이터를
       비롯해 기타 다양한 정보를 조합해 하나의 커다란 완성된 
       웹 페이지가 아닌, 제품 정보에 대한 상세 정보만을 미리
       약속한 데이터 형식(JSON, CSV, XML)으로 만듦.
    3. 이제 서버는 완성된 데이터를 웹 브라우저에 응답으로 보냄.
    4. 끝으로 이미 만들어 놓은 데이터 처리용 Ajax 자바스크립트가
       브라우저에 의해 실행되면서 응답으로 받은 제품 정보의
       상세 정보를 상세 정보 영역에 표시하게 됨.
  
  - Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의
    일부분만을 갱신할 수 있음.
    즉, Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그
    결과를 웹 페이지의 일부분에만 표시할 수 있음. 
     
    이 때 서버와는 다음과 같은 다양한 형태의 데이터를 주고 받을 수
    있음.
    * JSON
    * XML
    * HTML
    * 텍스트 파일 등
    
    ※  비동기통신
     - 동기 통신은 Request를 보내게 된다면 얼마나 시간이 
       걸리든 그 자리에서 Response를 받는다는 말임 
       Request를 보낸 Thread는 Response가 도착하기 
       전까지는 아무것도 하지 못하는 Block 상태가 됨을 의미함.
       예를 든다면 동기식 처리 방식은 철수가 영희한테 돈을 
       송금하였을때 영희가 돈을 받았는지 확인하는 상태라고 
       생각하면 됨.

        ex) Request : 철수가 돈을 보냈다. 
            Response : 영희는 돈을 받았다. or 영희는 돈을 받지 못했다.
            ==> 이후 데이터 처리

             만약 철수가 돈을 보내고 영희의 확인을 하지 않고 데이터 
             처리를 한다면 말도 안되는 상황이 만들어질수도 있습니다.
     
     - 비동기통신은 동기식과는 반대로 Request를 보내더라도 
       Response를 언제 받아도 상관이 없다는 말로
       즉, Request를 보내고 Response를 상관하지 않는 
       상태가 되는 것입니다.
       Thread가 Response를 받지 않고 여러가지 요청 보냈을때 
       뒤에 보낸 요청이 먼저 처리가 되었다면 뒤에 요청값에 대한 
       응답값이 먼저 올 수도 있음. 이러한 특징으로 Async(비동기식) 
       통신은 순서를 보장 하지 않음.
       이런식으로 Response를 기다리지 않고 계속 자기일을 하는 
       Async(비동기식) 방식은 Sync(동기식) 방식에 비해 
       성능적으로 좋을 수 밖에 없음. 하지만 Sync(동기식)과 
       반대로 Response에 대한 처리 결과를 보장받고 처리해야 
       되는 서비스에는 적합하지 않음.

     - 이런 비동기 통신 방식은 웹 페이지를 리로드하지 않고 데이터를
       불러오는 방식을 말함. 이 방식의 장점은 페이지 리로드의
       경우 전체 리소스를 다시 불러와야 하는데 이럴 경우 이미지,
       스크립트, 기타 코드 등을 모두 재요청해야 함. 재요청 하는
       경우에는 불필요한 리소스 낭비가 발생하게 되지만, 비동기식을
       이용할 경우 필요한 부분만 불러와서 사용할 수 있으므로
       매우 큰 장점이 있음.
 
         
# Ajax의 장점
  - 새로고침을 통해 새로운 컨텐츠를 반영해야 하는 정적인 웹 페이지가
    아니라 동적인 웹 페이지를 만들 수 있음.
  - 전체 페이지에서 실제로 바뀌어야 할 내용이 특정 부분에 해당한다면
    이 영역의 데이터만을 따로 서버에서 받아올 수 있으므로 경우에
    따라서는 서버의 네트워크 부하를 줄여줄 수 있음.
  - 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있음.
  - 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있음.
  - 백그라운드 영역에서 서버로 데이터를 보낼 수 있음.
  
  
# Ajax에서 반드시 알고 있어야 하는 내용
  - XMLHttpRequest 객체
    이 객체는 클라이언트와 서버 간의 데이터 요청 및 응답 처리를 담당함.
    가장 먼저 생성해야 하는 객체이기도 함. 즉, Ajax의 핵심임.
    
  - GET 방식, POST 방식
    서버에 보낼 데이터를 URL에 포함시켜서 보낼지(GET 방식), 아니면
    요청 페이지의 몸체에 담아 보낼지(POST)와 관련된 부분임.
    
  - 동기, 비동기
    서버에 요청을 하고 서버 측 응답이 올 때까지 다음 코드를 실행하지
    않고 무작정 기다릴 것인지(동기 방식), 아니면 다른 것을 처리하면서
    서버측 응답이 왔다는 소식을 브라우저에 의해 이벤트로 받을 것인지
    (비동기 방식) 선택하는 부분임. Ajax에서는 A가 비동기를 의미하듯
    여기서는 비동기 방식을 주로 사용을 함.
    
  - 데이터 교환 방식
    서버에서 클라이언트로 요청에 대한 응답을 보내는 방식을 말함.
    이 때 데이터를 하나로 모두 묶어서 보낼 것인지(CSV, Comma
    Separated Value) 아니면 널리 사용하는 XML 형식으로 보낼지,
    또는 리터럴 방식의 자바스크립트 객체를 의미하는 JSON(JavaScript
    Object Notation) 방식으로 보낼지 설정함.
  
    
# Ajax를 이용한 클라이언트와 서버 간의 데이터 연동을 위한 작업 순서
  1. XMLHttpRequest(요청) 객체 생성.
  2. 처리 결과를 받을 이벤트 리스너 등록.
  3. 서버로 보낼 데이터 생성.
  4. 클라이언트와 서버 간의 연결 요청 준비(open() 메서드 이용)
  5. 실제 데이터 전송(send() 메서드 이용)
  6. 응답 처리.
  7. 데이터 처리.
  
  
# 제이쿼리 Ajax 사용법
  
  형식)
        $.ajax({
        	type : "get 또는 post",
        	        - 서버로 전송하는 데이터 타입
        	async : "true 또는 false", - 거의 사용 안함.
        	url : "요청할 URL주소",
        	       - 데이터를 전송할 url
        	data : {서버로 전송할 데이터 - 변수명 : 값},
        	        - key와 value 형식의 객체.
        	dataType : "서버에서 리턴하는 데이터 타입"
        	           (예 : XML, HTML, TEXT, JSON 등),
        	success : 정상요청, 정상적으로 응답을 받은 경우 
        	                    처리 내용 작성,
        	          - ajax 통신에 성공했을 때 호출될 이벤트 핸들러
        	error : 오류 발생 시 처리 내용 작성,
        	complete : 작업 완료 후 처리할 내용 - 거의 작성 안함. 
        });