[Javascript] Ajax 개념과 목적, 장단점/ 동기, 비동기 방식

Ajax(Asynchronous JavaScript and XML)란?

 - 브라우저 내에서 비동기 기능(신호를 보냈을 때 새로운 HTML을 로딩 할 필요 없이 동작 수행(빠르게 동적으로 페이지를 변화 시켜주는 기능)을 제공하는 기법

-최근에는 XML 보다  JSON을 더 많이 사용한다.

동기 방식	비동기 방식
- 서버에 신호를 보냈을 때 응답이 들어와야 다음 동작 수행 가능	- 신호를 보냈을 때 응답 상태와 상관없이 동작 수행 가능 - 자료를 요청할 때 클라이언트의 진행 시간을 기다릴 필요 없이 작업을 수행할 수 있다는 장점이 있다.

Ajax 장점

- 비동기식으로 처리 가능하여 웹페이지 속도 향상에 큰 기여를 한다.

Ajax 목적 

- 화면 전환 없이 클라이언트 측과 서버측 간의 정보를 교환하기 위해서다.

Ajax의 동작방식

1. 요청 : 브라우저는 서버에 정보를 요청한다.  (브라우저는 Ajax요청을 담당하는 XMLHttpRequest 라는 객체를 구현하고 있다.)
   [ 서버의 동작 : 서버는 응답으로 데이터를 전달한다. (XML, JSON) ]
2. 응답 : 브라우저는 콘텐츠를 처리하여 페이지에 추가한다.

jQuery를 이용한 Ajax

jQuery를 이용하여 Ajax를 사용하게 되면 많은 이점이 있습니다. 일단 Ajax의 기본 Method를 이용해서 Server와 통신을 하면 상당히 복잡합니다. 이는 XMLHttpRequest를 직접 사용하기 때문인데, jQuery를 이용하면 100줄 정도의 Source를 몇 줄 만으로 간단하게 Server와 Data를 주고 받을 수 있습니다. 또한 크로스브라우징의 문제를 jQuery가 알아서 해결해주며 여러가지 편리한 기능들을 제공하기 때문입니다.

• XMLHttpRequest, Mozilla Developer Network
• Ajax, jQuery

jQuery에서 제공하는 $.ajax([settings])함수 는 다음과 같은 구조로 구성되어 있습니다. 물론 이외에도 생략된 다양한 프로퍼티들이 존재하므로 위의 링크를 통해서 더 찾아보면서 공부하면 좋을 것 같습니다.

 

$.ajax ({
  // URL은 필수 요소이므로 반드시 구현해야 하는 Property입니다.
  url	: "url", // 요청이 전송될 URL 주소
  type	: "GET", // http 요청 방식 (default: ‘GET’)
  async : true,  // 요청 시 동기화 여부. 기본은 비동기(asynchronous) 요청 (default: true)
  cache : true,  // 캐시 여부
  timeout : 3000, // 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백을 호출.(단위: ms)
  data  : {key : value}, // 요청 시 포함되어질 데이터
  processData : true, // 데이터를 컨텐트 타입에 맞게 변환 여부
  contentType : "application/json", // 요청 컨텐트 타입 
  dataType    : "json", // 응답 데이터 형식 (명시하지 않을 경우 자동으로 추측)
  beforeSend  : function () {
    // XHR Header를 포함해서 HTTP Request를 하기전에 호출됩니다.
  },
  success : function(data, status, xhr) {
    // 정상적으로 응답 받았을 경우에는 success 콜백이 호출되게 됩니다.
    // 이 콜백 함수의 파라미터에서는 응답 바디, 응답 코드 그리고 XHR 헤더를 확인할 수 있습니다.
  },
  error	: function(xhr, status, error) {
        // 응답을 받지 못하였다거나 정상적인 응답이지만 데이터 형식을 확인할 수 없기 때문에 
        // error 콜백이 호출될 수 있습니다.
        // 예를 들어, dataType을 지정해서 응답 받을 데이터 형식을 지정하였지만,
        // 서버에서는 다른 데이터형식으로 응답하면  error 콜백이 호출되게 됩니다.
  },
  complete : function(xhr, status) {
    // success와 error 콜백이 호출된 후에 반드시 호출됩니다.
    // try - catch - finally의 finally 구문과 동일합니다.
  }
});

---

참고자료 및 출처

visualize.tistory.com/402#:~:text=%EC%A7%A7%EA%B2%8C%20%EC%9A%94%EC%95%BD%ED%95%B4%EB%B3%B4%EB%A9%B4%2C%20Ajax%EB%8A%94,%EA%B8%B0%EB%B2%95%22%EC%9D%B4%EB%9D%BC%EA%B3%A0%20%ED%95%A0%20%EC%88%98%20%EC%9E%88%EB%8B%A4.&text=Ajax%EB%8A%94%20%EC%84%9C%EB%B2%84%EB%A1%9C%EB%B6%80%ED%84%B0%20%EB%8D%B0%EC%9D%B4%ED%84%B0,%EC%88%98%20%EC%9E%88%EA%B2%8C%20%ED%95%98%EB%8A%94%20%EA%B8%B0%EB%B2%95%EC%9D%B4%EB%8B%A4.

develop-im.tistory.com/17

martinwork.tistory.com/2

devyj.tistory.com/1