JongTachi의 개발 블로그

[JavaScript] Ajax (Asynchronous JavaScript and XML) 본문

JavaScript

[JavaScript] Ajax (Asynchronous JavaScript and XML)

JongTachi 2023. 7. 8. 11:14
728x90
반응형

자바스크립트를 배운다면 빠질 수 없는 녀석이죠 Ajax입니다. 

 

Ajax라는 용어는 Asynchronous JavaScript and XML의 약자로 사용됩니다.

 

1. what is Ajax?

Ajax(아작스, 에이잭스 등으로 불림)는 웹페이지에서 데이터를 동적으로 로드하거나 업데이트하기 위해 사용되는 웹 개발 기술입니다. 이 기술은 전통적인 웹 페이지 동작 방식을 개선하고 사용자 경험을 향상시키기 위해 등장했습니다. 

 

기존의 웹 페이지는 매번 전체 페이지를 새로고침해야만 했습니다. 그러나 Ajax를 사용하면서 웹 페이지에서 필요한 데이터만 서버로부터 비동기적으로 가져올 수 있게 된 것이죠. 이렇게 하면 사용자는 페이지를 전체 새로고침 하지 않아도 데이터를 로드하거나 업데이트할 수 잇으며, 애플리케이션의 응답성과 효율성을 높일 수 있습니다. 

 

 Ajax는 JavcaScript, HTML, CSS와 함께 사용되며, 일반적으로 XMLHttpRequest 객체를 사용하여 서버와의 비동기 통신을 수행합니다. 최근에는 fetch API나 Axios와 같은 라이브러리도 많이 사용됩니다. 

 

Ajax 요청을 통해 서버로 데이터를 보내거나 데이터를 받아와서 동적으로 웹 페이지를 업데이트 할 수 있죠. 

 

Ajax는 실시간 검색 제안, 동적 컨텐츠 로딩, 애플리케이션 상태의 업데이트 등 다양한 웹 개발 시나리오에서 유용하게 사용됩니다. 또한 Ajax를 기반으로 한 기술인 웹 애플리케이션 개발 프레임워크인 Angular, React, Vue.js 등이 널리 사용되고 있습니다. 

 

요약하자면,

Ajax는 웹 페이지에서 비동기적으로 데이터를 로드하고 업데이트하기 위한 기술로, 사용자 경험을 향상시키고 웹 애플리케이션의 효율성을 높이는 데에 활용됩니다.

 

2. Ajax 사용 방법 (Json 형태 예시)

제이쿼리를 통해 JSON 데이터를 가져오는 코드를 보여드릴게요.

 

먼저, HTML 파일에 제이쿼리 라이브러리를 추가한 후 제이쿼리를 CDN으로 가져오면 되는데 코드를 한번 보시죠.

<!DOCTYPE html>
<html>
<head>
  <title>Ajax JSON 예시</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>사용자 정보</h1>
  <p id="name">이름:</p>
  <p id="email">이메일:</p>

  <script>
    // jQuery를 사용하여 JSON 데이터 가져오기
    $.getJSON('http://example.com/data', function(data) {
      // JSON 데이터 사용 예시
      $('#name').text($('#name').text() + ' ' + data.name);
      $('#email').text($('#email').text() + ' ' + data.email);
    });
  </script>
</body>
</html>

위 코드는 제이쿼리를 사용하여 JSON 데이터를 가져오는 예시입니다.

 

제이쿼리의 $.getJSON() 메서드를 사용하여 서버에서 JSON 데이터를 가져옵니다. 가져온 데이터는 콜백 함수에서 활용되며, 해당 예시에서는 이름과 이메일을 화면에 출력하도록 처리하였습니다. 

 

HTML 파일을 웹브라우저에서 열면, 제이쿼리 라이브러리를 통해 서버에서 JSON 데이터를 가져와서 사용자의 이름과 이메일을 출력하게 됩니다. 

 

Ajax에 대해 배워봤는데 자바스크립트 개발자라면 무조건 알고있어야할 기술이라고 생각합니다. 한번에 이해가 가지 않더라도 계속해서 보시는 걸 추천드립니다. 감사합니다.

728x90
반응형

'JavaScript' 카테고리의 다른 글

[JavaScript] 객체의 이름 동적으로 구성하기  (0) 2024.07.11
[JavaScript] 자바스크립트 - 동기, 비동기 개념  (0) 2023.11.12
javascript 비교연산자 (==, ===, !=, !==) 차이점  (0) 2023.03.08
[javascript] 배열 정렬 sort()  (0) 2022.12.20
JavaScript란?  (0) 2022.07.14
'JavaScript' Related Articles more