HTML _ AJAX. JQuery로 파일 불러오기
<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> |
<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 불러오기
HTML _ AJAX. JQuery로 자손엘리먼트 가져오기
$(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
AJAX _자바 스크립트와 XML을 합친 비동기식 언어로, 동적인 데이터 처리에 좋다. _JS가 클라이언트쪽 스크립트라면 AJAX는 서버측 스크립트이다. _AJAX를 사용하면 서버에서 결과페이지가 오지 않고 데이터만 변화한다. _브라우저 자신이 서버에 다녀오는 것이 아니기 때문에 URI변경은 없다. |
HTML _ JQuery에서 AJAX구현
<head> <script> $(function(){ $("button").click(function(){ $("P").load("sample1.txt"); }); }); </script> </head> <body> <button>변경</button> <p>변경</p> </body> |
<head> <script> $(function(){ $("button").click(function(){ $("#container").load("resource.html"); }); }); </script> </head> <body> <button>서버로부터 데이터 가져오기</button> <div id = "container">데이터 가져오기 전</div> </body> |
HTML _ javascript에서 AJAX구현
<body> <p id ="demo"> Let AJAX</p> <button type="button" onclick="loadDoc()">Change Context</button> <script> function loadDoc() { var xhttp; //1.객체생성 if(window.XMLHttpRequest){ xhttp=new XMLHttpRequest(); } else{//for ver. IE6, IE5 xhttp=newActiveXObject("Microsoft.XMLHTTP"); } //2 응답을 받아왔을 때 처리할 형식 정의 xhttp.onreadystatechange = function(){ //readstate속성이 변경될 때마다 해당 function 호출 if(xhttp.readyState == 4 && xhttp.status == 200){ //readstate = 4는 응답 완료 상태 //stuatus = 200은 정상적으로 페이지 호출 성공 //alert(xhttp.responseText); document.getElementById("demo").innerHTML = xhttp.responseText; } }; // 3. open, send 함수 설정 //get방식으로 요청 데이터를 받을 페이지, true는 비동기통신을 지정 xhttp.open("GET", "ajax_info.html", true); xhttp.send(); } </script> </body> |
