[JS&jQuery] Ajax 통신? Javascript 와 jQuery 사용법을 알아보자!!

Ajax 통신? 그게 뭐야? (JavaScript랑 jQuery로 알려줄게!)

안녕~ 오늘은 진짜 신기한 Ajax 통신에 대해 얘기해볼까 해. “Ajax? 그거 맛있는 거야? 아니면 어떤 멋진 기술 이름이야?” 싶겠지만, 사실 이거 알면 너의 웹 개발 레벨이 업업업 올라간다니까?

자~ 너무 어려운 얘기라고 겁먹지 말고, 천천히 가보자. 내가 아주 친절하게 알려줄게! 😊

---

Ajax? 그게 뭔데?

일단 이렇게 생각해보자. 너가 어떤 웹사이트를 보고 있어. 클릭 한 번 할 때마다 페이지가 새로고침(F5) 되면서 깜빡깜빡 거리는 거, 엄청 짜증나지? 예를 들어, 댓글 달았는데 “저장 중…” 하면서 페이지가 통째로 리로드 된다? 너무 불편하잖아.

그런데 Ajax를 쓰면? 짜잔~ 새로고침 없이 서버랑 데이터를 주고받을 수 있는 마법 같은 일이 벌어져!

쉽게 말해서, 너가 웹사이트에서 주문도 하고, 검색도 하고, 댓글도 달면서 새로고침 없이 슉슉 진행되는 게 다 Ajax 덕분이야. 편하지?

---

JavaScript로 Ajax 통신하기 (기본편)

"자바스크립트로 어떻게 하냐고?" 알려줄게. 원래는 XMLHttpRequest라는 무거운 친구로 시작했지만, 요즘은 fetch라는 가벼운 친구가 대세야. 코드 볼래?

// JavaScript로 Ajax 요청하는 기본 코드
fetch('https://api.example.com/data', {
  method: 'GET', // 데이터를 가져오는(GET) 요청
})
  .then((response) => response.json()) // 서버에서 온 데이터를 JSON으로 변환
  .then((data) => {
    console.log('받은 데이터:', data);
  })
  .catch((error) => {
    console.error('에러 발생:', error);
  });

음, 뭔가 길어 보이는데 천천히 보면 별거 없어.

1. fetch()로 서버에 요청: "저기요! 데이터 좀 보내주세요~" 하는 거.
2. 응답받기: 서버가 "자, 여기 데이터요!" 하고 보내줌.
3. 데이터 사용하기: 받은 데이터를 원하는 대로 화면에 뿌리는 거지.

---

jQuery에서는 더 간단하게

JavaScript로 하면 코드가 길어질 때가 많아. 그래서 등장한 게 jQuery! 이건 개발자들 편하라고 만들어진 아주 효자 라이브러리야.

jQuery로 Ajax 하는 거? 진짜 심플하니까 바로 보여줄게.

// jQuery로 Ajax 요청하기
$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function (data) {
    console.log('데이터 받았다!:', data);
  },
  error: function (error) {
    console.error('에러 발생:', error);
  },
});

어때? JavaScript보다 훨씬 깔끔하지 않아?
url만 적고 success에서 성공한 데이터를, error에서 에러를 처리하면 끝이야. 이 정도면 너도 바로 따라 할 수 있을걸?

---

실제 사용 예제: 검색창 만들기

어디서 많이 봤을 법한 검색창 예제를 하나 만들어볼게. 사용자가 검색어를 입력하면 서버에서 결과를 가져오고, 바로 화면에 보여주는 거야.

HTML 코드

<input type="text" id="search" placeholder="검색어를 입력하세요" />
<button id="search-btn">검색</button>
<div id="results"></div>

JavaScript (jQuery 사용)

$('#search-btn').on('click', function () {
  const query = $('#search').val(); // 사용자가 입력한 검색어 가져오기

  $.ajax({
    url: `https://api.example.com/search?q=${query}`,
    method: 'GET',
    success: function (data) {
      $('#results').html(''); // 기존 결과 지우기
      data.forEach((item) => {
        $('#results').append(`<p>${item.name}</p>`); // 결과를 추가
      });
    },
    error: function () {
      $('#results').html('<p>검색 중 오류가 발생했습니다.</p>');
    },
  });
});

 

여기서 중요한 건:

1. 사용자가 버튼을 클릭하면 입력한 값을 가져온다.
2. 그걸 서버로 보내고 검색 결과를 받아온다.
3. 받아온 데이터를 바로 화면에 보여준다.

자, 이렇게 하면 검색 기능도 뚝딱 만들어지는 거지. 완전 신기하지?

---

왜 Ajax를 배워야 할까?

요즘 웹사이트는 사용자 경험(UX)이 엄청 중요하잖아. 클릭할 때마다 페이지가 깜빡거리는 거랑, 한 번의 클릭으로 매끄럽게 결과가 나오는 거랑 뭐가 더 좋아 보여? 당연히 후자지!

Ajax는 이런 사용자 경험을 책임지는 핵심 기술이야. JavaScript랑 jQuery에서 기본만 알아도 웬만한 웹 기능은 너 혼자서 다 만들 수 있어. 한 번 따라 해보고 익숙해지면, 너도 웹 마스터 되는 거 시간 문제야. 😉

---

너도 이제 Ajax 배웠으니까, 다음에 친구들이 "야, 너 개발 좀 한다며? 뭐 재밌는 거 없어?" 하면 이거 얘기해봐. 다들 "우와~ 너 대단하다!" 할 거야. 그럼, 다음에 또 재미난 주제로 돌아올게~! 안녕~ 🖐