Ajax란? | 동기와 비동기 차이 | 활용 예시

Ajax란? | 동기와 비동기 차이 | 활용 예시

목차

Ajax란? 

Ajax는 Asynchronous Javascript And XML의 약자로, 비동기 자바스크립트와 XML을 사용한 웹 애플리케이션 개발 기법입니다. Ajax를 사용하면 웹 페이지를 새로고침하지 않고도 웹 페이지의 일부만을 동적으로 업데이트할 수 있습니다. 이는 사용자에게 더 나은 사용자 경험을 제공하고 웹 페이지의 성능을 향상시킬 수 있습니다.

Ajax는 웹 2.0의 핵심 기술 중 하나로, 웹 페이지를 더 인터랙티브하고 유익하게 만드는 데 사용됩니다. 예를 들어, Ajax는 검색 결과를 실시간으로 업데이트하거나, 웹 페이지에서 텍스트를 편집하거나, 웹 페이지와 소셜 미디어를 연동하는 데 사용될 수 있습니다.

Ajax는 웹 개발에 사용되는 다양한 기술 중 하나이며, 다른 기술과 함께 사용하여 보다 복잡하고 기능적인 웹 애플리케이션을 개발할 수 있습니다.

Ajax는 웹 개발에 매우 유용한 기술이라고 생각합니다. Ajax를 사용하면 사용자에게 더 나은 사용자 경험을 제공하고 웹 페이지의 성능을 향상시킬 수 있습니다. 또한, Ajax는 웹 2.0의 핵심 기술 중 하나로, 웹 페이지를 더 인터랙티브하고 유익하게 만드는 데 사용될 수 있습니다.

 

동기와 비동기 차이 

동기(synchronous)는 요청과 그 결과가 동시에 일어나는 방식입니다. 즉, 요청을 보낸 후 응답을 받아야 다음 동작이 진행됩니다. 요청과 결과가 한 자리에 동시에 나타나는 것으로 사용자가 서버로 요청을 보냈을 경우 요청에 대한 응답을 리턴받기 전까지는 다른 것을 하지 못하고 기다려야 합니다. 특정 프로그램을 구동시키는 데 시간이 5분 소요된다고 하면, 이 프로그램이 구동되는 5분동안 컴퓨터는 다른 프로그램을 동작시키지 못하고, 구동되기를 기다려야 합니다.

비동기(asynchronous)는 요청과 그 결과가 동시에 일어나지 않는 방식입니다. 즉, 요청을 보낸 후 응답을 기다리지 않고 다음 동작을 진행합니다. 요청과 결과가 한 자리에 동시에 나타나지 않기 때문에 사용자가 서버로 요청을 보냈을 경우 요청에 대한 응답을 리턴받기 전에도 다른 작업을 수행할 수 있습니다. 특정 프로그램을 구동시키는 데 시간이 5분 소요된다고 하면, 이 프로그램이 구동되는 5분동안 컴퓨터는 다른 프로그램을 동작시킬 수 있습니다.

동기와 비동기는 각각 장단점이 있습니다. 동기는 설계가 간단하고, 직관적이지만 응답 시간이 길어질 수 있습니다. 비동기는 응답 시간을 줄일 수 있음, 병렬 처리로 인해 성능 향상은 가능하지만 설계가 복잡해질 수 있습니다. 따라서 어떤 방식을 사용할지는 특정 상황에 따라 적절하게 선택해야 합니다.

활용 예시

Ajax(Asynchronous JavaScript and XML)는 비동기적으로 서버와 데이터를 주고받을 수 있는 기술입니다. jQuery를 사용하여 Ajax를 활용하는 예시를 알려드리겠습니다.

 

GET 요청

$.ajax({
  url: "data.php",
  method: "GET",
  success: function(response) {
    console.log(response);
  },
  error: function(xhr, status, error) {
    console.log("오류 발생: " + error);
  }
});

위의 예시는 "data.php"로 GET 요청을 보내고, 성공적인 응답을 받았을 때 응답 데이터를 콘솔에 출력합니다. 요청이 실패한 경우에는 오류 메시지를 콘솔에 출력합니다.

 

POST 요청

javascript

$.ajax({
  url: "submit.php",
  method: "POST",
  data: { name: "John", age: 30 },
  success: function(response) {
    console.log("전송 완료");
  },
  error: function(xhr, status, error) {
    console.log("전송 실패: " + error);
  }
});

위의 예시는 "submit.php"로 POST 요청을 보내고, { name: "John", age: 30 }와 같은 데이터를 전송합니다. 요청이 성공하면 "전송 완료" 메시지를 콘솔에 출력하고, 요청이 실패하면 오류 메시지를 콘솔에 출력합니다.

JSON 데이터 받기:

javascript
Copy code
$.ajax({
  url: "data.json",
  method: "GET",
  dataType: "json",
  success: function(response) {
    console.log(response);
  },
  error: function(xhr, status, error) {
    console.log("오류 발생: " + error);
  }
});

위의 예시는 "data.json" 파일로 GET 요청을 보내고, 응답으로 받은 JSON 데이터를 콘솔에 출력합니다. dataType: "json"을 설정하여 응답을 JSON 형식으로 파싱합니다.

 

비동기적으로 데이터 업데이트

javascript

$.ajax({
  url: "update.php",
  method: "POST",
  data: { name: "John" },
  success: function(response) {
    $("#result").text("업데이트 완료");
  },
  error: function(xhr, status, error) {
    console.log("오류 발생: " + error);
  }
});

위의 예시는 "update.php"로 POST 요청을 보내고, { name: "John" }와 같은 데이터를 전송합니다. 요청이 성공하면 id가 "result"인 요소의 텍스트를 "업데이트 완료"로 변경합니다.