내맘대로 블로그.

<script>

$(function(){

$.get("item.xml", function(data) {

$("#treeData").append("<tr>"

+"<td>id</td>"

+"<td>name</td>"

+"<td>price</td>"

+"<td>description</td></tr>");

$(data).find('item').each(function(){

var $item = $(this);

$("#treeData").append(

"<tr><td>"

+$item.attr("id")+"</td><td>"

+$item.attr("name")+"</td><td>"

+$item.find("price").text()+"</td><td>"

+$item.find("description").text()+"</td></tr>");

});

});

});

</script>


└xml 불러오기



<script>

$(document).ready(function(){

$.getScript("test.js");

$('#submit').click(function(){

var msg = call($('.username').val());

$('#message').html(msg);

return false;

});

});

</script> 


└JavaScript 불러오기



$(function(){

$('#submit').click(function(){

var username = $('.username').val();

var sendData = 'username='+ username;

$.post("welecom.jsp", sendData, function(msg) {$('#message').html(msg);} );

return false;

});

});


└post방식으로 jsp 불러오기 


$(function(){

$("#menu1").click(function(){

$("#message1").load("menu.html");

return false;

});

});

$(function(){

$("#menu2").click(function(){

$("#message2").load("menu.html li");

return false;

});

}); 

 <script>

$(function(){

$("#menu1").click(function(){

//몽고DB에 사용되는 형태

$.ajax({url:'menu.html', dataType:"html", success: function(data){$('#message1').html(data);}})

return false;

});

});

$(function(){

$("#menu2").click(function(){

$.ajax({

url:'menu.html',

dataType:"html",

success: function(data){$('#message2').html($(data).find('li'));}

})

return false;

});

});

</script>


menu.html은 menu.html안에 있는 내용 가져오기

menu.html li는 menu.html안에 있는 li엘리먼트 가져오기(자손 엘리먼트 가져오기) 

AJAX

Language/AJAX2016. 12. 26. 16:22


AJAX

_자바 스크립트와 XML을 합친 비동기식 언어로, 동적인 데이터 처리에 좋다.

_JS가 클라이언트쪽 스크립트라면 AJAX는 서버측 스크립트이다.

_AJAX를 사용하면 서버에서 결과페이지가 오지 않고 데이터만 변화한다.

_브라우저 자신이 서버에 다녀오는 것이 아니기 때문에 URI변경은 없다.