Ajax 예습

Ajax 예습

2021. 1. 5. 18:57ㆍAjax

# 개념 - 커밋 리스트 표, ajax 통신, 바닐라

console.clear();

//github에서 제공하는 api
let apiURL = "https://api.github.com/repos/vuejs/vue/commits?per_page=5&sha=master";


//비동기 방식

let fetchData = function() {
    // 여행을 떠날 대리자 한명을 만든다.
    // 통신 담당 객체
    let xhr = new XMLHttpRequest();

    // 목표(목적지) 설정, get방식으로 가라
    xhr.open("GET", apiURL);

    // 목적지에 다녀온 후 해야될 행동(예약) -> 받아온 내용을 json방식으로 파싱해라
    xhr.onload = function() {
      console.log("여행 복귀 끝");
        let commits = JSON.parse(xhr.responseText);
        let commitData = [];

        let forEachFunc = function(row) {
            let dataRow = {};
            dataRow.login = row['author'].login;
            dataRow.message = row['commit'].message;

            commitData.push(dataRow);
        };

        commits.forEach(forEachFunc);

        console.log(commitData);
    };

    // 출발
    xhr.send();

};

fetchData(); // 여행을 보내놓고 끝

//실행 순서 확인
console.log("테스트 콘솔 실행 끝");

https://codepen.io/cjy324/pen/vYXjyEJ?editors=0012

# 개념 - 커밋 리스트 표, ajax 통신, 제이쿼리

console.clear();

var apiURL = "https://api.github.com/repos/vuejs/vue/commits?per_page=5&sha=master";

$.get(  //get식으로 하겠다
    apiURL,   //목적지 설정
    function(data) {   //목적지 여행 후 실행할 내용
        console.log("여행 종료 -> 실행 시작");
        console.log(data[0]);
    },
    'json'    //json방식으로 파싱하겠다
);

 console.log("실행 순서 테스트");

https://codepen.io/cjy324/pen/BaLxQyV?editors=0012