이번장에서는 jQuery AJAX load() 함수에 대해서 알아보겠습니다.
실무에서 요긴하게 써먹는 부분이니 알아두면 도움이 많이 될듯합니다.
jQuery load() 함수는 간단하지만, 강력한 AJAX 방식입니다.
jQuery load() 함수는 전체 웹페이지를 새로고침하지 않고 웹페이지의 일부분만을 업데이트할 수 있습니다.
$(selector).load(URL,data,callback); // 기본 문법
- URL 은 불러들일 페이지의 주소값입니다.
- data 는 쿼리스트링 매개변수값 입니다.
- callback 은 load 함수가 완료된 후 실행되는 함수 입니다.
관련예제를 살펴보기전에 우선 text.txt 화일을 미리 생성해 둡니다.
test.txt 파일의 내용은
---------------------------------------
<h2>jQuery AJAX의 신기한 로딩</h2>
<p id="p1">제대로 로딩이 되었나요?</p>
---------------------------------------
입니다. 이렇게 텍스트 파일을 하나 만들어 놓은후 텍스트 파일의 내용을 불러들이겠습니다.
이전 페이지 jQuery AJAX 소개 부분에서 사용되었던 내용과 동일합니다.
관련예제는 아이디 p1의 내용만을 불러들이는 내용입니다.
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test.txt #p1");
});
});
</script>
</head>
<body>
<div id="div1"><h2>jQuery AJAX 의 내용을 가져와라.</h2></div>
<button>가져오라</button>
</body>
</html>
// 위 그림을 보시면 test.txt 파일에서 아이디 p1 에 해당되는 내용만 가져온것을 알 수 있습니다.
이처럼 load() 함수는 서버상에 있는 데이터를 불러들일수 있습니다. DB의 값을 불러 오는데 유용하게 사용되며, DB의 값과 비교를 하여 참 거짓을 반환할 수 있기 때문에 다른 페이지로의 이동작업 없이 한페이지에서 해결할 수 있다는 장점이 있습니다. 제가 설명한 것은 간단한 작업이지만 그래도 기본적인 내용입니다. 기본적인 내용만 알고있어도 50%는 학습하였다 할수 있습니다. ^^
'jQuery > jQuery AJAX' 카테고리의 다른 글
| jQuery AJAX get(), post() (0) | 2013.05.27 |
|---|---|
| jQuery AJAX 소개 (0) | 2013.05.25 |
