$.ajax(에이젝스) 비동기식 처리와 동기식 처리 async

 

| AJAX로 할 수 있는 것

AJAX라는 네트워크 기술을 이용하여 client - > Server로 Data 요청하고 그에 대한 결과를 돌려받을 수 있다.

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 request한다.

이 경우,JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그 만큼의 자원과 시간을 아낄 수 있다.

 

Client란?

-Server에서 정보를 가져와서 사용자에게 보여줄 수 있고 사용자와 상호작용할 수 있는 소프트웨어를 일컫음

ex)web browser, 핸드폰 어플리케이션

 

Server란?

- 네트워크 상에서 접근할 수 있는 프로그램으로서 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램

(일반적으로 사용자가 직접적으로 사용하지 않는다.)

 

AJAX의 진행 과정

1.XMLHttpRequest Object를 만든다.

 -request를 보낼 준비를 브라우저에게 시키는 과정

 -이것을 위해서 필요한 method를 갖춘 object가 필요하다.

 

2.callback 함수 생성

 - Server에서 Response가 왔을 때 실행.

 - HTML page를 update 함

 

3.Open a Request

 - Server에서 Response가 왔을 때 실행 시키는 함수

 - HTML page를 update 합니다.

 

 

function ykCheckEmailDup() {
  $.ajax({ data: {email: 'example@example.com'},
  url: 'emailcheck',
  dataType: 'json',
  success: function(data){ 
   var result = data; return result; 
   	}

  });

}

 위코드를 실행하였을 때 result를 resutn 하도록 하였고 이 값을 찍어보면 어떤 값이 나올까요 ?

 

결과는 undefined이 나오게 됩니다.

data 의 값도 아니고 빈 값도 아니고 왜 undefined 일까 ?

 

이것은 비동기식 방식에서 success 콜백 함수에서 리턴한 값을 받을 수가 없다는 것을 의미합니다.

 

동기식 처리 방식으로 했다면 반드시 이메일 중복체크가 끝난 후 data를 받은 다음에 다음 로직을 처리하였을 것 입니다.

하지만 Ajax는 기본적으로 비동기식 처리방식이므로 Ajax 호출이 서버에서 응답을 받는데에 아무리 빨리 받아도 다음 로직을 실행 하기 전에 받을 수 있다고 확신할 수 없습니다.

 

 

async : false 속성이 추가된 메서드

function ykCheckEmailDup() {
    var result;
    $.ajax({
    data: {email: 'example@example.com'}
    , url: 'emailcheck'
    , dataType: 'json'
    , async: false
    , success: function(data) { result = data; 
    } 
    
   }); 

  return result;
}

jQuery의 Ajax호출은 async:true가 기본이며, 이 속성을 기입하지 않는다면 기본적으로 비동기식으로 동작하게 됩니다.

즉,

async : true ( default 값 , 비동기식 동작 )

async : false ( 응답을 모두 완료 후 다음 로직을 실행함 , 동기식 동작 )

 

 

 

Ajax의 장점

1.웹 페이지의 속도 향상

2.서버의 처리가 완료 될떄까지 기다리지 않고 처리 가능

3.서버에서 Data만 전송하면 되므로 전체적인 코드의 양이 줄어듦

4.기존 web에서는 불가능했던 다양한 UI를 가능하게 해준다.

 

 

 

Ajax의 단점

1.히스토리 관리가 안된다.

2.연속으로 data를 요청하면 서버 부하가 증가할 수 있다.

3.XML HttpRequest를 통해 통신을 하는 경우 사용자에게 아무런 진행 정보가 주어지지 않는다.

(요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생한다.)