jquery ajax load()

api.jquery.com/load/

.load() | jQuery API Documentation

 

jquery를 사용하면 XMLHttpRequest 객체를 따로 사용하지 않고 훨씬 간단하게 사용가능하다.

 

load()는 가장 간단하게 데이터를 가져오는 방법으로 호출시에 2가지의 인자만 기억하고 있으면 된다.

첫번째는 경로만 잘 적어주어도 데이터를 가져온다.

 

HTML

<div>   
</div>
<button id="button">Click</button>

 

JS

$(function() {
   // 버튼 클릭시
   $("#button").click(function(){
      $('div').load('sample.txt');
   });
});

 

하지만 2번째 값을 통해서 다양하게 활용가능하다. 해당 파라미터의 

response, status, xhr은 XMLHttpRequest객체의 값들과 비슷한데

jquery를 통해서 훨씬 간단하게 가져올수 있다.

 

JS

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

      /*
         response : 서버에 요청이 완료되면 결과 내용
         status : 서버에 요청을 보내면, 요청의 상태
         xhr : 요청한 오브젝트
      */

      // $('#div').load('경로', 처리 이후에 값 처리 function(reponseTxt, statusTxt, xhr));
      
      $('div').load('sample.txt', function(response, status ,xhr) {

         console.log(response);
         console.log(status);
         console.log(xhr);

         if(statusTxt == "success" && xhr.status === 200) {
            console.log('success');
         } else {
            console.log('error');
         };

      });
   });
});