jQuery 와 AJAX

jQuery

: 여러 브라우저에서 작동하는 사용하기 쉬운 API를 사용하여 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 훨씬 더 간단하게 만드는 JavaScript 라이브러리

 

Using jQuery with a CDN :

<script
      src="https://code.jquery.com/jquery-3.6.1.js"
      integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
      crossorigin="anonymous"
    ></script>

AJAX ( Asynchronous JavaScript and XML )

: 서버와 통신하기 위해 XML Http Request 객체를 사용하는 것을 말한다.

• JSON
• XML
• HTML
• 일반 텍스트 형식

등을 포함한 다양한 포맷을 주고 받을 수 있다.

AJAX는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이며,

AJAX의 강력한 특징은 웹 페이지 전체를 리프레쉬 하지 않고도 웹 페이지의 일부분만을 갱신할 수 있다.

즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

AJAX 의 주요 두가지 특징

• 페이지 새로고침 없이 서버에 요청
• 서버로부터 데이터를 받고 작업을 수행

<script>
      $.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });
    </script>

 

 

• method : 전송방식
• url : 주소
• data: 보낼 데이터 Object 형식
• .done() : 전송 완료 후 실행되는 함수

💡 .append() HTML 요소를 추가하는 jQuery 함수:

어떤 API는 보안상 Access-Control-Allow-Origin 오류가 날 수 있음 -> Front-End용 서버(Node.js 등)를 만들어 해결 가능