load() 메서드를 사용해서 버튼을 클릭하면 외부 페이지(header.html)를 로드
$(선택자).load(URL, [데이터], [콜백 함수]);사용방법
ㅇ 선택자 : 로드한 컨텐츠를 삽입할 요소를 선택합니다.
ㅇ URL : 로드할 리소스(외부 페이지 또는 파일)의 URL을 지정합니다.
ㅇ 데이터 (선택 사항) : 서버로 전송할 데이터를 지정합니다. 주로 POST 요청에 사용됩니다.
ㅇ 콜백 함수 (선택 사항) : 로드가 완료된 후 실행할 함수를 정의합니다. 이 함수는 로드가 성공하거나 실패했을 때 호출됩니다.
특징
ㅇ 비동기적 로드 : load() 메서드는 비동기 방식으로 동작하며, 페이지의 리로드 없이 외부 리소스를 로드합니다.
ㅇ 로드된 컨텐츠 삽입 : 로드한 컨텐츠는 선택한 요소 내에 자동으로 삽입됩니다. 삽입 위치는 선택한 요소에 의해 결정됩니다.
ㅇ 캐싱 : 동일한 리소스를 다시 로드하지 않고 저장된 데이터를 사용할 수 있습니다.
ㅇ 서버 요청 : 기본적으로 GET 요청을 사용하여 데이터를 로드합니다. 필요한 경우 데이터를 POST 요청으로 전달할 수도 있습니다.
ㅇ 콜백 함수 : 로드가 완료된 후 실행할 콜백 함수를 지정할 수 있으며, 로드 성공 또는 실패 여부를 확인하고 추가 작업을 수행할 수 있습니다.
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<header id="header">
</header>
<script type="text/javascript">
$(document).ready(function(){
$("#header").load("/header.html");
});
</script>
</body>728x90
