[WEB] jQuery Ajax & JSON

비동기식 처리 모델과 Ajax

1. 브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 전환이 발생한다. (서버와의 통신)

 

2. 서버는 요청받은 페이지를 반환하는데 이 때 HTML에서 로드하는 CSS나 JS파일도 같이 반환된다. 정적인 파일을 반환할 수도 있고 서버 사이드 프로그램이 만들어낸 파일이나 데이터를 반환할 수도 있다. 서버로부터 웹페이지가 반환되면 클라이언트는 이를 렌더링하여 화면에 표시한다. 

Ajax(Asynchronous JavaScript and XML) 

- 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식

- 비동기식 처리 모델은 병렬적으로 작업을 수행한다. 작업이 종료되지 않은 상태라도 다음 작업을 실행한다. 

- 서버로부터 웹페이지가 반환되면 갱신이 필요한 일부만 로드하여 빠른 퍼포먼스와 부드러운 화면 표시 가능  

Ajax 요청 및 응답 처리

브라우저는 XMLHttpRequest 객체를 이용해 Ajax 요청을 생성한다. 서버가 브라우저의 요청에 대해 응답을 반환하면 같은 XMLHttpRequest 객체가 그 결과를 처리한다. 

[요청처리]

// XMLHttpRequest 객체 생성
var req = new XMLHttpRequest();
// 비동기 방식으로 Request 오픈
req.open('GET', 'data/test.json', true);
// Request 전송
req.send();

XMLHttpRequest 객체의 인스턴스를 생성하고 XMLHttpRequest.open() 메소드를 사용하여 서버에 요청을 준비한다. XMLHttpRequest.send() 메소드로 준비된 요청을 서버에 전달한다. 

[응답처리]

// XMLHttpRequest, readyState 프로퍼티가 변경 될 때마다 콜백함수를 호출한다.
req.onreadystatechange = function(e) {
	// 이 함수는 Response가 클라이언트에 도달하면 호출된다.
	// readyStates는 XMLHttpRequest의 상태(state)를 반환
    // readyState : 4 => Done(서버 응답 완료) 
    if (req.readyState === XMLHttpRquest.DONE) {
    	// status는 response 상태 코드를 반환 : 200 => 정상 응답
        if(req.status === 200){
        	console.log(req.responseText);
            } else {
            	console.log("Error!")
                }
        }
};

XMLHttpRequest.send() 메소드를 통해 서버에 전송하면 서버는 Response를 반환하여 주는데 언제 Response가 클라이언트에 도달할 지는 알 수 없다. onreadystatechange는 Response가 도달해 발생한 이벤트를 감지하고 콜백함수를 실행하여 준다. 이 때 이벤트는 XMLHttpRequest.readyState 프로퍼티가 변경된 경우 발생한다. (EventHandler)

 

[JSON]

Ajax 요청에 대한 서버의 응답은 주로 html, xml, json 이 사용된다. 

{
  "name": "Lee",
  "gender": "male",
  "age": 20,
  "alive": true
}

키는 반드시 큰따옴표(작은 따옴표 불가)로 둘러싸야 한다. 

JSON.stringify() 메소드는 객체를 JSON 형식의 문자열로 변환한다. 

JSON.parse() 메소드는 JSON 데이터를 가진 문자열을 객체로 변환한다. 

 

서버로부터 브라우저로 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체화하여야 하는데 이를 역직렬화(Deserializing)라 한다.

역직렬화를 위해 내장 객체 JSON의 static메소드는 JSON.parse()를 사용한다. 

 

출처 : "poiemaweb.com/jquery-ajax-json" 사이트의 내용을 정리, 요약한 글이다.