Ajax 데이터로드하기 html편
ajax는 여러기능이 있지만 그중 기본적인것이 비동기방식으로 데이터를 전송하는것이다.가장간단하게 jquery를 이용하여 html파일을 불러오는 것을 살펴보자
아래와 같은 레이아웃를 페이지로 삼고 오른쪽 검정색부분에 html 데이타를 부를것이다.
기본적인페이지 소스
그리고 약간꾸며줄 css소스. 간단하게 양쪽으로 float해주고 명확히 하기위해 border를 주었다.마진 패딩 초기화등은 귀찮아서 패스.
body{ width:960px; text-align:center;}
#wrapper{ text-align:left;}
#siadebar{ float:left; border:1px #000 solid; width:200px;}
#content{ border:1px #000 solid; float:right; width:700px;}
마지막으로 불러올파일을 간단히 적어보자 여기선 html에대한 설명을 한 html파일이다.단 데이터 형식으로 취급하기에 소스에<html><head><body>가 없이 body안에 것만 있으면 된다
인터넷 서비스의 하나인~ 어쩌고저쩌고~ ~이다
이번엔 불러올 스크립트소스를 만들어보자.간단하다 load를 사용한다. 앞서 포스팅을 봐왔다면 별탈없이이해할것이다
$(document).ready(function() {
$('#part01').click(function() {//#part01이란 아이디 클릭시
$('#content').load('./ajax_part/abouthtml.html');//#content에 데이타를 부른다.
return false;
});
});
위와같이 했다면 왼쪽에 html을 클릭한다면 오른쪽에 데이타가 불러질것이다.
중요시할점은 다음과 같다
- 앞서 설명했지만 비동기 방식이다.
- 불려진 데이타 html은 부른페이지의 css의 영향을 받는다.
마지막을 완성된 예제를 직접보자면 여기를 클릭
http://sianasiatiger.cafe24.com/study/A_ajax_01.html
댓글