AJAX(비동기통신) : Asynchronous(비동기) JavaScript and XML의 약어이며
xml를 이용하여 비동기로 통신을 처리하기 위한 기술이다
- 서버가 응답을 받을 준비가 되어 있는지에 상관없이 웹 브라우저가 서버로 정 보를 전송하는 것, 사용자는 언제 정보가 전송되었는지 알지 못한다.
- 정보의 전송에 빠르다.
- 페이지의 이동 없이 웹 브라우저 화면을 동적으로 바꾸는 일이 가능하다
- 전체화면에서 화면의 일부만 바꾸고싶을때 사용한다
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
float: left;
width: 200px;
height: 300px;
margin: 10px;
}
</style>
<script src=../js/jquery.js type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#menu1').click(function(){
$.ajax({
url : "menu.html",
dataType : "html",
success : function(data){
$('#message1').html('성공:' + data);
},
error : function(data){
alert('실패:' + data)
}
});//ajax
});//click
$('#menu2').click(function(){
$.ajax({
url : 'menu.html',
dataType : "html",
success : function(data){
$('#message2').html($(data).find('li'));
},
error : function(data){
$alert('실패' + data)
}
});
});
});//ready
</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>
실행결과
초기화면
글 클릭