구글 검색에서 javascript를 검색한 다음 개발자도구에 네트워크에 가보시면 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;
        }
    });
});