Ajax

2020-01-23

Javascript

해당 Post는 Ajax 기초를 정리한 파일입니다.

Ajax란 무엇인가?

웹에 데이터를 갱신하고 싶은데, 매번 새로고침을 해서 전체 리소스들을(이미지, 스크립트 뭐든)새로 불러온다는 것.

그로 인해 누르지도 않은 컨텐츠까지 초기부터 모두 불러오는것.

이것은 자원낭비이자 시간낭비이다.

이 때 페이지의 일부분만을 갱신할 수 있다?

그것을 Ajax가 도와준다.

Ajax는(Asynchronous Javascript And Xml)의 약자로 비동기식 자바스크립트와 XML을 뜻한다.

즉, Javascript를 사용한 비동기 통신, 클라이언트와 서버간에서 XML 데이터를 주고받는 기술이다.

Ajax통신의 이해

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

JSON(Javascript Object Notation)으로 “속성-값 쌍” 또는 “키-값 쌍”으로 이루어진 데이터 오브젝트를 전달하기 위해 사람이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.

function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}