ajax1

1. AjAX(= single-page application)

 

AJAX는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다 

쉽게 말해 웹브라우져에서 자바스크립트를 이용해서 웹서버에 접속하고 정보를 가져오는것으로

하나의 기본적인 코드의 구조를 대상으로, 바뀔수 있는 부분과 고정적인 부분을 구분하여 바뀔 수 있는 부분만

파일을 분리 시켜 ajax를 사용하여 서버로 부터 동적으로 가져오게 하여 폭팔적인 생산성을 주는 것이다

따라서 각각의 페이지마다 동일한 html코드를 가지고 있을 필요가 없다

+

페이지를 전환할때마다 모든 파일을 다운로드 받는 것과

변경된 부분만 다운로드 받는 것의 차이이다

리로드를 하지 않고 웹브라우져가 웹서버에 요청해서 부분적으로 가져오는것

사용자 입장에서는 내용이 바뀌어도 페이지가 새로 바뀌어 스크롤이 초기화 된다거나 하는 일이 없어 사용성이 증대되고 사용자뿐만 아니라 운영하는 서버입장에서도 시간과 돈, 네트워크 자원을 절약할 수 있다.

 

*주의 : ajax는서버와 통신을 해야하기떄문에 보안문제로 인해서 파일열기로는 동작할 수 없고

서버를 통하여 웹브라우져에 접속해야한다 따라서 bitnami의 apache 사용

 

 

 

2. fetch api

ajax를 구현하는 여러방법중 하나인 fetch api를 활용

 

fetch 예제1

fetch('html')에 의해서 서버에게 html이라는 파일을 요청하고 응답이 끝나면 최종적으로 

alert(text)가 호출되고 alert가 실행되면서 ()안의 text라는 변수 안에 서버가 응답한 데이터(html 파일의 내용)가 들어가게 되는 원리.

 

fetch 예제2

마찬가지로 fetch('html')에 의해서 서버에게 html이라는 파일을 요청하고 응답이 끝나면 최종적으로

document.querySelector('article').innerHTML = text; 를 실행하는데 이것은

article tag에 text라는 변수에 해당하는 데이터(html파일의 내용)를 꽂아 넣어라 라는 내용이다.

 

*구체적인 원리 참조 : https://www.youtube.com/watch?v=qy3M0Cp0ios&list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q&index=7

 

https://www.youtube.com/watch?v=IKO8Dy_YsiY&feature=emb_title