예제1) JQuary: 서버의 데이터를 대상 엘리먼트에 삽입하기 load()
load(url[, data][, success])
url: 요청할 URL 주소이고, data는 요청할 때 서버에 보낼 자바스크립트 객체 맵이나 문자열 형식의 데이터
success: 요청이 성공했을 때 호출할 콜백 함수
load() 메소드: 완료된 응답을 일치하는 집합에 있는 엘리먼트의 콘텐츠로 삽입
1) resource.html을 Jquary를 이용하여 불러올 exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuary로 Ajax 구현하기</title>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- <script src="js/jquery-1.12.2.min"></script> -->
<script>
$(document).ready(function() {
$('button').click(function() {
$('#container').load('resource.html');
});
});
</script>
</head>
<body>
<button>서버로부터 데이터 가져오기</button>
<div id="container">데이터 가져오기 전</div>
</body>
</html>
2) 불러올 resource.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>resource</title>
</head>
<body>
<Strong>Happy New Year!!</Strong>
</body>
</html>
Ajax 요청 직접 제어하기
jQuery에서는 $.ajax()라는 유틸리티 함수로 Ajax 요청을 설정 제어한다.
$.ajax(options)
요청의 생성 방법과 통보 받을 콜백을 제어하고자 전달된 options 를 사용하여 Ajax 요청을 전송한다.
반환값은 XHR 인스턴스이다.
예제2) JQuary 연습2
1) exam03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuary로 Ajax 구현하기</title>
<style>
div{width:180px;height;80px;margin:3px;float:left;background:#ccc;}
</style>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function(){
$('#menu1').click(function(){
$('#menu1').load('menu.html');
});
$('#menu2').click(function(){
$('#menu2').load('menu.html li');
});
});
</script>
</head>
<body>
<div>
<a href="#" id="menu1">메뉴 보기1</a>
<span id="message1"></span>
</div>
<div>
<a href="#" id="menu2">메뉴 보기2</a>
<span id="message2"></span>
</div>
</body>
</html>
2) 불러올 파일 menu.html
<p>중식메뉴</p>
<ul>
<li>짜장면</li>
<li>짬뽕</li>
<li>볶음밥</li>
<li>탕수육</li>
</ul>
예제3) JQuary에서 Ajax 요청 직접 제어하기
위의 예제2에서 사용된 Jquary를 Ajax로 구현할 수 있다.
JQuary의 $.alax라는 유틸리티 함수를 이용하면 된다.
1) exam04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuary로 Ajax 구현하기</title>
<style>
div{width:180px;height;80px;margin:3px;float:left;background:#ccc;}
</style>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function(){
$('#menu1').click(function(){
$.ajax({ // ajax 유틸리티가 이하의 내용을 확인
url:'menu.html', // url: 요청할 URL 주소
dataType:'html', // data: 요청할 때 서버에 보낼 자바스크립트 객체 맵이나 문자열 형식의 데이터
success:function(data){ // success: 요청이 성공했을 때 호출할 콜백 함수
$('#message1').html(data);
}
});
return false;
// 반환값을 false로 하면 자신의 부모에게는 이벤트를 전달하지 않음.
});
$('#menu2').click(function(){
$.ajax({
url:'menu.html',
dataType:'html',
success:function(data){
$('#message2').html($(data).find('li'));
}
});
return false;
});
});
</script>
</head>
<body>
<div>
<a href="#" id="menu1">메뉴 보기1</a>
<span id="message1"></span>
</div>
<div>
<a href="#" id="menu2">메뉴 보기2</a>
<span id="message2"></span>
</div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| Ajax에서 스크립트 로드하기 $.getScript() (0) | 2016.03.22 |
|---|---|
| Ajax로 JSON 이용하기 (3) | 2016.03.21 |
| Ajax (Asynchronous JavaScript and XML) (0) | 2016.03.21 |
| 클릭시 이미지와 가격 텍스트가 바뀌는 예제 (0) | 2016.02.22 |
| jQuery Form API, 이벤트 메서드 (0) | 2016.02.19 |
