[HTTP] AJAX

 

웹페이지에서 일부분만 바꾸고 싶다면?

 

다음은 구글 캘린더의 일정들입니다. 다른 일정들을 건드리지 않고 원하는 시간 때의 한 일정만 변경하는 법은 바로 AJAX기법을 사용하는 것입니다.

 

What is AJAX?

• Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다.
• Asynchronous JavaScript And XMLHttpRequest의 약자이다.
• Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
• Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.

 

Feature of AJAX

advantage

1.  웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
2.  웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있습니다.
3.  웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있습니다.
4.  백그라운드 영역에서 서버로 데이터를 보낼 수 있습니다.

 

disadvantage

1.  Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
2.  Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.
3.  Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없습니다.
4. . 클라이언트의 PC로 Ajax 요청을 보낼 수는 없습니다.

 

AJAX의 두 가지 핵심기술

dom

https://samsamgoo.tistory.com/70

[HTML] DOM

Ajax를 이용하여 웹 페이지의 일부분만을 갱신하려면 더욱 다양한 DOM 속성을 활용해야 합니다. 따라서 DOM과 관련된 다양한 API를 이용하여 노드를 동적으로 생성하고, 조작할 수 있어야만 합니다.

 

 

fetch

fetch를 사용하면 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있습니다.

사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있게 해 줍니다.

fetch의 사용법은 다음과 같습니다.

fetch(url)
	.then (function() {
		// handle the response 출력
	})
	.catch(function () {
		// handle the error 에러값 출력
});

JAvaScript에서는 DOM을 사용해 조작할 수 있기 때문에 필요한 데이터만 가져와 DOM에 적용시켜 필요한 부분만 변경할 수 있습니다.