4. Ajax

• 데이터 로드

<button type="button" id="btn_data">클릭해주세요!</button>
<div id="data">data</div>

$('#btn_data').click(function() {
    $("#data").load('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json');
    });

• 데이터 태그만 가져오기(HTML, XML 등 가능)

<button type="button" id="btn_data">클릭해주세요!</button>
<div id="data">data</div>

$('#btn_data').click(function() {
    $("#data").load('https://raw.githubusercontent.com/paullabkorea/10000hour/main/index.html h1');
    });

• responseTxt : 요청 결과

• statusTxt : 요청의 상태

• xhr : 요청한 오브젝트

• xhr.status : 파일의 응답 상태

$('#btn_data3').click(function() {
    $("#data3").load('https://raw.githubusercontent.com/paullabkorea/10000hour/main/index.html h1', function(responseText, statusText, xhr){
            console.log(responseText);
            console.log(statusText);
            console.log(xhr);
            console.log(xhr.status);
        }
    );
});

• ajax 로딩!

$('#btn_data').click(function() {
    //$.ajax({경로, 동기화 여부, 성공하면 할 일})
    //$.ajax({url:'경로', async: true, success:function(result){}})
    $.ajax({
        url:'https://raw.githubusercontent.com/paullabkorea/10000hour/main/index.html', 
        async: true, 
        success:function(result){
            $("#data").html(result);
        }
    });
});

// console에서 loaddata를 찍어보세요!
var loaddata;
$('#btn_data').click(function() {
    //$.ajax({경로, 동기화 여부, 성공하면 할 일})
    //$.ajax({url:'경로', async: false, success:function(result){}})
    $.ajax({
        url:'https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json', 
        async: true,
        dataType: 'JSON',
        success: function(result){
            // $("#data").text(result);
            loaddata = result;
        }
    });
});