JS 심화_00 (AJAX)

AJAX

• Asynchronous Javascript And XML (비동기식 js와 xml)

• 서버와 통신하기 위해 XMLHttpRequest 객체를 활용

  • XMLHttpRequest는 동기식과 비동기식 통신을 모두 지원

• 페이지 전체를 reload를 하지 않고서도 수행되는 "비동기성"

  • 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트

• AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라는 장점 때문에 JSON을 더 많이 사용

 

• 2005년 Google Maps & Gmail 등에 활용되는 기술을 설명하기 위해 AJAX라는 용어를 최초로 사용

• AJAX는 특정 기술이 아닌 기존의 여러 기술을 사용하는 새로운 접근법을 설명하는 용어

• Google 사용 예시

  • Gmail 전송 버튼을 눌러 놓고 다른 페이지로 넘어가고 메일은 알아서 전송 처리됨
  • Google Maps 스크롤하는 행위 하나하나가 모두 요청이지만 페이지는 갱신되지 않음

 

XMLHttpRequest object

• 서버와 상호작용하기 위해 사용되며, 전체 페이지의 새로고침 없이 URL로부터 데이터를 받아올 수 있음
• 사용자가 하는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줌
• 주로 AJAX 프로그래밍에 사용
• XML 뿐만 아니라 모든 종류의 데이터를 받아오는데 사용 가능
• 생성자 : XMLHttpRequest()

// XMLHttpRequest 사용 예시
const request = new XMLHttpRequest()
const URL = 'https:www.---.---'

request.open('GET', URL)
request.send()

const myData = request.response
console.log(myData)