ajax

ajax의 동작방식

웹서버에 정보를 요청하는 브라우저.

ajax는 서버의 응답을 처리하여 페이지에 해당 데이터를 표시해

 

ㄱ

브라우저는 ajax 요청을 담당하는 XMLHttpRequest라는 객체를 구현하고 있다.

요청을 전송하면, 브라우저는 서버의 응답을 기다리지 않는다.

 

ㄴ

서버의 동작 :  서버는 응답으로 데이터를 전달..

서버에서 일어나는 일들은 ajax에 포함x

서버는 ajax요청을 전달받으면 json이나 xml형식의 데이터를 전달해

 

ㄷ

응답완료 후, 브라우저에서는 이벤트 발생.(페이지의 로딩 완료시 발생하는 이벤트와 동일)

 

ㄹ

ajax의 요청 및 응답

브라우저는 XMLHttpRequest 객체를 이용하여 ajax요청생성, 같은 XMLHttpRequest 객체가 응답에 대한 결과를 처리해

 

// 1
var xhr = new XMLHttpRequest;   // 생성자표현식

// 2
xhr.open('GET', 'data/test.json', true);    // 요청준비. 파라미터는 3개

// 3
xhr.send('search=raspberry');   // 준비된 요청을 전달하는 함수. 추가 정보지정. 없으면 null

.open()의 파라미터

(1) http 메소드

(2) 요청을 처리할 페이지의 URL

(3) 동기냐 비동기냐(async :true)

 

ㅁ

ajax 응답

xhr.onload = function() {   // 4 응답받으면 onload 이벤트 발생.

    if(xhr.status === 20) {     // 5 익명함수는 xhr객체의 status값 조사후 응답이 정상인지 확인

        // 서버의 실행결과를 처리할 코드
    }
}

 

ㅂ

ajax로 데이터 로드 과정

 

(1) html

var xhr = new XMLHttpRequest();

xhr.onload = function() {

    if(xhr.status === 200) {

        document.getElementById('content').innerHTML = xhr.responseText;
    }
};

xhr.open('GET', 'data/data.html', true);
xhr.send(null);

tip) innerHTML은 서버가 악의적인 컨텐츠를 리턴하지 않는다는 확신이 있을때만 사용해야한다!

 

(2) json

객체의 직렬화 : 브라우저가 도착한 데이터(문자열 등)를 자바스크립트객체로 변환하는 과정

객체의 역직렬화 : 브라우저에서 객체를 JSON 표현식을 이용한 문자열로 변경하는 과정.

 

"서버로부터 웹브라우저로 JSON데이터가 전송되면, 이 데이터는 문자열로 전송된다."

 

stringify() : 객체의 직렬화.

 

var xhr = new XMLHttpRequest();

xhr.onload = function() {

    if(xhr.status === 200) {

        responseObject = JSON.parse(xhr.responseText);

        var newContent = '';

        for(var i = 0; i < responseObject.length; i++) {

            newContent += '<div class="items">';
            newContent +=   '<img src="' + responseObject.items[i].logo + '"';
            newContent +=   'alt="' + responseObject.items[i].category + '"/>';
            newContent += '<p><b>' + responseObject.items[i].category + '</b></p>';
            newContent += '</div>';
        }

        document.getElementById('content').innerHTML = newContent;
    }
};

xhr.open('GET', 'data/myData.json', true);
xhr.send(null);

 

출처:

visualize.tistory.com