ajax 비동기 통신

프로젝트를 하면서 가장 애먹었던 기능이였다고 생각한다.

페이지를 다시 로드하지 않고 데이터를 가져올 수 있다는데  어떻게 데이터를 컨트롤러로 가져오고 그 결과값을 가져와서 If문으로 조건을 걸지? 이생각이 들었던 것 같다. 그래서 프로필 사진을 뷰에서 보여줄 때 이해가 되지 않았던 ajax보다는 파일의 stored Name을 세션에 저장해서 일일이 가져와서 프로필을 보여주었었다.

 

프로젝트 이후 ajax를 다시 공부하면서 느낀건 역시 내가 한 건 노가다였다. ㅎ... 역시 알아야 효율적으로 쓸수 있다.

아마 다시 한다면 ajax로 userno를 가져오고 storedName을 조회해서 뿌려줬을거 같다.

여튼 공부하면서 정리한 ajax 포스팅 스타트

 

Ajax, Asynchronous Javascript and Xml

자바스크립트를 이용해서 비동기 통신을 통해 서버와 통신해서 데이터를 가져오는 방식이다.

전체 페이지를 로딩하지 않고 웹페이지 일부만 로딩해서 데이터를 가져온다.

Json, html,xml 등의 다양한 형태의 데이터를 주고 받을 수 있다. 

 

Ajax 동작 방식

요청 : 브라우저 -> 서버 

XmlHttpRequest 객체를 브라우저가 가지고 있다.

이 객체는 ajax요청을 담당한다.

 

응답 : 브라우저는 컨텐츠를 받아서 처리한다.

 

ajax 장점

전체 페이지를 로딩하지 않고 필요한 데이터만 갱신해서 가져오기 때문에 리소스낭비가 적다.

웹페이지 속도를 높인다.

서버에서 데이터만 전송하면 되기떄문에 코드가 간단해 진다. 

 

ajax 단점

스크립트라 디버깅이 어렵다.

히스토리 관리 안된다.

ajax로 바이너리 데이터 보낼 수 없음

client pooling 방식을 사용하기 때문에 service push방식의 실시간 서비스는 불가능하다.

* client pooling : 사용자가 직접 원하는 정보를 서버에 요청해서 얻는 방식

* service push :  예)  각종 앱의 푸쉬알림

 

사용 예제

url에 데이터를 보낼 url주소를 넣어주고 type으로 http전송 방식을 정해준다.

데이터는 key-value형식으로 보내주어야 하며dataType을 지정해 주어야 데이터가 브라우저로 잘 넘어간다.

dataType잘못 지정해서 데이터를 못보낸 경험이 있다... 

$.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 구문과 동일합니다.
  },
})

출처 : https://azderica.github.io/00-javascript-ajax/

http://www.tcpschool.com/ajax/ajax_intro_basic

https://devyj.tistory.com/1