[바미] Ajax 통신을 알아보자!

[목표]

• 모던웹 구현에 필요한 Ajax 개념알기
  
• Ajax 직접 구현해보는 것 마음먹기
  

[먼저 보면 좋은 게시글]

1) HTTP 프로토콜 자세히 알기
2) 싱글쓰레드 자바스크립트 엔진은 비동기처리를 어떻게 하는가

[Ajax란]

• 자바스크립트를 이용해서 비동기적으로 브라우저와 서버가 데이터를 주고 받는 방식을 말함
• 새로운 언어나 프레임워크, 라이브러리가 아님, 네트워크 통신 방식을 말함
• Asynchronous Javascript and XML : 자바스크립트로 비동기 통신을 하고, XML 형식으로 데이터 리턴을 받는다는 뜻
• XML 데이터보다 JSON 데이터 포맷을 훨씬 더 많이 사용함
• 자바스크립트를 통해서 서버에 요청을 하고, 서버로부터 데이터를 리턴받음
• DOM을 제어해서 서버로부터 리턴받은 데이터를 가지고 랜더링함

[Ajax 사용하면 좋은 점]

• 비동기 통신의 이점 : 통신 후 데이터 바인딩하는 동안 사용자가 어플리케이션을 사용할 수 있음
• 전체 페이지 로딩(페이지 요청)시 모든 데이터를 서버로부터 받는 것이 아니라 필요한 부분을 그때마다 일부분 랜더링 시키는 것이 가능함
• 일부 데이터를 위해 클라이언트가 전체 페이지를 요청하지않아도됨
• 다시 말해 통신 때마다 페이지 전체 리로드를 하지 않음, 그 말은 브라우저 랜더링 엔진이 하는 일이 줄어든다는 것
• 이를 클라이언트 사이드 랜더링이라 함

[Ajax 동작방식]

1) 서버로 정보 요청 : 이벤트 발생 -> 핸들러 함수 호출 -> 서버 요청 객체 생성 및 메서드 호출

• XMLHttpRequest : 자바스크립트 객체 및 객체 메서드(open, 아래는 open의 파라미터) 사용
• open 메서드 파라미터 : HTTP 메서드, 요청 URL, 비동기처리여부(boolean)
• HTTP 응답 콜백함수 정의 : 조건문으로 응답 코드(XMLHttpRequest 객체 프로퍼티로 코드 알 수 있음)별 처리다르게
• HTTP Request 관련 정보 구성

2) 서버 내부 처리 후 응답 : json 또는 xml 형태로 데이터 전달

• HTTP Response 관련 정보 구성
• HTTP Request, HTTP Response 구성 내용보기 : [먼저 보면 좋은 게시글 - 1]

3) 응답을 받으면 이벤트 발생(onload), 이벤트의 콜백함수 호출

• 응답 코드 체크하기 : 200(응답완료, 이상 무), 304(이전과 바뀐것 x), 404(요청 주소 찾을 수 없음), 500(서버 내부 오류)
• 응답 데이터 파싱 후 DOM을 제어하여 랜더링 : 전체 페이지 로드 방식 X

[Ajax 응답 데이터형식]

• XML, JSON이 등장하게된 배경 : 각기 다른 인코딩, 자릿수 표현 방식 === 데이터 깨짐 현상
  
  => 데이터 구조화, 데이터 포멧 표준화 : 동일된 데이터셋 - 어느 환경에서나 상관없이 온전한 데이터를 송수신할 수 있음(호환성)
  

1) XML

  <?xml version="1.0" encoding="UTF-8"?>
  <bookstore>
       <book category="cooking">
            <title lang="en">Everyday Italian</title>
            <author>Giada De Laurentiis</author>
            <year>2005</year>
            <price>30.00</price>
       </book>

       <book category="children">
            <title lang="en">Harry Potter</title>
            <author>J K. Rowling</author>
            <year>2005</year>
            <price>29.99</price>
       </book>

       <book category="web">
            <title lang="en">Learning XML</title>
             <author>Erik T. Ray</author>
             <year>2003</year>
             <price>39.95</price>
        </book>
  </bookstore>

(출처 : w3c school XML Tree : https://www.w3schools.com/xml/xml_tree.asp)

• 태그로 데이터명(속성), 데이터값을 구분해서 가독성이 좋음
• 사용자 정의 마크업 언어, 데이터 내용 정의할 때 사용
• 용량이 큼(태그 텍스트까지)
• 데이터가 많아지면 파싱 속도가 떨어짐

2) JSON

  { "bookstore": [ 
    {
         "category": "cooking",
          "title" : "Everyday Italian", 
          "author": "Giada De Laurentiis",
          "year": 2005,
          "price": 30.0 
    },

    {        
         "category": "web",
         "title" : "Learning XML ", 
         "author": "Erik T. Ray ",
          "year": 2003 ,
          "price": 39.95
     }
] }

자바스크립트 객체형식(property - value)

• 최소한의 데이터 관련 정보만 들어있음, XML에 비해 가벼움
• 가독성이 좋음
• 의미 축약형임 : 최대한 축약할 수 있을만큼(위험성도 있음)
• 객체 형태이기 때문에 객체 내 객체, 객체 내 배열 안 배열 등 유연하게 전송할 수 있음
• 그룹핑하는 것에 따라 유연하게 데이터를 표현할 수 있음
• 위의 예제는 bookstore 프로퍼티의 값이 배열( [ ... ] )이고, 배열에는 book 정보 객체가 있음, 배열은 순서화된 collection
• json 객체(JSONObject, { property: value } )가 여러개일 경우 json 배열(JSONArray, [ ..... ] )에 담음

reference

1) 생활코딩, Ajax
2) _Jbee 티스토리, 서버사이드 랜더링 그리고 클라이언트 사이드 랜더링
3) w3schools, AJAX
4) w3schools, JSON
5) MDN, AJAX XMLHttpRequest 객체
6) JSON 공식 홈페이지