IT Log

jQuery Tutorial (3) 본문

JavaScript

jQuery Tutorial (3)

newly0513 2020. 6. 9. 11:05
728x90
반응형

AJAX

전체페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술

  • 비동기 JavaScript 및 XML의 약자
  • 페이지를 reload하지않고 서버에서 데이터 로드
  • 원격 서버에서 텍스트, HTML, XML, JSON을 요청 가능
  • 선택된 HTML 요소에 외부 데이터를 직접 로드

load()

서버에서 데이터를 로드하고 return된 데이터를 선택된 요소에 insert

  • $(selector).load(URL, data, callback);

URL : 요청이 전송되는 서버 측 리소스의 URL

data : 선택적 매개변수로 속성이 올바르게 인코딩된 매개 변수로 직렬화 되어 요청에 전달되는 객체

callback : 응답 데이터가 일치하는 세트의 요소에 로드된 후 호출되는 콜백 함수

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

# callback 함수
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
      if(statusTxt == "success")
        alert("External content loaded successfully!");
      if(statusTxt == "error")
        alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
  });
});
</script>

get() / post()

서버에서 데이터를 요청하는데 사용

  • GET : 지정된 자원에서 데이터를 요청
  • POST : 처리할 데이터를 지정된 자원으로 제출

URL : 요청이 전송되는 서버 측 리소스의 URL

data : 선택적 매개변수로 속성이 올바르게 인코딩된 매개 변수로 직렬화 되어 요청에 전달되는 객체

callback : 응답 데이터가 일치하는 세트의 요소에 로드된 후 호출되는 콜백 함수

# GET
$("button").click(function(){
  $.get("demo_test.asp", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

# POST
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name: "Donald Duck",
    city: "Duckburg"
  },
  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

 

728x90
반응형

'JavaScript' 카테고리의 다른 글

JavaScript (5)  (0) 2020.06.13
JavaScript (4)  (0) 2020.06.13
jQuery Tutorial (2)  (0) 2020.06.09
jQuery Tutorial (1)  (0) 2020.06.08
JavaScript (3)  (0) 2020.06.08
'JavaScript' Related Articles more
Comments