목차

jQuery - Ajax Method

  • description : jQuery - Ajax Method
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2022-05-18 Wed


Source of the article

jQuery - Ajax Introduction

AJAX는 전체 페이지를 다시 로딩 하지 않고, 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술입니다.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

간단히 말해서; AJAX는 전체 페이지를 다시 로딩 하지 않고, 백그라운드에서 데이터를 로딩 하고 웹 페이지에 표시하는 것입니다.

AJAX를 사용하는 애플리케이션의 예 : Gmail, Google Maps, Youtube 및 Facebook 탭.

What About jQuery and AJAX?

jQuery는 AJAX 기능을 위한 몇 가지 방법을 제공합니다.

jQuery AJAX 메서드를 사용하면, HTTP Get 및 HTTP Post 두 개 모두 사용하여,
원격 서버에서 텍스트, HTML, XML 또는 JSON을 요청할 수 있습니다.
또한 외부 데이터를 웹 페이지에서 선택한 HTML 요소에 직접 로딩 할 수 있습니다!

jQuery가 없으면 AJAX 코딩이 약간 까다로울 수 있습니다!
\\
브라우저마다 AJAX 구현 구문이 다르기 때문에 일반 AJAX 코드를 작성하는 것은 약간 까다로울 수 있습니다.
즉, 다른 브라우저를 테스트하려면 추가 코드를 작성해야 합니다. 
그러나 jQuery 팀이 이 문제를 처리했기 때문에, 단 한 줄의 코드로 AJAX 기능을 작성할 수 있습니다.


$.ajax() 메서드


Do it! 자바스크립트 + 제이쿼리 입문
jQuery.ajax()
사용자가 지정한 URL 경로에 파일의 데이터를 전송하고, 입력한 URL 경로 파일로부터 요청한 데이터를 불러옵니다.

$.ajax()메소드의 기본형

$.ajax({
   url : "데이터를 전송하고 요청할 외부 주소를 입력",
   type: "전송방식(get, post)",
   data: "전송할 데이터",
   dataType: "서버로부터 받아올 데이터 형식을 지정(html, xml, json)",
   success: function(data) {
      전송에 성공하면 실행될 코드;
   },
   error: function() {
      전송에 실패하면 실행될 코드;
   }
})


$.ajax() 메소드의 옵션

종류 설명
async 통신을 동기 또는 비동기 방식으로 설정하는 옵션입니다. 기본값은 비동기 통신 방식인 true로 설정되어 있습니다. 만일 비동기 방식으로 설정되어 있다면 사용자 컴퓨터에서 서버로 데이터를 전송하고 요청하는 동안에도 다른 작업을 할 수 있습니다.
beforesend 요청하기 전에 함수를 실행하는 이벤트 핸들러입니다.
cache 요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설정합니다. 기본값은 true입니다.
complete ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러입니다.
contentType 서버로 전송할 데이터의 content-type을 설정합니다. 기본값은 application/x-www-form-urlencoded; charset=UTF-8입니다.
error 통신에 문제가 발생했을 때 함수를 실행합니다.
success Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러를 실행합니다.
timeout 통신 시간을 제한합니다. 시간 단위는 밀리초입니다.
type 데이터를 전송할 방식(get, post)을 설정합니다.
url 데이터를 전송할 페이지를 설정합니다. 기본값은 현재 페이지입니다.
username HTTP 엑세스를 할 때 인증이 필요할 경우 사용자 이름을 지정합니다.