Spring 개발자 수업 104일차 - jQuery Ajax, 동기와 비동기 방식

jQuery Ajax

- 어제 배웠었던 Ajax는 XMLHttpRequest() 객체를 직접 생성해 전부 작성하는 순수 Ajax인데, 이처럼 Ajax 기능을 하나씩 전부 구현 하는것이 아닌 jQuery에서 제공하는 Ajax가 대게 많이 쓰인다.

- jquery.js 파일만 있으면 기본적으로 제공된다.

 

[ 기존 방식 vs jQuery 방식 ]

jQuery Ajax는 기존 Ajax방식을 바탕으로 구현되어 있기 때문에 사용자가 필요한 프로퍼티만 입력하면 된다.

- 코드가 굉장히 간결해졌으며, 필요한 프로퍼티만 입력하면 되기 때문에 유지보수도 용이하다.

- jQuery에서 제공하는 Ajax는 기존 Ajax 방식을 바탕으로 구현 한 것이므로 상세한 코드는 숨기고 원하는 프로퍼티만 입력하는 방식으로 구현이 되어있다.

 

[ jQuery Ajax 내부 프로퍼티 작성 양식 ]

$.ajax({

    type: '',                   // 요청 메소드(GET, POST ...)
    url: '',                    // 요청 URL(서버측 주소)
    data: '',                   // 보낼 데이터(key=value&key=value..)
    dataType: '',               // 응답 데이터 형식(text(default), json, xml)
    contentType: '',            // 보낼 데이터 형식
    success: function() {},     // 응답 데이터 콜백 함수
    error: function(a, b, c) {} // 예외 콜백 함수

});

 

 

동기와 비동기 방식

[ 정의 ]

  1) 동기(synchronous) 방식

  - sysnchornous 영어 해석 그대로 "동시에 일어나는"이라는 뜻이다.

  - 요청과 그 결과가 동시에 일어난다는 약속이며 바로 요처을 하면 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 한다.

  - 사건이나 일의 처리가 직렬로 실행되는 방식이다.

  - ex) 기존 페이지에서 다른 페이지로 이동을 할 떄 잠시 보이는 로딩과 비슷한 하얀색 배경이 보이는 화면이 동기 방식이다.

한 방향으로 요청과 결과가 동시에 이루어 지는 동기 방식

 

  2) 비동기(Asynchronous) 방식

  - 비동기는 동시에 일어나지 않는다를 뜻한다.

  - 요청과 결과가 동시에 일어나지 않을거라는 약속이다.

  - 사건이나 일의 처리가 병렬로 실행되는 방식이다.

  - ex) 구글이나 네이버에 검색 박스에 텍스트를 입력하면 추천, 연관 검색어가 아래 나오게 되는데 비동기 방식을 의미한다. 

여러 방향으로 요청과 결과가 동시에 일어나지 않는 비동기 방식

 

[ 장단점 ]

	장점	단점
동기 방식	설계가 매우 간단하고 직관적이다.	결과가 주어질 때까지 아무것도 못하고 대기해야한다.
비동기 방식	동기 방식보다 매우 복잡하다. (난이도가 높다)	결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할수 있으므로 자원을 효율적으로 사용할 수 있다.

 

- 예제 코드로 알아보는 동기 & 비동기 방식 차이점은 내일 할 예정이다.

---

MEMO>

# jquery에서 제공하는 ajax는 오타가 발생하면 jsp 특성상 에러 표시가 없으므로 주의하자. (success를 sucess로 자주 적음..)

# 동기와 비동기 방식은 굉장히 중요한 개념이므로 현재는 100% 이해는 못했지만 예시로 라도 머릿속에 기억해두자.

# 오타 줄이기 (에러의 99%는 오타...)