동기 방식

→ 하나의 요청이 처리되는 동안 다른 요청이 처리되지 못합니다.

→ 요청이 완료되어야만 다음 처리가 가능한 방식입니다.

→ 즉 , 직렬적 처리라고 보시면 됩니다.

비동기 방식

→ 하나의 요청 처리가 완료되기 전에 제어권을 다음 요청으로 넘겨 Blocking 되지 않고 ,

다음 요청을 처리합니다.

→ 병렬적으로 업무를 처리합니다.

예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때,

서버에 데이터를 요청한 이후 서버로부터

데이터가 응답 될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 작업을 수행합니다.

이후 서버로부터 데이터가 응답 되면 이벤트가 발생하고

이벤트 핸들러가 데이터를 가지고 수행할 작업을 계속해 수행한다.

자바에서는 대표적으로 Multi Thread가 비동기식으로 동작합니다.

동기와 비동기 장단점

동기

→ 설계가 매우 간단하고 직관적 입니다.

→ 단, 한번에 하나씩 해결하므로 결과가 주어지기 전까지 가만히 대기해야 합니다.

비동기

→ 다소 동기보다는 복잡해지지만 , 결과를 기다리는 동안 다른작업을 할 수 있어서,

자원을 효율적으로 사용할 수 있습니다.

AJAX

→ asynchronous JavaScript and XML

→ 비동기 처리의 가장 기본적인 예시입니다.

→ 네트워크 통신 기술로 클라이언트가 요청한 데이터를 서버로 부터 가져 옵니다.

function getData(){
		var tableData;
		$.get('https://domain.com/products/1', function(response){
			tableData = response;
	});
return tableData;
}

console.log(getData());

3번째 줄에 , https://domain.com/products/1 에 Http로 Get요청을 합니다.

그렇게 서버로 받아온 데이터는 response라는 인자에 담기게 됩니다.

이때 console.log를 이용하여 결과를 출력해보면 , undefined 라는 결과가 나옵니다.

즉 , ajax는 비동기로 데이터를 처리하므로 , 서버 응답을 기다리는 동안 다음 작업을 수행합니다.

그 다음 작업으로 있는 return이 실행되고 바로 , console이 실행됩니다.

아직 서버로 응답을 받지 못했지만 출력을 하였기에 초기값이 설정되지 않은 tableData가 출력되는 것입니다.

Ajax의 장점과 목적

장점

1.처음 웹페이지에 접속하는 순간 , 수 많은 자원들을 동시 다발적으로 요청을 함과,

결과를 출력하고 다운로드 합니다.

동기식으로 진행할 경우 , 하나를 다운 로드 받는 동안 별다른 작업을 수행하지 못하므로 굉장히 오래 걸립니다.

2.JSONP등을 사용한 크로스 도메인이 가능합니다.

목적

→ 댓글 등록 처럼 , 화면의 전환 없이 클라이언트 측과 서버측 간의 정보를 교환하기 위함입니다.

(리소스 관리 우수)

Ajax의 동작방식

1.브라우저로 정보 요청 (브라우저는 XMLHttpRequest라는 객체를 사용합니다)

2.브라우저는 결과를 처리하여 페이지에 추가합니다.

예제

• 1. type : get, post 등의 전송 방식을 결정
• 2. url : 접근할 url을 입력
• 3. data: 전달할 파라미터 값을 설정
• 4. dataType : 파싱할 파일 형태를 입력(Ex. json, html, xml) → 즉 , 반환타입을 의미.
• 5. success : 성공할 경우 불러올 콜백함수, 반환되는 코드(html, xml 등등)를 사용가능
• 6. error : 실패할 경우 불러올 콜백함수
• 7. complete : 성공 또는 실패 뒤에 실행할 콜백함수
• 8. jsoncallback : 성공시 불러올 함수

예제1

$.ajax({
  url: 'http://webisfree.com/test_api/',
  success: function (html, status) {
    $('.test').append(html);
  }
})

• 기본적으로 명시가 없을경우 type는 GET으로 설정 됩니다.

예제2

$.ajax({
  type: 'get',
  url: 'http://webisfree.com/test_api/',
  data: { siteName: 'webisfree.com', author : 'EnSSo'} ,
  dataType: 'json',
  success: function (html, status) {
    $('.test').append(html);
  },
  error: function (xhr, status, errormsg) {
    alert('Failed!' + errormsg);
  }
})

크로스 도메인?

• 서로 다른 도메인 간의 호출을 의미합니다.

크로스도메인을 허용하지 않는 이유

기본적으로 크로스도메인은 허용이 되지 않습니다. 보안상의 위험을 바탕으로 외부 서버의 요청이 들어오면 에러가 발생합니다. JavaScript는 동일 출처 정책(Same-Origin Policy)를 사용하여 다른 도메인의 접근을 차단 시켜 줍니다. 크로스 도메인을 허용하기 위해서는 동일 출처 정책을 해제 해야합니다.

크롬의 경우 위에서 daum에 ajax요청을 날릴 경우 ,

대규모 웹 프로젝트가 늘어나고, REST API 등을 이용한 외부 호출이 많아지는 상황에서는 거추장 스러운 기술이 되기도 하고 있습니다.

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)

동일 출처 정책과 반대되는 개념으로 교차 출처 리소스 공유(Cross-Origin Resource Sharing)가 있습니다. 개발을 하다보면 크로스도메인을 허용해야하는 경우가 발생합니다. 예를 들어 다른 서버에서 내 서버의 API호출하는 경우 차단을 해버리면 API를 사용하지 못 하게 됩니다. 이 때 허용해주는 개념이 교차 출처 리소스 공유입니다.

preflight request (사전요청)

요청하려는 URL이 외부 도메인일 경우 웹 브라우저는 preflight요청을 먼저 날립니다.

preflight 요청은 실제로 요청하려는 경로와 같은 URL에 대해 OPTIONS 메서드로 요청을 미리 날려보고 요청을 할 수 있는 권한이 있는지 확인합니다.

그리고 가능하다는 응답이 오면 , 실제 요청을 수행합니다.

서버에서 CORS (Cross-Origin Resource Sharing) 요청 핸들링하기

서버로 날라온 preflight 요청을 처리하여 웹 브라우저에서 실제 요청을 날릴 수 있도록 해줍니다.

모든 외부 도메인에서 모든 요청을 허용할 경우 처리

가장 쉬운 방법으로 모든 요청을 허용하는 방식

1. preflight 요청을 받기 위해 OPTIONS 메서드의 요청을 받아서 컨트롤.

2. 모든 요청의 응답에 아래 header를 추가.

• Access-Control-Allow-Origin: *
• Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS
• Access-Control-Max-Age: 3600
• Access-Control-Allow-Headers: Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization

**외부 도메인 요청을 선별적으로 허용할 경우**

• Request headers (클라이언트의 요청 해더)

  • Origin: 요청을 보내는 페이지의 출처(도메인)
  • Access-Control-Request-Method: 실제 요청하려는 메서드
  • Access-Control-Request-Headers: 실제 요청에 포함되어 있는 헤더 이름

• Response headers (서버에서의 응답 해더)

  • Access-Control-Allow-Origin: 요청을 허용하는 출처. * 이면 모든곳에 공개되어 있음을 의미한다.
  • Access-Control-Allow-Credentials: 클라이언트 요청이 쿠키를 통해서 자격 증명을 해야 하는 경우에 true. true를 응답 받은 클라이언트는 실제요청시 서버에서 정의된 규격의 인증값이 담긴 쿠키를 같이 보내야 한다.
  • Access-Control-Expose-Headers: 클라이언트 요청에 포함되어도 되는 사용자 정의 해더.
  • Access-Control-Max-Age: 클라이언트에서 preflight 의 요청 결과를 저장할 기간을 지정. 클라이언트에서 preflight 요청의 결과를 저장하고 있을 시간이다. 해당 시간동안은 preflight요청을 다시 하지 않게 된다.
  • Access-Control-Allow-Methods: 요청을 허용하는 메서드. 기본값은 GET,POST 라고 보면된다. 이 해더가 없으면 GET과 POST요청만 가능하다. 만약 이 해더가 지정이 되어 있으면, 클라이언트에서는 해더 값에 해당하는 메서드일 경우에만 실제 요청을 시도하게 된다.
  • Access-Control-Allow-Headers: 요청을 허용하는 해더.

위의 request header 값을 보고 response header에 해당 출처(origin)에 허용하는 요청 스팩을 알려주는 구현을 하면 된다. Filter나 Interceptor등을 통해 구현해야 한다. 그리고 최근에 springframework에서 CORS supprt 기능이 추가되었다. 4.2 이상 버전부터 인것으로 보인다. spring mvc 스팩에 추가적인 어노테이션으로 외부 도메인 접속에 대한 핸들링을 지원한다.

참고

https://webisfree.com/2015-07-09/[제이쿼리]-비동기식-호출-ajax()-메소드-알아보기

https://mosei.tistory.com/entry/JSONP와-CORSCrossOrigin-Resource-Sharing-크로스도메인-사용

https://humahumahuma.tistory.com/205