제이쿼리 ajax 예제
Ajax는 Asynchronous JavaScript and XML 의 약자입니다.
자바스크립트를 이용하여 서버와의 비동기식 통신을 하기위해 사용하는데요.
비동기식이란 서버에 정보를 전송하거나 받기위해 페이지 이동을 하지 않고 통신을 통해 정보를 주고받는걸 의미합니다. 즉 하나의 페이지에 머물면서 여러가지 명령을 실행할 수 있죠.
Ajax를 사용하는 이유는 대부분 사용자 입장에서 봤을 경우 깔끔한 정보전달 및 정보표시를 보여주기 위함 입니다.
예를 들면 사용자가 A라는 페이지를 보고있는데 B라는 페이지의 정보를 보기위해 굳이 B라는 페이지로 이동을 하지 않고 보여준다면, 사용자 입장에서는 깔끔하고 편하다는 느낌을 받겠죠.
사실 자바스크립트를 사용하여 Ajax 통신을 하기 위해서는 코드가 길고 약간 복잡합니다.
하지만 자바스크립트의 긴 코드를 라이브러리로 가지고 있는 제이쿼리를 사용한다면 편하게 Ajax 통신을 할 수 있습니다. 간단한 예를 들어보겠습니다.
A라는 페이지에서 버튼을 누르면 B라는 페이지의 정보를 보여주는 예제입니다.
스크립트 코드)
<script>
function request_b(){
$.ajax({
url: 'b.html',
success: function(data) {
alert(data);
}
});
}
</script>
html 코드)
<body>
<input type="button" onclick="request_b()" value="클릭하세요">
</body>
코드설명)
1. 버튼을 클릭하면 request_b 라는 메소드를 실행합니다.
2. request_b 라는 메소드는 ajax 통신을 시도합니다.
3. $.ajax() : 제이쿼리를 이용하여 ajax 통신을 실행하고 { } 안에 옵션을 지정합니다.
4. url : 통신을 할 다른 페이지 입니다.
5. success : 통신에 성공하면 function 메소드를 실행 하면서 다른 페이지에서 전송한 data 값을 받습니다.
6. alert 함수를 이용하여 data값을 보여줍니다.
위 그림은 b.html의 소스코드 입니다.
이미 눈치를 채셨겠지만 b.html의 소스 전부를 data 값으로 가져왔습니다.
다시 말하면 b.html은 서버사이드 페이지가 아니기 때문에 가공된 데이터를 전송할 수 없었던 거죠.
여기서 필요한 서버사이드 페이지는 php 혹은 jsp 같은 프로그래밍 언어를 사용한 페이지 입니다.
그렇다면 서버사이드 페이지를 이용하여 데이터를 전송받을 경우는 어떻게 보여지는지 알아보죠.
저는 php를 이용하여 테스트를 하겠습니다.
아까와는 다른 가공된 데이터를 볼 수 있습니다.
위 그림은 b.php의 소스코드 입니다.
echo 라는 명령어는 출력을 하라는 명령어 이고 date('Y-m-d : h:i:s', time()) 라는 함수는 날짜와 시간을 가져오는 함수입니다. 하지만 여기서 중요한건 php 명령어와 함수가 아니고 Ajax 통신을 이용하여 다른 페이지의 정보를 전송받았다는 거죠. 이러한 데이터는 주로 xml 혹은 jason 으로 재가공된 데이터로 받습니다.
하지만 목적과 사용방식에 따라 모든 코드는 개발하기 나름입니다.
전체코드)
a.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
function request_b(){
$.ajax({
url: 'b.html',
success: function(data) {
alert(data);
}
});
}
</script>
<body>
<input type="button" onclick="request_b()" value="클릭하세요">
</body>
</html>
b.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<style>
</style>
<body>
2017-01-18 05:47:22
</body>
</html>
b.php
<?
echo date('Y-m-d : h:i:s', time());
?>
지금까지 제이쿼리를 이용한 간단한 Ajax 예제를 살펴보았습니다.
이 포스트가 유용하셨다면
부탁드려요 :)
'코딩이야기 > jQuery' 카테고리의 다른 글
| 제이쿼리 setInterval,clearInterval 예제 (0) | 2016.12.29 |
|---|---|
| 제이쿼리 폼 검사 text/radio/checkbox/이메일검증 (1) | 2016.12.15 |
| 제이쿼리 사용법/개념/선택자 (0) | 2016.11.11 |