Ajax

Ajax (XMLHTTPRequest 통신)

비동기로 서버로부터 데이터를 가져오는 것이다. 웹에 데이터를 갱신할때 브라우저 새로고침 없이 서버로부터 데이터를 받을 수 있다.

Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고받을 수 있지만, 일반적으로 사용이 편리한 JSON 포맷으로 데이터를 주고 받는다.

 

JSON 
표준적인 데이터 포맷을 결정하기 위해 주로 JSON (JavaScript Object Notation)포맷을 사용한다. 

키(Key)와 value의 구조로 되어 있다.

 {
    "이름": "홍길동",
    "나이": 55,
    "성별": "남",
    "주소": "서울특별시 양천구 목동",
    "특기": ["검술", "코딩"],
    "가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},
    "회사": "경기 수원시 팔달구 우만동"
 }

 

 

Ajax 실행 코드
아래 방법은 XMLHTTPRequest 객체를 사용하는 표준 방법이다. 

XMLHttpRequest 객체를 생성해서, open 메서드로 요청을 준비하고, send 메서드로 서버로 보낸다.
요청 처리가 완료되면(서버로부터 응답이 오면) load 이벤트가 발생하고 콜백함수가 실행된다. 
콜백함수가 실행될 때에는 이미 ajax 함수는 반환하고 콜스택에서 사라진 상태이다.

 

 

예)

 

 

실행 결과

 

 

네트워크 탭에서 서버에서 받아온 것들을 볼 수 있다.

 

 

 

 

 

 

 

 

 

참고 : boostcourse    https://www.boostcourse.org/web316/lecture/16701/?isDesc=false

웹 프로그래밍(풀스택)

 

 

 

 

위키백과, 우리 모두의 백과사전   https://ko.wikipedia.org/wiki/JSON

JSON - 위키백과, 우리 모두의 백과사전