이번 장에서는 jQuery AJAX의 기능에 관한 소개를 하겠습니다.
AJAX는 웹페이지의 일부를 업데이트 할수 있고 서버와 데이터간의 교환을할 수 있는 예술적인 기술입니다.
AJAX는 Asynchronous JavaScript and XML 의 줄임말입니다. 다시 말해서 AJAX는 전체페이지 로딩없이 백그라운드에서 데이터를 로딩할 수 있습니다. 설명이 조금 어려운듯 하여 예를 들어서 추가 설명하겠습니다.
☞ 예를들어 A.php 와 B.php가 있다고 가정했을때 A.php에서 B.php에 데이터를 읽어들이고 싶을경우 보통 팝업창을 띄워서 javascript 부모, 자식 기능을 이용하여 그 내용을 읽습니다. 하지만 AJAX는 그러한 작업없이 바로 하나의 페이지에서 두 개 이상의 다른 페이지에 있는 데이터를 읽어드릴 수 있습니다. 주소 팝업을 띄울경우, 아이디 중복검사를 할경우 등 엄청난 다양한 분야에 접목을 시킬 수 있습니다. 한 페이지에서 모두 처리되니 그 속도 또한 매우 빠르겠죠. 이렇듯 AJAX는 실시간에 활용된 기술에 적용시 매우 유용한 스킬입니다.
기본 예제를 살펴보며 신기한 AJAX 기능을 알아보겠습니다.
AJAX 관련예제
<!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");
});
});
</script>
</head>
<body>
<div id="div1"><h2>jQuery AJAX 의 내용을 가져와라.</h2></div>
<button>가져오라</button>
</body>
</html>
text.txt 의 내용은
-------------------------------------
<h2>jQuery AJAX의 신기한 로딩</h2>
<p id="p1">제대로 로딩이 되었나요?</p>
--------------------------------------
입니다.
// "가져오라" 의 버튼을 클릭하면 위 그림처럼 내용이 바뀌는 것을 볼수 있는데 이것은 jQuery의 remove() , append() 등 어떤 특정기능을 이용하여 바꾼것이 아닙니다. 이것은 test.txt 의 파일 내용을 불러들인 것입니다. 파일을 읽어들일 경우 load() 함수를 사용하여 불러들입니다. AJAX의 기술을 활용하면 웹페이지의 로딩을 줄일뿐만 아니라 실시간 데이터 전송이 가능하여 익혀두면 매우 유용하게 사용하게 될것입니다.
다음장에서는 load() 함수에 대해서 좀더 구체적으로 알아보겠습니다.
'jQuery > jQuery AJAX' 카테고리의 다른 글
| jQuery AJAX get(), post() (0) | 2013.05.27 |
|---|---|
| jQuery AJAX load() (2) | 2013.05.27 |
