AJAX, fetch-API, AJAX polyfill

Reference 생활코딩 AJAX

1. AJAX

자바스크립트와 연동하여 리로딩없이 페이지 및 데이터 로직 구현 (Single Page; Web Application) 최근 검색 엔진에 불리한 점이 보완된 pjax를 사용(pjax = pushState + ajax)

2. fetch API

fetch(): network에 전달 then: 서버가 응답할 때까지, 응답에 따른 HTTP 상태 코드 출력 Hypertext Transfer Protocol State: 200(success), 404(not found)

3. hash(#), shebang(#!)

hash # - 페이지 안에서 부분으로 접근할 때, url을 통해 접근 id를 통해 해쉬는 접근이 가능하며 식별자에서 필수적으로 요구된다. href(hypertext)를 사용할 때는 인덱스 표시와 구별되기 위해 관습적으로 !(bang)가 추가된 #! (shebang) 형태로 표기한다. hash 접근은  location 매소드로 가능하며 #! 기호는 substring 함수로 생략하여 출력이 가능하다.ex-location.hash.substring(2)

코드 간결화

split()  함수를 통해 문자열 생성(ex - csv파일 콤마로 구별) trim() 공백제거 map 함수를 통한 간결한 코드로 화면 출력

웹 표준 고려

Polyfill : 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는 데 필요한 코드 github/fetch - fetch.js 라이브러리 사용

---

fetch 함수의 간단한 예 (

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

 

---

MDN - fetch사용하기

---

1) 응답은 Response(parameter) 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없습니다.

2) 객체 역시 JSON 응답 본문을 그대로 포함하지는 않습니다.
3) JSON 본문 콘텐츠를 추출하기 위해서는 json() 메서드를 호출해야 합니다.
3) json()은 응답 본문 텍스트를 JSON으로 파싱한 결과로 이행하는, 또 다른 프로미스를 반환합니다.

 

console-response

// response 속성을 통한 조건문
fetch('html').then((response)=>{
    console.log(response)
    if(response.status == '404'){
        alert('Not found')
    }
});

 

AJAX CODE

const fetchPage = (name) =>{
  fetch(name).then((response) => {
    response.text().then((text) => {
      document.querySelector('article').innerHTML = text;
    })
  })
}
if(location.hash){
  fetchPage(location.hash.substr(2));
}else {
  fetchPage('welcome')
}
fetch('list').then(function(response){
  response.text().then((text) => {
    let items = text.split(',');
    let tags = '';
    let tag = '';
    items.map((item) => {
      item = item.trim();
      tag = '<li><a href="#!'+item+'" onclick="fetchPage(\''+item+'\')">'+item+'</a></li>' 
      tags = tags + tag
    })
    document.querySelector('#nav').innerHTML = tags;
  })
})

 

---

사진: Unsplash의Timo Volz