[JavaScript] AJAX

AJAX

• Asynchronous JavaScript And XML (비동기식 JavaScript와 XML)
• 화면 전체를 새로고침 하지 않아도 서버로 요청을 보내고, 데이터를 받아 화면의 일부분만 업데이트가 가능하게 해준다.
• 이러한 '비동기 통신 웹 개발 기술'을 AJAX라고 하며, 비동기 웹 통신을 위한 라이브러리 중 하나가 Axios이다.

특징

• 페이지 전체를 새로고침(reload)을 하지 않고서도 수행되는 '비동기성'
• 서버의 응답에 따라 전체 페이지가 아닌 일부분만을 업데이트 할 수 있다.

AJAX 비동기 적용하기

이전에 Django를 공부하며 만들었던 프로젝트로 실습 할 예정입니다.

• 각각의 템플릿마다 script 코드를 작성하기 위해 base.html에 block tag 작성

Follow(팔로우기능)

• follow_views

• follow_profile_html_form

• follow_profile_html_script


Like(좋아요기능)

• 좋아요 비동기 적용은 팔로우와 동일한 흐름 + forEach()&querySelectorAll()
  index 페이지 각 게시글에 좋아요 버튼이 있기 때문에
• like views

• like_index_html_form

• like_index_html_script

용어설명

data-* attributes

• 사용자 지정 데이터 특성을 만들어 임의의 데이터를 HTML과 DOM사이에서 교환 할 수 있는 방법
• data-test-value라는 이름의 특성을 지정했다면, JavaScript에서는 element.dataset.testValue로 접근할 수 있다.
data-* attributes yunsungyang-omc

XHR(XMLHttpRequest)

• AJAX 요청을 생성하는 JavaScript API
• XHR의 메서드로 브라우저와 서버 간 네트워크 요청을 전송할 수 있다.
• Axios는 손쉽게 XHR을 보내고 응답 결과를 Promise객체로 반환해주는 라이브러리이다.