Ajax 개념

ajax란?

홈페이지의 일부 정보가 달라졌음에도 전체 페이지를 리로드하는 것이 아닌 필요한 일부 정보만 갱신해주는 기술이다.

Ajax구현방법은 여러가지가 있지만, 그 중 2018년 기준 최신 방법은 fetch API

fetch('html').then(function(response){ 
response.text().then(function(text){
alert(text); 
})
})

fetch('html') <-- 서버에게 html이라는 파일 요청, html 파일에 있는 텍스트를 출력해준다.

모든 작업이 끝나면 alert(text) 이 부분이 호출되도록 약속되어있다.

text라는 변수 안에는 서버가 응답한 데이터가 들어있다.

fetch('javascript') : 웹브라우저야 자바스크립트라는 파일을 서버에게 응답해줘

.then : fetch야 응답이 끝나면 함수를 실행시켜 줘

Asynchronous: 비동기라는 뜻 / fetch가 실행중일때 다른 코드(작업)을 실행한다.

.then(이름이 없는 익명함수라고도 한다)

response 객체

response.status

파일이 전상적으로 작동되면 status = 200

요청한 파일이 존재하지 않으면 status = 404

해시 해쉬 hash : 북마크의 개념, 태그에 id값을 주어 사람들이 바로 찾아올 수 있게 해준다. (예를 들어 하나의 목차를 누르면 그 못차에 해당되는 글로 바로 스크롤이 내려감)

fragment : 내용

fragmentIdentifier : fragment를 식별하는 식별자 또는 id

javascript에서 hash구하기 : location.hash

#!html : hash와 구별하기 위해 관습적으로 !를 붙인다.

ajax는 최적화가 안되어 있어 느릴 수 있다. 그렇기에 최근에는 pjax를 많이 사용한다.

[ Polyfill ]

Web은 어느 한 기업이 만드는 것이 아니라 공공재이기 때문에

여러 위원회가 꾸려져서 "미래엔 이런 기술이 필요해!" 라고 박터지게 싸워서

거기서 결정된 규약을 토대로 각각의 브라우저 업체들이 구현하게 된다.

다시 말해 어떤 기능이 있을때 그 기능을 모든 브라우저들이 지원하지 않을 수도 있다는 것

그런 경우에 과거의 브라우저를 쓰는 유저들도 그 기능을 사용할 수 있도록 해주는 것이

Polyfill 이다.

콤마만으로 구분하기 힘들 때 : json, XML

Single Page Application : ajax

pjax (pushState + ajax) : 웹페이지를 리로드 하지 않고 부분적으로 데이터를 교체 하면서도 검색엔진과 같은 로봇들이 정보에 접근하는 것을 방해하지 않는 기능

Progressive Web Apps : PWA 은 SPA를 기반으로 만들어진 앱에 offline에서도 동작하는 기능을 특성을 추가했다고 볼 수 있는 것 (online + offline)