[AJAX ]생활코딩 : AJAX 란?

AJAX  (Asynchronous Javascript And Xml)

웹페이지에서 동적으로 서버에게 데이터를 주고받을수잇는 기술을 의미

대표적인 예로 XHR 오브젝트가있다.

브라우저 api에서제공하는 오브젝트로, 간단하게 서버에게 데이터를 요청하고받아올수있다.

 

---

 

장점

• 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
• 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.
• 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.
• 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

단점

•   Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
•  Ajax로는 바이너리 데이터를 보내거나 받을 수 없다.
•  Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다.
•  클라이언트의 PC로 Ajax 요청을 보낼 수는 없다.

클라이언트 풀링(client pooling) 방식이란? 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식 

서버 푸시(server push) 방식이란? 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것

바이너리 파일(binary file) 이란? 데이터의 저장과 처리를 목적으로 0과 1의 이진 형식으로 인코딩된 파일

 

---

💡 생활코딩 강의노트

Ajax란 부분적으로 웹페이지를 갱신할 수 있도록 도와주는 기술

✔사용성 증대
사용자 입장에서는 내용이 바뀌어도 스크롤이 바뀐다거나 다른 부분의 내용이 전환되는 것이 없기 때문에 ,변경되는 부분에만 집중할 수 있는 UI를 경험하게 된다. 

✔비용 절약
그리고 필요한 내용만 부분적으로 load할 수 있기 때문에 서버(server)뿐만 아니라 웹 브라우저를 사용하는 사용자(client)의 입장에서도 시간과 돈, 네트워크 자원 등의 여러 비용(cost)을 절약할 수 있다는 굉장히 중요한 효과

---

 🚩 fetch API 실습

비동기 요청방식인 ajax의 방식 중 하나가 fetch API로  최근에 나온 기술  

fetch API 를사용하기위해서는 서버와 통신해야하기때문에 브라우저에서 컴퓨터 파일을 ctrl+o 해서 직접 열면 안됨

 

생활코딩 ajax 간단한 예제 /리스트항목을 누르면 각 인덱스에 맞는 내용이 로딩된다.

 

fetch('file').then(function(response){})

fetch('file')   브라우저에게 '파일'을 서버에 요청하는 부분

.then()   서버가 브라우저에게 응답하는 부분. 응답이 끝난면 괄호안의 함수를 실행(호출)한다. 서버로부터의 응답(response) 을 받아와서 객체값을 확인할수있다.  

 

여기서 요청한 파일이 없으면 status(상태)에 404가 뜸

- 200 : 서버에 문서가 존재함

- 404 : 서버에 문서가 존재하지 않음

 

이 부분을 이용하여 파일을 찾지 못할 때 경고창이 뜨는 프로그램을 짤 수 있음 (아래코드 참고)

  <article>
  </article>
  <input type="button" value="fetch" onclick="
    fetch('html').then( function(response){
    //console.log(response);
    if (response.status == '404'){
      alert('Not found');
    }
     response.text().then(function(text){
        document.querySelector('article').innerHTML = text;
   }); 
  ">

 

 🚩 리팩토링

<ol>
    <li><a onclick="
      fetch('html').then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        });
      })">
      HTML
    </a></li>
    <li><a onclick="
      fetch('css').then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        });
      })">
      CSS
    </a></li>
    <li><a onclick="
      fetch('javascript').then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        });
      })">
      JavaScript</a></li>
  </ol>
  <article>

  </article>

 

코드가 세번 반복되는 것을 볼수있다. 효율적으로 관리하기위해 리팩토링을 할것 

fetch가 요청할 파일 이름을 인자로 받고, 중복되는 부분은 함수로 만들어준다.

 

<ol>
    <li>
      <a onclick="fetchPage('html')">HTML</a>
    </li>
    <li>
      <a onclick="fetchPage('css')">CSS</a>
    </li>
    <li>
      <a onclick="fetchPage('javascript')">JavaScript</a>
    </li>
  </ol>
<script>
    function fetchPage(name){
      fetch(name).then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        });
      })
    }
  </script>

 

ajax의 약점

1. ajax로 페이지 변경할때  변경된 페이지주소가 달라지지 않기때문에 유저가 페이지 공유할때 불편함을 겪을 수 있음

•  (강의에선)hashbang으로 해결
•  실제로는  hash를 이용한 hashbang방식은 잘 안쓰고 , pjax 기술을 쓴다고 한다

2.검색엔진 최적화가 안되어있다.

웹페이지를 다운받아 분석해야하는데  실제 웹페이지자체는 비어있는 페이지다.(백엔드에서 내용을 동적으로 로드해오기 때문)

이것도 pjax로 해결가능하다

 

# Pjax = PushState + Ajax 

 

 

---

 🚩 Polyfill

can i use에서 확인했을때 fetch api 점유율은 93.65%

fetch()API는 인터넷 익스플로러에 지원되지않는 기능이지만

polyfill을 이용하면 fetch api를 지원하지 않는 웹브라우저에서도 이용할 수 있게 된다.

 

polyfill link >

 https://github.com/github/fetch

 

GitHub - github/fetch: A window.fetch JavaScript polyfill.

 들어가서 코드 zip 다운받아서 사용하면된다.

 

사용하려는 index.html 에 js파일 import해주기

+ ie최신버전에서 안먹혀서 첫번째줄 cdn을 추가로 복붙해주었더니 해결!

  <script src="https://polyfill.io/v3/polyfill.js?features=fetch"></script>
  <script src="fetch/fetch.js"></script>

ie에서 로드완료!

 

 

 

 

---

Ref.

https://opentutorials.org/course/3281

Ajax - 생활코딩

http://www.tcpschool.com/ajax/ajax_intro_basic