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> |
