생활코딩 스터디 - Ajax

javascript 공부를 하다가 ajax 사용법을 알게 되었다. 새로고침 없이 특정 부분에 다른 파일의 내용을 불러올 수 있다니 증말 신세계 ! 다만 ajax를 사용하면 검색엔진 최적화가 안된다는 치명적인 단점이 있는데, 이걸 pjax 라는걸 사용함으로써 해결 할 수 있다. 

study_Ajax.txt

* ajax를 통해 새로고침 없이 웹서버와 통신이 이루어진다. 사용자에게는 좋은 경험을, 서버 운영자에게는 지출을 줄여주는 이득!

* 메뉴를 이동할 때, 부분적으로 웹페이지를 갱신할 수 있도록 해준다.

구조의 재사용~!

* ajax는 비동기 실행~! ajax가 실행되고 있는 중에도 다른 코드들이 실행될 수 있음.

* 바뀔 수 있는 부분은 서버로부터 동적으로 가져와서 넣음.

* ajax는 웹 서버를 통해서만 동작함. 로컬에서 확인 불가능.

* 바뀌어야하는 부분에 빈 태그 위치.

$("a").click(function(){

$("article").innerHTML("태그태그")

})

* ajax를 구현하기 위한 최신 방법 : fetch API 사용!

fetch('불러올파일이름') 한 다음 어떤 동작이 되도록.

* fetch API

: fetch() 는 ()안의 것을 웹브라우저한테 요청하는것. 데이터만 가져옴.

: .then() 은 fetch를 이용해 데이터를 가져오는 것이 끝난 후 ()안의 것을 실행하도록 하는것.

: fetch().then() 에서 then() 안에 들어가는 함수는 response객체를 입력값으로 주면서 호출할 것. response 객체는 fetch를 통해 데이터를 웹서버에 요청했을 때 웹서버가 응답한 결과를 담고 있는 객체이다.

ex ) fetch('파일이름').then(function(response){

response.text().then(function(text){

documenet.querySelector('#nav').innerHTML = text;

})

})

* fetch를 function 으로 정의해서 사용 가능함. 이때, 변동되는 부분은 매개 변수로 이용해서 fetch의 인자로 넣기.

ex)

function 함수이름(변동부분){

fetch(변동부분).then(function(response){

response.text().then(function(text){

documenet.querySelector('#nav').innerHTML = text;

})

});

}

* hash : 하나의 파일 내에서 내용을 찾을때, url을 통해서 찾을 수 있도록 내용을 감싸는 태그에에 id값을 주기.  

url의 hash 값(ex. index.html#umin 에서는 #umin이 hash값)은 location.hash  를 이용해 불러올수 있음. 이때, #을 없애려면 location.hash.substr(1) 하기

ajax에서 쓸때는 a href="#!파일이름" 이런식으로 넣어준다. #!을 해쉬뱅 이라고 함. 이렇게 하면 a를 클릭할 때 ajax가 작동 하면서 url이 바뀐다.

url을 통해 들어갔을때 ajax가 작동하게 하려면, fetch를 function으로 지정해두고,

if (location.hash){

//hash가 있을때 적용되는것

지정한함수이름(location.hash.substr(2)) 

//ajax용 a 태그 href에는 #! 이 들어가므로 substr(2)

} else {

//hash가 없을때 적용되는것 

}

* 하나의 파일에서 , 을 기준으로 나누어 배열을 만들고싶을때

ex)

text 에는 list라는 파일의 text 값 (a,b,c,d)이 담겨져 있음.

text.split(',')  -> text에 있는 문자열을 , 을 기준으로 하나하나 쪼개 배열로 만드는 식.

* 배열 안에서 무의미한 줄바꿈 혹은 공백을 없앨때 

배열.trim(); 해준다.

* fetch 의 브라우저 지원율 확인. id11에서 안됨....호환성문제 ! 

-> fetch의 polyfill : 지원되지않는 브라우저들도 fetch를 사용할수 있도록 해주는것. fetch.js가 있다. 브라우저가 지원된다면 fetch.js를 script src로 넣어도 동작하지 않고 브라우저 고유의 기능이 사용된다. 지원되지 않는 브라우저에서만 동작한다.

******** ajax를 이용하면 검색엔진 최적화가 안됨. **********

# xml

# JSON

# ajax를 이용한 이런 페이지를 Single Page Application, 즉 SPA 라고 한다.

# PJAX - ajax같은 부분적인 로드 기능을 하면서도 검색엔진에도 최적화되게끔. ajax가 발전된 형식.

# Progressive Web Apps - PWA. SPA를 기반으로 만들어진 웹에 오프라인에서도 동작하는 특성이 추가된 것. online + offline !

+@ 파일의 상태(status)가 200 = 성공적으로 찾았다는 의미. 404 = 파일이 없다는 의미.

+@ response객체의 어떠한 값을 가져올때는 response.값이름 으로 불러온다. (ex. response.status   ->response 객체의 status 값)

---------------------------------------------------------------------------------

PJAX 사용법 )

https://tyle.io/blog/52