[Jquery] AJAX

✅ AJAX란?

- AJAX란 Asynchronous Javascript And XML로 불린다. XML은 현재는 잘 쓰이지 않지만 개발당시 HTML이 아닌 XML이라서 그렇다고 한다.

 

 

자바스크립트를 이용해 서버와 브라우저가 비동기 방식(📌참고)으로 데이터를 교환할 수 있는 통신 기능이다.

👉 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이다.

 

 

기존의 웹에서는 한 번 페이지를 로딩하면 다른 페이지를 로딩하기 위해서는 링크를 타고 넘어가야 했다. 그렇게 타고 넘어가다 보면 페이지 깜빡임이 발생한다. 그러므로 페이지를 전환하지 않고도 결과를 보여주는 예상 검색어 등이 바로 AJAX 기술을 사용한 것이다.

 

 

AJAX라는 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받는다. 여기서 클라이언트란 사용자와 상호작용할 수 있는 소프트웨어를 말한다.(ex. 웹브라우저, 핸드폰 애플리케이션 등)

 

 

 

---

 

 

📌 비동기 방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며, AJAX를 통해 서버에 요청을 하게 되면 멈춰있는 것이 아니라 프로그램은 계속돌아간다.(병렬적 일처리)

 

 

📌 비동기 방식의 장점

 - 페이지 리로드의 경우 전체 리소스를 다시 불러야 되는데 스크립트, 이미지, 그 외 코드 등을 모두 재요청을 하면 불필요한 리소스가 낭비되므로 비동기 방식을 이용하여 필요한 부분만 불러와 효율적으로 사용할 수 있다.

 

 

📝 AJAX와 같이 혼합적으로 사용되는 것들

• HTML
• DOM
• Javascript
• XMLHttpRequest

 

 

---

 

 

✅ Jquery AJAX 메서드

 

메서드	설명
$.ajax()	비동기식 Ajax를 이용하여 HTTP 요청을 전송
$.get()	전달받은 주소로 GET 방식의 HTTP 요청을 전송
$.post()	전달받은 주소로 POST 방식의 HTTP 요청을 전송
$.getScript()	웹 페이지에 스크립트를 추가함
$.getJSON()	전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음
.load()	서버에서 데이터를 읽은 후, 읽어 드린 HTML 코드를 선택한 요소에 배치

 

 

📝 $.ajax()

 

- JQuery에서는 AJAX를 이용하여 GET, POST 방식 둘다 합친 메서드이다.(보통 많이들 사용하는 것 같다.)

$.ajax({
  type: "요청 방식",
  url: "요청할 URL",
  data: { POST 요청 시 전달할 데이터 }, // GET 요청 시엔 비워둔다.
  success: function(결과) { // 서버에서 받은 결과
    console.log(결과);
  }
})

 

 

 

📝 $.get()

 

- JQuery에서는 AJAX를 이용하여 GET 방식의 HTTP 요청을 구현한 $.get() 메서드를 제공한다.

$.get(URL주소, 콜백함수);

 

 

 

 

📝 $.post()

 

- JQuery에서는 AJAX를 이용하여 POST방식의 HTTP 요청을 구현한 $.Post() 메서드를 제공한다.

$.post(URL주소, 데이터, 콜백함수);

 

 $.ajax({
      type: "POST",
      url: "URL주소",
      data: JSON.stringify(data), 
      contentType: "application/json; charset=utf-8",
    }).done(function (response) {
      alert('성공!');
      location.href="/URL주소";
    }).fail(function (error) {
      alert(JSON.stringify(error));
    });
  },
};

 

 

 

📝.load()

- load() 메서드는 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 표시하는 한번에 표시하는 단축 메서드 정도로 보면 될 것 같다.

// test.txt 내용을 응답받은 뒤에 class가 list인 요소에 표시
$('.list').load('.test.txt');

 

 

---

 

 

 

✅ 그 외 JQuery AJAX 문법

 

📌 콜백 방식 - 하나의 응답에 대한 콜백 함수를 실행에 콜백 내부에서 에러나 다양한 처리를 하는 방법.

 

 

📌 프로퍼티 방식 - 자바스크립트 객체 자체를 인자로 주는 방법.

 

 

📌 프로미스 방식 - 프로미스 객체를 통한 메서드 체이닝 방법.

 

 

---

 

 

 

 

✅ AJAX 장단점

 

 

📝 장점

• 필요한 데이터만 가져오는 것으로 웹페이지를 새로고침 하는 것보다 속도 향상된다.
• 서버 처리가 완료될 때까지 기다리지 않고 처리 가능
• 전체적인 코딩의 양이 줄어든다.

 

 

📝 단점

• 히스토리 관리가 되지 않는다.
• 페이지 이동없는 통신으로 보안상의 문제가 된다.
• 연속으로 데이터를 요청하면 서버 부하가 발생한다.
• AJAX를 쓸 수 없는 브라우저가 있다.
• 지원하는 Charset이 한정되어 있따.
• script 작성이 되므로 디버깅이 용이하지 않다.