Ajax

목차

• AJAX
• JSON
• 예시

---

 AJAX

웹페이지에서 비동기 방식으로 서버에게 데이터를 request하고,

서버의 response를 받아 동적으로 웹페이지를 갱신하는 프로그래밍 방식

웹 페이지 전체를 다시 로딩하지 않고도 일부분만을 갱신 할 수 있음

대표적으로 XMLHttpRequest 방식과 Fetch Api 방식이 있음

---

 

 JSON

 JavaSctipt의 Object에 큰 영감을 받아 만들어진 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷

장점은 다음과 같음

     - 데이터를 주고 받을 때 쓸 수 있는 가장 간단한 파일 포맷

     - 가벼운 텍스트를 기반

     - 가독성이 좋음

     - Key와 Value가 짝을 이루고 있음

     - 데이터를 서버와 주고 받을 때 직렬화(Serialization) 하기 위해 사용

     - 프로그래밍 언어나 플랫폼에 상관없이 사용 가능

// JSON.stringify( obj ) : Object를 JSON 포맷의 String으로 변환(Serializing)해주는 메소드
// JSON.parse( json ) : JSON 포맷의 String을 Object로 변환(Deserializing)해주는 메소드

---

 

 예시

const url = "https://picsum.photos/v2/list?page=2&limit=5";

fetch( url )
.then( res => res.json() )
.then( data => makeList(data) )
.catch( console.log );

function makeList( data ) {
	data.forEach( item => {
		const tagImg = document.createElement( 'img' );
		tagImg.setAttribute( 'src', item.download_url );
		tagImg.style.width = 200 + 'px';
		tagImg.style.height = 200 + 'px';
		document.body.appendChild( tagImg );
	});
}

---

 

Github

Link