Ajax

• 최근에 성능문제로 HTML에서 JS의 scirpt tag는 마지막에 위치를 하는 경우가 굉장히 많다.
• HTML을 우선 다운로드를 하고, 다운로드를 하고 난 다음에 script태그를 만나면 다시 해당경로에 해당하는 문서를 다운받기 위해서 서버에 요청을 보내게 된다.

$(".answer-write input[type=submit]").click(addAnswer);

• className이 answer-write인 모든 클래스를 선택한다.
• 그중에서도 type=submit인 input태그를 선택.
• input type=submit을 클릭하면 addAnswer라는 이벤트를 실행한다.
• 처음에 selector를 찾는게 고생을 한다.

function addAnswer(e) {
    e.preventDefault();

    var queryString = $("form[name=answer]").serialize();

    var url = $(".answer-write").attr("action");
    console.log("url : " + url);

    $.ajax({
        type : 'post',
        url : url,
        data : queryString,
        dataType : 'json',
        error: onError,
        success : onSuccess,
    });
}

Json

• serialize() : 클라이언트에서 form으로 데이터를 submit을 전송하면, 서버에 key=value&key&value형태로 전송을 하는것이 serialize()의 역할이다. json데이터를 만들어 주는것이 아니다. 궁금하면 console로 추가해보자
• key=value&key=value를 queryString이라고한다.
• 서버데이터를 구현하면, 동적으로 구현하고 처리를 하는것을 만들어야한다.
• 프론트에서 템플릿엔진도 만들어야된다.
• 모바일이 부상하면서 모바일과 웹 백엔드를 함께 쓰기위해서 Ajax를 사용한다.
• 모바일은 업데이트가 발생하면 클라이언트의 UI나 리소스들을 다운로드 받고 시작을 하는거다. 반면 웹은 업데이트가 아니라 브라우저에 접속을 하는순간 리소스를 다운로드하고 시작을 한다. 그러므로 웹은 서버에 배포만하면 최신코드이다.
• 어떻게 브라우저가 HTML을 렌더링하는가? 그리고 DOM이 바뀌면 어떻게 데이터가 바뀌는가?

Ajax의 실습목적

• HTML로 데이터를 주는경우와 JSON형태로 주는 방식이 어떤 차이가 있는지. JSON형태로 많이 전송을 한다.