Ajax

책 <러닝자바스크립트>를 기본으로 배운 자바스크립트 내용입니다.

 

목차

• 1. Ajax(Asynchronous JavaScript and XML)
• 2. JSON (JavaScript Object Notation)
• 3. XMLHttpRequest

 

<Ajax>

1. Ajax(Asynchronous JavaScript and XML)

• 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식
• 서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있도록 하는 것이 Ajax이다.
• 페이지 전체를 로드하여 렌더링할 필요가 없고 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대할 수 있다.

 

 

2. JSON (JavaScript Object Notation)( 참고 사이트 : http://www.json.org/json-ko.html)

• JSON은 클라이언트와 서버 간 데이터 교환을 위한 규칙 즉 데이터 포맷을 말한다.
• 서버가 브라우저에 데이터를 보낼 때 보통 JSON형식으로 보낸다. 
• 자바스크립트의 객체 리터럴과 매우 흡사하지만 JSON은 순수한 텍스트로 구성된 규칙이 있는 데이터 구조이다.

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

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

 

 

3. XMLHttpRequest ( 참고 사이트 : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)

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

// XMLHttpRequest 객체의 생성 
const xhr = new XMLHttpRequest(); 

// 비동기 방식으로 Request를 오픈한다 
xhr.open('GET', '/users'); 

// Request를 전송한다 
xhr.send();

• 다음은 Ajax 응답 처리의 예이다.

// XMLHttpRequest 객체의 생성 
const xhr = new XMLHttpRequest(); 

// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 onreadystatechange 이벤트 핸들러가 호출된다. 
xhr.onreadystatechange = function (e) { 
// readyStates는 XMLHttpRequest의 상태(state)를 반환 
// readyState: 4 => DONE(서버 응답 완료) 
    if (xhr.readyState !== XMLHttpRequest.DONE) return; 

// status는 response 상태 코드를 반환 : 200 => 정상 응답 
    if(xhr.status === 200) { 
        console.log(xhr.responseText); 
        } else { 
            console.log('Error!'); 
        } 
    };