jQuery Academy · 강의

AJAX 작업

AJAX 작업은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 1개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 1개의 강의가 포함되어 있습니다.

소개

안녕하세요.

이 레슨에서는 jQuery AJAX 메서드를 사용하여 원격 서버와 상호 작용하는 방법을 배웁니다.

AJAX(Asynchronous Javascript And XML)는 웹 페이지를 새로 고침하지 않고 서버와 데이터를 비동기적으로 주고받을 수 있게 해 주는 기술입니다.

특히 페이지를 새로 고침하지 않고도 데이터를 전송할 수 있으므로 사용자 경험이 크게 향상됩니다.

Ajax 예제

특히 Facebook, Gmail, Youtube와 같은 세계적으로 가장 인기 있는 웹 애플리케이션은 AJAX 기술을 자주 사용합니다.

사실 AJAX를 새로운 기술이라고 생각하기보다는, 자바스크립트를 사용하여 서버와 클라이언트 사이에서 비동기적으로 데이터를 전송하는 방법이라고 생각하면 됩니다.

그럼 AJAX를 사용하는 함수의 예를 살펴보겠습니다.

예를 들어 youtube.com에서 동영상을 시청하다가 좋아요 버튼을 클릭했다고 하겠습니다. 이 경우 좋아요 이벤트는 Youtube 페이지가 새로 고쳐지기 전에 백그라운드에서 Youtube 서버로 전송됩니다.

이것이 AJAX 요청으로 이루어지는 과정입니다.

Ajax 예제

AJAX 요청의 예를 살펴보겠습니다.

아래는 AJAX로 작성한 GET 요청 코드이며, https://api.coddykit.com/api/coddy-test로 요청을 보냅니다.

이 코드는 Vanilla 자바스크립트로 작성되었으며, 보시다시피 문법이 조금 까다롭습니다.

<div id="result"></div>

<script>
 var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 
        && this.status == 200) {
      //we are writing the AJAX request response 
      //to div element that has result id
      var result = document.getElementById('result');
      result.innerHTML = JSON.stringify(this.responseText);
    }
  };
  xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
  xhttp.send();
</script>

경고

앞에서 설명했듯이 jQuery는 DOM 수정 라이브러리인 동시에 AJAX 작업을 쉽게 수행할 수 있는 메서드도 제공합니다.

Ajax 메서드

jQuery를 사용하면 AJAX 요청을 관리하는 매우 간단한 메서드를 사용할 수 있습니다.

ajax() 메서드를 사용하면 웹에서 흔히 사용하는 get, post, put과 같은 HTTP 메서드를 쉽게 사용할 수 있습니다.

Ajax 메서드의 문법은 다음과 같습니다.

$.ajax ({

url: 'remote URL'.

data: 'Data that we will send',

method: 'HTTP Method - Default GET',

success: 'Here, we should define function that work when Ajax get success result',

dataType: 'Interaction data type'

});

예제를 만들어 보겠습니다

<div id="result"></div>

<script>
$.ajax ({
   url: 'https://api.coddykit.com/api/coddy-test',
   success: function(data){
   $('#result').text(JSON.stringify(data));
  }
});

</script>

Ajax get 요청

이제 예제를 개선해 보겠습니다.

아래 예제에서는 URL(https://api.coddykit.com/api/coddy-test)로 ajax 요청을 보냅니다.

HTTP 메서드를 지정하지 않으면 기본적으로 GET 요청이 전송됩니다.

const https = require('https');

function ajax(url) {
  const callbacks = { success: [], fail: [], always: [] };
  const req = https.get(url, (res) => {
    let data = '';
    res.on('data', chunk => data += chunk);
    res.on('end', () => {
      callbacks.success.forEach(cb => cb(data));
      callbacks.always.forEach(cb => cb());
    });
  });
  req.on('error', (err) => {
    callbacks.fail.forEach(cb => cb(err));
    callbacks.always.forEach(cb => cb());
  });
  return {
    done: function(cb) { callbacks.success.push(cb); return this; },
    fail: function(cb) { callbacks.fail.push(cb); return this; },
    always: function(cb) { callbacks.always.push(cb); return this; }
  };
}

var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
  .done(function() {
   //success callback
  /*
  If our get request is sent to 
  the server with success (HTTP 2xx), 
  this function is called.
 */
  })
  .fail(function() {
   /* This function works 
       if the AJAX request fails.
   */
  })
  .always(function() {
   /*
   This function works in all cases when 
    the AJAX request is 
    successful or unsuccessful.
   */
  });

get 메서드

$.get() 메서드와 Get 요청

$.get() 메서드를 사용하여 HTTP get 요청을 서버로 보낼 수 있습니다.

이 메서드는 jQuery에서 제공하며, Vanilla 자바스크립트보다 더 간결하고 쉬운 코드로 GET 요청을 보낼 수 있게 해 줍니다.

예제를 살펴보면서 코드가 얼마나 짧아졌는지 확인해 보겠습니다.

<div id="result"></div> 

<script>
$.get("https://api.coddykit.com/api/coddy-test", 
function(response) {
   $('#result').text(JSON.stringify(response));
})
</script>

Post 메서드

$.post() 메서드 및 Post 요청

$.post() 메서드를 사용하여 서버로 HTTP Post 요청을 보낼 수 있습니다.

예제를 작성하고 코드가 얼마나 간결해지는지 확인해 보겠습니다.

특히 웹 폼을 서버에 제출할 때 Post 요청을 자주 사용하게 됩니다.

<div id="result"></div> 

<script>
$.post("https://api.coddykit.com/api/coddy-test", 
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
   $('#result').text(JSON.stringify(response));
})
</script>

Put 메서드

Put 요청

$.put() 메서드를 사용하여 HTTP Put 요청을 서버로 보낼 수 있습니다.

예제를 만들어 보겠습니다.

<div id="result"></div> 

<script>
$.ajax({
method:'PUT', 
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
   $('#result').text(JSON.stringify(response));
}})
</script>

삭제 메서드

Delete 요청

$.delete() 메서드를 사용하여 HTTP Delete 요청을 서버로 보낼 수 있습니다.

예제를 만들어 보겠습니다

<div id="result"></div> 

<script>
$.ajax({
method:'DELETE', 
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
   $('#result').text(JSON.stringify(response));
}})
</script>

링크

아래 링크에서 AJAX 메서드에 관한 예제와 자세한 정보를 확인할 수 있습니다.

축하합니다

축하합니다 🎉

이 섹션에서는 jQuery를 사용한 AJAX를 배웠습니다.

jQuery 초급 과정을 함께해 주셔서 감사합니다. 🎉🎉🎉

이제 시험에 응시하고 jQuery 초급 튜토리얼 과정의 수료증을 받을 수 있습니다 🚀🚀🚀

자주 묻는 질문

“AJAX 작업” 강의는 무료인가요?

네 — “AJAX 작업” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 1개의 강의가 포함되어 있습니다.

“AJAX 작업”에서 뭘 배우나요?

AJAX 작업 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

jQuery Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 1개 중 1번째 강의입니다.

“AJAX 작업” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

← jQuery Academy(으)로 돌아가기