Ajax는 클라이언트가 비동기 방식으로 자바스크립트를 이용하여 화면 전환 없이 서버 측에 자료를 요청할때 사용한다고 지난 시간에 알아보았습니다. Ajax 관련 메서드들은 모두 해당 기술을 기반으로 제작된 자료 요청 메서드입니다. 어떤 메서드가 있는지 정리합니다.
Ajax관련 메서드의 종류 알아보기
load() : 외부 콘텐츠를 가져올때 사용한다.
$.ajax() : 데이터를 서버에 HTTP POST, GET 방식으로 전송할 수 있으며 HTML, XML, JSON, 텍스트 유형 데이터를 요청할 수 있는 통합적인 메서드이다. $.post(), $.get(), $getJSON()메서드의 기능을 하나로 합쳐 놓은 것이라고 보면 된다.
$.post() : 데이터를 서버에 HTTP POST 방식으로 전송 한 후 서버 측의 응답을 받을 때 사용한다.
$.get() : 데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 받을 때 사용한다.
$.getJSON() : 데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 JSON 형식으로 받을 때 사용한다.
$.getScript() : Ajax를 이용하여 외부 스크립트를 불러온다.
.ajaxStop(function(){...}) : 비동기 방식으로 서버에 응답 요청이 완료되었을때 함수가 실행된다.
.ajaxSuccess(function(){...}) : ajax 요청이 성공적으로 완료되면 함수가 실행된다.
ajaxComplete(function(){...}) : Ajax 통신이 완료되면 함수가 실행된다.
메서드 자세히 알아보기
load()메서드는 사용자가 지정한 URL주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올때 사용한다. 요청한 콘텐츠를 이용해 선택한 요소의내용을 바꿀 수 있다.
기본문법 : $(요소 선택).load(url, date, 콜백 함수)
URL 주소에는 외부 콘텐츠를 요청할 외부 주소를 입력하고, 데이터(data)에는 전송할 데이터를 입력한다. 그리고 전송이 완료되면 콜백 함수에 저장된 코드가 실행되는데 전송할 데이터와 ㅂ콜백함수의 입력은 생략 가능 하다.
$.ajax()메서드는 사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 요청한 데이터를 불러온다. 텍스트, HTML, XML, JSON 형식 등이 있으며, 선택한 요소에 Ajax를 이용해 요청한 외부 데이터를 불러온다.
기본문법 : $.ajax({
url:
type:
data:
dataType:
success: function(data){
},
error: function(){
}
});
Ajax로 JSON 데이터 바인딩하기
바인딩은 묶다 라는 의미로 비동기 통신 기술을 이용하여 서버 데이터베이스(DB)에 데이터를 요청하고 데이터베이스에 요청한 데이터를 받아와 HTML 문단 태그에 결합하는 것을 바인딩이라고 부른다.
JSON : 자바스크립트의 객체 표기법을 JSON이라고 부른다. 데이터를 전달할 때 상ㅇ하는 표준형식으로 속성과 값이 하나의 쌍을 이루고 있다.
기본문법 : {"속성1": 값1, "속성2": 값2, "속성3": 값3}
댓글