본문으로 바로가기
728x90
반응형
728x170

[목표]

  • 모던웹 구현에 필요한 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 공식 홈페이지

728x90
반응형
그리드형

댓글을 달아 주세요