JavaScript-Ajax

작성자는 생활코딩의 JavaScript-Ajax 강의를 들으며 공부하였습니다!

Ajax란?

Ajax란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다.
간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다.
Ajax의 주요한 특징은 페이지의 새로고침 없이 서버에 요청한다는 것과 서버로부터 데이터를 받고 작업을 수행한다는 것입니다.

Ajax의 수행

Ajax를 수행하기 위해서는 파일로 접속하면 안됩니다.
웹서버를 다운받아야 하는데, 작성자는 내컴퓨터에 apatche를 설치하기 위해서 bitnami wamp stack에서 apatche의 웹서버를 설치해 누구나 내 웹페이지를 볼 수 있도록 구동시켰습니다.(window입니다)

강의에서 제공해주신 파일을 다운받아 공부하였습니다.
https://github.com/web-n/web2_javascript 에서 다운받았습니다!

예제 공부

html에서 특정한 부분을 클릭하였을 때 특정한 부분만 동적으로 바뀌게 하기 위해서는 바뀌어야 하는 부분을 타겟팅하기 위해서 태그를 인위적으로 갖다놓을 필요가 있습니다.
웹페이지의 내용을 바꾸기 위해 추가할 태그는 <article>이라는 태그입니다.
<article>이라는 태그를 추가한 후 클릭했을 때 바꾸고자 하는 태그 안에

<input type="button" value="fetch" onclick="
    fetch('name').then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        })
      });

를 추가합니다.
이렇게하면 fetch라는 버튼을 눌렀을 때, name이라는 text파일이 웹 페이지에 로드됩니다.


* 다음은 다운받은 html파일로 공부한 예제입니다.

이 코드는 중복되는 코드가 있어서 좋은 코드라고 할 수 없습니다.
따라서 중복되는 코드를 지우기 위해서 script태그 안에 함수를 지정합니다.

  function fetchPage(name){
    fetch(name).then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        })
      });

fetchPage라는 함수는 name이라는 파라미터를 받아서 실행합니다.


바뀐 코드는 다음과 같습니다.

링크를 부여하기 위해 href를 씁니다. hash(#)를 쓰는데 hash는 기본적으로 북마크기능이 있기 때문에 hash옆에 bang(!)을 붙입니다. (HashBang이라고 합니다.)

다른 사람에게 링크를 부여했을때 똑같은 화면을 보기 위해서는 조건문(if)을 사용합니다. hash가 주소에 포함되어 있다면(location.hash), "#!글자"이니까 두 번째 다음에 있는 텍스트를 서브스트링합니다(location.hash.substr(2)).
그 외의 경우는 welcome이라는 텍스트파일을 로드되게 합니다.


바뀐 코드는 다음과 같습니다.

그러나 이 방식은 맹점이 있습니다.
왜냐하면 Ajax를 통해서 한다면 가장 큰 문제인 검색엔진 최적화가 잘 안되기 때문입니다.
최적화가 잘 안되는 이유는 검색엔진은 웹페이지를 다운로드 받아서 그걸 분석해야 되는데 웹페이지 자체는 실제 내용이 없기 때문에 (내용은 백엔드에서 동적으로 가져오기 때문에) 내비게이션을 했을 때 내용이 바뀌어야되는데 안바뀌게 됩니다.

HashBang을 이용해 구현하는 방식은 현실적으로 쓰지 않고, Pjax라는 기술을 많이 씁니다.
Pjax는 우리가 배웠던 것들의 단점을 보완한 기술입니다.
필요할 때 공부하면 됩니다!

중요하지 않지만...

list의 내용이 바뀔 수 있기 때문에 list를 바깥으로 뺄 것입니다.
list를 외부로 쪼개줍니다.
이렇게 하면 어플리케이션 입장에서는 사용자들이 마음대로 수정하다가 생기는 사고를 방지할 수 있고, 컨텐츠를 입력하는 입장에서는 컨텐츠 입력을 어디다가 어떻게 해야하는지, 그리고 컨텐츠를 망가뜨리지 않을까하는 걱정으로부터 자유로울 수 있습니다.

또한 list를 일일히 쓰기 않고 단어만 써도 불러오는 형식으로 바꾸어줄 것입니다.
그때 사용하는 것이 split()입니다.


다음은 바뀐 코드입니다.

마무리

우리는 Ajax를 구현하는 방법으로서 FetchAPI라고하는 최신 기술을 이용하는 방법을 살펴보았습니다.
원래 전통적으로는 XMLHttpRequest라는 것을 사용하지만, FetchAPI는 좀더 강력하고 유연합니다.
최신버전에서는 사용할 수 있지만 오래된 버전에서는 호환성이 좋지 않아 사용할 수 없을 수도 있습니다.
'Can I use'라는 사이트에서 이용가능한 가를 확인할 수 있습니다.