jQuery는 고맙게도 ajax를 쉽게 사용할 수 있다. 크로스브라우징을 내가 작업할 필요가 없으니 편하다. 기본 문법은 다음과 같다.
$.ajax({name:value, name:value, ... })
문법은 jQuery답게 간단하고 확장성있어 보인다. 예제를 살펴보자.demo_ajax_load.txt파일의 내용을 가져와서 div에 넣는 소스이다. 통신이 성공할 경우에만 동작한다.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"demo_ajax_load.txt",success:function(result){
$("div").html(result);
}});
});
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>
다음 스크립트를 사용하면 비동기방식으로 사용할 수있다.
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"demo_ajax_load.txt",async:false,success:function(result){
$("div").html(result);
}});
});
});
</script>
그리고 에러처리는 다음과 같다.
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"wrongfile.txt",error:function(xhr){
alert("An error occured: " + xhr.status + " " + xhr.statusText);
}});
});
});
</script>
다음 페이지에 가면 몇가지 유형이 더 나와있다. ajax와 관련된 기능은 다 있어보이니 참고하자.
http://www.w3schools.com/jquery/ajax_ajax.asp
그리고 jQuery Ajax Method
http://www.w3schools.com/jquery/jquery_ref_ajax.asp
'Javascript > jQuery' 카테고리의 다른 글
| 단축키를 눌러 특정위치로 이동 (0) | 2012.11.22 |
|---|---|
| 레이어를 화면 중앙에 띄우기 (0) | 2012.11.08 |
| offsetParent() (0) | 2012.10.04 |
| 이벤트 처리(펌) (0) | 2012.10.04 |
| jQuery 기초 (0) | 2012.09.20 |