[Ajax] ajax.open,send,JSON.parse 3개 코드를 중복해서 쓰지 않고 한번에 함수로 묶어보기

/*

    코드를 하나로 묶는 역할로 중요한 것이 함수

    네트웍을 호출하고->데이터를 가져오고->JSON.parse(객체변환)

    3개의 코드를 함수로 묶기

*/

const container = document.getElementById('root');

const ajax = new XMLHttpRequest();

const content = document.createElement('div');

const NEWS_URL = 'http://api.hnpwa.com/v0/news/1.json';

const CONTENT_URL='http://api.hnpwa.com/v0/item/@id.json';

// 3개 코드를 묶는 함수를 만들건데, 함수 이름은 그 함수가 하는 역할을 잘 나타내주는 이름으로 하기 'getData' 데이터를 가져오는 함수니까

function getData(url) {

    // 데이터를 GET 해올 때, URL 즉, 호출하는 주소가 다르다. GET데이터를 사용할 때마다 주소가 다르니 입력은 'url'로 받아주기

    //ajax.open('GET',NEWS_URL,false);

    ajax.open('GET',url,false);

    ajax.send();

    //getData 함수가 쓸 게 아니라 getData를 사용하는 쪽에서 사용할 데이터니 return만 해주기

    return JSON.parse(ajax.response);  //함수의 처리 결과를 return으로 반환해주기

}

//const newsFeed = JSON.parse(ajax.response);

const newsFeed = getData(NEWS_URL);

const ul =document.createElement('ul');  

window.addEventListener('hashchange',function(){

    const id = location.hash.substr(1);

   // ajax.open('GET',CONTENT_URL.replace('@id',id),false);

   // ajax.send();

    //const newsContent = JSON.parse(ajax.response); 를 아래처럼 바꿔줌

    const newsContent = getData(CONTENT_URL.replace('@id',id)); // ajax.open('GET',CONTENT_URL.replace('@id',id),false);  의 CONTENT_URL.replace('@id',id) 를 인자로 넘겨줌

    const title=document.createElement('h1');

    title.innerHTML = newsContent.title;

    content.appendChild(title);

    console.log(newsContent);

    console.log(location.hash);

});

for(let i = 0; i < 10; i++) {

const div = docunment.createElement('div');

const li = document.createElement('li');

const a = document.createElement('a');  

div.innerHTML= `

<li>

    <a href="#${newsFeed[i].id}">title(comments)</a>

</li>

`;

a.href='#${newsFeed[i].id}';

a.innerHTML = `${newsFeed[i].title}(${newsFeed[i].comments_count})`;

li.appendChild(a);

ul.appendChild(li);

}

container.appendChild(ul);

container.appendChild(content);