jQuery - Ajax Introduction
AJAX는 전체 페이지를 다시 로딩 하지 않고, 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술입니다.
AJAX = Asynchronous JavaScript and XML.
간단히 말해서; AJAX는 전체 페이지를 다시 로딩 하지 않고, 백그라운드에서 데이터를 로딩 하고 웹 페이지에 표시하는 것입니다.
AJAX를 사용하는 애플리케이션의 예 : Gmail, Google Maps, Youtube 및 Facebook 탭.
jQuery는 AJAX 기능을 위한 몇 가지 방법을 제공합니다.
jQuery AJAX 메서드를 사용하면, HTTP Get 및 HTTP Post 두 개 모두 사용하여,
원격 서버에서 텍스트, HTML, XML 또는 JSON을 요청할 수 있습니다.
또한 외부 데이터를 웹 페이지에서 선택한 HTML 요소에 직접 로딩 할 수 있습니다!
jQuery가 없으면 AJAX 코딩이 약간 까다로울 수 있습니다! \\ 브라우저마다 AJAX 구현 구문이 다르기 때문에 일반 AJAX 코드를 작성하는 것은 약간 까다로울 수 있습니다. 즉, 다른 브라우저를 테스트하려면 추가 코드를 작성해야 합니다. 그러나 jQuery 팀이 이 문제를 처리했기 때문에, 단 한 줄의 코드로 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 엑세스를 할 때 인증이 필요할 경우 사용자 이름을 지정합니다. |