[Javascript] Ajax 활용

XMLHttpRequest 객체 활용

기본적인 사용 패턴

1. XMLHttpRequest 객체 생성 및 초기화
2. XMLHttpRequest 객체를 open() 메서드로 요청할 조건을 구성
3. XMLHttpRequest 객체를 서버로 전달하여 요청 과정을 수행
4. 서버로 전달된 요청에 대한 응답을 처리할 콜백 함수 정의

const xhr = new XMLHttpRequest()
xhr.open('GET', '~~.html')
xhr.send()
xhr.onload = () => {
	document.querySelector('#ID').innerHTML = this.responseText
}

XMLHttpRequest API의 속성, 메서드, 이벤트

• 속성
  • responseText
    • 요청에 대한 응답을 텍스트로 반환
    • 요청 실패나 전송 전일 경우 null을 반환
  • responseType
    • 응답의 유형 반환 (document, json, text)
  • status
    • HTTP서버가 반환한 상태 코드
  • statusText
    • HTTP 서버가 반환한 응답 문자열
• 메서드
  • open()
    • 요청 초기화
  • send()
    • 요청 전송
• 이벤트
  • onerror
    • 요청에 대한 오류 발생 시 발생할 이벤트
  • onload
    • 요청에 대한 응답이 종료되면 발생할 이벤트
  • onprogress
    • 응답 데이터를 수신하는 동안 주기적으로 발생할 이벤트

const xhr = new XMLHttpRequest()
xhr.open('GET', '~~.html')
xhr.send()

xhr.onprogress = (e) => {
	if (e.lengthComputable){
		console.log(`Received ${e.loaded} of ${e.total}bytes`)
	}
	else
	{
		console.log(`Received ${e.loaded} bytes`)
	}
}

xhr.onload = () => {
	document.querySelector('#ID').innerHTML = this.responseText
}

xhr.onerror = () => {
	alert('error')
}

onreadystatechange

• state를 단계별로 알려주는 메서드
  • 0 : 요청 초기화 전 상태
  • 1 : 서버와 연결 수립
  • 2 : 요청이 서버로 전달된 상태
  • 3 : 서버가 요청을 처리하고 있는 상태
  • 4 : 요청에 대한 처리가 완료되어 응답이 준비된 상태
  • this.readyState로 조회 가능

XML에 대한 판정

• XML은 사용하는 규칙과 문법이 존재
• XML의 규칙을 제대로 따르고 있는가에 대한 판정을 내릴 때 well-formed XML과 valid XML 판정이 있음
  • well-formed XML : XML의 기본 문법을 준수해 만들어진 XML
  • valid XML : well-formed XML이고, DTD(Document Type Definition) 나 XML 스키마에 따라 올바르게 만들어진 XML 문서