flowerfor
<1004> js 본문
XMLHttpRequest는 서버와 상호작용하기 위해 사용하는 자바스크립트 내장 생성자이다.
이를 이용하면 서버(url)로부터 데이터를 받아와 전체 페이지의 새로고침 없어도 페이지의 일부만 업데이트하는
비동기 방식의 데이터 통신을 수행할 수 있다. > 이 프로그래밍 기법을 Ajax라고 한다.
Ajax는 웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법이다.
Ajax 기법에 기초한 XMLHttpRequest 비동기 통신은 세 단계를 거친다.
- XMLHttpRequest 객체 생성 (new객체)
- 서버와 통신할 때 필요한 정보 및 처리 방법 기입
- 요청을 전송해 통신시작
서버에 요청을 보낼 떄는 XMLHttpRequest 객체의 open메소드로 요청을 초기화 하고,
이후 send메소드로 보내준다.
ex>
const request = new XMLHttpRequest()
request.open( "http메소드" , "서버url")
request.send()실습자료 혼자해보기
const url = '~'
const request = new XMLHttpRequest()
request.addEventListener("load", function(){
const obj = JSON.parse(request.responseText)
const imgSrc = obg.message
const div = querySelector("div")
div.style.backgroundImage`url(${imgSrc})`
})
const button = document.querySelector("button")
button.addEventListener("click", funciton(){
request.open("GET", url)
request.send()
})출처 : 인프런 유노코딩 js