제이쿼리(jQuery) 기초 문법 - Ajax 관련 메소드 (1)

제이쿼리(jQuery) 기초 문법 

Ajax 관련 메소드

Ajax(Asynchronous JavaScript and XML)는 클라이언트(사용자 컴퓨터)가 비동기 방식으로 자바 스크립트를 이용하여 화면 전환 없이 서버(서비스를 제공하는 컴퓨터)측에 자료(XML, JSON(JavaScript Object Notation), 텍스트, HTML)를 요청할 때 사용한다. 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를 이용하여 외부 자바스크립트를 불러온다. ex) $("button").click(function(){$.getScript("demo_ajax_script.js");});
.ajaxStop(function(){...})	비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수가 실행된다.
.ajaxSuccess(function(){...})	ajax 요청이 성공적으로 완료되면 함수가 실행된다.
.ajaxComplete(function(){...})	ajax 통신이 완료되면 함수가 실행된다.

 

load() 메소드

load() 메소드는 사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용한다. 요청한 콘텐츠를 이용해 선택한 요소의 내용을 바꿀 수 있다.

 

<script>
$(요소 선택).load(url,data,콜백함수)
</script>

 

다음 URL 주소에는 외부 콘텐츠를 요청할 외부 주소를 입력하고, 데이터(data)에는 전송할 데이터를 입력한다. 그리고 전송이 완료되면 콜백 함수에 저장된 코드가 실행된다. 전송할 데이터와 콜백 함수는 생략할 수 있다.

 

ajax 관련 load()메소드 실습

 

menu.html

 

메뉴보기를 누르면 각 load()가 실행된다.