[jQuery] 제이쿼리 AJAX

 

AJAX가 jQuery 고유의 기능은 아닙니다. 하지만 jQuery는 간단한 문법으로 AJAX를 사용할 수 있게 도와줍니다. 

 

AJAX 

AJAX란 asynchronous Javascript and XML입니다.(요즘은 XML보다 HTML이나 JSON을 더 많이 쓰는 것 같습니다. 그래도 AJAH, AJAJ라고 부르기는 좀 이상하네요 ㅎㅎ) 기존의 웹에서는 한 번 페이지를 로딩하면 다른 페이지를 로딩하기 위해서 링크를 타고 넘어가야 했습니다. 그렇게 되면 흔히 말하는 페이지 깜빡임이 발생합니다.

 

뭐 예전에는 거의 모든 웹페이지가 그랬고, 현재도 많은 페이지가 그렇기 때문에 별 불편함은 느끼지 못하실텐데요.

Google에서 페이지 깜빡임 없이 웹앱을 구현해서 주목을 받았습니다. 구글 검색을 해보면, 페이지를 전환하지 않고도 예상 검색어와 결과를 보여줍니다. Gmail도 마찬가지죠. 바로 AJAX 기술을 사용하였기 때문이죠.

 

이름처럼 비동기적으로 서버에 요청을 하여 페이지 전환 없이도 새로운 데이터를 가져올 수 있습니다. 제 홈페이지도 페이지 깜빡임 없이 새로운 페이지가 나타나죠. 로딩 표시가 뜰 때 뒤에서는 데이터를 가져오고 있는 겁니다.

 

제이쿼리 AJAX 코드를 좀 볼까요?

 

$.ajax({
  url: '주소',
  type: 'get 또는 post',
  data: {
    // 보낼 데이터
  },
  dataType: 'json, xml, script, text 또는 html',
  done: function(response) {
    // 성공 시 동작
  },
  fail: function(error) {
    // 실패 시 동작
  },
  always: function(response) {
    // 성공하든 실패하든 항상 할 동작
  }
});

get이나 post만을 전문적으로 하는 메소드도 있습니다. 데이터와 데이터타입은 입력하지 않아도 됩니다.

$.get('주소', '데이터', function(res) {
  // 성공 시 동작
}, '데이터타입');
$.post('주소', '데이터', function(res) {
  // 성공 시 동작
}, '데이터타입');

스크립트와 JSON만을 전문적으로 가져오는 메소드도 있습니다.

$.getScript('스크립트 주소', function(script) {
  // 성공 시 동작
});
$.getJSON('JSON 주소', { 데이터 }, function(data) {
  // 성공 시 동작
});

선택한 태그 안에 다른 html 파일로부터 가져온 태그를 넣는 메소드도 있습니다.

$('#zero').load('다른 html 주소');

Promise

jQuery는 가짜 프로미스 객체를 지원합니다. 가짜라고 표현하는 이유는 공식적인 Promise 구현을 따르지 않았기 때문입니다. 그래도 제대로 기능은 합니다. 프로미스의 장점은 코드가 간결하다는 겁니다. 위의 코드를 프로미스로 구현한 것을 보시죠.

 

$.ajax({
  url: '주소',
  type: 'get 또는 post',
  data: {
    // 보낼 데이터
  },
  dataType: 'json, xml, script, text 또는 html'
})
  .done(function(response) {
    // 성공 시 동작
  })
  .fail(function(error) {
    // 실패 시 동작
  })
  .always(function(response) {
    // 완료 시 동작
  });

현재

요즘도 jQuery가 인기있는 만큼 jQuery AJAX의 인기도 유지되고 있습니다. 하지만 AJAX만을 전문적으로 하는 라이브러리도 있습니다. Axios나 Superagent, Isomorphic-fetch 등이 있습니다. AJAX만 필요한데 jQuery를 통째로 다운받기에는 용량이 너무 크니까요. 그리고 POST와 GET 타입 외에도 PUT과 DELETE도 있는 만큼, PUT과 DELETE를 사용하고 싶다면 다른 라이브러리를 사용하는 것도 고려해보아야 합니다.

 

출처 : www.zerocho.com/category/jQuery/post/57b1a48f432b8e586ae4a973