Portfolio

구글 검색에서 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;
        }
    });
});

4. Ajax