Javascript 16 . AJAX 와 JSON

심화개념 2 . AJAX (Asynchronous Javascript And Xml)

 

> js에 내장된 XMLHttpRequest 객체를 이용하여 페이지를 새로고침하지 않고도 필요한 데이터를 비동기적으로 불러오는 기법을 말한다!

 

> 백엔드의 데이터를 프론트엔드로 불러오는 것

 

Xml : 데이터를 태그 방식으로 하는 방식 

 

> xml 무겁다 - 데이터도 크고 시간도 오래 걸린다

 

> 그래서 현재는 json 형식을 사용합니다!

 

예시) 더보기 버튼을 클릭했을때 ajax가 없을경우엔 새로운 페이지를 나타냈어야 했는데 ajax 사용하면 더보기 버튼 클릭시에

데이터만 json으로 불러와서 DOM API를 이용하여 가능하다

 

 

Ajax 순서

 

1. 화면이 표시가 완료되고

2. 이벤트가 발생

3. 콜백되어 AJAX데이터 불러옴

4. http 요청

5. http 응답

6. json데이터 받음

7. DOM API 화면 추가

 

JSON

 

> javascript object notation 의 약자로 리터럴 객체 선언이랑 비슷하다

 

차이점은 key에도 “”를 붙힌다

 

예시

 

Var httpRequest = new XMLHttpRequest(); //웹브라우저 표준을 객체에 넣기

httpRequest.onreadystatechange = function(){ //ajax의 이벤트 리스너 > 전송된 이후에 리스너 실행됨

If(this.readyStatus == 4(요청완료) && this.status == 200(정상요청){ // 요청이 완료되었고 정상 응답이라면

 this.readyStatus> ajax로요청을 보낼때 status라는 값이 숫자로 되어있는데 4번이 완료가 되는 시점이다

1 : 준비중 2: 대기중 3: 요청중 4:요청완료 

 

this.status == 200 > 이 status 는 http status로 200번대는 정상요청 400번대는 클라이언트 오류 500번대는 서버오류를 의미한다. (서버랑 통신을 주고받을때 성공햇는지 안햇는지를 번호로 표시한다)

 

인터넷 연결안되었을때 화면에 나오는 504 이런 숫자들이다

 

document.getElementById(“panels”).innerHTML = this.responseText; // 응답문자열을 innerHTML에 

}

}

httpRequest.open(“GET”, “/getJson” , true); // 요청방식을 정한다(get 메소드 , url)

httpRequest.send()l // 전송 보내기